/**
 * WAVE & SEE DESIGN SYSTEM
 * Clean extraction from working prototype → ready for EE templates
 */

/* ============================================
   ROOT TOKENS
   ============================================ */
:root {
	 /* ============================================
		BRAND COLORS / ASTRAL RAINBOW
		============================================ */
   
	 /* Core gradients – used for buttons, progress, accents */
	 --ws-rainbow: linear-gradient(
	   120deg,
	   #ff6fd8 0%,   /* astral magenta */
	   #ff9a5a 18%,  /* soft neon coral */
	   #ffe66b 36%,  /* luminous gold */
	   #3cf6b5 55%,  /* mint / aurora green */
	   #4da6ff 75%,  /* electric blue */
	   #c4b5fd 100%  /* soft violet */
	 );
   
	 /* Softer wash for borders, fills, subtle backgrounds */
	 --ws-rainbow-soft: linear-gradient(
	   135deg,
	   rgba(255,111,216,0.18),
	   rgba(255,154,90,0.14),
	   rgba(60,246,181,0.16),
	   rgba(77,166,255,0.18),
	   rgba(196,181,253,0.22)
	 );
   
	 /* Accent spectrum – slightly more fluorescent */
	 --ws-red:    #ff4b81;  /* hot pink-red   */
	 --ws-orange: #ff9a5a;  /* glowing coral  */
	 --ws-yellow: #ffe66b;  /* soft neon gold */
	 --ws-green:  #3cf6b5;  /* mint / aurora  */
	 --ws-blue:   #4da6ff;  /* electric blue  */
	 --ws-purple: #c4b5fd;  /* soft violet    */
	 --ws-indigo: #6366f1;  /* stays nice     */
   
	 /* Brand neutrals (unchanged) */
	 --ws-ink: #0b0b0b;
	 --ws-bg: #ffffff;
	 --ws-stone: #fafaf9;
	 --ws-border: #e5e5e5;
	 --ws-border-strong: #000;
   
	 /* Grayscale (unchanged) */
	 --ws-gray-50: #fafafa;
	 --ws-gray-100: #f3f4f6;
	 --ws-gray-200: #e5e7eb;
	 --ws-gray-300: #d1d5db;
	 --ws-gray-400: #9ca3af;
	 --ws-gray-500: #6b7280;
	 --ws-gray-600: #4b5563;
   
	 /* Typography */
	 --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', sans-serif;
	 --font-serif: Georgia, serif;
   
	 /* Spacing Scale */
	 --space-xs: 0.5rem;    /* 8px */
	 --space-sm: 0.75rem;   /* 12px */
	 --space-md: 1.5rem;    /* 24px */
	 --space-lg: 2.5rem;    /* 40px */
	 --space-xl: 4rem;      /* 64px */
	 --space-2xl: 6rem;     /* 96px */
	 --space-3xl: 8rem;     /* 128px */
   
	 /* Border Radius */
	 --ws-radius: 14px;
	 --ws-radius-sm: 8px;
	 --ws-radius-lg: 16px;
	 --ws-radius-full: 9999px;
   
	 /* Shadows */
	 --ws-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	 --ws-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	 --ws-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	 --ws-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
   
	 /* Layout */
	 --container-width: 1200px;
	 --container-wide: 1400px;
	 --header-height: 72px;
   }


/* ============================================
   RESET & BASE
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--ws-bg);
  color: var(--ws-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: bold;
  line-height: 1.2;
}
/* Prevent widows/orphans in text blocks */
h1, h2, h3, h4, h5, h6,
p,
.hero-subtitle,
.section-subtitle,
.yoga-teacher-detail-bio,
.card p {
  text-wrap: balance;
}

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.5rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 4rem; }

/* Responsive Hero Text */
.hero-title {
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.9;
}

.section-title {
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: var(--space-2xl);
}
.section-title {
	font-size: 5rem;
}

/* Base subtitle: centered, slightly wider */
.section-subtitle {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  text-align: center;
  line-height: 1.6;
  max-width: 52rem; /* was 48rem – gives more width */
  margin: 0 auto var(--space-lg);
  opacity: 0.85;
}

/* Desktop bump for all subheadings */
@media (min-width: 1024px) {
  .section-subtitle,
  .events-subtitle,
  .yoga-schedule-header .section-subtitle {
	font-size: 1.4rem;
	max-width: 56rem;
  }
}


/* ============================================
   LAYOUT
   ============================================ */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  min-height: 100vh;
  padding: var(--space-3xl) var(--space-md);
  scroll-margin-top: 90px; /* Account for fixed header */
}

.section-content {
  max-width: var(--container-width);
  margin: 0 auto;
}

.bg-stone {
  background: var(--ws-stone);
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

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

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  padding: 1.25rem 2.5rem;
  font-weight: bold;
  font-size: 1rem;
  border-radius: var(--ws-radius-sm);
  border: none;
  cursor: pointer;
  box-shadow: var(--ws-shadow-md);
  transition: all 0.25s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.btn-black {
  background: #000;
  color: #fff;
}

.btn-black:hover {
  background: #222;
}

.btn-gradient {
  background: var(--ws-rainbow);
  color: #fff;
  border: none;
  box-shadow: var(--ws-shadow-md);
}

.btn-gradient:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}


.btn-sm {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: var(--ws-radius-sm);
  border: none;
  cursor: pointer;
  box-shadow: var(--ws-shadow-sm);
  transition: all 0.2s ease;
}

.btn-link {
  background: none;
  border: none;
  color: var(--ws-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  cursor: pointer;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: #fff;
  padding: var(--space-md);
  border-radius: 1rem;
  box-shadow: var(--ws-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ws-shadow);
}

/* ============================================
   HEADER (Fixed)
   ============================================ */
.ws-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--ws-border);
}

.ws-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ws-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.ws-logo {
  height: 200px;
  width: auto;
  display: block;
}
/* ===== Mobile logo shrink ===== */
@media (max-width: 640px) {
  .ws-logo {
	height: 100px; /* 50% of 200px */
  }
}


.ws-wordmark {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* Desktop Nav */
.ws-nav--desktop {
  display: none;
  gap: 18px;
  align-items: center;
}

.ws-nav--desktop a {
  position: relative;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--ws-ink);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.045em;
  transition: color 0.2s ease;
}

.ws-nav--desktop a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--ws-rainbow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
  border-radius: 2px;
}

.ws-nav--desktop a:hover::after {
  transform: scaleX(1);
}

.ws-nav--desktop .ws-cta {
  background: var(--ws-rainbow);
  color: #fff;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: var(--ws-radius-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  transition: all 0.25s ease;
}

.ws-nav--desktop .ws-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}


.ws-nav--desktop .ws-cta:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.ws-nav--desktop .ws-cta::after {
  display: none; /* Don't show underline on CTA */
}

/* Progress Bar */
.ws-progress {
  position: relative;
  height: 3px;
  background: transparent;
  overflow: hidden;
}

.ws-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--ws-rainbow);
  transition: width 0.08s linear;
}

/* Burger Menu */
.ws-burger {
  display: none;
  width: 38px;
  height: 28px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ws-burger__bar {
  position: absolute;
  width: 28px;
  height: 2px;
  left: 5px;
  background: #000;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.ws-burger__bar:nth-child(1) { top: 4px; }
.ws-burger__bar:nth-child(2) { top: 13px; }
.ws-burger__bar:nth-child(3) { bottom: 4px; }

.ws-burger[aria-expanded="true"] .ws-burger__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.ws-burger[aria-expanded="true"] .ws-burger__bar:nth-child(2) {
  opacity: 0;
}

.ws-burger[aria-expanded="true"] .ws-burger__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Menu */
.ws-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: var(--ws-shadow-lg);
  padding: 0;
  border-radius: 0 0 20px 20px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  z-index: 9998;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ws-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ws-menu__list {
  list-style: none;
  margin: 0;
  padding: 16px;
}

.ws-menu__list li {
  border-bottom: 1px solid #f0f0f0;
}

.ws-menu__list li:last-child {
  border-bottom: none;
}

.ws-menu__list a {
  display: block;
  padding: 16px 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ws-menu__list a:not(.ws-cta):hover {
  background: var(--ws-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ws-menu__list .ws-cta {
  background: linear-gradient(135deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: var(--ws-radius-sm);
  padding: 10px 14px;
  display: inline-block;
}

.ws-menu__list .ws-cta:hover {
  background: var(--ws-rainbow);
  color: #fff;
}

/* Show desktop nav ≥ 1024px */
@media (min-width: 1024px) {
  .ws-nav--desktop { display: flex; }
  .ws-burger { display: none; }
  .ws-menu { display: none; }
}

@media (max-width: 1023px) {
  .ws-burger { display: block; }
}

/* Push content below fixed header */
section:first-of-type {
  padding-top: 10rem;
}

/* ============================================
   TEACHER CARDS
   ============================================ */
.teacher-card {
  display: flex;
  gap: var(--space-md);
  background: #fff;
  padding: var(--space-md);
  border-radius: 1rem;
  box-shadow: var(--ws-shadow-sm);
  margin-bottom: var(--space-md);
}

.teacher-photo {
  width: 120px;
  height: 120px;
  min-width: 120px;
  background: var(--ws-gray-300);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ws-gray-500);
  font-size: 0.75rem;
}

.teacher-info h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.teacher-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  font-weight: bold;
  margin-bottom: 1rem;
}

.teacher-bio {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.yoga-teacher-detail-bio a {
  color: #e56b2b; /* Wave & See orange */
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(229, 107, 43, 0.3);
  transition: all 0.25s ease;
}

.yoga-teacher-detail-bio a:hover {
  color: #ff9c66;
  border-bottom-color: #ff9c66;
  text-shadow: 0 0 6px rgba(255, 156, 102, 0.35);
}


@media (max-width: 768px) {
  .teacher-card {
	flex-direction: column;
	align-items: center;
	text-align: center;
  }
}

/* ============================================
   SCHEDULE DAYS
   ============================================ */
.schedule-day {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border-left: 4px solid;
  box-shadow: var(--ws-shadow-sm);
  margin-bottom: 1rem;
}

.day-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.day-symbol { font-size: 1.5rem; }
.day-name { font-weight: bold; font-size: 1.125rem; }
.day-note { font-size: 0.75rem; opacity: 0.5; margin-left: auto; }

.class-item { margin-bottom: 0.75rem; }
.class-time { font-weight: bold; font-size: 0.875rem; }
.class-name { font-size: 1rem; opacity: 0.8; }

/* ============================================
   PROJECT PROGRESS
   ============================================ */
.project-progress {
  margin: var(--space-md) 0;
  background: var(--ws-gray-100);
  border-radius: 1rem;
  padding: 1.5rem;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
}

.progress-bar-container {
  height: 2rem;
  background: var(--ws-gray-200);
  border-radius: var(--ws-radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--ws-rainbow);
  border-radius: var(--ws-radius-full);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
  color: #fff;
  font-weight: bold;
  font-size: 0.875rem;
  transition: width 0.3s ease;
}

/* ============================================
   UTILITIES
   ============================================ */
.placeholder {
  width: 100%;
  height: 24rem;
  background: var(--ws-gray-300);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ws-gray-500);
}

/* Landing Animation */
@keyframes ws-landing {
  0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  30% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.ws-landing {
  animation: ws-landing 0.9s ease-out;
  border-radius: var(--ws-radius);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 10rem;
}

.hero h1 {
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.9;
  margin-bottom: 4rem;
}

.hero p {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.6;
  max-width: 50rem;
  margin: 0 auto 5rem;
  opacity: 0.8;
}
/* ============================================
   INDIVIDUAL SECTION STYLES
   ============================================ */
/* HERO LAYOUT */
   .hero {
	 position: relative;
	 min-height: 100vh;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 overflow: hidden;
	 padding: 6rem 1.5rem 4rem;
   }
   
   .hero-media {
	 position: absolute;
	 inset: 0;
	 overflow: hidden;
	 z-index: 0;
   }
   
   .hero-video,
   .hero-image {
	 width: 100%;
	 height: 100%;
	 object-fit: cover;
   }
   
   .hero-image {
	 background-size: cover;
	 background-position: center center;
   }
   
   .hero-image--fallback {
	 background: radial-gradient(circle at 20% 0, #f9fafb, #e5e7eb);
   }
   
   /* Light wash over the whole hero */
   .hero-overlay {
	 position: absolute;
	 inset: 0;
	 pointer-events: none;
   }
   
   /* Center “frosted glass” blur that fades toward edges */
   .hero-overlay::before {
	 content: "";
	 position: absolute;
	 inset: 0;
   
	 /* Blur strength – more = milkier */
	 backdrop-filter: blur(2px);
	 -webkit-backdrop-filter: blur(2px);
   
	 /* Soft white tint strongest in the middle */
	 background: radial-gradient(
	   circle at 50% 35%,                /* center position */
	   rgba(255,255,255,0.55) 0%,        /* opaque-ish center */
	   rgba(255,255,255,0.35) 45%,
	   rgba(255,255,255,0.0) 100%        /* fully clear edges */
	 );

   mask-image: radial-gradient(
	   circle at 50% 35%,
	   rgba(0,0,0,1) 0%,
	   rgba(0,0,0,1) 55%,
	   rgba(0,0,0,0) 100%
	 );
	 -webkit-mask-image: radial-gradient(
	   circle at 50% 35%,
	   rgba(0,0,0,1) 0%,
	   rgba(0,0,0,1) 55%,
	   rgba(0,0,0,0) 100%
	 );
   }
   
   /* Dark radial tint behind text for readability */
   .hero-overlay::after {
	 content: "";
	 position: absolute;
	 inset: 0;
	 pointer-events: none;
   
	 background: radial-gradient(
	   circle at 50% 45%,              /* center position of the dark spot */
	   rgba(15,23,42,0.55) 0%,         /* darkest in the very middle */
	   rgba(15,23,42,0.40) 35%,
	   rgba(15,23,42,0.18) 60%,
	   rgba(15,23,42,0.00) 85%         /* fades out toward edges */
	 );
   
	 mix-blend-mode: multiply;         /* keeps it feeling like ink, not a flat veil */
   }
/* ===== GLASS TITLE STRIP ===== */
   .hero-title-strip {
	 position: absolute;
	 top: 20%;                /* ← MOVE THIS TO SIT CLOSER/FARTHER FROM HEADER */
	 left: 50%;
	 transform: translateX(-50%);
	 width: 100%;
	 z-index: 2;
     padding: 0;    
	 /* backdrop-filter: blur(18px);          frosted glass */
	 /* -webkit-backdrop-filter: blur(18px); */
   }
   
   /* 
   some unused styles for playing with here
   
   box-shadow:
	  0 18px 45px rgba(15,23,42,0.14),
	  0 0 0 1px rgba(148,163,184,0.15); */
   
   /* ===== HERO HEADING (STAMP) ===== */
   .hero-heading {
	 font-size: clamp(1.9rem, 3.6vw, 2.6rem);   /* ← TEXT SIZE */
	 line-height: 0.09;
	 font-weight: 800;
	 letter-spacing: -0.07em;                    /* ← LETTER SPACING */
	 text-transform: uppercase;
	 text-align: center;
	 margin: 0;
   
	 color: rgba(64, 66, 68, 0.091);             /* deep ink look */
	 text-shadow:
	   0 1px 0 rgba(255,255,255,0.65),          /* subtle letterpress highlight */
	   0 10px 24px rgba(15,23,42,0.24);         /* soft drop glow */
   }
.hero-content {
	 position: relative;
	 z-index: 1;
	 text-align: center;
	 max-width: 42rem;
	 margin: 0 auto;
	 padding-top: 7rem;      /* ← space below the glass strip */
   }
   
   .hero-subtitle {
	 font-size: 1.05rem;
	 line-height: 0.8;
	 max-width: 56rem;
	 margin: 0 auto;
	 text-align: center;
     color: #fff;
   
	 /* SUBTLE ambient lift */
	 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.848);
 }
   
   .hero-actions {
	 display: flex;
	 gap: 1.5rem;
	 flex-wrap: wrap;
	 justify-content: center;
	 margin-top: 2.5rem;
   }
   
   /* Layout wrapper */
   .yoga-section {
	 background: #f9fafb;
	 padding-bottom: 4rem;
   }
   /* Fix centering of Yoga section */
   .yoga-section .section-content {
	 max-width: 850px;       /* Narrower for readability */
	 margin: 0 auto;         /* TRUE center */
	 padding: 0 1.5rem; 
	 text-align: center;
   }

   
   .yoga-header,
   .yoga-schedule-header {
	 text-align: center;
	 margin-bottom: 2rem;
   }
   
  /* ============================================
	 YOGA TEACHER DETAIL - FULL SCREEN OVERLAY
	 ============================================ */
  
  /* --- Teacher Cards Grid (unchanged) --- */
  .yoga-teachers {
	max-width: 900px;
	margin: 0 auto 3rem;
	padding: 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	justify-content: center;
  }
  
  .yoga-teacher-card {
	max-width: 240px;
	flex: 1 1 200px;
  }
  
  .yoga-teacher-inner {
	width: 100%;
	border: none;
	background: #ffffff;
	border-radius: 1.5rem;
	padding: 1.6rem 1.8rem 1.7rem;
	box-shadow:
	  0 18px 45px rgba(15,23,42,0.06),
	  0 0 0 1px rgba(148,163,184,0.16);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	cursor: pointer;
	transition:
	  transform 160ms ease-out,
	  box-shadow 160ms ease-out,
	  background 160ms ease-out;
  }
  
  .yoga-teacher-inner:hover,
  .yoga-teacher-card.is-active .yoga-teacher-inner {
	transform: translateY(-4px);
	box-shadow:
	  0 22px 55px rgba(15,23,42,0.14),
	  0 0 0 1px rgba(148,163,184,0.22);
	background: radial-gradient(circle at 0 0, #eef2ff, #ffffff);
  }
  
  .yoga-teacher-avatar {
	width: 80px;
	height: 80px;
	border-radius: 999px;
	overflow: hidden;
	background: radial-gradient(circle at 30% 20%, #e5e7eb, #cbd5f5);
  }
  
  .yoga-teacher-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .yoga-teacher-name {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
  }
  
  .yoga-teacher-role {
	font-size: 0.85rem;
	color: #6b7280;
	text-align: center;
  }
  
  
  /* --- Full Screen Overlay Shell --- */
  .yoga-teacher-detail-shell {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: 
	  visibility 0s linear 0.4s,
	  opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .yoga-teacher-detail-shell.is-open {
	visibility: visible;
	opacity: 1;
	transition: 
	  visibility 0s linear 0s,
	  opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Prevent body scroll when open */
  body.teacher-overlay-open {
	overflow: hidden;
  }
  
  
  /* --- Individual Teacher Detail Panel --- */
  .yoga-teacher-detail {
	display: none;
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
  }
  
  .yoga-teacher-detail.is-active {
	display: flex;
	flex-direction: column;
  }
  
  
  /* --- Background Layer (Blurred Photo) --- */
  .yoga-teacher-detail-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image: var(--person-bg);
	background-size: cover;
	background-position: center;
	transform: scale(1.15);
	filter: blur(4px) saturate(1.2) brightness(0.7);
  }
  
  
  /* --- Overlay Gradient (Dark vignette for readability) --- */
  .yoga-teacher-detail-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
	  ellipse 80% 70% at 50% 45%,
	  rgba(15,23,42,0.4) 0%,
	  rgba(15,23,42,0.6) 40%,
	  rgba(15,23,42,0.8) 100%
	);
  }
  
  /* Container card in the teacher overlay */
  .yoga-teacher-detail-classes {
	margin-top: 1.75rem;
	padding: 1.1rem 1.3rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
  }
  
  .yoga-teacher-detail-classes h4 {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
	opacity: 0.9;
  }
  
  /* List + items */
  .ytc-list {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  .ytc-item + .ytc-item {
	margin-top: 0.4rem;
  }
  
  /* Shared link styling – also works for the fallback text link */
  .ytc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.92rem;
	color: #e56b2b;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
  }
  
  .ytc-link::after {
	content: "↗";
	font-size: 0.8em;
	opacity: 0.7;
	transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  .ytc-link:hover {
	color: #ff9c66;
	text-shadow: 0 0 6px rgba(255, 156, 102, 0.35);
	transform: translateY(-0.5px);
  }
  
  .ytc-link:hover::after {
	transform: translateY(-1px);
	opacity: 1;
  }
  
  .ytc-empty {
	font-size: 0.9rem;
	opacity: 0.85;
  }

  
  
  /* --- Close Button --- */
  .yoga-teacher-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	width: 48px;
	height: 48px;
	border: none;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 50%;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 
	  background 0.2s ease,
	  transform 0.2s ease;
	border: 1px solid rgba(255,255,255,0.15);
  }
  
  .yoga-teacher-close:hover {
	background: rgba(255,255,255,0.2);
	transform: scale(1.05);
  }
  
  .yoga-teacher-close:active {
	transform: scale(0.95);
  }
  
  
  /* --- Main Content Area --- */
  .yoga-teacher-detail-hero {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 2rem 4rem;
  }
  
  .yoga-teacher-detail-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 100%;
	color: #fff;
  }
  
  
  /* --- Photo (Large, Centered) --- */
  .yoga-teacher-detail-photo {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 2rem;
	box-shadow: 
	  0 25px 50px rgba(0,0,0,0.4),
	  0 0 0 4px rgba(255,255,255,0.2);
	opacity: 0;
	transform: scale(0.8) translateY(20px);
	animation: teacherPhotoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
  }
  
  .yoga-teacher-detail-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  
  /* --- Text Content --- */
  .yoga-teacher-detail-text {
	opacity: 0;
	transform: translateY(20px);
	animation: teacherTextIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
  }
  
  .yoga-teacher-detail-text h3 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	margin-bottom: 0.5rem;
	font-family: var(--font-serif, Georgia, serif);
	letter-spacing: -0.02em;
	text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  }
  
  .yoga-teacher-detail-role {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	opacity: 0.7;
	margin-bottom: 2rem;
	font-weight: 600;
  }
  
  .yoga-teacher-detail-bio {
	margin: 0 auto;
	font-size: 1.25rem;       /* bigger */
	line-height: 1.8;
	color: #ffffff;           /* pure white */
	max-width: 80%;         /* slightly wider */
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);  /* stronger shadow for contrast */
  }
  
  
  /* --- Classes Section (Bottom Card) --- */
  .yoga-teacher-detail-classes {
	position: relative;
	z-index: 2;
	background: #fff;
	margin: -2rem 2rem 2rem;
	padding: 2rem 2.5rem;
	border-radius: 1.5rem;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 25px 50px rgba(0,0,0,0.2);
	opacity: 0;
	transform: translateY(30px);
	animation: teacherClassesIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
  }
  
  .yoga-teacher-detail-classes h4 {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: #6b7280;
	margin-bottom: 1rem;
  }
  
  .yoga-teacher-class-list {
	font-size: 0.95rem;
	color: #374151;
  }
  
  .ytc-empty {
	color: #9ca3af;
	font-style: italic;
  }
  
  
  /* --- Entrance Animations --- */
  @keyframes teacherPhotoIn {
	to {
	  opacity: 1;
	  transform: scale(1) translateY(0);
	}
  }
  
  @keyframes teacherTextIn {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  @keyframes teacherClassesIn {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  
  /* --- Mobile Adjustments --- */
  @media (max-width: 640px) {
	.yoga-teacher-close {
	  top: 1rem;
	  right: 1rem;
	  width: 44px;
	  height: 44px;
	  font-size: 1.25rem;
	}
  
	.yoga-teacher-detail-hero {
	  padding: 5rem 1.5rem 3rem;
	  align-items: flex-start;
	  padding-top: 6rem;
	}
  
	.yoga-teacher-detail-photo {
	  width: 140px;
	  height: 140px;
	  margin-bottom: 1.5rem;
	}
  
	.yoga-teacher-detail-text h3 {
	  font-size: 1.75rem;
	}
  
	.yoga-teacher-detail-role {
	  font-size: 0.85rem;
	  margin-bottom: 1.5rem;
	}
  
	.yoga-teacher-detail-bio {
	  font-size: 1rem;
	  line-height: 1.7;
	}
  
	.yoga-teacher-detail-classes {
	  margin: 0 1rem 2rem;
	  padding: 1.5rem;
	}
  }
  
  
  /* --- Tablet/Landscape --- */
  @media (min-width: 768px) and (max-height: 600px) {
	.yoga-teacher-detail-hero {
	  padding-top: 4rem;
	  padding-bottom: 2rem;
	}
  
	.yoga-teacher-detail-main {
	  flex-direction: row;
	  text-align: left;
	  gap: 3rem;
	  max-width: 800px;
	}
  
	.yoga-teacher-detail-photo {
	  margin-bottom: 0;
	  flex-shrink: 0;
	}
  
	.yoga-teacher-detail-classes {
	  max-width: 800px;
	}
  }
   
   
  /* ============================================
	 LUNAR CYCLE HEADER
	 Visual progress bar showing position in moon cycle
	 ============================================ */
  
  .lunar-cycle-header {
	max-width: 800px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
	text-align: center;
  }
  
  /* The progress bar track */
  .lunar-cycle-bar {
	position: relative;
	padding: 2rem 0;
  }
  
  .lunar-cycle-track {
	position: relative;
	height: 4px;
	background: linear-gradient(
	  90deg,
	  var(--ws-gray-300) 0%,
	  var(--ws-gray-200) 50%,
	  var(--ws-gray-300) 100%
	);
	border-radius: 4px;
  }
  
  /* Gradient fill showing progress */
  .lunar-cycle-track::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--cycle-progress, 50%);
	background: var(--ws-rainbow);
	border-radius: 4px;
	transition: width 0.3s ease;
  }
  
  /* Current position marker */
  .lunar-cycle-progress {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	transition: left 0.3s ease;
  }
  
  .lunar-cycle-marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 
	  0 4px 20px rgba(0, 0, 0, 0.15),
	  0 0 0 4px rgba(255, 255, 255, 0.9);
	font-size: 1.75rem;
	animation: pulse-glow 3s ease-in-out infinite;
  }
  
  @keyframes pulse-glow {
	0%, 100% {
	  box-shadow: 
		0 4px 20px rgba(0, 0, 0, 0.15),
		0 0 0 4px rgba(255, 255, 255, 0.9);
	}
	50% {
	  box-shadow: 
		0 4px 30px rgba(0, 0, 0, 0.2),
		0 0 0 8px rgba(255, 255, 255, 0.5),
		0 0 40px rgba(139, 92, 246, 0.2);
	}
  }
  
  /* Endpoint markers (new moon / full moon / new moon) */
  .lunar-cycle-endpoints {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
  }
  
  .lunar-endpoint {
	font-size: 1rem;
	color: var(--ws-gray-400);
	background: #fff;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .lunar-endpoint--full {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
  }
  
  /* Labels below the bar */
  .lunar-cycle-labels {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 1rem;
	position: relative;
  }
  
  .lunar-label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
  }
  
  .lunar-label--start {
	text-align: left;
  }
  
  .lunar-label--current {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
  }
  
  .lunar-label--end {
	text-align: right;
  }
  
  .lunar-label-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ws-gray-600);
  }
  
  .lunar-label-date {
	font-size: 0.85rem;
	color: var(--ws-gray-500);
  }
  
  .lunar-label--current .lunar-label-title {
	color: var(--ws-purple);
  }
  
  .lunar-label--current .lunar-label-date {
	font-weight: 600;
	color: var(--ws-gray-600);
  }
  
  /* Cycle subtitle */
  .lunar-cycle-subtitle {
	margin-top: 1.5rem;
	font-size: 0.9rem;
	color: var(--ws-gray-500);
	font-style: italic;
  }
  
  /* Mobile adjustments */
  @media (max-width: 640px) {
	.lunar-cycle-header {
	  padding: 0 1rem;
	}
  
	.lunar-cycle-marker {
	  width: 40px;
	  height: 40px;
	  font-size: 1.5rem;
	}
  
	.lunar-endpoint {
	  width: 20px;
	  height: 20px;
	  font-size: 0.85rem;
	}
  
	.lunar-label-title {
	  font-size: 0.65rem;
	}
  
	.lunar-label-date {
	  font-size: 0.75rem;
	}
  
	.lunar-label--current {
	  display: none; /* Hide center label on mobile to prevent overlap */
	}
  }
  
  
  /* ============================================
	 YOGA SCHEDULE - UPDATED DAY CARDS
	 Now with reserve button and better spacing
	 ============================================ */
  
  /* Schedule Header - ensure centered */
  .yoga-schedule-header {
	text-align: center;
	max-width: var(--container-width, 1200px);
	margin: 0 auto;
	padding: 0 1.5rem;
	margin-bottom: 2rem;
  }
  
  .yoga-schedule-header .section-title {
	text-align: center;
	margin-bottom: 1rem;
  }
  
  .yoga-schedule-header .section-subtitle {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
  }
  
  /* Schedule Band */
  .yoga-schedule-band {
	width: 100%;
	padding: 1rem 1.5rem 4rem;
	background: transparent;
  }
  
  /* Schedule Grid - flexible for 1-7 cards */
  .yoga-schedule-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
  }
  
  /* When there are few cards, center them */
  @media (min-width: 1200px) {
	.yoga-schedule-grid {
	  /* If you want max 4 per row */
	  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
	  justify-content: center;
	}
  }
  
  /* Day Card */
  .yoga-day-card {
	border-radius: 1.25rem;
	padding: 1.5rem;
	color: #0f172a;
	box-shadow:
	  0 4px 20px rgba(15, 23, 42, 0.06),
	  0 0 0 1px rgba(148, 163, 184, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	flex-direction: column;
	min-height: 260px;
  }
  
  .yoga-day-card:hover {
	transform: translateY(-4px);
	box-shadow:
	  0 16px 40px rgba(15, 23, 42, 0.12),
	  0 0 0 1px rgba(148, 163, 184, 0.18);
  }
  
  /* ============================================
	 YOGA "TODAY" CARD HIGHLIGHT
	 ============================================ */
  
  .yoga-day-card--today {
	position: relative;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	border-radius: 18px;
	transition: all 0.35s ease;
	box-shadow:
	  0 0 12px rgba(255, 255, 255, 0.15),
	  0 0 22px rgba(180, 120, 255, 0.25),
	  inset 0 0 18px rgba(255, 255, 255, 0.08); /* soft astral core */
  }
  
  /* Subtle animated iridescent edge */
  .yoga-day-card--today::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(
	  135deg,
	  #ff86fa 0%,
	  #d48cff 20%,
	  #8ab6ff 40%,
	  #7fffd4 60%,
	  #fdfd96 80%,
	  #ffb3ba 100%
	);
	opacity: 0.28;
	filter: blur(14px);
	z-index: -1;
	animation: wsIridescentGlow 8s ease-in-out infinite alternate;
  }
  
  @keyframes wsIridescentGlow {
	0% {
	  opacity: 0.22;
	  transform: scale(1);
	  filter: blur(14px);
	}
	100% {
	  opacity: 0.42;
	  transform: scale(1.03);
	  filter: blur(18px);
	}
  }
  
  /* Slight lift on hover — only for the today card */
  .yoga-day-card--today:hover {
	transform: translateY(-4px);
	box-shadow:
	  0 8px 24px rgba(0, 0, 0, 0.15),
	  0 0 28px rgba(200, 142, 255, 0.35),
	  inset 0 0 22px rgba(255, 255, 255, 0.1);
  }
  
  /* Typography gets a subtle luminosity when it's today */
  .yoga-day-card--today .yoga-day-name,
  .yoga-day-card--today .yoga-class-title,
  .yoga-day-card--today .yoga-class-time {
	color: #ffffff;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  }
  
  .yoga-day-today {
	color: #1a1a1a;
	font-weight: 400;
	font-size: 0.85em;
	letter-spacing: normal;
	text-transform: none;
  }

  
  /* Day Header */
  .yoga-day-header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  
  .yoga-day-topline {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .yoga-day-name {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
  }
  
  .yoga-day-date {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.6;
	margin-left: 0.5rem;
  }
  
  .yoga-day-moon {
	font-size: 1.25rem;
	cursor: help;
	transition: transform 0.2s ease;
  }
  
  .yoga-day-moon:hover {
	transform: scale(1.2);
  }
  
  .yoga-day-symbol-row {
	display: flex;
	gap: 0.5rem;
	font-size: 1rem;
  }
  
  .yoga-day-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
  }
  
  .yoga-day-chakra {
	font-weight: 500;
  }
  
  .yoga-day-mantra {
	font-weight: 700;
  }
  
  /* ============================================
	 Typography Improvements for "No Classes" Card
	 ============================================ */
  
  .yoga-day-card--closed {
	color: #ffffff;
  }
  
  /* Day Name (MONDAY) */
  .yoga-day-card--closed .yoga-day-name {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.95);
  }
  
  /* Symbol row (triangle + moon icon) */
  .yoga-day-card--closed .yoga-day-symbol-row {
	margin-top: 0.4rem;
	opacity: 0.85;
	gap: 0.4rem;
  }
  
  .yoga-day-card--closed .yoga-day-symbol-row span {
	font-size: 1rem;
  }
  
  /* Divider line */
  .yoga-day-card--closed .yoga-day-divider {
	margin: 1rem 0;
	opacity: 0.22;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  
  /* "No scheduled classes today" */
  .yoga-day-card--closed .yoga-no-class-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.95);
  }
  
  /* Description paragraph */
  .yoga-day-card--closed .yoga-no-class-description {
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 0.35rem;
  }
  
  /* Moon icon top right */
  .yoga-day-card--closed .yoga-day-moon {
	opacity: 1;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
	font-size: 1.4rem;
  }
  
  /* CTA button readability */
  .yoga-day-card--closed .btn-reserve {
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
  }

/* ============================================
	 CURRENT DAY CARD – HEADER + "TODAY" LABEL
	 ============================================ */
  
  /* Stronger, darker header for the current day */
  .yoga-day-card--today .yoga-day-name {
	color: rgba(15, 23, 42, 0.98);   /* deep slate ink */
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow:
	  0 1px 2px rgba(255, 255, 255, 0.7),
	  0 0 12px rgba(15, 23, 42, 0.2);
  }
  
  /* Add " · TODAY" after the weekday label */
  .yoga-day-card--today .yoga-day-name::after {
	content: " · TODAY";
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-left: 0.3rem;
	opacity: 0.9;
  }
  
  /* Slightly brighten the current-day card overall */
  .yoga-day-card--today {
	box-shadow:
	  0 18px 45px rgba(15, 23, 42, 0.20),
	  0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  
  /* Class Info */
  .yoga-day-classes {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
  }
  
  .yoga-class-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
  }
  
  .yoga-class-time {
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
  }
  
  .yoga-class-title {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #0f172a;
  }
  
  .yoga-class-teacher {
	font-size: 0.85rem;
	opacity: 0.7;
  }
  
  .yoga-class-description {
	font-size: 0.8rem;
	line-height: 1.5;
	opacity: 0.6;
	margin-top: 0.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
  }
  
  /* Reserve Button */
  .yoga-class-cta {
	margin-top: auto;
	padding-top: 1rem;
  }
  
  .btn-reserve {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 2px solid currentColor;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--day-color, #0f172a);
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
  }
  
  .btn-reserve:hover {
	background: var(--day-color, #0f172a);
	color: #fff;
	border-color: var(--day-color, #0f172a);
	text-decoration: none;
  }
  
  /* Chakra Day Themes */
  .day-sun {
	--day-color: #dc2626;
	background: linear-gradient(145deg, 
	  rgba(254, 242, 242, 0.95) 0%, 
	  rgba(254, 226, 226, 0.6) 100%);
  }
  
  .day-mon {
	--day-color: #ea580c;
	background: linear-gradient(145deg, 
	  rgba(255, 247, 237, 0.95) 0%, 
	  rgba(254, 235, 200, 0.6) 100%);
  }
  
  .day-tue {
	--day-color: #ca8a04;
	background: linear-gradient(145deg, 
	  rgba(254, 252, 232, 0.95) 0%, 
	  rgba(254, 249, 195, 0.6) 100%);
  }
  
  .day-wed {
	--day-color: #16a34a;
	background: linear-gradient(145deg, 
	  rgba(240, 253, 244, 0.95) 0%, 
	  rgba(220, 252, 231, 0.6) 100%);
  }
  
  .day-thu {
	--day-color: #2563eb;
	background: linear-gradient(145deg, 
	  rgba(239, 246, 255, 0.95) 0%, 
	  rgba(219, 234, 254, 0.6) 100%);
  }
  
  .day-fri {
	--day-color: #4f46e5;
	background: linear-gradient(145deg, 
	  rgba(238, 242, 255, 0.95) 0%, 
	  rgba(224, 231, 255, 0.6) 100%);
  }
  
  .day-sat {
	--day-color: #9333ea;
	background: linear-gradient(145deg, 
	  rgba(250, 245, 255, 0.95) 0%, 
	  rgba(243, 232, 255, 0.6) 100%);
  }
  
  /* Apply chakra color to accent elements */
  .yoga-day-name,
  .yoga-day-symbol,
  .yoga-day-element,
  .yoga-day-planet,
  .yoga-day-chakra,
  .yoga-day-mantra,
  .yoga-class-time {
	color: var(--day-color);
  }
  
  /* Scroll Indicator - Mobile Only */
  .scroll-indicator {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0 0.5rem;
	margin-top: -0.5rem;
  }
  
  .scroll-indicator-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 1.25rem;
	color: var(--ws-purple, #8b5cf6);
	background: rgba(139, 92, 246, 0.1);
	border-radius: 50%;
	animation: scrollPulse 2s ease-in-out infinite;
  }
  
  .scroll-indicator-text {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ws-gray-400, #9ca3af);
	opacity: 0.8;
  }
  
  /* Pulse animation with glow */
  @keyframes scrollPulse {
	0%, 100% {
	  transform: translateY(0);
	  box-shadow: 
		0 0 0 0 rgba(139, 92, 246, 0.4),
		0 0 10px rgba(139, 92, 246, 0.2);
	}
	50% {
	  transform: translateY(6px);
	  box-shadow: 
		0 0 0 8px rgba(139, 92, 246, 0),
		0 0 20px rgba(139, 92, 246, 0.4);
	}
  }
  
  /* Show only on mobile */
  @media (max-width: 768px) {
	.scroll-indicator {
	  display: flex;
	}
  }
  
  /* Hide after user scrolls (optional - requires JS) */
  .scroll-indicator.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
  }
  
 
  
  
  /* ============================================
	 EVENTS SECTION
	 Purple Monochromatic Theme
	 Add to wave-and-see.css
	 ============================================ */
  
  /* Purple Color Tokens */
  :root {
	--ws-purple-900: #1e1b4b;
	--ws-purple-800: #2e2a5e;
	--ws-purple-700: #3d3874;
	--ws-purple-600: #4c4785;
	--ws-purple-500: #6366f1;
	--ws-purple-400: #818cf8;
	--ws-purple-300: #a5b4fc;
	--ws-purple-200: #c7d2fe;
	--ws-purple-100: #e0e7ff;
	--ws-purple-50: #eef2ff;
  }
  
  /* Section Container */
  .events-section {
	background: linear-gradient(
	  180deg,
	  var(--ws-purple-900) 0%,
	  var(--ws-purple-800) 50%,
	  var(--ws-purple-900) 100%
	);
	padding: var(--space-2xl) var(--space-md);
	min-height: auto;
	position: relative;
	overflow: hidden;
  }
  
  /* Subtle texture overlay */
  .events-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: 
	  radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
	  radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
	pointer-events: none;
  }
  
  .events-section .section-content {
	position: relative;
	z-index: 1;
	max-width: 1200px;
  }
  
  /* Header */
 /* Fix alignment for Events section title + subtitle */
 .events-header {
	 text-align: center;
 }
 
 .events-header .events-title,
 .events-header .events-subtitle {
	 text-align: center;
	 margin-left: auto;
	 margin-right: auto;
	 max-width: 720px; /* optional but looks cleaner */
 }

  
  .events-title {
	color: #ffffff;
	font-size: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: var(--space-sm);
  }
  
  .events-subtitle {
	color: var(--ws-purple-200);
	opacity: 1;
  }
  
  /* Events Grid */
  .events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 1.5rem;
	margin-bottom: var(--space-xl);
  }
  
  /* Event Card */
  .event-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--ws-radius-lg);
	overflow: hidden;
	transition: 
	  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	  box-shadow 0.3s ease,
	  border-color 0.3s ease;
  }
  
  .event-card:hover {
	transform: translateY(-6px);
	box-shadow: 
	  0 20px 40px rgba(0, 0, 0, 0.3),
	  0 0 0 1px rgba(139, 92, 246, 0.3);
	border-color: rgba(139, 92, 246, 0.3);
  }
  
  /* Flyer Image */
  .event-flyer {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(
	  135deg,
	  var(--ws-purple-700) 0%,
	  var(--ws-purple-800) 100%
	);
  }
  
  .event-flyer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
  }
  
  .event-card:hover .event-flyer img {
	transform: scale(1.05);
  }
  
  .event-flyer-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
	  135deg,
	  var(--ws-purple-700) 0%,
	  var(--ws-purple-600) 100%
	);
  }
  
  .event-flyer-icon {
	font-size: 3rem;
	color: var(--ws-purple-400);
	opacity: 0.5;
  }
  
  /* Category Badge */
  .event-category-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(99, 102, 241, 0.9);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35rem 0.75rem;
	border-radius: var(--ws-radius-full);
  }
  
  /* Event Info */
  .event-info {
	padding: 1.25rem;
	display: flex;
	gap: 1rem;
  }
  
  /* Date Badge */
  .event-date-badge {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: linear-gradient(
	  135deg,
	  var(--ws-purple-500) 0%,
	  var(--ws-purple-600) 100%
	);
	border-radius: var(--ws-radius-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  }
  
  .event-month {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.9;
  }
  
  .event-day {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	margin-top: 0.1rem;
  }
  
  /* Event Details */
  .event-details {
	flex: 1;
	min-width: 0;
  }
  
  .event-title {
	font-family: var(--font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 0.5rem;
	line-height: 1.3;
  }
  
  .event-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.75rem;
  }
  
  .event-time,
  .event-location {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--ws-purple-300);
  }
  
  .event-time svg,
  .event-location svg {
	opacity: 0.7;
	flex-shrink: 0;
  }
  
  .event-description {
	font-size: 0.85rem;
	color: var(--ws-purple-200);
	line-height: 1.5;
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
  }
  
  /* Event Footer */
  .event-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .event-price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ws-purple-300);
  }
  
  /* Event Button */
  .btn-event {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-radius: var(--ws-radius-sm);
	background: linear-gradient(
	  135deg,
	  var(--ws-purple-500) 0%,
	  var(--ws-purple-400) 100%
	);
	color: #fff;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
  }
  
  .btn-event:hover {
	background: linear-gradient(
	  135deg,
	  var(--ws-purple-400) 0%,
	  var(--ws-purple-300) 100%
	);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  }
  
  .btn-event--secondary {
	background: transparent;
	border: 1px solid var(--ws-purple-400);
	color: var(--ws-purple-300);
  }
  
  .btn-event--secondary:hover {
	background: var(--ws-purple-400);
	color: #fff;
  }
  
  /* Empty State */
  .events-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-xl);
	color: var(--ws-purple-300);
  }
  
  .events-empty-icon {
	display: block;
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.5;
  }
  
  .events-empty p {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
  }
  
  .events-empty-sub {
	font-size: 0.9rem;
	opacity: 0.7;
  }
  
  /* View All Button */
  .events-cta {
	text-align: center;
  }
  
  .btn-events {
	background: transparent;
	border: 2px solid var(--ws-purple-400);
	color: #fff;
	padding: 1rem 2.5rem;
  }
  
  .btn-events:hover {
	background: var(--ws-purple-500);
	border-color: var(--ws-purple-500);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
	.events-section {
	  padding: var(--space-xl) var(--space-sm);
	}
	
	.events-grid {
	  grid-template-columns: 1fr;
	  gap: 1rem;
	}
	
	.event-flyer {
	  aspect-ratio: 16 / 9;
	}
	
	.event-info {
	  flex-direction: column;
	  gap: 0.75rem;
	}
	
	.event-date-badge {
	  width: auto;
	  height: auto;
	  flex-direction: row;
	  gap: 0.5rem;
	  padding: 0.5rem 0.75rem;
	  align-self: flex-start;
	}
	
	.event-month {
	  font-size: 0.7rem;
	}
	
	.event-day {
	  font-size: 1rem;
	}
  }
  
  /* Animation on scroll (optional) */
  @media (prefers-reduced-motion: no-preference) {
	.event-card {
	  opacity: 0;
	  transform: translateY(20px);
	  animation: eventCardIn 0.5s ease forwards;
	}
	
	.event-card:nth-child(1) { animation-delay: 0.1s; }
	.event-card:nth-child(2) { animation-delay: 0.2s; }
	.event-card:nth-child(3) { animation-delay: 0.3s; }
	.event-card:nth-child(4) { animation-delay: 0.4s; }
	.event-card:nth-child(5) { animation-delay: 0.5s; }
	.event-card:nth-child(6) { animation-delay: 0.6s; }
  }
  
  @keyframes eventCardIn {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
 /* ============================================
	EVENTS SECTION - STACKED DATE RANGE
	Replace the previous date range styles
	============================================ */
 
 /* Date Range for Exhibits - Stacked Layout */
 .event-date-range {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
 
 .event-date-arrow {
   color: var(--ws-purple-400);
   font-size: 0.9rem;
   font-weight: 300;
   opacity: 0.7;
   transform: rotate(90deg);
 }
 
 .event-date-badge--start,
 .event-date-badge--end {
   width: 56px;
   height: 50px;
 }
 
 .event-date-badge--end {
   background: linear-gradient(
	 135deg,
	 var(--ws-purple-600) 0%,
	 var(--ws-purple-700) 100%
   );
   box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
 }
 
 /* Exhibit card variant */
 .event-card--exhibit {
   border-color: rgba(139, 92, 246, 0.15);
   background: rgba(139, 92, 246, 0.03);
 }
 
 .event-card--exhibit:hover {
   border-color: rgba(139, 92, 246, 0.35);
   box-shadow: 
	 0 20px 40px rgba(0, 0, 0, 0.3),
	 0 0 0 1px rgba(139, 92, 246, 0.3),
	 0 0 30px rgba(139, 92, 246, 0.1);
 }
 
 /* Appointment Link */
 .event-appointment {
   display: flex;
   align-items: center;
 }
 
 .event-appointment-link {
   font-size: 0.8rem;
   color: var(--ws-purple-300);
   text-decoration: none;
   font-weight: 500;
   padding: 0.2rem 0;
   border-bottom: 1px dotted var(--ws-purple-400);
   transition: all 0.2s ease;
 }
 
 .event-appointment-link:hover {
   color: var(--ws-purple-200);
   border-bottom-style: solid;
   border-bottom-color: var(--ws-purple-300);
 }
 
 /* On view text styling */
 .event-card--exhibit .event-time {
   font-style: italic;
 }
 
 /* Mobile adjustments */
 @media (max-width: 768px) {
   .event-date-range {
	 flex-direction: row;
	 align-self: flex-start;
	 gap: 0.35rem;
   }
   
   .event-date-arrow {
	 transform: rotate(0deg);
	 font-size: 0.8rem;
   }
   
   .event-date-badge--start,
   .event-date-badge--end {
	 width: auto;
	 height: auto;
	 padding: 0.5rem 0.65rem;
	 flex-direction: row;
	 gap: 0.35rem;
   }
   
   .event-date-badge--start .event-month,
   .event-date-badge--end .event-month {
	 font-size: 0.65rem;
   }
   
   .event-date-badge--start .event-day,
   .event-date-badge--end .event-day {
	 font-size: 1rem;
   }
 }
  
  /* Exhibit card variant */
  .event-card--exhibit {
	border-color: rgba(139, 92, 246, 0.15);
	background: rgba(139, 92, 246, 0.03);
  }
  
  .event-card--exhibit:hover {
	border-color: rgba(139, 92, 246, 0.35);
	box-shadow: 
	  0 20px 40px rgba(0, 0, 0, 0.3),
	  0 0 0 1px rgba(139, 92, 246, 0.3),
	  0 0 30px rgba(139, 92, 246, 0.1);
  }
  
  /* Appointment Link */
  .event-appointment {
	display: flex;
	align-items: center;
	margin-left: 1.4rem;
  }
  
  .event-appointment-link {
	font-size: 0.8rem;
	color: var(--ws-purple-300);
	text-decoration: none;
	font-weight: 500;
	padding: 0.2rem 0;
	border-bottom: 1px dotted var(--ws-purple-400);
	transition: all 0.2s ease;
  }
  
  .event-appointment-link:hover {
	color: var(--ws-purple-200);
	border-bottom-style: solid;
	border-bottom-color: var(--ws-purple-300);
  }
  
  /* Mobile: Adjust date range layout */
  @media (max-width: 768px) {
	.event-date-range {
	  flex-direction: row;
	  gap: 0.4rem;
	  align-self: flex-start;
	}
	
	.event-date-badge--start,
	.event-date-badge--end {
	  width: auto;
	  height: auto;
	  padding: 0.5rem 0.65rem;
	  flex-direction: row;
	  gap: 0.35rem;
	}
	
	.event-date-badge--start .event-month,
	.event-date-badge--end .event-month {
	  font-size: 0.65rem;
	}
	
	.event-date-badge--start .event-day,
	.event-date-badge--end .event-day {
	  font-size: 1rem;
	}
	
	.event-date-arrow {
	  font-size: 0.9rem;
	}
	
	.event-appointment {
	  margin-left: 0;
	  margin-top: 0.25rem;
	}
  }
  
  /* On view text styling */
  .event-card--exhibit .event-time {
	font-style: italic;
  }
  
  /* ===============================
	 WAVE & SEE — EVENT BUTTONS
	 =============================== */
  
  /* Base button shape */
  .btn-event,
  .btn-event--secondary,
  .btn-schedule-visit {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-align: center;
	cursor: pointer;
	transition: all 0.22s ease;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
  
	/* smooth fade */
	backdrop-filter: blur(6px);
  }
  
  /* Primary event button */
  .btn-event {
	background: var(--ws-orange, #e86b32);
	color: #fff;
	box-shadow: 0 4px 18px rgba(232, 107, 50, 0.35);
  }
  
  .btn-event:hover {
	background: #ff7b3b;
	box-shadow: 0 6px 24px rgba(232, 107, 50, 0.45);
	transform: translateY(-1px);
  }
  
  /* Secondary (outlined) event button */
  .btn-event--secondary {
	background: rgba(255,255,255,0.08);
	color: var(--ws-orange, #e86b32);
	border: 2px solid rgba(232, 107, 50, 0.55);
  }
  
  .btn-event--secondary:hover {
	background: rgba(255,255,255,0.14);
	border-color: rgba(232, 107, 50, 0.85);
	transform: translateY(-1px);
  }
  
  /* Schedule a Visit — uses gradient highlight */
  .btn-schedule-visit {
	background: linear-gradient(
	  120deg,
	  rgba(255, 153, 102, 0.95),
	  rgba(255, 204, 153, 0.9)
	);
	color: #2b2b2b;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(255, 170, 120, 0.35);
  }
  
  .btn-schedule-visit:hover {
	background: linear-gradient(
	  120deg,
	  rgba(255, 163, 110, 1),
	  rgba(255, 215, 166, 1)
	);
	transform: translateY(-1px);
	box-shadow: 0 6px 22px rgba(255, 184, 130, 0.45);
  }
  
  /* Accessibility: Focus ring */
  .btn-event:focus,
  .btn-event--secondary:focus,
  .btn-schedule-visit:focus {
	outline: 2px solid var(--ws-orange, #e86b32);
	outline-offset: 3px;
  }

  
  /* ============================================
	 MEMBERSHIP SECTION
	 Uses existing Wave & See design tokens
	 Add to wave-and-see.css
	 ============================================ */
  
  /* Section Layout */
  .membership-section {
	background: var(--ws-stone);
	min-height: auto;
	padding: var(--space-2xl) var(--space-md);
  }
  
  .membership-container {
	max-width: 800px;
  }
  
  .membership-header {
	text-align: center;
	margin-bottom: var(--space-lg);
  }
  
  .membership-header .section-title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: var(--space-sm);
  }
  
  .membership-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
  }
  
  /* Message Content */
  .membership-message {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
  }
  
  .membership-message p {
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--ws-gray-600);
	margin-bottom: 1.25rem;
  }
  
  .membership-message strong {
	color: var(--ws-ink);
	font-weight: 600;
  }
  
  /* Coming Soon Badge */
  .membership-coming-soon {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: #fff;
	padding: 0.875rem 1.25rem;
	border-radius: var(--ws-radius);
	box-shadow: var(--ws-shadow-sm);
	margin: 0.5rem 0 1.25rem;
	flex-wrap: wrap;
	justify-content: center;
  }
  
  .coming-soon-badge {
	background: var(--ws-rainbow);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.65rem;
	border-radius: var(--ws-radius-full);
	white-space: nowrap;
  }
  
  .membership-coming-soon > span:last-child {
	font-size: 0.95rem;
	color: var(--ws-gray-600);
  }
  
  /* Action Card */
  .membership-action-card {
	background: #fff;
	border-radius: var(--ws-radius-lg);
	padding: var(--space-lg);
	box-shadow: var(--ws-shadow);
	text-align: center;
  }
  
  /* Countdown Animation */
  .membership-countdown-area {
	animation: membershipFadeIn 0.5s ease;
  }
  
  .countdown-message {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-style: italic;
	color: var(--ws-ink);
	margin-bottom: 1.5rem;
  }
  
  .countdown-timer {
	width: 90px;
	height: 90px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: var(--ws-gray-100);
	border: 3px solid transparent;
	background-image: linear-gradient(#fff, #fff), var(--ws-rainbow);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: countdownPulse 2s ease-in-out infinite;
  }
  
  #countdown-number {
	font-family: var(--font-serif);
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ws-ink);
  }
  
  .countdown-subtext {
	color: var(--ws-gray-500);
	font-size: 0.9rem;
  }
  
  @keyframes countdownPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
  }
  
  @keyframes membershipFadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
  }
  
  /* Donate Area */
  .membership-donate-area {
	animation: membershipFadeIn 0.5s ease;
  }
  
  .givebutter-widget-container {
	margin-bottom: var(--space-md);
  }
  
  .membership-cta {
	font-size: 1.1rem;
	padding: 1.1rem 2.5rem;
  }
  
  .donate-note {
	color: var(--ws-gray-400);
	font-size: 0.8rem;
	margin-top: 0.75rem;
  }
  
  /* Benefits List */
  .membership-benefits {
	padding-top: var(--space-md);
	border-top: 1px solid var(--ws-border);
  }
  
  .membership-benefits h4 {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	color: var(--ws-ink);
	margin-bottom: 1rem;
  }
  
  .membership-benefits ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.5rem;
  }
  
  .membership-benefits li {
	color: var(--ws-gray-600);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
  }
  
  .membership-benefits li::before {
	content: '✦';
	font-size: 0.5rem;
	background: var(--ws-rainbow);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
  }
  
  /* Responsive */
  @media (max-width: 640px) {
	.membership-section {
	  padding: var(--space-xl) var(--space-sm);
	}
	
	.membership-action-card {
	  padding: var(--space-md);
	}
	
	.membership-coming-soon {
	  flex-direction: column;
	  gap: 0.5rem;
	}
	
	.membership-benefits ul {
	  flex-direction: column;
	  align-items: center;
	}
	
	.countdown-message {
	  font-size: 1.25rem;
	}
	
	.countdown-timer {
	  width: 80px;
	  height: 80px;
	}
	
	#countdown-number {
	  font-size: 2rem;
	}
  }
  
  /* Mobile Styles go here for each section not sure if we should move these below each section or not but we'll see */
  
  /* Mobile adjustments */
  @media (max-width: 640px) {
	.yoga-schedule-grid {
	  grid-template-columns: 1fr;
	  gap: 1rem;
	}
  
	.yoga-day-card {
	  min-height: auto;
	  padding: 1.25rem;
	}
  }

   
   @media (max-width: 640px) {
	 .hero {
	   padding-top: 5rem;
	 }
   
	 .hero-title-strip {
	   top: 4rem;
	   padding-inline: 1.5rem;
	 }
   
	 .hero-heading {
	   font-size: clamp(1.5rem, 4.4vw, 2rem);
	   letter-spacing: 0.16em;
	 }
   
	 .hero-content {
	   padding-top: 6.5rem;
	 }
   }


   
   /* Small tweak: keep buttons comfy on mobile */
   @media (max-width: 640px) {
	 .hero {
	   padding-top: 5rem;
	 }
   
	 .hero-heading {
	   font-size: clamp(2.5rem, 9vw, 3rem);
	   letter-spacing: 0.06em;
	 }
   
	 .hero-actions {
	   gap: 1rem;
	 }
   }

/* 
=======================================
TOOLS AND SYSTEMS
=======================================
*/

/* Truncation System */
.truncate-wrap {
  position: relative;
}

.truncate-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  transition: all 0.3s ease;
}

/* Line clamp variants */
.truncate-text[data-lines="1"],
.truncate-wrap[data-lines="1"] .truncate-text {
  -webkit-line-clamp: 1;
}

.truncate-text[data-lines="2"],
.truncate-wrap[data-lines="2"] .truncate-text,
.truncate-text:not([data-lines]) {
  -webkit-line-clamp: 2;
}

.truncate-text[data-lines="3"],
.truncate-wrap[data-lines="3"] .truncate-text {
  -webkit-line-clamp: 3;
}

.truncate-text[data-lines="4"],
.truncate-wrap[data-lines="4"] .truncate-text {
  -webkit-line-clamp: 4;
}

/* Expanded state */
.truncate-wrap.is-expanded .truncate-text {
  -webkit-line-clamp: unset;
  display: block;
}

/* Toggle button */
.truncate-toggle {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ws-purple-400, #818cf8);
  cursor: pointer;
  transition: color 0.2s ease;
}

.truncate-toggle:hover {
  color: var(--ws-purple-300, #a5b4fc);
  text-decoration: underline;
}

/* Hide toggle when text isn't actually truncated */
.truncate-toggle.is-hidden {
  display: none;
}

/* Dark background variant (for events section) */
.events-section .truncate-toggle {
  color: var(--ws-purple-300, #a5b4fc);
}

.events-section .truncate-toggle:hover {
  color: var(--ws-purple-200, #c7d2fe);
}

/* Light background variant (for yoga cards) */
.yoga-day-card .truncate-toggle {
  color: var(--day-color, #6366f1);
}

.yoga-day-card .truncate-toggle:hover {
  color: var(--day-color, #6366f1);
  opacity: 0.8;
}

 /* ============================================
	 SCHEDULE A VISIT MODAL
	 add to wave and see css under systems and such
	 ============================================ */
  
  /* Modal Overlay */
  .visit-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	visibility: hidden;
	opacity: 0;
	transition: 
	  visibility 0s linear 0.3s,
	  opacity 0.3s ease;
  }
  
  .visit-modal[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transition: 
	  visibility 0s linear 0s,
	  opacity 0.3s ease;
  }
  
  /* Backdrop */
  .visit-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
  }
  
  /* Container */
  .visit-modal-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateY(20px) scale(0.98);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .visit-modal[aria-hidden="false"] .visit-modal-container {
	transform: translateY(0) scale(1);
  }
  
  /* Content Card */
  .visit-modal-content {
	background: #fff;
	border-radius: var(--ws-radius-lg, 16px);
	padding: 2rem;
	box-shadow: 
	  0 25px 50px rgba(0, 0, 0, 0.25),
	  0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  
  /* Close Button */
  .visit-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--ws-gray-100, #f3f4f6);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ws-gray-500, #6b7280);
	transition: all 0.2s ease;
  }
  
  .visit-modal-close:hover {
	background: var(--ws-gray-200, #e5e7eb);
	color: var(--ws-ink, #0b0b0b);
  }
  
  /* Header */
  .visit-modal-header {
	text-align: center;
	margin-bottom: 1.5rem;
	padding-right: 2rem; /* Space for close button */
  }
  
  .visit-modal-header h2 {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ws-ink, #0b0b0b);
	margin-bottom: 0.5rem;
  }
  
  .visit-modal-header p {
	font-size: 0.95rem;
	color: var(--ws-gray-500, #6b7280);
	line-height: 1.5;
  }
  
  /* Form Styles */
  .visit-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
  }
  
  .visit-form-row {
	display: flex;
	gap: 1rem;
  }
  
  .visit-form-row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
  }
  
  @media (max-width: 480px) {
	.visit-form-row--2col {
	  grid-template-columns: 1fr;
	}
  }
  
  .visit-form-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
  }
  
  .visit-form-field label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ws-gray-600, #4b5563);
	text-transform: uppercase;
	letter-spacing: 0.05em;
  }
  
  .visit-form-field .required {
	color: var(--ws-red, #ef4444);
  }
  
  .visit-form-field .optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.6;
  }
  
  .visit-form-field input,
  .visit-form-field select,
  .visit-form-field textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-family: var(--font-sans);
	color: var(--ws-ink, #0b0b0b);
	background: var(--ws-gray-50, #fafafa);
	border: 1.5px solid var(--ws-gray-200, #e5e7eb);
	border-radius: var(--ws-radius-sm, 8px);
	transition: all 0.2s ease;
  }
  
  .visit-form-field input:focus,
  .visit-form-field select:focus,
  .visit-form-field textarea:focus {
	outline: none;
	border-color: var(--ws-purple-400, #818cf8);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
  }
  
  .visit-form-field input::placeholder,
  .visit-form-field textarea::placeholder {
	color: var(--ws-gray-400, #9ca3af);
  }
  
  .visit-form-field select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
  }
  
  .visit-form-field textarea {
	resize: vertical;
	min-height: 80px;
  }
  
  /* Honeypot (hidden) */
  .visit-form-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
  }
  
  /* Submit Button */
  .visit-form-actions {
	margin-top: 0.5rem;
  }
  
  .visit-form-submit {
	width: 100%;
	padding: 1rem 2rem;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
  }
  
  .visit-form-submit .spinner {
	animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
	to { transform: rotate(360deg); }
  }
  
  /* Success State */
  .visit-form-success,
  .visit-form-error {
	text-align: center;
	padding: 2rem 1rem;
  }
  
  .success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	background: linear-gradient(135deg, var(--ws-green, #22c55e), #16a34a);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: #fff;
  }
  
  .error-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	background: linear-gradient(135deg, var(--ws-red, #ef4444), #dc2626);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
  }
  
  .visit-form-success h3,
  .visit-form-error h3 {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--ws-ink, #0b0b0b);
  }
  
  .visit-form-success p,
  .visit-form-error p {
	color: var(--ws-gray-500, #6b7280);
	margin-bottom: 1.5rem;
  }
  
  .visit-form-error a {
	color: var(--ws-purple-500, #6366f1);
  }
  
  /* Mobile Adjustments */
  @media (max-width: 640px) {
	.visit-modal-content {
	  padding: 1.5rem;
	}
	
	.visit-modal-header h2 {
	  font-size: 1.5rem;
	}
	
	.visit-modal-close {
	  top: 0.75rem;
	  right: 0.75rem;
	  width: 36px;
	  height: 36px;
	}
  }
  
 .newsletter-banner {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1001; /* Above header */
   background: linear-gradient(
	 90deg,
	 var(--ws-purple-900, #1e1b4b) 0%,
	 var(--ws-purple-800, #2e2a5e) 50%,
	 var(--ws-purple-900, #1e1b4b) 100%
   );
   transform: translateY(0);
   transition: transform 0.3s ease;
 }
 
 .newsletter-banner.is-hidden {
   transform: translateY(-100%);
 }
 
 .newsletter-banner-inner {
   max-width: var(--container-wide, 1400px);
   margin: 0 auto;
   padding: 0.65rem 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
 }
 
 .newsletter-banner-text {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: #fff;
   font-size: 0.85rem;
   font-weight: 500;
   margin: 0;
 }
 
 .newsletter-banner-icon {
   background: var(--ws-rainbow);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: 0.9rem;
 }
 
 .newsletter-banner-btn {
   padding: 0.4rem 1rem;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--ws-purple-900, #1e1b4b);
   background: #fff;
   border: none;
   border-radius: var(--ws-radius-full, 9999px);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .newsletter-banner-btn:hover {
   background: var(--ws-purple-100, #e0e7ff);
   transform: translateY(-1px);
 }
 
 .newsletter-banner-close {
   padding: 0.35rem;
   background: transparent;
   border: none;
   color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all 0.2s ease;
   margin-left: 0.5rem;
 }
 
 .newsletter-banner-close:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.1);
 }
 
 /* Adjust header position when banner is visible */
 body.has-newsletter-banner .ws-header {
   top: 42px; /* Height of banner */
 }
 
 body.has-newsletter-banner .ws-menu {
   top: calc(var(--header-height, 72px) + 42px);
 }
 
 /* Mobile adjustments */
 @media (max-width: 640px) {
   .newsletter-banner-inner {
	 padding: 0.5rem 0.75rem;
	 gap: 0.5rem;
   }
   
   .newsletter-banner-text span:last-child {
	 display: none; /* Hide text, keep icon */
   }
   
   .newsletter-banner-text::after {
	 content: "Get updates";
	 font-size: 0.8rem;
   }
   
   .newsletter-banner-btn {
	 padding: 0.35rem 0.75rem;
	 font-size: 0.7rem;
   }
   
   body.has-newsletter-banner .ws-header {
	 top: 36px;
   }
   
   body.has-newsletter-banner .ws-menu {
	 top: calc(var(--header-height, 72px) + 36px);
   }
 }
 
 
 /* ============================================
	NEWSLETTER MODAL
	============================================ */
 
 .newsletter-modal {
   position: fixed;
   inset: 0;
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1rem;
   visibility: hidden;
   opacity: 0;
   transition: 
	 visibility 0s linear 0.3s,
	 opacity 0.3s ease;
 }
 
 .newsletter-modal[aria-hidden="false"] {
   visibility: visible;
   opacity: 1;
   transition: 
	 visibility 0s linear 0s,
	 opacity 0.3s ease;
 }
 
 .newsletter-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
 
 .newsletter-modal-container {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 440px;
   transform: translateY(20px) scale(0.98);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .newsletter-modal[aria-hidden="false"] .newsletter-modal-container {
   transform: translateY(0) scale(1);
 }
 
 .newsletter-modal-content {
   background: #fff;
   border-radius: var(--ws-radius-lg, 16px);
   padding: 2rem;
   box-shadow: 
	 0 25px 50px rgba(0, 0, 0, 0.25),
	 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .newsletter-modal-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 40px;
   height: 40px;
   border: none;
   background: var(--ws-gray-100, #f3f4f6);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ws-gray-500, #6b7280);
   transition: all 0.2s ease;
 }
 
 .newsletter-modal-close:hover {
   background: var(--ws-gray-200, #e5e7eb);
   color: var(--ws-ink, #0b0b0b);
 }
 
 .newsletter-modal-header {
   text-align: center;
   margin-bottom: 1.5rem;
 }
 
 .newsletter-modal-icon {
   display: block;
   font-size: 2rem;
   margin-bottom: 0.75rem;
   background: var(--ws-rainbow);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .newsletter-modal-header h2 {
   font-family: var(--font-serif, Georgia, serif);
   font-size: 1.75rem;
   font-weight: 700;
   color: var(--ws-ink, #0b0b0b);
   margin-bottom: 0.5rem;
 }
 
 .newsletter-modal-header p {
   font-size: 0.95rem;
   color: var(--ws-gray-500, #6b7280);
   line-height: 1.5;
 }
 
 /* Newsletter Form */
 .newsletter-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
 .newsletter-form-row {
   display: flex;
   gap: 1rem;
 }
 
 .newsletter-form-row--2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
 }
 
 @media (max-width: 480px) {
   .newsletter-form-row--2col {
	 grid-template-columns: 1fr;
   }
 }
 
 .newsletter-form-field {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
 }
 
 .newsletter-form-field label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--ws-gray-600, #4b5563);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .newsletter-form-field .required {
   color: var(--ws-red, #ef4444);
 }
 
 .newsletter-form-field input {
   width: 100%;
   padding: 0.75rem 1rem;
   font-size: 1rem;
   font-family: var(--font-sans);
   color: var(--ws-ink, #0b0b0b);
   background: var(--ws-gray-50, #fafafa);
   border: 1.5px solid var(--ws-gray-200, #e5e7eb);
   border-radius: var(--ws-radius-sm, 8px);
   transition: all 0.2s ease;
 }
 
 .newsletter-form-field input:focus {
   outline: none;
   border-color: var(--ws-purple-400, #818cf8);
   background: #fff;
   box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
 }
 
 .newsletter-form-field input::placeholder {
   color: var(--ws-gray-400, #9ca3af);
 }
 
 .newsletter-form-actions {
   margin-top: 0.5rem;
 }
 
 .newsletter-form-submit {
   width: 100%;
   padding: 1rem 2rem;
   font-size: 1rem;
 }
 
 .newsletter-form-note {
   text-align: center;
   font-size: 0.75rem;
   color: var(--ws-gray-400, #9ca3af);
   margin-top: 0.5rem;
 }
 
 /* Mobile */
 @media (max-width: 640px) {
   .newsletter-modal-content {
	 padding: 1.5rem;
   }
   
   .newsletter-modal-header h2 {
	 font-size: 1.5rem;
   }
 }
 
 /* Prevent body scroll when modal open */
 body.newsletter-modal-open {
   overflow: hidden;
 }
  
  /* Prevent body scroll when modal is open */
  body.visit-modal-open {
	overflow: hidden;
  }
  
/* ============================================
	 GLISTENING DAY TITLE — ASTRAL LIGHT SOURCE
	 Webby-worthy text effect for yoga schedule
	 ============================================ */
  
  /* The glowing title container */
  .yoga-day-card--today .yoga-day-name {
	position: relative;
	display: inline-block;
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	
	/* Base state — subtle glow */
	text-shadow:
	  0 0 10px rgba(255, 255, 255, 0.3),
	  0 0 20px rgba(255, 255, 255, 0.2);
	
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* When activated (in viewport center) */
  .yoga-day-card--today.is-glistening .yoga-day-name {
	color: #fff;
	
	/* Multi-layer glow — light source effect */
	text-shadow:
	  /* Inner white core */
	  0 0 2px #fff,
	  0 0 4px #fff,
	  /* Mid glow — warm */
	  0 0 10px rgba(255, 240, 220, 0.9),
	  0 0 20px rgba(255, 220, 180, 0.7),
	  /* Outer glow — iridescent */
	  0 0 35px rgba(255, 180, 120, 0.5),
	  0 0 50px rgba(255, 150, 200, 0.4),
	  0 0 70px rgba(180, 140, 255, 0.3),
	  /* Far reach — subtle color */
	  0 0 100px rgba(100, 200, 255, 0.2);
	
	/* Slight scale for "energy" feel */
	transform: scale(1.02);
  }
  
  /* Shimmer overlay — sweeping light effect */
  .yoga-day-card--today .yoga-day-name::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	
	/* Gradient mask for shimmer */
	background: linear-gradient(
	  120deg,
	  transparent 0%,
	  transparent 35%,
	  rgba(255, 255, 255, 0.9) 50%,
	  transparent 65%,
	  transparent 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	
	/* Hidden by default */
	opacity: 0;
	transition: opacity 0.3s ease;
  }
  
  /* Activate shimmer sweep */
  .yoga-day-card--today.is-glistening .yoga-day-name::before {
	opacity: 1;
	animation: shimmerSweep 2.5s ease-in-out infinite;
	animation-delay: 0.5s;
  }
  
  @keyframes shimmerSweep {
	0% {
	  background-position: 100% 0;
	}
	40%, 100% {
	  background-position: -100% 0;
	}
  }
  
  /* Light rays emanating from text */
  .yoga-day-card--today .yoga-day-name::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 200%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	
	/* Radial light burst */
	background: radial-gradient(
	  ellipse at center,
	  rgba(255, 255, 255, 0.15) 0%,
	  rgba(255, 220, 180, 0.1) 20%,
	  rgba(180, 140, 255, 0.05) 40%,
	  transparent 70%
	);
	
	opacity: 0;
	transition: opacity 0.6s ease;
	z-index: -1;
  }
  
  .yoga-day-card--today.is-glistening .yoga-day-name::after {
	opacity: 1;
	animation: lightPulse 3s ease-in-out infinite;
  }
  
  @keyframes lightPulse {
	0%, 100% {
	  transform: translate(-50%, -50%) scale(1);
	  opacity: 0.6;
	}
	50% {
	  transform: translate(-50%, -50%) scale(1.15);
	  opacity: 1;
	}
  }
  
  /* Particle sparkles around the text */
  .yoga-day-card--today .yoga-day-header {
	position: relative;
  }
  
  .glisten-particles {
	position: absolute;
	inset: -20px;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	transition: opacity 0.5s ease;
  }
  
  .yoga-day-card--today.is-glistening .glisten-particles {
	opacity: 1;
  }
  
  .glisten-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 
	  0 0 6px 2px rgba(255, 255, 255, 0.8),
	  0 0 12px 4px rgba(255, 200, 150, 0.5);
	animation: particleFloat 3s ease-in-out infinite;
  }
  
  .glisten-particle:nth-child(1) {
	top: 10%;
	left: 15%;
	animation-delay: 0s;
	animation-duration: 2.8s;
  }
  
  .glisten-particle:nth-child(2) {
	top: 20%;
	right: 20%;
	animation-delay: 0.5s;
	animation-duration: 3.2s;
  }
  
  .glisten-particle:nth-child(3) {
	bottom: 30%;
	left: 25%;
	animation-delay: 1s;
	animation-duration: 2.5s;
  }
  
  .glisten-particle:nth-child(4) {
	bottom: 15%;
	right: 15%;
	animation-delay: 1.5s;
	animation-duration: 3s;
  }
  
  .glisten-particle:nth-child(5) {
	top: 50%;
	left: 5%;
	animation-delay: 0.8s;
	animation-duration: 2.7s;
  }
  
  .glisten-particle:nth-child(6) {
	top: 40%;
	right: 8%;
	animation-delay: 1.2s;
	animation-duration: 3.1s;
  }
  
  @keyframes particleFloat {
	0%, 100% {
	  transform: translateY(0) scale(1);
	  opacity: 0.4;
	}
	50% {
	  transform: translateY(-8px) scale(1.3);
	  opacity: 1;
	}
  }
  
  /* Rainbow edge highlight on the card itself */
  .yoga-day-card--today.is-glistening {
	box-shadow:
	  0 0 20px rgba(255, 255, 255, 0.2),
	  0 0 40px rgba(255, 180, 120, 0.15),
	  0 0 60px rgba(180, 140, 255, 0.1),
	  0 20px 50px rgba(15, 23, 42, 0.25);
  }
  
  /* "· TODAY" label gets extra sparkle */
  .yoga-day-card--today.is-glistening .yoga-day-name::after {
	content: none; /* We're using ::after for light rays, so TODAY comes from CSS */
  }
  
  /* Intensify the iridescent border glow */
  .yoga-day-card--today.is-glistening::before {
	opacity: 0.5;
	filter: blur(18px);
	animation: wsIridescentGlow 4s ease-in-out infinite alternate;
  }
  
  /* Mobile: slightly reduce effect intensity */
  @media (max-width: 768px) {
	.yoga-day-card--today.is-glistening .yoga-day-name {
	  text-shadow:
		0 0 2px #fff,
		0 0 8px rgba(255, 240, 220, 0.8),
		0 0 20px rgba(255, 180, 120, 0.4),
		0 0 35px rgba(180, 140, 255, 0.3);
	}
	
	.glisten-particle {
	  width: 3px;
	  height: 3px;
	}
  }
  
  /* Reduced motion: disable animations but keep glow */
  @media (prefers-reduced-motion: reduce) {
	.yoga-day-card--today.is-glistening .yoga-day-name::before,
	.yoga-day-card--today.is-glistening .yoga-day-name::after,
	.glisten-particle {
	  animation: none;
	}
	
	.yoga-day-card--today.is-glistening .yoga-day-name::before {
	  opacity: 0.5;
	  background-position: 50% 0;
	}
  }
  /* ============================================
	 COSMIC UNIVERSE BACKGROUND
	 Subtle starfield + gentle nebula for dark purple sections
	 Apply via .ws-cosmic-bg class
	 ============================================ */
  
  .ws-cosmic-bg {
	position: relative;
	overflow: hidden;
  }
  
  /* Base gradient — keep your existing purple gradient */
  .ws-cosmic-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	
	/* Deep space gradient */
	background: 
	  /* Subtle nebula clouds */
	  radial-gradient(
		ellipse 80% 50% at 20% 30%,
		rgba(99, 102, 241, 0.08) 0%,
		transparent 50%
	  ),
	  radial-gradient(
		ellipse 60% 40% at 75% 70%,
		rgba(139, 92, 246, 0.06) 0%,
		transparent 45%
	  ),
	  radial-gradient(
		ellipse 50% 60% at 50% 50%,
		rgba(88, 28, 135, 0.05) 0%,
		transparent 55%
	  );
	
	/* Slow drift animation */
	animation: nebulaDrift 60s ease-in-out infinite alternate;
	pointer-events: none;
  }
  
  @keyframes nebulaDrift {
	0% {
	  transform: translateX(0) translateY(0) scale(1);
	  opacity: 0.7;
	}
	50% {
	  transform: translateX(2%) translateY(-1%) scale(1.02);
	  opacity: 0.9;
	}
	100% {
	  transform: translateX(-1%) translateY(1%) scale(1);
	  opacity: 0.8;
	}
  }
  
  /* Starfield layer */
  .ws-cosmic-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	
	/* Stars via radial gradients — tiny white dots */
	background-image:
	  /* Layer 1: Tiny distant stars */
	  radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4) 50%, transparent 50%),
	  radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.3) 50%, transparent 50%),
	  radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.35) 50%, transparent 50%),
	  radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.25) 50%, transparent 50%),
	  radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.4) 50%, transparent 50%),
	  radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.3) 50%, transparent 50%),
	  radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.35) 50%, transparent 50%),
	  radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.25) 50%, transparent 50%),
	  radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,0.4) 50%, transparent 50%),
	  radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.3) 50%, transparent 50%),
	  
	  /* Layer 2: Slightly larger stars */
	  radial-gradient(1.5px 1.5px at 5% 50%, rgba(255,255,255,0.5) 50%, transparent 50%),
	  radial-gradient(1.5px 1.5px at 35% 25%, rgba(255,255,255,0.45) 50%, transparent 50%),
	  radial-gradient(1.5px 1.5px at 65% 60%, rgba(255,255,255,0.5) 50%, transparent 50%),
	  radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,0.4) 50%, transparent 50%),
	  radial-gradient(1.5px 1.5px at 20% 90%, rgba(255,255,255,0.45) 50%, transparent 50%),
	  radial-gradient(1.5px 1.5px at 95% 15%, rgba(255,255,255,0.5) 50%, transparent 50%),
	  
	  /* Layer 3: A few brighter stars */
	  radial-gradient(2px 2px at 12% 40%, rgba(255,255,255,0.6) 50%, transparent 50%),
	  radial-gradient(2px 2px at 48% 80%, rgba(255,255,255,0.55) 50%, transparent 50%),
	  radial-gradient(2px 2px at 78% 30%, rgba(255,255,255,0.6) 50%, transparent 50%),
	  radial-gradient(2px 2px at 92% 70%, rgba(255,255,255,0.5) 50%, transparent 50%);
	
	background-size: 100% 100%;
	opacity: 0.6;
  }
  
  /* Twinkling stars — separate element for animation */
  .cosmic-twinkle {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
  }
  
  .cosmic-star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: starTwinkle var(--twinkle-duration, 4s) ease-in-out infinite;
	animation-delay: var(--twinkle-delay, 0s);
  }
  
  /* Star positions — scattered across the section */
  .cosmic-star:nth-child(1) { top: 8%; left: 12%; --twinkle-duration: 3.5s; --twinkle-delay: 0s; }
  .cosmic-star:nth-child(2) { top: 15%; left: 45%; --twinkle-duration: 4.2s; --twinkle-delay: 1.2s; }
  .cosmic-star:nth-child(3) { top: 22%; left: 78%; --twinkle-duration: 3.8s; --twinkle-delay: 0.5s; }
  .cosmic-star:nth-child(4) { top: 35%; left: 25%; --twinkle-duration: 4.5s; --twinkle-delay: 2s; }
  .cosmic-star:nth-child(5) { top: 42%; left: 88%; --twinkle-duration: 3.2s; --twinkle-delay: 0.8s; }
  .cosmic-star:nth-child(6) { top: 55%; left: 8%; --twinkle-duration: 4s; --twinkle-delay: 1.5s; }
  .cosmic-star:nth-child(7) { top: 60%; left: 55%; --twinkle-duration: 3.6s; --twinkle-delay: 2.5s; }
  .cosmic-star:nth-child(8) { top: 70%; left: 35%; --twinkle-duration: 4.3s; --twinkle-delay: 0.3s; }
  .cosmic-star:nth-child(9) { top: 78%; left: 72%; --twinkle-duration: 3.9s; --twinkle-delay: 1.8s; }
  .cosmic-star:nth-child(10) { top: 85%; left: 18%; --twinkle-duration: 4.1s; --twinkle-delay: 1s; }
  .cosmic-star:nth-child(11) { top: 92%; left: 60%; --twinkle-duration: 3.4s; --twinkle-delay: 2.2s; }
  .cosmic-star:nth-child(12) { top: 28%; left: 62%; --twinkle-duration: 4.4s; --twinkle-delay: 0.7s; }
  
  /* Brighter accent stars */
  .cosmic-star--bright {
	width: 3px;
	height: 3px;
	box-shadow: 
	  0 0 3px 1px rgba(255, 255, 255, 0.6),
	  0 0 8px 2px rgba(200, 180, 255, 0.3);
  }
  
  .cosmic-star--bright:nth-child(13) { top: 18%; left: 32%; --twinkle-duration: 5s; --twinkle-delay: 0.4s; }
  .cosmic-star--bright:nth-child(14) { top: 48%; left: 70%; --twinkle-duration: 5.5s; --twinkle-delay: 1.6s; }
  .cosmic-star--bright:nth-child(15) { top: 75%; left: 50%; --twinkle-duration: 4.8s; --twinkle-delay: 2.8s; }
  
  @keyframes starTwinkle {
	0%, 100% {
	  opacity: 0;
	  transform: scale(0.8);
	}
	15%, 85% {
	  opacity: 0.15;
	  transform: scale(1);
	}
	50% {
	  opacity: 0.7;
	  transform: scale(1.2);
	}
  }
  
  /* Shooting star — very rare, subtle */
  .cosmic-shooting-star {
	position: absolute;
	width: 80px;
	height: 1px;
	background: linear-gradient(
	  90deg,
	  transparent 0%,
	  rgba(255, 255, 255, 0.1) 20%,
	  rgba(255, 255, 255, 0.6) 50%,
	  rgba(255, 255, 255, 0.8) 80%,
	  #fff 100%
	);
	opacity: 0;
	transform: rotate(-35deg);
	animation: shootingStar 12s ease-in-out infinite;
	animation-delay: 8s; /* Start after 8 seconds */
	pointer-events: none;
	z-index: 3;
  }
  
  .cosmic-shooting-star:nth-child(1) {
	top: 20%;
	left: 70%;
	animation-delay: 8s;
	animation-duration: 15s;
  }
  
  .cosmic-shooting-star:nth-child(2) {
	top: 60%;
	left: 30%;
	animation-delay: 20s;
	animation-duration: 18s;
	transform: rotate(-40deg);
  }
  
  @keyframes shootingStar {
	0%, 95%, 100% {
	  opacity: 0;
	  transform: rotate(-35deg) translateX(0);
	}
	96% {
	  opacity: 0;
	  transform: rotate(-35deg) translateX(0);
	}
	97% {
	  opacity: 0.8;
	}
	98% {
	  opacity: 0.6;
	  transform: rotate(-35deg) translateX(-150px);
	}
	99% {
	  opacity: 0;
	  transform: rotate(-35deg) translateX(-250px);
	}
  }
  
  /* Make sure section content stays above cosmic effects */
  .ws-cosmic-bg > * {
	position: relative;
	z-index: 10;
  }
  
  .ws-cosmic-bg > .cosmic-twinkle,
  .ws-cosmic-bg > .cosmic-shooting-star {
	z-index: 2;
  }
  
  /* Reduced motion: just show static stars, no animation */
  @media (prefers-reduced-motion: reduce) {
	.ws-cosmic-bg::before {
	  animation: none;
	}
	
	.cosmic-star {
	  animation: none;
	  opacity: 0.3;
	}
	
	.cosmic-star--bright {
	  opacity: 0.5;
	}
	
	.cosmic-shooting-star {
	  display: none;
	}
  }
  
  /* ============================================
	 NEWSLETTER BANNER — Subtle star version
	 Lighter effect for the thin banner
	 ============================================ */
  
  .newsletter-banner.ws-cosmic-bg::after {
	opacity: 0.3; /* Dimmer stars for banner */
  }
  
  .newsletter-banner .cosmic-twinkle {
	display: none; /* No twinkling in small banner */
  }
  
  .newsletter-banner .cosmic-shooting-star {
	display: none; /* No shooting stars in banner */
  }
  
  /* ============================================
	 RESIDENT ARTISTS SECTION
	 Add to wave-and-see.css
	 ============================================ */
  
  /* Section Container */
  .artists-section {
	background: var(--ws-stone, #fafaf9);
	padding: var(--space-2xl) var(--space-md);
	min-height: auto;
  }
  
  .artists-section .section-content {
	max-width: var(--container-wide, 1400px);
  }
  
  /* Header */
  .artists-header, .section-header {
	text-align: center;
	margin-bottom: var(--space-xl);
  }
  
  .artists-header .section-title, .section-header .section-title {
	margin-bottom: var(--space-sm);
  }
  
  /* Artists Grid — Larger cards */
  .artists-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
  }
  
  /* Artist Card */
  .artist-card {
	position: relative;
	border-radius: var(--ws-radius-lg, 16px);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	min-height: 400px;
	width: 100%;
  }
  
  .artist-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	cursor: pointer;
	background: transparent;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
  }
  
  /* Background Image */
  .artist-card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
  }
  
  .artist-card-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .artist-card:hover .artist-card-bg img {
	transform: scale(1.08);
  }
  
  /* Background Video */
  .artist-card-bg video.artist-card-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit; /* matches card rounding */
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
	
  .artist-card:hover .artist-card-bg video.artist-card-video {
	transform: scale(1.08);
  }

  
  /* Gradient Overlay */
  .artist-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
	  to top,
	  rgba(15, 23, 42, 0.95) 0%,
	  rgba(15, 23, 42, 0.6) 40%,
	  rgba(15, 23, 42, 0.2) 70%,
	  transparent 100%
	);
	transition: opacity 0.3s ease;
  }
  
  .artist-card:hover .artist-card-overlay {
	background: linear-gradient(
	  to top,
	  rgba(15, 23, 42, 0.98) 0%,
	  rgba(15, 23, 42, 0.7) 50%,
	  rgba(15, 23, 42, 0.3) 100%
	);
  }
  
  /* Content */
  .artist-card-content {
	position: relative;
	z-index: 2;
	padding: 2rem;
	color: #fff;
  }
  
  .artist-card-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1rem;
	border: 3px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  
  .artist-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .artist-card-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	line-height: 1.2;
  }
  
  .artist-card-practice {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ws-purple-300, #a5b4fc);
	margin-bottom: 0.25rem;
  }
  
  .artist-card-role {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
  }
  
  /* ARTIST CARD CTA View Profile - Top Right Pill */
  .artist-card-cta {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ws-radius-full, 9999px);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0;
	transform: translateY(-8px);
	transition: all 0.3s ease;
  }
  
  .artist-card:hover .artist-card-cta {
	opacity: 1;
	transform: translateY(0);
  }
  
  .artist-card-cta svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
  }
  
  .artist-card:hover .artist-card-cta svg {
	transform: translateX(3px);
  }
  
  /* Card hover lift */
  .artist-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 
	  0 10px 30px rgba(0, 0, 0, 0.1),
	  0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  
  .artist-card:hover {
	transform: translateY(-8px);
	box-shadow: 
	  0 25px 50px rgba(0, 0, 0, 0.2),
	  0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  
  
  /* ============================================
	 ARTIST DETAIL OVERLAY
	 Full-screen profile with video background
	 ============================================ */
  
  .artist-detail-shell {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: 
	  visibility 0s linear 0.4s,
	  opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .artist-detail-shell.is-open {
	visibility: visible;
	opacity: 1;
	transition: 
	  visibility 0s linear 0s,
	  opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Prevent body scroll */
  body.artist-overlay-open {
	overflow: hidden;
  }
  
  /* Individual Artist Panel */
  .artist-detail {
	display: none;
	position: absolute;
	inset: 0;
  }
  
  .artist-detail.is-active {
	display: block;
  }
  
  /* Video/Image Background */
  .artist-detail-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
  }
  
  .artist-detail-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .artist-detail-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
  }
  
  .artist-detail-image--blur {
	filter: blur(20px);
	transform: scale(1.1);
  }
  
  /* Subtle overlay — keeps video visible */
  .artist-detail-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
	  to bottom,
	  rgba(15, 23, 42, 0.3) 0%,
	  rgba(15, 23, 42, 0.5) 50%,
	  rgba(15, 23, 42, 0.7) 100%
	);
	pointer-events: none;
  }
  
  /* Close Button */
  .artist-detail-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	width: 52px;
	height: 52px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .artist-detail-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
  }
  
  /* Scrollable Content Area */
  .artist-detail-scroll {
	position: relative;
	z-index: 2;
	height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
  }
  
  .artist-detail-content {
	max-width: 600px;
	width: 100%;
	color: #fff;
	text-align: center;
  }
  
  /* Header */
  .artist-detail-header {
	margin-bottom: 2rem;
  }
  
  .artist-detail-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1.5rem;
	border: 4px solid rgba(255, 255, 255, 0.3);
	box-shadow: 
	  0 20px 40px rgba(0, 0, 0, 0.3),
	  0 0 0 1px rgba(255, 255, 255, 0.1);
	opacity: 0;
	transform: scale(0.8) translateY(20px);
	animation: artistAvatarIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
  }
  
  .artist-detail-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .artist-detail-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	font-weight: 700;
	margin-bottom: 0.5rem;
	line-height: 1.1;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(20px);
	animation: artistTextIn 0.5s ease 0.2s forwards;
  }
  
  .artist-detail-practice {
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ws-purple-300, #a5b4fc);
	margin-bottom: 0.35rem;
	opacity: 0;
	transform: translateY(20px);
	animation: artistTextIn 0.5s ease 0.3s forwards;
  }
  
  .artist-detail-role {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0;
	transform: translateY(20px);
	animation: artistTextIn 0.5s ease 0.35s forwards;
  }
  
  /* Bio */
  .artist-detail-bio {
	font-size: 1.15rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2.5rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(20px);
	animation: artistTextIn 0.5s ease 0.4s forwards;
  }
  
  .artist-detail-bio a {
	color: var(--ws-purple-300, #a5b4fc);
	text-decoration: underline;
	text-underline-offset: 3px;
  }
  
  .artist-detail-bio a:hover {
	color: #fff;
  }
  
  /* Actions */
  .artist-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	animation: artistTextIn 0.5s ease 0.5s forwards;
  }
  
  /* Artist Focus styling */
  .artist-card-focus {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	font-style: italic;
	margin-top: 0.25rem;
  }
  
  .artist-detail-focus {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-style: italic;
	margin-top: 0.25rem;
  }
  
  /* Button variants */
  .btn-white {
	background: #fff;
	color: var(--ws-ink, #0b0b0b);
	border: none;
  }
  
  .btn-white:hover {
	background: var(--ws-gray-100, #f3f4f6);
	transform: translateY(-2px);
  }
  
  .btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
  }
  
  .btn-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.6);
	transform: translateY(-2px);
  }
  
  /* Animations */
  @keyframes artistAvatarIn {
	to {
	  opacity: 1;
	  transform: scale(1) translateY(0);
	}
  }
  
  @keyframes artistTextIn {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  /* Mobile Adjustments */
  @media (max-width: 768px) {
	.artists-grid {
	  grid-template-columns: 1fr;
	  gap: 1.5rem;
	}
	
	.artist-card {
	  aspect-ratio: 4 / 5;
	  min-height: 350px;
	}
	
	.artist-card-content {
	  padding: 1.5rem;
	}
	
	.artist-card-avatar {
	  width: 60px;
	  height: 60px;
	}
	
	.artist-card-name {
	  font-size: 1.5rem;
	}
	
	.artist-detail-scroll {
	  padding: 5rem 1.5rem 3rem;
	  align-items: flex-start;
	}
	
	.artist-detail-avatar {
	  width: 110px;
	  height: 110px;
	}
	
	.artist-detail-name {
	  font-size: 2rem;
	}
	
	.artist-detail-bio {
	  font-size: 1rem;
	}
	
	.artist-detail-actions {
	  flex-direction: column;
	}
	
	.artist-detail-actions .btn {
	  width: 100%;
	}
	
	.artist-detail-close {
	  top: 1rem;
	  right: 1rem;
	  width: 44px;
	  height: 44px;
	}
  }
  

 /* Artworks section below card */
 .artist-card-artworks {
   background: #fff;
   padding: 0.75rem 1rem 1rem;
   border-radius: 0 0 var(--ws-radius-lg, 16px) var(--ws-radius-lg, 16px);
   margin-top: -1px;
   box-shadow: 
	 0 4px 20px rgba(0, 0, 0, 0.06),
	 0 0 0 1px rgba(0, 0, 0, 0.03);
	width: 100%;
 }
 
 .artist-card-artworks-label {
   display: block;
   font-size: 0.6rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--ws-slate-400, #94a3b8);
   margin-bottom: 0.5rem;
 }
 
 .artist-card-artworks-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.4rem;
 }
 
 .artist-card-artwork-thumb {
   aspect-ratio: 1;
   border-radius: 4px;
   overflow: hidden;
   background: var(--ws-slate-100, #f1f5f9);
   cursor: pointer;
   transition: transform 0.2s ease;
 }
 
 .artist-card-artwork-thumb:hover {
   transform: scale(1.05);
 }
 
 .artist-card-artwork-thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 2px;
 }
 
 .artist-card-wrap {
   /* display: flex;
   flex-direction: column; */
 }
 .artist-card-artwork-thumb{
   border:0;
   padding:0;
   background:transparent;
   display:block;
 }
 .artist-work-item{
   border:0;
   background:transparent;
   text-align:left;
   padding:0;
   cursor:pointer;
 }

 /* Mobile adjustment */
 @media (max-width: 768px) {
   .artist-card-wrap .artist-card-inner {
	 aspect-ratio: 4 / 5;
	 min-height: 350px;
   }
 }
  
  /* Tablet landscape */
  @media (min-width: 768px) and (max-width: 1024px) {
	.artists-grid {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  /* Large screens — 3 columns */
  @media (min-width: 1200px) {
	.artists-grid {
	  grid-template-columns: repeat(3, 1fr);
	}
  }
  
  /* partnership or community section */
  
  /* ============================================
	 PARTNERSHIPS SECTION — REFRESHED
	 ============================================ */
  
  .partnerships-section {
	position: relative;
	overflow: hidden;
	padding: clamp(80px, 10vw, 140px) 0;
	background: var(--ws-stone, #fafaf9);
  }
  
  /* Soft ambient glow */
  .partnerships-section::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
	  radial-gradient(600px 400px at 15% 20%, rgba(124, 58, 237, 0.08), transparent 50%),
	  radial-gradient(500px 400px at 85% 30%, rgba(77, 166, 255, 0.06), transparent 50%),
	  radial-gradient(700px 500px at 50% 80%, rgba(60, 246, 181, 0.05), transparent 50%);
	pointer-events: none;
	z-index: 0;
  }
  
  .partnerships-section .section-content {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-md, 1.5rem);
  }
  
  /* ============================================
	 HEADER
	 ============================================ */
  
  .partnerships-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 3rem;
  }
  
  .partnerships-header .section-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ws-purple, #7c3aed);
	background: rgba(124, 58, 237, 0.1);
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	margin-bottom: 1rem;
  }
  
  .partnerships-header .section-title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1rem;
  }
  
  .partnerships-header .section-subtitle {
	font-size: 1.15rem;
	color: var(--ws-slate-600, #475569);
	line-height: 1.7;
	margin-bottom: 0.75rem;
  }
  
  .partnerships-header .section-micro {
	font-size: 0.95rem;
	color: var(--ws-slate-500, #64748b);
	line-height: 1.6;
  }
  
  
  /* ============================================
	 MEDIA GRID — 4 Items
	 ============================================ */
  
  .partnerships-media-grid {
	display: grid;
	gap: 1rem;
	margin-bottom: 4rem;
  }
  
  /* Desktop: 2x2 with featured item spanning */
  @media (min-width: 768px) {
	.partnerships-media-grid {
	  grid-template-columns: 1.4fr 1fr;
	  grid-template-rows: 1fr 1fr;
	  gap: 1.25rem;
	  max-height: 600px;
	}
  
	.media-card--featured {
	  grid-row: 1 / span 2;
	}
  }
  
  /* Media Card Base */
  .media-card {
	position: relative;
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--ws-slate-200, #e2e8f0);
  }
  
  .media-card img,
  .media-card video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
  }
  
  .media-card:hover img,
  .media-card:hover video {
	transform: scale(1.03);
  }
  
  /* Vignette overlay */
  .media-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
	  to top,
	  rgba(0, 0, 0, 0.5) 0%,
	  rgba(0, 0, 0, 0.1) 40%,
	  transparent 70%
	);
	pointer-events: none;
  }
  
  /* Caption */
  .media-card figcaption {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	color: #fff;
  }
  
  .media-card figcaption strong {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.15rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .media-card figcaption span {
	font-size: 0.85rem;
	opacity: 0.9;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* Mobile: stack and constrain height */
  @media (max-width: 767px) {
	.media-card {
	  aspect-ratio: 4 / 3;
	}
	
	.media-card--featured {
	  aspect-ratio: 3 / 2;
	}
  }
  
  
  /* ============================================
	 SOUND TOGGLE — Video Card
	 ============================================ */
  
  .media-card--video {
	cursor: pointer;
  }
  
  .sound-toggle {
	position: absolute;
	inset: 0;
	z-index: 5;
	border: none;
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background 0.3s ease;
  }
  
  .media-card--video[data-sound="on"] .sound-toggle {
	background: rgba(0, 0, 0, 0.1);
  }
  
  .sound-toggle-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
  }
  
  .sound-toggle:hover .sound-toggle-icon {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.05);
  }
  
  .sound-toggle-icon svg {
	color: #fff;
  }
  
  /* Toggle icon visibility */
  .icon-sound-on { display: none; }
  .icon-sound-off { display: block; }
  
  .media-card--video[data-sound="on"] .icon-sound-on { display: block; }
  .media-card--video[data-sound="on"] .icon-sound-off { display: none; }
  
  /* Label */
  .sound-toggle-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
  
  .sound-label-on { display: none; }
  .sound-label-off { display: inline; }
  
  .media-card--video[data-sound="on"] .sound-label-on { display: inline; }
  .media-card--video[data-sound="on"] .sound-label-off { display: none; }
  
  
  /* ============================================
	 VALUE CARDS
	 ============================================ */
  
  .partnerships-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 4rem;
  }
  
  .pv-card {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 1.25rem;
	padding: 2rem;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .pv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  }
  
  .pv-icon {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	opacity: 0.6;
  }
  
  .pv-card h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: var(--ws-slate-900, #0f172a);
  }
  
  .pv-card p {
	font-size: 0.95rem;
	color: var(--ws-slate-600, #475569);
	line-height: 1.6;
  }
  
  
  /* ============================================
	 MENU / OFFERINGS
	 ============================================ */
  
  .partnerships-menu {
	margin-bottom: 4rem;
  }
  
  .menu-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
  }
  
  .menu-subtitle {
	text-align: center;
	color: var(--ws-slate-500, #64748b);
	margin-bottom: 2rem;
  }
  
  .menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
  }
  
  .menu-item {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 1.25rem;
	padding: 1.75rem;
  }
  
  .menu-item h4 {
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--ws-purple, #7c3aed);
  }
  
  .menu-item ul {
	list-style: none;
	padding: 0;
	margin: 0;
  }
  
  .menu-item li {
	padding: 0.4rem 0;
	padding-left: 1.25rem;
	position: relative;
	font-size: 0.95rem;
	color: var(--ws-slate-600, #475569);
  }
  
  .menu-item li::before {
	content: "·";
	position: absolute;
	left: 0;
	color: var(--ws-purple, #7c3aed);
	font-weight: bold;
  }
  
  
  /* ============================================
	 PROCESS STEPS
	 ============================================ */
  
  .partnerships-process {
	margin-bottom: 4rem;
  }
  
  .process-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 2rem;
  }
  
  .process-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
  }
  
  .step {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 1.25rem;
	padding: 2rem;
	text-align: center;
  }
  
  .step-num {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--ws-purple, #7c3aed);
	opacity: 0.2;
	line-height: 1;
	margin-bottom: 0.75rem;
  }
  
  .step h4 {
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
  }
  
  .step p {
	font-size: 0.95rem;
	color: var(--ws-slate-600, #475569);
	line-height: 1.6;
	margin-bottom: 1rem;
  }
  
  /* Discovery Call Button */
  .btn-discovery {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--ws-purple, #7c3aed);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
  }
  
  .btn-discovery:hover {
	background: var(--ws-purple-dark, #6d28d9);
	transform: translateY(-2px);
  }
  
  .btn-discovery svg {
	transition: transform 0.2s ease;
  }
  
  .btn-discovery:hover svg {
	transform: translateX(3px);
  }
  
  
  /* ============================================
	 BOTTOM CTA
	 ============================================ */
  
  .partnerships-cta {
	text-align: center;
	padding: 3rem 2rem;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.04);
  }
  
  .cta-lead {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
	color: var(--ws-slate-800, #1e293b);
  }
  
  .btn-large {
	padding: 1rem 2.5rem;
	font-size: 1rem;
  }
  
  .cta-subtext {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--ws-slate-500, #64748b);
  }
  
  .cta-subtext a {
	color: var(--ws-purple, #7c3aed);
	text-decoration: underline;
	text-underline-offset: 2px;
  }
  
  
  /* ============================================
	 DISCOVERY MODAL
	 ============================================ */
  
  .discovery-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s ease;
  }
  
  .discovery-modal[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 0.3s ease;
  }
  
  .discovery-modal .modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.8);
	backdrop-filter: blur(4px);
  }
  
  .discovery-modal .modal-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
  }
  
  .discovery-modal .modal-content {
	background: #fff;
	border-radius: 1.5rem;
	padding: 2.5rem;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  }
  
  .discovery-modal .modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--ws-slate-100, #f1f5f9);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
  }
  
  .discovery-modal .modal-close:hover {
	background: var(--ws-slate-200, #e2e8f0);
  }
  
  /* Modal Header */
  .modal-header {
	text-align: center;
	margin-bottom: 2rem;
  }
  
  .modal-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ws-purple, #7c3aed);
	margin-bottom: 0.5rem;
	display: block;
  }
  
  .modal-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
  }
  
  .modal-subtitle {
	font-size: 0.95rem;
	color: var(--ws-slate-500, #64748b);
	line-height: 1.5;
  }
  
  /* Form */
  .discovery-form .form-group {
	margin-bottom: 1.25rem;
  }
  
  .discovery-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
	color: var(--ws-slate-700, #334155);
  }
  
  .discovery-form input,
  .discovery-form select,
  .discovery-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ws-slate-200, #e2e8f0);
	border-radius: 0.75rem;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .discovery-form input:focus,
  .discovery-form select:focus,
  .discovery-form textarea:focus {
	outline: none;
	border-color: var(--ws-purple, #7c3aed);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
  }
  
  .discovery-form .btn-submit {
	width: 100%;
	padding: 1rem;
	font-size: 1rem;
	margin-top: 0.5rem;
  }
  
  /* Success State */
  .modal-success {
	text-align: center;
	padding: 2rem 0;
  }
  
  .success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ws-purple, #7c3aed), #6d28d9);
	color: #fff;
	font-size: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
  }
  
  .modal-success h3 {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
  }
  
  .modal-success p {
	color: var(--ws-slate-500, #64748b);
	margin-bottom: 1.5rem;
	line-height: 1.6;
  }
  
  /* Body lock when modal open */
  body.discovery-modal-open {
	overflow: hidden;
  }


/* ============================================
	 EXHIBITS SECTION
	 Add to wave-and-see.css
	 ============================================ */
  
  /* Section Container */
  .exhibits-section {
	background: var(--ws-stone, #fafaf9);
	padding: var(--space-2xl) var(--space-md);
  }
  
  .exhibits-section .section-content {
	max-width: var(--container-wide, 1400px);
	margin: 0 auto;
  }
  
  /* Exhibit Header */
  .exhibit-header {
	text-align: center;
	margin-bottom: var(--space-xl);
  }
  
  .exhibit-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ws-purple, #7c3aed);
	background: rgba(124, 58, 237, 0.1);
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	margin-bottom: 1rem;
  }
  
  .exhibit-title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	color: var(--ws-slate-900, #0f172a);
	margin-bottom: 0.75rem;
	line-height: 1.1;
  }
  
  .exhibit-description {
	font-size: 1.1rem;
	color: var(--ws-slate-600, #475569);
	max-width: 600px;
	margin: 0 auto 0.75rem;
	line-height: 1.6;
  }
  
  .exhibit-dates {
	font-size: 0.9rem;
	color: var(--ws-slate-500, #64748b);
	font-style: italic;
  }
  
  
  /* ============================================
	 ARTWORK GRID
	 ============================================ */
  
  .artwork-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
  }
  
  @media (min-width: 768px) {
	.artwork-grid {
	  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	  gap: 2rem;
	}
  }
  
  /* Artwork Card */
  .artwork-card {
	position: relative;
  }
  
  .artwork-card-inner {
	display: block;
	width: 100%;
	background: #fff;
	border: none;
	padding: 0;
	border-radius: var(--ws-radius-lg, 16px);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 
	  0 4px 20px rgba(0, 0, 0, 0.06),
	  0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  
  .artwork-card-inner:hover {
	transform: translateY(-6px);
	box-shadow: 
	  0 20px 40px rgba(0, 0, 0, 0.1),
	  0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  
  /* Image Container */
  .artwork-image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--ws-slate-100, #f1f5f9);
	overflow: hidden;
  }
  
  .artwork-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
	transition: transform 0.4s ease;
  }
  
  .artwork-card-inner:hover .artwork-image img {
	transform: scale(1.05);
  }
  
  /* Sold Badge */
  .artwork-sold-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--ws-red, #ef4444);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
  }
  
  /* Info Section */
  .artwork-info {
	padding: 1.25rem;
	border-top: 1px solid var(--ws-slate-100, #f1f5f9);
  }
  
  .artwork-title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ws-slate-900, #0f172a);
	margin-bottom: 0.25rem;
	line-height: 1.3;
  }
  
  .artwork-artist {
	font-size: 0.9rem;
	color: var(--ws-slate-600, #475569);
	margin-bottom: 0.5rem;
  }
  
  .artwork-price {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ws-purple, #7c3aed);
  }
  
  .artwork-price.is-sold {
	color: var(--ws-slate-400, #94a3b8);
	text-decoration: line-through;
  }
  
  
  /* ============================================
	 ARTWORK DETAIL OVERLAY
	 Full-screen artwork view
	 ============================================ */
  
  .artwork-detail-shell {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(15, 23, 42, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	visibility: hidden;
	opacity: 0;
	transition: 
	  visibility 0s linear 0.3s,
	  opacity 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
  }
  
  .artwork-detail-shell.is-open {
	visibility: visible;
	opacity: 1;
	transition: 
	  visibility 0s linear 0s,
	  opacity 0.3s ease;
  }
  
  body.artwork-overlay-open {
	overflow: hidden;
  }
  
  /* Individual Artwork Panel */
  .artwork-detail {
	display: none;
	min-height: 100vh;
	padding: 2rem;
  }
  
  .artwork-detail.is-active {
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  /* Close Button */
  .artwork-detail-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	width: 48px;
	height: 48px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .artwork-detail-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
  }
  
  /* Layout */
  .artwork-detail-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 1200px;
	width: 100%;
	color: #fff;
  }
  
  @media (min-width: 900px) {
	.artwork-detail-layout {
	  flex-direction: row;
	  align-items: flex-start;
	  gap: 4rem;
	}
  }
  
  /* Image Side */
  .artwork-detail-image {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .artwork-detail-image img {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--ws-radius-lg, 16px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  }
  
  @media (min-width: 900px) {
	.artwork-detail-image img {
	  max-height: 80vh;
	}
  }
  
  /* Info Side */
  .artwork-detail-info {
	flex: 0 0 350px;
	max-width: 100%;
  }
  
  @media (max-width: 899px) {
	.artwork-detail-info {
	  text-align: center;
	}
  }
  
  .artwork-detail-title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 0.5rem;
	line-height: 1.2;
  }
  
  .artwork-detail-artist {
	font-size: 1.15rem;
	color: var(--ws-purple-300, #a5b4fc);
	margin-bottom: 1.5rem;
  }
  
  /* Meta Info */
  .artwork-meta {
	margin-bottom: 1.5rem;
  }
  
  .artwork-meta-row {
	display: flex;
	justify-content: space-between;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  @media (max-width: 899px) {
	.artwork-meta-row {
	  justify-content: center;
	  gap: 1rem;
	}
  }
  
  .artwork-meta dt {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
  }
  
  .artwork-meta dd {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
  }
  
  /* Description */
  .artwork-detail-description {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 1.5rem;
  }
  
  /* Price */
  .artwork-detail-price {
	margin-bottom: 1.5rem;
  }
  
  .price-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
  }
  
  .price-sold {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ws-red, #ef4444);
	text-transform: uppercase;
	letter-spacing: 0.05em;
  }
  
  /* Actions */
  .artwork-detail-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
  }
  
  @media (max-width: 899px) {
	.artwork-detail-actions {
	  justify-content: center;
	}
  }
  
  .artwork-detail-actions .btn-primary {
	background: linear-gradient(135deg, var(--ws-purple, #7c3aed) 0%, #6d28d9 100%);
	color: #fff;
	padding: 0.875rem 1.5rem;
	border-radius: 9999px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
  }
  
  .artwork-detail-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
  }
  
  /* Artist Artwork Grid in Overlay */
  .artist-detail-work {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .artist-detail-work h3 {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 1.25rem;
  }
  
  .artist-work-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
  }
  
  @media (max-width: 600px) {
	.artist-work-grid {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  .artist-work-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
  }
  
  .artist-work-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.5rem;
	transition: transform 0.3s ease;
  }
  
  .artist-work-item:hover img {
	transform: scale(1.05);
  }
  
  .artist-work-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5rem;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
  }
  
  .artist-work-item:hover .artist-work-info {
	opacity: 1;
  }
  
  .artist-work-title {
	display: block;
	font-size: 0.75rem;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }
  
  .artist-work-price {
	font-size: 0.7rem;
	color: var(--ws-purple-300, #a5b4fc);
  }
  
/* ============================================
   FOOTER
   ============================================ */
footer {
  background: #000;
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

footer .logo-circle {
  width: 64px;
  height: 64px;
  background: #fff;
  margin: 0 auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .logo-circle span {
  color: #000;
  font-weight: bold;
}