/* ============================================================
   Jerwinn Land — main stylesheet
   Ported from Designs/jerwinn-site.html "design explorer" mockup.
   Every dropdown / variant from the source is preserved as-is.
   ============================================================ */

:root {
  /* original palette */
  --navy: #384a5e;
  --navy-dark: #2c3b4c;
  --gold: #c9a24b;
  --gold-light: #e0c47a;
  --gray-text: #9a9a9a;
  --input-gray: #a9adb3;
  /* augmented palette */
  --purple: #6d3fb0;
  --purple-light: #a476e0;
  --purple-deep: #2c1547;
  --teal: #0f5c56;
  --teal-light: #23a293;
  --teal-bright: #3eeccb;
  --black: #0a0a0c;
  --black-soft: #141417;
  --silver: #c7ccd3;
  --silver-light: #eceef1;

  --space-section-y: clamp(56px, 8vh, 90px);
  --space-section-x: clamp(24px, 5vw, 60px);
  --space-header-y: clamp(14px, 2.2vh, 18px);
  --space-header-x: clamp(20px, 4vw, 50px);
  --space-hero-copy-x: clamp(24px, 6vw, 80px);
  --space-hero-copy-y: clamp(40px, 10vh, 100px);
  --space-about-pad: clamp(24px, 6vw, 80px);
  --space-contact-pad: clamp(24px, 6vw, 80px);
  --space-footer-y: clamp(30px, 6vh, 60px);
  --space-footer-x: clamp(24px, 5vw, 60px);
  --gap-cards: clamp(20px, 3vw, 40px);
  --gap-switcher: clamp(20px, 5vh, 40px);
  --space-panel-inset: clamp(40px, 6vw, 70px);
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --space-section-y: clamp(48px, 5.5vh, 72px);
    --space-section-x: clamp(24px, 4vw, 44px);
    --space-header-y: clamp(12px, 1.6vh, 16px);
    --space-header-x: clamp(20px, 3.4vw, 36px);
    --space-hero-copy-x: clamp(24px, 5vw, 56px);
    --space-hero-copy-y: clamp(32px, 6vh, 64px);
    --space-about-pad: clamp(24px, 4.5vw, 48px);
    --space-contact-pad: clamp(24px, 4.5vw, 48px);
    --space-footer-y: clamp(28px, 4vh, 44px);
    --space-footer-x: clamp(24px, 4vw, 44px);
    --gap-cards: clamp(18px, 2.6vw, 30px);
    --gap-switcher: clamp(18px, 3.2vh, 28px);
    --space-panel-inset: clamp(32px, 4.5vw, 48px);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: hidden; }

#page-sections > * { position: relative; }

body.sidebar-open #site-header,
body.sidebar-open .back-to-top {
  display: none !important;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  background: #fff;
}

#bg-lines-layer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
#bg-lines-layer svg { width: 100%; height: 100%; display: block; }
#bg-lines-layer line {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bgLineDraw 1.8s cubic-bezier(.22,.7,.32,1) forwards;
}
@keyframes bgLineDraw { to { stroke-dashoffset: 0; } }
@keyframes variantFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #bg-lines-layer line { animation: none; stroke-dashoffset: 0; }
  .hero-variant.active, .music-variant.active, .collage-variant.active,
  .bio-variant.active, .cta-panel-variant.active, .shows-variant.active {
    animation: none;
  }
  .hero-variant.variant-fading, .music-variant.variant-fading, .collage-variant.variant-fading,
  .bio-variant.variant-fading, .cta-panel-variant.variant-fading, .shows-variant.variant-fading {
    transition: none;
  }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-header-y) var(--space-header-x);
  flex-wrap: wrap;
  gap: 20px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, backdrop-filter 0.35s ease;
}
header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

header.navbar-gradient {
  background: linear-gradient(90deg, var(--purple-deep), var(--black-soft));
}
header.navbar-gradient .logo .script { color: var(--silver-light); }
header.navbar-gradient nav ul li a { color: var(--gold-light); }
header.navbar-gradient .burger span { background: var(--silver-light); }
header.navbar-gradient.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.4); }

header.navbar-glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
header.navbar-glass .logo .script { color: var(--navy-dark); }
header.navbar-glass nav ul li a { color: var(--purple); }
header.navbar-glass .burger span { background: var(--navy-dark); }
header.navbar-glass.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.1); }

header.navbar-outline,
header.navbar-outline-purple,
header.navbar-outline-gold,
header.navbar-outline-gradient,
header.navbar-outline-gradient-purple,
header.navbar-outline-gradient-gold {
  background: var(--black);
}
header.navbar-outline .logo .script,
header.navbar-outline-purple .logo .script,
header.navbar-outline-gold .logo .script,
header.navbar-outline-gradient .logo .script,
header.navbar-outline-gradient-purple .logo .script,
header.navbar-outline-gradient-gold .logo .script { color: var(--silver-light); }
header.navbar-outline nav ul li a,
header.navbar-outline-purple nav ul li a,
header.navbar-outline-gold nav ul li a,
header.navbar-outline-gradient nav ul li a,
header.navbar-outline-gradient-purple nav ul li a,
header.navbar-outline-gradient-gold nav ul li a { color: var(--silver-light); }
header.navbar-outline .burger span,
header.navbar-outline-purple .burger span,
header.navbar-outline-gold .burger span,
header.navbar-outline-gradient .burger span,
header.navbar-outline-gradient-purple .burger span,
header.navbar-outline-gradient-gold .burger span { background: var(--silver-light); }

header.navbar-outline { border-bottom: 1px solid var(--teal-bright); }
header.navbar-outline nav ul li a::after { background: var(--teal-bright); }

header.navbar-outline-purple { border-bottom: 1px solid var(--purple-light); }
header.navbar-outline-purple nav ul li a::after { background: var(--purple-light); }

header.navbar-outline-gold { border-bottom: 1px solid var(--gold-light); }
header.navbar-outline-gold nav ul li a::after { background: var(--gold-light); }

header.navbar-outline-gradient,
header.navbar-outline-gradient-purple,
header.navbar-outline-gradient-gold {
  background: linear-gradient(90deg, var(--purple-deep), var(--black-soft));
}
header.navbar-outline-gradient { border-bottom: 1px solid var(--teal-bright); }
header.navbar-outline-gradient nav ul li a::after { background: var(--teal-bright); }

header.navbar-outline-gradient-purple { border-bottom: 1px solid var(--purple-light); }
header.navbar-outline-gradient-purple nav ul li a::after { background: var(--purple-light); }

header.navbar-outline-gradient-gold { border-bottom: 1px solid var(--gold-light); }
header.navbar-outline-gradient-gold nav ul li a::after { background: var(--gold-light); }

header.navbar-outline.scrolled,
header.navbar-outline-purple.scrolled,
header.navbar-outline-gold.scrolled,
header.navbar-outline-gradient.scrolled,
header.navbar-outline-gradient-purple.scrolled,
header.navbar-outline-gradient-gold.scrolled {
  background: rgba(10,10,12,0.42);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}

@media (min-width: 1201px) { .navbar-switcher { display: block; } }
.logo { display: flex; align-items: center; gap: 10px; }
.logo .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--purple));
  flex-shrink: 0;
}
.logo .script { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 22px; color: var(--navy-dark); }
nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
nav ul li a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); position: relative; padding-bottom: 4px;
}
nav ul li a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--teal-light));
  transition: width 0.3s ease;
}
nav ul li a:hover::after { width: 100%; }

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 101; }
.burger span { width: 28px; height: 3px; background: var(--navy-dark); display: block; border-radius: 2px; }

@media (max-width: 780px) {
  nav { display: none; }
  .burger { display: flex; }
}

section { padding: var(--space-section-y) var(--space-section-x); position: relative; }
.section-center { text-align: center; max-width: 640px; margin: 0 auto; }
.eyebrow-title {
  color: var(--gold); font-size: 28px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 22px;
}
.section-center p { color: var(--gray-text); line-height: 1.9; font-size: 15px; }

.switcher-row { display: flex; justify-content: center; margin-bottom: var(--gap-switcher); }
.switcher-row.left { justify-content: flex-start; }
.switcher-row.floating {
  position: absolute; z-index: 30; margin: 0; top: 24px; right: 40px;
}
.pill-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 34px 10px 16px; border-radius: 999px;
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .25s, background-color .25s;
}
.pill-select.on-light {
  background-color: rgba(109,63,176,0.06);
  border: 1px solid rgba(109,63,176,0.35);
  color: var(--purple);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236d3fb0'/></svg>");
}
.pill-select.on-dark {
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='white'/></svg>");
}
.pill-select option { color: #000; }

.pill-select.on-gradient {
  background-color: rgba(0,0,0,0.55);
  border: 1px solid var(--teal-bright);
  color: var(--teal-bright);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%233eeccb'/></svg>");
}

.hero-stage { position: relative; min-height: 720px; }
.hero-variant { display: none; }
.hero-variant.active { display: flex; animation: variantFadeIn 0.5s ease; }

.hero-variant.variant-fading { opacity: 0 !important; transition: opacity 380ms ease; }

.hv-original { flex-wrap: wrap; overflow: visible; }
.hero-visual { flex: 1 1 520px; position: relative; background: #f2f2f2; min-height: 600px; overflow: visible; z-index: 1; }
.hero-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-visual .photo {
  position: absolute; left: 54%; top: 8%; width: 50%; height: 84%; object-fit: cover;
  filter: grayscale(100%); box-shadow: 0 20px 40px rgba(0,0,0,0.18); z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px));
}
.hero-copy { flex: 1 1 420px; padding: var(--space-hero-copy-y) var(--space-hero-copy-x) 60px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.hero-copy .eyebrow { color: var(--gold); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 30px; }
.hero-copy h1 { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 4rem; color: var(--navy-dark); margin: 0 0 40px; font-weight: 400; }
.hero-copy .listen-link { color: var(--gold-light); font-size: 17px; letter-spacing: 0.05em; }

.hv-glow .listen-link:hover { background: var(--teal-bright); color: var(--black); }

.hv-mono {
  width: 100%; min-height: 720px; background: var(--black); color: var(--silver-light);
  align-items: center; padding: 60px; position: relative; overflow: hidden;
}
.hv-mono::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
}
.hv-mono-inner { position: relative; z-index: 2; width: 100%; }
.hv-mono .mono-label {
  font-family: 'Space Grotesk', sans-serif; color: var(--silver); font-size: 12px;
  letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 26px;
}
.hv-mono h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.2rem, 9vw, 8.5rem); line-height: 0.92; margin: 0 0 30px; letter-spacing: -0.01em;
}
.hv-mono h1 span { display: block; }
.hv-mono h1 .accent { color: transparent; -webkit-text-stroke: 1.5px var(--silver-light); }
.hv-mono .mono-sub { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hv-mono .listen-link {
  color: var(--black); background: var(--silver-light); padding: 12px 26px; border-radius: 2px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; transition: background .3s;
}
.hv-mono .listen-link:hover { background: var(--purple-light); color: #fff; }
.hv-mono .mono-photo {
  width: 90px; height: 90px; object-fit: cover; filter: grayscale(100%) contrast(1.1);
  border: 1px solid var(--silver);
}

.hv-border {
  width: 100%; min-height: 720px; background: var(--black-soft); position: relative;
  align-items: center; justify-content: center; overflow: hidden;
}
.hv-border-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.05) brightness(0.55);
}
.hv-border-frame {
  position: relative; z-index: 2; margin: 60px; padding: 70px 60px; text-align: center;
  border: 1px solid var(--silver); max-width: 640px;
}
.hv-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold-light); z-index: 3; }
.hv-corner.tl { top: 44px; left: 44px; border-right: none; border-bottom: none; }
.hv-corner.tr { top: 44px; right: 44px; border-left: none; border-bottom: none; }
.hv-corner.bl { bottom: 44px; left: 44px; border-right: none; border-top: none; }
.hv-corner.br { bottom: 44px; right: 44px; border-left: none; border-top: none; }
.hv-border-eyebrow { font-family: 'Space Grotesk', sans-serif; color: var(--gold-light); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 24px; }
.hv-border-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 3.4rem; color: var(--silver-light); margin: 0 0 34px; }
.hv-border-title .drop { font-size: 1.5em; color: var(--teal-bright); float: left; line-height: 0.7; margin-right: 4px; font-weight: 700; }
.hv-border-link { color: var(--silver-light); border: 1px solid var(--silver); padding: 12px 30px; border-radius: 0; display: inline-block; transition: border-color .3s, color .3s; }
.hv-border-link:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

.hv-duotone { width: 100%; min-height: 720px; position: relative; overflow: hidden; }
.duo-half { position: absolute; top: 0; bottom: 0; width: 52%; overflow: hidden; }
.duo-half img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); mix-blend-mode: luminosity; }
.duo-teal { left: 0; background: var(--teal-light); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.duo-teal img { opacity: 0.75; }
.duo-purple { right: 0; background: var(--purple); clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.duo-purple img { opacity: 0.75; }
.duo-copy {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; width: 90%;
}
.duo-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); margin-bottom: 22px; }
.duo-title {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 4.4rem; margin: 0 0 30px;
  color: var(--gold-light);
  animation: colorCycle 6s ease-in-out infinite;
  text-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
@keyframes colorCycle {
  0%, 100% { color: var(--gold-light); }
  33% { color: var(--teal-bright); }
  66% { color: var(--purple-light); }
}
.duo-link { color: #fff; border: 1px solid #fff; padding: 12px 28px; border-radius: 999px; display: inline-block; transition: background .3s, color .3s; }
.duo-link:hover { background: #fff; color: var(--purple-deep); }

.hv-duotone-banner { width: 100%; min-height: 720px; position: relative; overflow: hidden; }
.duo-banner-half { position: absolute; top: 0; bottom: 0; width: 52%; overflow: hidden; }
.duo-banner-half img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); mix-blend-mode: luminosity; }
.duo-banner-teal { left: 0; background: #1a4a43; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.duo-banner-teal img { opacity: 0.65; }
.duo-banner-navy { right: 0; background: #1a2a3a; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.duo-banner-navy img { opacity: 0.65; }
.duo-banner-frame {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;
  margin: 40px; padding: 50px 50px; border: 1.5px solid var(--silver); max-width: 520px;
  display: flex; flex-direction: column; align-items: center;
}
.duo-banner-corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--silver); z-index: 4; }
.duo-banner-corner.tl { top: 26px; left: 26px; border-right: none; border-bottom: none; }
.duo-banner-corner.tr { top: 26px; right: 26px; border-left: none; border-bottom: none; }
.duo-banner-corner.bl { bottom: 26px; left: 26px; border-right: none; border-top: none; }
.duo-banner-corner.br { bottom: 26px; right: 26px; border-left: none; border-top: none; }
.duo-banner-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--silver); text-shadow: 0 2px 8px rgba(0,0,0,0.4); margin-bottom: 18px; }
.duo-banner-title {
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 4rem; margin: 0 0 28px;
  color: var(--silver-light);
  animation: bannerHighlight 4s ease-in-out infinite;
  text-shadow: 0 3px 16px rgba(0,0,0,0.5);
}
@keyframes bannerHighlight {
  0%, 100% { color: var(--silver-light); text-shadow: 0 3px 16px rgba(0,0,0,0.5); }
  50% { color: var(--gold-light); text-shadow: 0 0 24px rgba(201,162,75,0.6), 0 3px 16px rgba(0,0,0,0.5); }
}
.duo-banner-link { color: var(--silver-light); border: 1.5px solid var(--silver); padding: 10px 26px; border-radius: 0; display: inline-block; transition: border-color .3s, color .3s, background .3s; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.duo-banner-link:hover { border-color: var(--gold-light); color: var(--gold-light); background: rgba(201,162,75,0.15); }

.hv-mono-duo { width: 100%; min-height: 720px; position: relative; overflow: hidden; background: var(--black); }
.hv-mono-duo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
}
.mono-duo-copy {
  position: relative; z-index: 3; width: 50%; max-width: 560px; min-height: 720px;
  padding: 60px; display: flex; flex-direction: column; justify-content: center;
  color: var(--silver-light);
}
.mono-duo-copy .mono-label {
  font-family: 'Space Grotesk', sans-serif; color: var(--silver); font-size: 12px;
  letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 26px;
}
.mono-duo-copy h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: 0.92; margin: 0 0 30px; letter-spacing: -0.01em;
}
.mono-duo-copy h1 span { display: block; }
.mono-duo-copy h1 .accent { color: transparent; -webkit-text-stroke: 1.5px var(--silver-light); }
.mono-duo-copy .listen-link {
  align-self: flex-start; color: var(--black); background: var(--silver-light); padding: 12px 26px; border-radius: 2px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; transition: background .3s;
}
.mono-duo-copy .listen-link:hover { background: var(--teal-bright); color: var(--black); }

.mono-duo-visual {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 2;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.mono-duo-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  opacity: 0; animation: monoDuoFade 21s ease-in-out infinite;
}
.mono-duo-slide img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.2); mix-blend-mode: luminosity;
}
.mono-duo-teal { background: #1a4a43; }
.mono-duo-teal img { opacity: 0.65; }
.mono-duo-navy { background: #1a2a3a; }
.mono-duo-navy img { opacity: 0.65; }
.mono-duo-gold { background: #2c2412; }
.mono-duo-gold img { opacity: 0.8; }
/* Three slides, evenly staggered a third of the shared 15s loop apart, so
   exactly one is visible at a time and each crossfade overlaps smoothly
   into the next. */
.mono-duo-slide.mono-duo-navy { animation-delay: -7s; }
.mono-duo-slide.mono-duo-gold { animation-delay: -14s; }
@keyframes monoDuoFade {
  0%, 26% { opacity: 1; }
  33%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mono-duo-slide { animation: none; opacity: 1; }
  .mono-duo-slide.mono-duo-navy, .mono-duo-slide.mono-duo-gold { opacity: 0; }
}
@media (max-width: 780px) {
  .hv-mono-duo { min-height: clamp(380px, 68vh, 560px); }
  .mono-duo-copy {
    width: 50%; max-width: none; min-height: clamp(380px, 68vh, 560px);
    padding: clamp(20px, 5vw, 36px) clamp(14px, 4vw, 24px);
  }
  .mono-duo-copy .mono-label {
    font-size: clamp(7px, 1.8vw, 10px); letter-spacing: 0.28em;
    margin-bottom: clamp(10px, 2.5vh, 20px);
  }
  .mono-duo-copy h1 {
    font-size: clamp(1.3rem, 7.5vw, 2.2rem); margin-bottom: clamp(12px, 2.5vh, 20px);
  }
  .mono-duo-copy .listen-link {
    padding: clamp(7px, 1.8vh, 10px) clamp(12px, 3vw, 18px);
    font-size: clamp(8px, 2vw, 10px);
  }
}

@media (max-width: 780px) {
  .hero-visual { flex-basis: 100%; min-height: 380px; }
  .hero-visual .photo { left: 30%; width: 60%; }
  .hero-copy { flex-basis: 100%; padding: 50px 30px; text-align: center; align-items: center; }
  .hero-copy h1 { font-size: 2.6rem; }
  .hv-mono { padding: 40px 24px; }
  .hv-border-frame { margin: 24px; padding: 40px 24px; }
  .hv-border-title { font-size: 2.2rem; }
  .duo-title { font-size: 2.4rem; }
  .duo-banner-frame { margin: 20px; padding: 30px 24px; }
  .duo-banner-title { font-size: 2.2rem; }
}

.music-variant { display: none; }
.music-variant.active { display: block; animation: variantFadeIn 0.5s ease; }
.music-variant.variant-fading { opacity: 0 !important; transition: opacity 380ms ease; }

.mv-cards { display: flex; gap: var(--gap-cards); justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.mv-card {
  flex: 1 1 220px; max-width: 260px; padding: 34px 26px; border-radius: 6px;
  background: linear-gradient(160deg, var(--purple-deep), var(--black-soft));
  color: #fff; text-align: left; position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.mv-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 30% 20%, var(--teal-bright), transparent 60%);
  transition: opacity .4s;
}
.mv-card:hover::after { opacity: 0.3; }
.mv-card .icon { font-size: 26px; margin-bottom: 16px; color: var(--teal-bright); }
.mv-card h4 { font-family: 'Space Grotesk', sans-serif; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.mv-card p { font-size: 13px; color: var(--silver); line-height: 1.7; margin: 0; }

.mv-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.mv-quote .mark { font-family: 'Playfair Display', serif; font-size: 4rem; color: var(--purple-light); line-height: 0.5; }
.mv-quote p {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.9rem; color: var(--navy-dark);
  line-height: 1.5; margin: 20px 0 26px;
}
.mv-quote .hl { background: linear-gradient(120deg, var(--teal-bright) 0%, var(--teal-bright) 100%); background-repeat: no-repeat; background-size: 0% 40%; background-position: 0 88%; transition: background-size 1.2s ease; padding: 0 2px; }
.mv-quote.in .hl { background-size: 100% 40%; }
.mv-quote .sig { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); }

.mv-ticker-wrap {
  background: var(--black); border-top: 2px solid var(--teal-bright); border-bottom: 2px solid var(--gold);
  overflow: hidden; padding: 22px 0; max-width: 1000px; margin: 0 auto;
}
.mv-ticker-track {
  display: inline-flex; white-space: nowrap; animation: tickerScroll 18s linear infinite;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
}
.mv-ticker-track span { padding: 0 18px; color: var(--silver-light); }
.mv-ticker-track span:nth-child(4n) { color: var(--teal-bright); }
.mv-ticker-track span:nth-child(4n+2) { color: var(--purple-light); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mv-split { display: flex; max-width: 900px; margin: 0 auto; border: 1px solid var(--silver); }
.mv-split-col { flex: 1 1 0; padding: 46px 40px; }
.mv-split-teal { background: linear-gradient(160deg, var(--teal), var(--black-soft)); }
.mv-split-purple { background: linear-gradient(200deg, var(--purple-deep), var(--black-soft)); }
.mv-split-col p { color: var(--silver-light); font-size: 14px; line-height: 1.8; margin: 0; }
.mv-split-divider { width: 1px; background: linear-gradient(180deg, var(--teal-bright), var(--purple-light)); }
@media (max-width: 640px) { .mv-split { flex-direction: column; } .mv-split-divider { width: 100%; height: 1px; } }

.collage-variant { display: none; }
.collage-variant.active { display: block; animation: variantFadeIn 0.5s ease; }
.collage-variant.variant-fading { opacity: 0 !important; transition: opacity 380ms ease; }

.about-collage { position: relative; max-width: 900px; margin: 0 auto 0; padding: 20px 20px 60px; min-height: 640px; }
.collage-photo-left { position: absolute; left: 0; top: 0; width: 300px; height: 380px; object-fit: cover; border-radius: 2px; box-shadow: 0 10px 24px rgba(0,0,0,0.2); z-index: 2; clip-path: polygon(0 40px, 40px 0, 100% 0, 100% 100%, 0 100%); }
.video-block { position: absolute; left: 150px; top: 220px; width: 560px; height: 460px; background: #0b0b0b; border-radius: 2px; overflow: hidden; z-index: 1; display: block; cursor: pointer; }
.latest-badge {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  background: var(--gold); color: var(--black);
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.video-block .grid-lines { position: absolute; inset: 0; }
.video-block .neon-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 700; letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(255,255,255,0.7), 0 0 24px rgba(127,255,176,0.4); font-size: 3.4rem; line-height: 1.15;
}
.video-block .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 38px; background: #ff0000; border-radius: 8px; z-index: 3; }
.video-block .play-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.collage-photo-right { position: absolute; right: 20px; bottom: 0; width: 240px; height: 300px; object-fit: cover; filter: grayscale(100%); border-radius: 2px; box-shadow: 0 10px 24px rgba(0,0,0,0.25); z-index: 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }

/* --- CV2: teal grid --- */
.cv-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 18px; padding: 20px; }
.cv-grid .g-main { grid-row: 1 / 3; position: relative; overflow: hidden; border: 2px solid var(--teal-light); clip-path: polygon(0 0, 100% 0, 100% 100%, 36px 100%, 0 calc(100% - 36px)); }
.cv-grid .g-main img { width: 100%; height: 100%; object-fit: cover; }
.cv-grid .g-video { display: block; cursor: pointer; position: relative; overflow: hidden; background: var(--teal-dark, #08312d); min-height: 220px; border: 2px solid var(--teal-bright); }
.cv-grid .g-video .neon-text { font-size: 1.8rem; color: var(--teal-bright); text-shadow: 0 0 12px rgba(62,236,203,0.7); display: flex; flex-direction: row; align-items: center; gap: 16px; }
.cv-grid .g-video .latest-badge { position: static; flex-shrink: 0; display: inline-block; }
.cv-grid .g-side { position: relative; overflow: hidden; border: 2px solid var(--purple-light); clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 36px); }
.cv-grid .g-side img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }

/* Text-on-image treatment (Teal Grid only): the photo sits under a dark
   .75-opacity tint so the moved-in copy reads clearly in white, replacing
   the old bottom-strip captions ("Off stage" / "In the studio"). */
.cv-grid .g-main, .cv-grid .g-side { min-height: 260px; }
.cv-grid .g-main::before, .cv-grid .g-side::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.75) 62%, rgba(10,10,12,0.86) 100%);
  z-index: 1;
}
.cv-grid .g-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 22px;
}
.cv-grid .g-overlay p {
  margin: 0; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  line-height: 1.6; letter-spacing: 0.01em; text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.cv-grid .g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(0deg, rgba(10,10,12,0.85), transparent);
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* --- CV3: polaroid stack --- */
.cv-polaroid { max-width: 760px; margin: 0 auto; padding: 30px 20px 60px; display: flex; justify-content: center; gap: 0; position: relative; min-height: 460px; }
.polaroid { background: var(--silver-light); padding: 14px 14px 50px; box-shadow: 0 14px 30px rgba(0,0,0,0.25); position: absolute; width: 260px; }
.polaroid img { width: 100%; height: 260px; object-fit: cover; filter: grayscale(30%); }
.polaroid .tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 70px; height: 26px;
  background: rgba(109,63,176,0.55); border: 1px solid rgba(109,63,176,0.7);
}
.polaroid .cap { position: absolute; bottom: 14px; left: 14px; right: 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; color: #333; text-align: center; }
.polaroid.p1 { left: 10%; top: 10px; transform: rotate(-7deg); z-index: 1; }
.polaroid.p2 { left: 50%; top: 40px; transform: translateX(-50%) rotate(2deg); z-index: 3; }
.polaroid.p3 { right: 8%; top: 20px; transform: rotate(8deg); z-index: 2; }
.polaroid-video { display: block; cursor: pointer; background: #0b0b0b; }
.polaroid-video .frame { width: 100%; height: 260px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.polaroid-video .neon-text { color: #fff; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 700; letter-spacing: 0.05em; font-size: 1.5rem; text-shadow: 0 0 10px rgba(127,255,176,0.6); }
.polaroid-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 32px; background: #ff0000; border-radius: 8px; }
.polaroid-video .play-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.polaroid.p4 { left: 32%; top: 70px; transform: translateX(-50%) rotate(-4deg); z-index: 4; }

/* --- CV4: gold frame plaque --- */
.cv-frame { max-width: 560px; margin: 0 auto; text-align: center; padding: 20px; }
.cv-frame-inner {
  padding: 14px; border: 1px solid var(--gold); position: relative;
}
.cv-frame-inner::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--purple-light); pointer-events: none;
}
.cv-frame-inner img { width: 100%; height: 460px; object-fit: cover; filter: grayscale(20%); }
.cv-frame-plaque {
  margin-top: 18px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 16px;
  color: var(--navy-dark); border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver);
  padding: 12px 0; letter-spacing: 0.02em;
}

/* --- CV5: duotone duo --- */
.cv-duo { display: flex; max-width: 960px; margin: 0 auto; min-height: 460px; gap: 4px; }
.cv-duo-half { position: relative; flex: 1; overflow: hidden; }
.cv-duo-half img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .6s ease; }
.cv-duo-teal img { filter: grayscale(100%) sepia(30%) hue-rotate(130deg) saturate(3); }
.cv-duo-purple img { filter: grayscale(100%) sepia(40%) hue-rotate(220deg) saturate(2.4); }
.cv-duo-half:hover img { transform: scale(1.06); filter: grayscale(0%) saturate(1); }
.cv-duo-cap {
  position: absolute; left: 20px; bottom: 20px; color: #fff; font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.cv-duo-video { display: flex; align-items: center; justify-content: center; background: #0b0b0b; cursor: pointer; }
.cv-duo-video .neon-text { color: #fff; font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 700; letter-spacing: 0.05em; font-size: 1.6rem; text-align: center; line-height: 1.2; text-shadow: 0 0 12px rgba(127,255,176,0.6); }
.cv-duo-video .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 34px; background: #ff0000; border-radius: 8px; }
.cv-duo-video .play-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

@media (max-width: 900px) {
  .about-collage { min-height: 900px; }
  .video-block { width: 90%; left: 5%; top: 260px; height: 320px; }
  .collage-photo-left { width: 60%; left: 5%; }
  .collage-photo-right { right: 5%; width: 55%; }
  .cv-grid { grid-template-columns: 1fr; }
  .cv-grid .g-main { grid-row: auto; height: 260px; }
  .cv-polaroid { min-height: 1000px; flex-direction: column; align-items: center; }
  .polaroid { position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; margin-bottom: 20px; }
  .cv-duo { flex-direction: column; }
}

/* ============ CONTAINED DARK PANELS (About bio / Contact) ============ */
.contained-wrap { padding: 20px 0; }
.dark-panel { background: var(--navy); margin-left: 0; margin-right: 8%; border-radius: 0 4px 4px 0; overflow: hidden; position: relative; }

.bio-variant, .cta-panel-variant { display: none; }
.bio-variant.active, .cta-panel-variant.active { display: block; animation: variantFadeIn 0.5s ease; }
.bio-variant.variant-fading, .cta-panel-variant.variant-fading { opacity: 0 !important; transition: opacity 380ms ease; }

.panel-purple { background: linear-gradient(135deg, var(--purple-deep), var(--purple) 70%); position: relative; }
.panel-purple::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(62,236,203,0.25); pointer-events: none;
}
.panel-glass {
  background: var(--black); position: relative; overflow: hidden;
}
.panel-glass::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, var(--purple) 0%, transparent 70%); opacity: 0.35; top: -120px; right: -60px; filter: blur(10px);
}

.panel-outline { background: #fff; border: 3px solid var(--silver); position: relative; }
.panel-outline::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--teal-light); pointer-events: none; }
.panel-outline .about-content h2, .panel-outline .contact-left h2 { color: var(--black); }
.panel-outline .about-content p, .panel-outline .contact-left p, .panel-outline .contact-left .details { color: #4a4a4a; }
.panel-outline .contact-right { background: var(--silver-light); }
.panel-outline .contact-right label { color: var(--teal); }
.panel-outline .contact-right input, .panel-outline .contact-right textarea { background: #fff; color: var(--black); border: 1px solid var(--silver); }
.panel-outline .submit-btn { border-color: var(--purple); color: var(--purple); }
.panel-outline .submit-btn:hover { background: var(--purple); color: #fff; }
.cycle-word { animation: colorCycle 4.5s ease-in-out infinite; }
@keyframes colorCycle { 0%,100% { color: var(--purple); } 33% { color: var(--teal); } 66% { color: var(--navy); } }

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.panel-conic {
  background-image: linear-gradient(var(--black-soft), var(--black-soft)),
    conic-gradient(from var(--angle, 0deg), var(--purple), var(--teal-bright), var(--purple-light), var(--purple));
  background-origin: border-box; background-clip: padding-box, border-box;
  border: 4px solid transparent; animation: rotateBorder 7s linear infinite;
}
@keyframes rotateBorder { to { --angle: 360deg; } }
.panel-conic .about-content h2 .accent-word, .panel-conic .contact-left h2 .accent-word { color: var(--teal-bright); }

.panel-diagonal {
  background: linear-gradient(115deg, var(--purple-deep) 0%, var(--purple-deep) 46%, var(--teal) 46%, var(--teal) 100%);
  border-left: 6px solid var(--teal-bright);
}
.panel-diagonal .about-content h2 .accent-word, .panel-diagonal .contact-left h2 .accent-word { color: var(--teal-bright); }
.panel-diagonal .contact-right {
  background: var(--black-soft);
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  border: 1px solid rgba(199,204,211,0.25);
}
.panel-diagonal .contact-right label { color: var(--teal-bright); }
.panel-diagonal .contact-right input, .panel-diagonal .contact-right textarea { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(199,204,211,0.2); }
.panel-diagonal .submit-btn { border-color: var(--teal-bright); color: var(--teal-bright); }
.panel-diagonal .submit-btn:hover { background: var(--teal-bright); color: var(--purple-deep); }

.panel-trapezoid {
  background: linear-gradient(135deg, var(--teal-bright), var(--purple-light));
  clip-path: polygon(3.5% 0%, 100% 0%, 96.5% 100%, 0% 100%);
  border: none;
}
.panel-trapezoid::before {
  content: ""; position: absolute; inset: 5px; z-index: 0;
  background: var(--black-soft);
  clip-path: polygon(3.5% 0%, 100% 0%, 96.5% 100%, 0% 100%);
}
.panel-trapezoid .about-content h2 .accent-word, .panel-trapezoid .contact-left h2 .accent-word { color: var(--teal-bright); }
.panel-trapezoid .contact-right { background: rgba(255,255,255,0.06); border: 1px solid rgba(199,204,211,0.25); }
.panel-trapezoid .contact-right label { color: var(--teal-bright); }
.panel-trapezoid .contact-right input, .panel-trapezoid .contact-right textarea { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(199,204,211,0.2); }
.panel-trapezoid .submit-btn { border-color: var(--purple-light); color: var(--purple-light); }
.panel-trapezoid .submit-btn:hover { background: var(--purple-light); color: #fff; }

.panel-trapezoid-alt {
  background: linear-gradient(45deg, var(--gold-light), var(--purple));
  clip-path: polygon(0% 0%, 96.5% 0%, 100% 100%, 3.5% 100%);
  border: none;
}
.panel-trapezoid-alt::before {
  content: ""; position: absolute; inset: 5px; z-index: 0;
  background: var(--navy-dark);
  clip-path: polygon(0% 0%, 96.5% 0%, 100% 100%, 3.5% 100%);
}
.panel-trapezoid-alt .about-content h2 .accent-word, .panel-trapezoid-alt .contact-left h2 .accent-word { color: var(--gold-light); }
.panel-trapezoid-alt .contact-right { background: rgba(255,255,255,0.06); border: 1px solid rgba(224,196,122,0.25); }
.panel-trapezoid-alt .contact-right label { color: var(--gold-light); }
.panel-trapezoid-alt .contact-right input, .panel-trapezoid-alt .contact-right textarea { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(224,196,122,0.2); }
.panel-trapezoid-alt .submit-btn { border-color: var(--purple-light); color: var(--purple-light); }
.panel-trapezoid-alt .submit-btn:hover { background: var(--purple-light); color: #fff; }

.about-content { display: flex; align-items: center; gap: 70px; padding: var(--space-panel-inset) var(--space-panel-inset) var(--space-panel-inset) calc(var(--space-panel-inset) + 10px); flex-wrap: wrap; position: relative; z-index: 2; }
.about-content img.person { width: 300px; height: 380px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.about-content .text { flex: 1 1 320px; }
.about-content h2 { color: #fff; font-size: 2.4rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 26px; }
.about-content p { color: #d8dce1; line-height: 1.9; font-size: 15px; margin-bottom: 0; max-width: 460px; }
.panel-glass .about-content p { color: var(--silver); }

/* ============ SHOWS ============ */
.shows { text-align: center; }
.shows-variant { display: none; }
.shows-variant.active { display: block; animation: variantFadeIn 0.5s ease; }
.shows-variant.variant-fading { opacity: 0 !important; transition: opacity 380ms ease; }

.shows-empty {
  max-width: 640px; margin: 60px auto 0; padding: 46px 30px; text-align: center;
  color: var(--navy-dark); font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.5rem;
  border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver);
}

.shows-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-cards); margin-top: 60px; max-width: 1400px; margin-left: auto; margin-right: auto; }
.tour-card { background: var(--navy); color: #fff; flex: 1 1 340px; max-width: 420px; padding: 34px; border-radius: 2px; text-align: left; }
.tour-card .date { color: var(--gold-light); font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.tour-card img { width: 100%; height: 260px; object-fit: cover; margin-bottom: 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
.tour-card h3 { margin: 0 0 16px; font-size: 22px; color: #fff; }
.tour-card p { font-size: 15px; line-height: 1.8; color: #cfd4da; }

.ticket-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-cards); margin-top: 60px; max-width: 1400px; margin-left: auto; margin-right: auto; }
.ticket { display: flex; flex: 1 1 380px; max-width: 460px; background: var(--teal); border-radius: 8px; overflow: hidden; text-align: left; color: #fff; box-shadow: 0 12px 26px rgba(15,92,86,0.3); }
.ticket .t-img { width: 130px; flex-shrink: 0; position: relative; }
.ticket .t-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
.ticket .t-perf {
  width: 0; border-left: 2px dashed rgba(255,255,255,0.4); position: relative; margin: 16px 0;
}
.ticket .t-perf::before, .ticket .t-perf::after {
  content: ""; position: absolute; left: -9px; width: 18px; height: 18px; background: #fff; border-radius: 50%;
}
.ticket .t-perf::before { top: -16px; }
.ticket .t-perf::after { bottom: -16px; }
.ticket .t-body { padding: 24px 22px; flex: 1; }
.ticket .t-date { font-family: 'Space Grotesk', sans-serif; color: var(--teal-bright); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.ticket h3 { margin: 0 0 10px; font-size: 20px; }
.ticket p { font-size: 13px; line-height: 1.7; color: #d7ece9; margin: 0 0 14px; }
.ticket .t-tag { display: inline-block; padding: 5px 14px; border: 1px solid var(--purple-light); color: var(--purple-light); border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.gradient-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-cards); margin: 60px auto 0; max-width: 1400px; }
.gcard {
  flex: 1 1 300px; max-width: 360px; padding: 3px; border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--teal-bright), var(--purple-light), var(--purple));
  background-size: 300% 300%; animation: gradientMove 7s ease infinite;
}
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.gcard-inner { background: var(--black); border-radius: 11px; padding: 30px; text-align: left; color: #fff; height: 100%; }
.gcard-inner .gc-date { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 12px; color: var(--teal-bright); margin-bottom: 14px; }
.gcard-inner h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
.gcard-inner h3 .accent-word { color: var(--purple-light); }
.gcard-inner p { font-size: 13px; line-height: 1.7; color: var(--silver); margin: 0; }

.editorial-list { max-width: 880px; margin: 60px auto 0; text-align: left; border-top: 2px solid var(--black); }
.editorial-row { display: flex; align-items: baseline; gap: 30px; padding: 30px 6px; border-bottom: 1px solid #e2e4e8; border-left: 3px solid transparent; transition: border-color .25s, background .25s; }
.editorial-row:hover { border-left-color: var(--teal); background: rgba(15,92,86,0.04); }
.editorial-row .e-num { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2.4rem; color: var(--silver); flex: 0 0 64px; }
.editorial-row .e-body h3 { margin: 0 0 6px; font-family: 'Space Grotesk', sans-serif; font-size: 19px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy-dark); }
.editorial-row .e-body h3 .e-accent { color: var(--purple); }
.editorial-row .e-body p { margin: 0; font-size: 13px; color: #777; }
.editorial-row .e-date-tag { margin-left: auto; font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }

@media (max-width: 640px) {
  .ticket { flex-direction: column; }
  .ticket .t-img { width: 100%; height: 160px; }
  .ticket .t-perf { display: none; }
  .show-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .editorial-row { flex-wrap: wrap; }
  .editorial-row .e-date-tag { margin-left: 0; }
}

/* ============ CONTACT ============ */
.contact-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; flex-wrap: nowrap; padding: var(--space-contact-pad); position: relative; z-index: 2; }
.contact-left { color: #fff; max-width: 340px; flex: 0 1 320px; min-width: 0; }
.contact-left h2 { color: #fff; font-size: 2.2rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 26px; }
.contact-left p { color: #cfd4da; line-height: 1.9; font-size: 14px; margin-bottom: 28px; }
.contact-left .details { color: #fff; font-size: 14px; line-height: 1.9; }
.contact-right { background: #fff; padding: 44px 50px; border-radius: 2px; flex: 1 1 auto; }
.contact-right form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.contact-right label { display: block; color: var(--gold); font-size: 13px; margin-bottom: 6px; }
.contact-right input, .contact-right textarea { width: 100%; padding: 13px 14px; border: none; background: var(--input-gray); color: #fff; border-radius: 2px; font-family: inherit; font-size: 14px; }
.contact-right .full-row { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; color: #fff; }
.form-status.form-status-error { color: #ff8a8a; }
.submit-btn { margin-top: 26px; width: 100%; padding: 14px; background: transparent; border: 1px solid var(--gold); color: var(--gold); border-radius: 24px; font-size: 13px; letter-spacing: 0.08em; cursor: pointer; grid-column: 1 / -1; }
.submit-btn:hover { background: var(--gold); color: var(--navy); }
@media (max-width: 900px) { .contact-right form { grid-template-columns: 1fr; } }

.panel-purple .contact-left p { color: #e6dcf7; }
.panel-purple .contact-right { background: rgba(255,255,255,0.94); }
.panel-purple .contact-right label { color: var(--purple); }
.panel-purple .submit-btn { border-color: var(--teal-bright); color: var(--teal-bright); }
.panel-purple .submit-btn:hover { background: var(--teal-bright); color: var(--purple-deep); }

.panel-glass .contact-left p { color: var(--silver); }
.panel-glass .contact-right { background: rgba(255,255,255,0.06); border: 1px solid rgba(199,204,211,0.25); backdrop-filter: blur(10px); }
.panel-glass .contact-right label { color: var(--teal-bright); }
.panel-glass .contact-right input, .panel-glass .contact-right textarea { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(199,204,211,0.2); }
.panel-glass .contact-right input:focus, .panel-glass .contact-right textarea:focus { outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(164,118,224,0.25); }
.panel-glass .submit-btn { border-color: var(--purple-light); color: var(--purple-light); }
.panel-glass .submit-btn:hover { background: var(--purple-light); color: #fff; }

/* ============ FOOTER ============ */
footer { background: #f4f4f4; padding: var(--space-footer-y) var(--space-footer-x) calc(var(--space-footer-y) / 2); text-align: left; }
footer .footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; max-width: 1100px; margin: 0 auto 40px; }
footer .biz-name { font-weight: 700; margin: 0 0 10px; color: var(--navy-dark); }
footer .biz-blurb { max-width: 320px; color: var(--gray-text); font-size: 13px; line-height: 1.8; }
.footer-columns { display: flex; gap: 70px; flex-wrap: wrap; }
.footer-columns h4 { text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--navy-dark); margin-bottom: 12px; }
.footer-columns ul { list-style: none; padding: 0; margin: 0; }
.footer-columns ul li { margin-bottom: 8px; font-size: 13px; color: #666; }
.footer-columns ul li a { transition: color .2s; }
.footer-columns ul li a:hover { color: var(--purple); }

.footer-social {
  display: flex; justify-content: center; gap: 16px; max-width: 1100px; margin: 0 auto 24px;
  padding-top: 24px; border-top: 1px solid #ddd;
}
.footer-social .social-icon {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--navy-dark);
  display: flex; align-items: center; justify-content: center; color: var(--navy-dark);
  transition: background .2s, color .2s, border-color .2s;
}
.footer-social .social-icon svg { width: 18px; height: 18px; }
.footer-social .social-icon:hover { background: var(--purple); border-color: var(--purple); color: #fff; }

.footer-bottom { border-top: 1px solid #ddd; padding-top: 16px; font-size: 11px; color: var(--gray-text); text-align: center; }
.footer-bottom a { color: var(--gold); }

.back-to-top {
  position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--teal-light));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); opacity: 0.9; z-index: 50;
}

/* ---- SCROLL REVEAL ANIMATIONS ---- */
.reveal { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateX(0); }
.reveal-img { opacity: 0; transform: translateX(60px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-img.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@media (max-width: 900px) {
  .about-content, .contact-content { padding: 40px; }
  .dark-panel { margin-right: 4%; }
}

@media (max-width: 640px) {
  header, section { padding-left: 24px; padding-right: 24px; }
  .contained-wrap { padding-left: 0; padding-right: 0; }
  header { padding: 14px 20px; }
  .logo .script { font-size: 18px; }
  .hero-copy { padding: 40px 20px; }
  .hero-copy h1 { font-size: 2.1rem; margin-bottom: 24px; }
  section { padding: 50px 24px; }
  .dark-panel { margin-right: 0; border-radius: 0; }
  .about-content img.person { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3/4; }
  .about-content .text, .contact-left { max-width: 100%; }
  .about-content, .contact-content { flex-direction: column; text-align: left; align-items: flex-start; }
  .contact-content { align-items: stretch; }
  .contact-right { width: 100%; }
  .shows-list { gap: 20px; }
  .tour-card { width: 100%; max-width: 340px; }
  .footer-top { flex-direction: column; }
  .footer-columns { gap: 40px; }
  .back-to-top { width: 38px; height: 38px; bottom: 20px; right: 20px; }
  .switcher-row.floating { position: static; margin: 0 0 24px; }
}

/* ============================================================
   MOBILE SIDEBAR SYSTEM
   ============================================================ */

.site-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 82vw);
  background: var(--black-soft);
  color: var(--silver-light);
  z-index: 950;
  display: none;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
  gap: clamp(18px, 3.4vh, 30px);
  padding: clamp(60px, 10vh, 90px) clamp(22px, 5vw, 32px) clamp(24px, 5vh, 40px);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  pointer-events: none;
  box-shadow: -8px 0 32px rgba(0,0,0,0.35);
}
@media (max-width: 780px) {
  .site-sidebar { display: flex; }
}
.site-sidebar.open {
  transform: translateX(0);
  pointer-events: auto;
}

.sidebar-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  background: none; border: 1px solid var(--silver); color: var(--silver-light);
  border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-close:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

.sidebar-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,10,12,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: none;
}
@media (max-width: 780px) {
  .sidebar-overlay { display: block; }
}
body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

.switcher-label { display: none; }
#sidebarDropdowns .switcher-label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--silver); margin-bottom: 8px;
}
#sidebarDropdowns .navbar-switcher { margin-bottom: 20px; }
#sidebarDropdowns .navbar-switcher:last-child { margin-bottom: 0; }
#sidebarDropdowns .pill-select { width: 100%; }
#sidebarDropdowns { margin-bottom: 4px; }

.sidebar-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 12px 0;
}
.sidebar-nav-list li a {
  display: block; padding: 12px 4px;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light);
}
.sidebar-nav-list li a:hover { color: var(--teal-bright); }

.sidebar-hide-toggle { display: flex; align-items: center; }
.switch-wrap {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--silver-light);
}
.switch-wrap input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.switch-track {
  width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.2);
  border: 1px solid var(--silver); position: relative; flex-shrink: 0; transition: background .25s;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--silver-light); transition: transform .25s;
}
.switch-wrap input:checked + .switch-track { background: var(--teal); border-color: var(--teal-bright); }
.switch-wrap input:checked + .switch-track::after { transform: translateX(18px); background: var(--teal-bright); }
.switch-wrap input:focus-visible + .switch-track { outline: 2px solid var(--teal-bright); outline-offset: 2px; }

#hideToggleSlot .switch-wrap {
  background-color: rgba(109,63,176,0.06);
  border: 1px solid rgba(109,63,176,0.35);
  color: var(--purple);
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  font-size: 10px;
}
#hideToggleSlot .switch-track { width: 30px; height: 17px; }
#hideToggleSlot .switch-track::after { width: 11px; height: 11px; }
#hideToggleSlot .switch-wrap input:checked + .switch-track { background: var(--purple); border-color: var(--purple-light); }
#hideToggleSlot .switch-wrap input:checked + .switch-track::after { transform: translateX(13px); background: #fff; }

@media (max-height: 700px) {
  .site-sidebar {
    gap: clamp(10px, 2vh, 16px);
    padding: clamp(44px, 8vh, 64px) clamp(18px, 5vw, 28px) clamp(16px, 3vh, 24px);
  }
  #sidebarDropdowns .navbar-switcher { margin-bottom: 12px; }
  .sidebar-nav-list { padding: 6px 0; }
  .sidebar-nav-list li a { padding: 8px 4px; }
}

/* Design is chosen by js/rotation.js on a timer, not by the visitor —
   every switcher dropdown (desktop and the mobile sidebar's reparented
   copies) is unconditionally hidden. */
.switcher-row,
.navbar-switcher,
#navbarSwitcherSlot,
#bgSwitcherSlot,
#sidebarDropdowns {
  display: none !important;
}