/* ============================================================
   VIRASAT FESTIVAL - SHARED DESIGN SYSTEM
   v1.0 · Dark direction · Mobile-responsive
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Ink family - backgrounds */
  --ink: #0F0807;
  --ink-warm: #1A0F0F;
  --ink-warmer: #2A1410;

  /* Indian color palette */
  --sindoor: #8B1A1A;
  --marigold: #C26430;
  --haldi: #E8A547;
  --parchment: #FAEEDA;
  --peacock: #0F6E56;
  --brown: #4A1B0C;
  --plum: #4B1528;
  --indigo: #26215C;
  --chrome: #6B7280;

  /* Text on dark */
  --parchment-soft: rgba(250, 238, 218, 0.7);
  --parchment-mute: rgba(250, 238, 218, 0.55);
  --parchment-faint: rgba(250, 238, 218, 0.4);

  /* Lines */
  --line: rgba(232, 165, 71, 0.18);
  --line-faint: rgba(232, 165, 71, 0.1);

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ===== LAYOUT SHELL ===== */
.shell { max-width: 1280px; margin: 0 auto; }

/* ===== TYPOGRAPHY UTILITIES ===== */
.eyebrow {
  font-size: 11px;
  color: var(--haldi);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}
.crumb {
  font-size: 11px;
  color: var(--parchment-faint);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.italic { font-style: italic; }
.ac { color: var(--haldi); font-style: italic; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 44px;
  padding: 18px 48px;
  border-bottom: 0.5px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(15, 8, 7, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
}
/* Logo variant visibility - dark mode default (CSS-controlled, no JS needed) */
.logo-black { display: none; }
.logo-white { display: block; }
.f-reach-logo.reach-black { display: none; }
.f-reach-logo.reach-white { display: block; }

.nav-logo img {
  height: 46px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-link {
  font-size: 13px;
  color: var(--parchment-soft);
  letter-spacing: 0.2px;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--parchment); }
.nav-link.active { color: var(--haldi); }
.nav-cta {
  background: var(--haldi);
  color: var(--ink-warm);
  padding: 9px 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  transition: background 0.2s;
}
.nav-cta:hover { background: #efb158; }

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0.5px solid var(--line);
  color: var(--parchment);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
}

/* ============================================================
   SUB-NAVIGATION (within a section)
   ============================================================ */
.sub-nav {
  padding: 16px 48px;
  border-bottom: 0.5px solid var(--line);
  background: var(--ink-warm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sub-row {
  display: flex;
  gap: 32px;
  align-items: center;
  white-space: nowrap;
  min-width: max-content;
}
.sub-link {
  font-size: 13px;
  color: var(--parchment-mute);
  letter-spacing: 0.2px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.sub-link:hover { color: var(--parchment-soft); }
.sub-link.active {
  color: var(--haldi);
  border-bottom-color: var(--haldi);
}

/* ============================================================
   PAGE BANNER (the strip at top of sub-pages)
   ============================================================ */
.page-banner {
  padding: 22px 48px;
  background: var(--ink-warmer);
  border-bottom: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pb-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--haldi);
  font-style: italic;
  font-weight: 500;
}
.pb-page {
  font-size: 11px;
  color: var(--parchment-faint);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ============================================================
   PAGE DIVIDERS (between sub-pages)
   ============================================================ */
.page-divider {
  padding: 72px 48px 8px;
  text-align: center;
  background: var(--ink);
}
.pd-line {
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--marigold);
  vertical-align: middle;
}
.pd-label {
  font-size: 11px;
  color: var(--parchment-faint);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 16px;
  vertical-align: middle;
}

/* ============================================================
   HEROES (top of every page)
   ============================================================ */
.hero {
  padding: 96px 48px 64px;
  position: relative;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--marigold) 0%, transparent 65%);
  opacity: 0.14;
  border-radius: 50%;
  pointer-events: none;
}
.hero-glow.right { right: -160px; top: 40px; }
.hero-glow.left { left: -100px; top: 60px; opacity: 0.16; }

.h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
  max-width: 920px;
  position: relative;
}
.h-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--parchment-soft);
  font-style: italic;
  line-height: 1.4;
  max-width: 640px;
  margin-bottom: 40px;
  position: relative;
}
.h-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--parchment-mute);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  position: relative;
  flex-wrap: wrap;
}
.h-meta .sep { color: var(--marigold); }

.crumb {
  margin-bottom: 28px;
  position: relative;
}

/* Smaller hero variant for sub-pages */
.sub-hero {
  padding: 72px 48px 32px;
}
.s-h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -1px;
  margin-bottom: 18px;
  max-width: 800px;
}
.s-sub {
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--parchment-soft);
  font-style: italic;
  max-width: 620px;
  line-height: 1.45;
}

/* ============================================================
   CTAS / BUTTONS
   ============================================================ */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-p, .cta-primary {
  background: var(--haldi);
  color: var(--ink-warm);
  padding: 13px 26px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
  border: none;
  letter-spacing: 0.2px;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
}
.cta-p:hover, .cta-primary:hover { background: #efb158; transform: translateY(-1px); }
.cta-s, .cta-secondary {
  background: transparent;
  color: var(--parchment);
  padding: 13px 26px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 13px;
  border: 0.5px solid rgba(250, 238, 218, 0.4);
  letter-spacing: 0.2px;
  transition: border-color 0.2s, background 0.2s;
  display: inline-block;
}
.cta-s:hover, .cta-secondary:hover {
  border-color: rgba(250, 238, 218, 0.7);
  background: rgba(250, 238, 218, 0.04);
}

/* ============================================================
   GENERIC MODULE BLOCKS
   ============================================================ */
.module {
  padding: 80px 48px;
}
.module-tight { padding: 56px 48px; }
.module-loose { padding: 96px 48px; }
.mod-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.mod-eyebrow {
  font-size: 11px;
  color: var(--haldi);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.mod-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 36px);
  color: var(--parchment);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
  max-width: 640px;
}
.mod-link {
  font-size: 12px;
  color: var(--haldi);
  letter-spacing: 0.5px;
  font-weight: 500;
}
.mod-link:hover { text-decoration: underline; }

/* Module background variants */
.bg-warm { background: var(--ink-warm); }
.bg-warmer { background: var(--ink-warmer); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: rgba(232, 165, 71, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: background 0.25s, transform 0.25s, border-color 0.25s;
}
.card:hover {
  background: rgba(232, 165, 71, 0.06);
  transform: translateY(-2px);
}
.card-body { padding: 22px 24px 24px; }
.card-pad { padding: 28px 30px; }

.card-visual {
  aspect-ratio: 16/9;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--parchment);
}
.card-tag {
  font-size: 10px;
  color: var(--parchment-mute);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 500;
}
.card-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--parchment);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.3px;
}
.card-line {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--parchment);
  line-height: 1.45;
  margin-bottom: 10px;
  font-style: italic;
}
.card-meta {
  font-size: 12px;
  color: var(--parchment-mute);
  line-height: 1.4;
}

/* Card gradient backgrounds for visual variety */
.bg-music { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--sindoor) 100%); }
.bg-dance { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--plum) 100%); }
.bg-saadh { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--peacock) 100%); }
.bg-talks { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--indigo) 100%); }
.bg-mush { background: linear-gradient(160deg, #0A0612 0%, #2A1140 100%); }
.bg-rally { background: linear-gradient(160deg, #1F1F25 0%, var(--chrome) 100%); }
.bg-bazaar { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--brown) 50%, var(--marigold) 100%); }
.bg-cuisine { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--brown) 50%, var(--haldi) 100%); }
.bg-legacy { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--sindoor) 60%, var(--marigold) 100%); }
.bg-press { background: linear-gradient(160deg, var(--ink-warmer) 0%, var(--peacock) 100%); }

/* Card grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ============================================================
   STATS BANDS
   ============================================================ */
.stats-band {
  padding: 56px 48px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  padding: 8px 24px;
  border-left: 0.5px solid var(--line);
}
.stat:first-child {
  border-left: none;
  padding-left: 0;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 52px);
  color: var(--haldi);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -1px;
}
.stat-lbl {
  font-size: 11px;
  color: var(--parchment-mute);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 12px;
}
.stat-meta {
  font-size: 12px;
  color: rgba(250, 238, 218, 0.65);
  margin-top: 10px;
  max-width: 180px;
  line-height: 1.45;
}

/* ============================================================
   QUOTE BANDS
   ============================================================ */
.quote-band {
  padding: 88px 48px;
}
.quote-inner { max-width: 880px; }
.q-mark {
  font-family: var(--serif);
  font-size: 120px;
  line-height: 0.4;
  color: var(--marigold);
  opacity: 0.5;
  margin-bottom: 12px;
}
.q-text {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.3;
  color: var(--parchment);
  font-style: italic;
  margin-bottom: 28px;
  letter-spacing: -0.3px;
  font-weight: 400;
}
.q-attr {
  font-size: 12px;
  color: var(--parchment-mute);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.q-attr b { color: var(--haldi); font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 64px 48px 32px;
  background: var(--ink);
  border-top: 0.5px solid var(--line);
}
.f-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.f-brand-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.f-reach-logo {
  width: 56px;
  height: auto;
  opacity: 0.8;
  margin-bottom: 8px;
}
.f-brand {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--parchment);
  font-weight: 500;
}
.f-tag {
  font-size: 12px;
  color: var(--parchment-mute);
  line-height: 1.6;
  max-width: 260px;
}
.f-tag a { color: var(--parchment-mute); text-decoration: underline; text-underline-offset: 2px; }
.f-tag a:hover { color: var(--parchment-soft); }
.f-social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.f-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0.5px solid var(--line);
  color: var(--parchment-mute);
  transition: color 0.2s, border-color 0.2s;
}
.f-social-link svg { width: 16px; height: 16px; }
.f-social-link:hover { color: var(--haldi); border-color: color-mix(in srgb, var(--haldi) 50%, transparent); }
.f-venue { margin-top: 16px; padding-top: 16px; border-top: 0.5px solid var(--line-faint); font-size: 12px; color: var(--parchment-mute); line-height: 1.6; max-width: 260px; }
.f-venue-label { display: block; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--parchment-faint); margin-bottom: 4px; }
.f-venue a { color: var(--haldi); text-decoration: underline; text-underline-offset: 2px; }
.f-venue a:hover { color: var(--marigold); }
.f-col h4 {
  font-size: 11px;
  color: var(--haldi);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.f-col a {
  display: block;
  font-size: 13px;
  color: var(--parchment-mute);
  margin-bottom: 8px;
  transition: color 0.2s;
}
.f-col a:hover { color: var(--parchment-soft); }
.f-bottom {
  padding-top: 24px;
  border-top: 0.5px solid var(--line-faint);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--parchment-faint);
  flex-wrap: wrap;
  gap: 12px;
}
.f-bottom a { text-decoration: underline; text-underline-offset: 2px; }
.f-bottom a:hover { color: var(--parchment-soft); }

/* ============================================================
   STAGE BAND (the closing CTA on every page)
   ============================================================ */
.stage-band {
  padding: 56px 48px;
  background: var(--ink-warm);
  border-top: 0.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.stage-info { }
.stage-label {
  font-size: 11px;
  color: var(--parchment-faint);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stage-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--parchment);
  font-weight: 500;
}
.stage-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.stage-btn {
  background: transparent;
  color: var(--parchment);
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 13px;
  border: 0.5px solid var(--line);
  font-weight: 500;
}
.stage-btn:hover { background: rgba(250, 238, 218, 0.04); }
.stage-btn.primary {
  background: var(--haldi);
  color: var(--ink-warm);
  border-color: var(--haldi);
}
.stage-btn.primary:hover { background: #efb158; }

/* ============================================================
   FORMS (newsletter subscribe etc)
   ============================================================ */
.form-row {
  display: flex;
  gap: 10px;
  max-width: 480px;
}
.form-input {
  flex: 1;
  background: rgba(250, 238, 218, 0.06);
  border: 0.5px solid var(--line);
  border-radius: 4px;
  padding: 12px 16px;
  color: var(--parchment);
  font-family: var(--sans);
  font-size: 13px;
}
.form-input::placeholder { color: var(--parchment-faint); }
.form-input:focus {
  outline: none;
  border-color: var(--haldi);
  background: rgba(250, 238, 218, 0.08);
}

/* ============================================================
   SIDE PANELS (for IP sub-pages with "to be announced" etc)
   ============================================================ */
.side-block {
  background: rgba(232, 165, 71, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.side-block.tba {
  background: rgba(232, 165, 71, 0.06);
  border-color: rgba(232, 165, 71, 0.3);
}
.side-label {
  font-size: 10px;
  color: var(--haldi);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.side-list { list-style: none; padding: 0; }
.side-list li {
  font-size: 13px;
  color: var(--parchment-soft);
  padding: 6px 0;
  border-bottom: 0.5px solid var(--line-faint);
  line-height: 1.4;
}
.side-list li:last-child { border-bottom: none; }
.side-list li b { color: var(--parchment); font-weight: 500; }
.side-list li i {
  color: var(--parchment-mute);
  font-style: normal;
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.tba-tag {
  display: inline-block;
  background: var(--haldi);
  color: var(--ink-warm);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .nav { padding: 16px 32px; }
  .sub-nav { padding: 14px 32px; }
  .hero, .module, .sub-hero, .stats-band, .quote-band, .stage-band, .footer, .page-banner, .page-divider {
    padding-left: 32px;
    padding-right: 32px;
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat {
    padding: 12px 0;
    border-left: none;
    border-top: 0.5px solid var(--line);
  }
  .stat:first-child { border-top: none; padding-top: 0; }
  .stat:nth-child(2) { border-top: none; padding-top: 0; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .nav { padding: 14px 20px; }
  .nav-logo img { height: 36px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .nav-cta { padding: 7px 14px; font-size: 11px; }

  .sub-nav { padding: 12px 20px; }

  .hero, .module, .module-tight, .module-loose,
  .sub-hero, .stats-band, .quote-band, .stage-band,
  .footer, .page-banner, .page-divider {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .module { padding-top: 56px; padding-bottom: 56px; }
  .quote-band { padding-top: 64px; padding-bottom: 64px; }
  .page-divider { padding-top: 56px; }

  .h1 { font-size: clamp(36px, 11vw, 56px); letter-spacing: -1px; }
  .s-h1 { font-size: clamp(32px, 9vw, 44px); }
  .h-sub, .s-sub { font-size: 17px; }
  .mod-title { font-size: 26px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 16px; }

  .h-meta { font-size: 10px; gap: 10px; }
  .h-meta .sep { display: none; }

  .cta-row { flex-direction: column; }
  .cta-p, .cta-s, .cta-primary, .cta-secondary { width: 100%; text-align: center; }

  .stage-band { flex-direction: column; align-items: flex-start; }
  .stage-cta { width: 100%; }
  .stage-btn { flex: 1; text-align: center; }

  .f-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .f-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  .mod-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mod-link { font-size: 13px; }

  .page-divider { padding-top: 40px; padding-bottom: 4px; }
  .pd-label { display: block; margin: 12px 0; }
  .pd-line { width: 40px; }

  .q-text { font-size: 22px; }
  .q-mark { font-size: 72px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .nav-cta { padding: 6px 12px; font-size: 10px; }
  .stat-row { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE NAV DRAWER (toggled by JS)
   ============================================================ */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 340px;
  height: 100vh;
  background: var(--ink-warmer);
  border-left: 0.5px solid var(--line);
  padding: 80px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 200;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--parchment);
  font-size: 24px;
  padding: 8px;
}
.mobile-drawer a {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--parchment);
  padding: 16px 0;
  border-bottom: 0.5px solid var(--line-faint);
  letter-spacing: -0.3px;
}
.mobile-drawer a.active { color: var(--haldi); }
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }


/* ======================================================================
   LIGHT MODE - activated by [data-theme="light"] on <html>
   Every override uses the same class/variable names as dark mode.
   The palette is warm parchment, not clinical white.
   ====================================================================== */

[data-theme="light"] {
  /* Backgrounds - warm off-white, not clinical white */
  --ink:        #FAF6EE;
  --ink-warm:   #F2EAD8;
  --ink-warmer: #EAE0C8;

  /* Text on light */
  --text:        #1A0F0F;
  --text-soft:   rgba(26, 15, 15, 0.82);
  --text-mute:   rgba(26, 15, 15, 0.62);
  --text-faint:  rgba(26, 15, 15, 0.45);

  /* Accent colours - slightly richer on light */
  --sindoor:  #7A1515;
  --marigold: #B35A22;
  --haldi:    #B8760A;
  --peacock:  #0A5C46;
  --brown:    #3E1508;
  --plum:     #3E1020;
  --indigo:   #1E1A4E;

  /* Lines */
  --line:       rgba(26, 15, 15, 0.12);
  --line-faint: rgba(26, 15, 15, 0.07);

  /* Parchment on light bg = dark ink */
  --parchment: #1A0F0F;
  --parchment-soft: rgba(26, 15, 15, 0.80);
  --parchment-mute: rgba(26, 15, 15, 0.60);
  --parchment-faint: rgba(26, 15, 15, 0.42);
}

/* --- Navigation --- */
[data-theme="light"] .nav {
  background: rgba(250, 246, 238, 0.97);
  border-bottom-color: var(--line);
}
[data-theme="light"] .nav-logo img.logo-white { display: none; }
[data-theme="light"] .nav-logo img.logo-black { display: block; }
[data-theme="light"] .nav-cta {
  background: var(--haldi);
  color: #FAF6EE;
}
[data-theme="light"] .nav-toggle span { background: var(--text); }

/* --- Sub-nav --- */
[data-theme="light"] .sub-nav { background: var(--ink-warm); }

/* --- Page banner --- */
[data-theme="light"] .page-banner { background: var(--ink-warmer); }

/* --- Hero glows - lighter, more subtle --- */
[data-theme="light"] .hero-glow { opacity: 0.10; }

/* --- Cards --- */
[data-theme="light"] .card {
  background: rgba(26, 15, 15, 0.03);
  border-color: var(--line);
}
[data-theme="light"] .card:hover { background: rgba(26, 15, 15, 0.06); }

/* --- Stage band --- */
[data-theme="light"] .stage-band { background: var(--ink-warm); }
[data-theme="light"] .stage-btn { color: var(--text); border-color: var(--line); }
[data-theme="light"] .stage-btn.primary { background: var(--haldi); color: #FAF6EE; border-color: var(--haldi); }

/* --- Footer --- */
[data-theme="light"] .footer { background: var(--ink-warmer); border-top-color: var(--line); }
.f-reach-logo.reach-white { display: block; }
.f-reach-logo.reach-black { display: none; }
[data-theme="light"] .f-reach-logo.reach-white { display: none; }
[data-theme="light"] .f-reach-logo.reach-black { display: block; }

/* --- Quote band --- */
[data-theme="light"] .q-mark { color: var(--marigold); }
[data-theme="light"] .q-text { color: var(--text-soft); }

/* --- Side blocks (programmes IP pages) --- */
[data-theme="light"] .side-block { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .side-block.tba { background: rgba(184, 118, 10, 0.07); border-color: rgba(184, 118, 10, 0.3); }
[data-theme="light"] .side-list li { border-bottom-color: var(--line-faint); color: var(--text-soft); }

/* --- Mobile drawer --- */
[data-theme="light"] .mobile-drawer {
  background: var(--ink);
  border-right-color: var(--line);
}
[data-theme="light"] .mobile-drawer a { color: var(--text); border-bottom-color: var(--line-faint); }
[data-theme="light"] .mobile-drawer-close { color: var(--text); }

/* --- Homepage specific --- */
[data-theme="light"] .home-stats { background: var(--ink-warm); }
[data-theme="light"] .bazaar-band { background: var(--ink-warm); }
[data-theme="light"] .home-legends { background: var(--ink); }
[data-theme="light"] .visit-split { background: var(--ink-warm); }

/* --- Gradient visuals: lighten the programme/card gradients --- */
[data-theme="light"] .pc-music { background: linear-gradient(160deg, #E8D8C8 0%, #C28070 100%); }
[data-theme="light"] .pc-dance { background: linear-gradient(160deg, #E8D8D8 0%, #A07080 100%); }
[data-theme="light"] .pc-talks { background: linear-gradient(160deg, #D8D8E8 0%, #707098 100%); }
[data-theme="light"] .v-music  { background: linear-gradient(160deg, #E0C8C0 0%, #B06060 100%); }
[data-theme="light"] .v-dance  { background: linear-gradient(160deg, #E0C8D0 0%, #906070 100%); }
[data-theme="light"] .v-saadh  { background: linear-gradient(160deg, #C8E0D8 0%, #407060 100%); }
[data-theme="light"] .v-talks  { background: linear-gradient(160deg, #D0D0E8 0%, #505088 100%); }
[data-theme="light"] .v-mush   { background: linear-gradient(160deg, #D8D0E8 0%, #705898 100%); }
[data-theme="light"] .v-rally  { background: linear-gradient(160deg, #D8D8D8 0%, #808088 100%); }
[data-theme="light"] .ipi-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .ipi-card:hover { background: rgba(26,15,15,0.06); }
[data-theme="light"] .ipi-name { color: #FAF6EE; }
[data-theme="light"] .ipi-line { color: var(--text); }
[data-theme="light"] .ipi-meta { color: var(--text-mute); }

/* Legend tiles stay dark - they're portrait-like, work on any bg */
[data-theme="light"] .l-tile { opacity: 0.92; }

/* --- Crafts & bazaar page --- */
[data-theme="light"] .tf-stats { background: var(--ink-warmer); }
[data-theme="light"] .story-section { background: var(--ink); }
[data-theme="light"] .subpages { background: var(--ink-warmer); }
[data-theme="light"] .sp-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .sp-card:hover { background: rgba(26,15,15,0.06); }
[data-theme="light"] .sp-name { color: #FAF6EE; }
[data-theme="light"] .sp-line { color: var(--text); }
[data-theme="light"] .sp-meta { color: var(--text-mute); }
[data-theme="light"] .demos { background: var(--ink-warmer); }
[data-theme="light"] .demo-card { background: rgba(26,15,15,0.04); border-color: var(--line); }
[data-theme="light"] .craft-tile { background: rgba(26,15,15,0.04); border-color: var(--line-faint); }
[data-theme="light"] .youth-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .strip-card { border-top-color: var(--peacock); }
[data-theme="light"] .ab-partner { background: rgba(26,15,15,0.05); border-color: var(--line); color: var(--text-soft); }

/* --- Plan your visit --- */
[data-theme="light"] .audience { background: var(--ink-warm); }
[data-theme="light"] .aud-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .aud-card:hover, [data-theme="light"] .aud-card.featured { background: rgba(184,118,10,0.07); border-color: rgba(184,118,10,0.35); }
[data-theme="light"] .facts { background: var(--ink); }
[data-theme="light"] .day-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .day-header { background: rgba(179,90,34,0.06); border-bottom-color: var(--line); }
[data-theme="light"] .travel { background: var(--ink-warm); }
[data-theme="light"] .tr-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .stay { background: var(--ink); }
[data-theme="light"] .stay-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .local-section { background: var(--ink-warm); }
[data-theme="light"] .groups { background: var(--ink); }
[data-theme="light"] .g-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .faq { background: var(--ink); }
[data-theme="light"] .faq-row { border-top-color: var(--line); }

/* --- Legacy --- */
[data-theme="light"] .editorial { background: var(--ink); }
[data-theme="light"] .sec-index { background: var(--ink-warm); }
[data-theme="light"] .si-card { background: rgba(26,15,15,0.04); border-color: var(--line); }
[data-theme="light"] .si-card:hover { background: rgba(26,15,15,0.07); }
[data-theme="light"] .si-name { color: #FAF6EE; }
[data-theme="light"] .si-line { color: var(--text); }
[data-theme="light"] .si-meta { color: var(--text-mute); }
[data-theme="light"] .timeline-deep { background: var(--ink); }
[data-theme="light"] .t-section { border-top-color: var(--line); }
[data-theme="light"] .t-ml-item { background: rgba(26,15,15,0.04); border-color: var(--line-faint); }
[data-theme="light"] .l-filters { border-color: var(--line); }
[data-theme="light"] .pill { border-color: var(--line); color: var(--text-soft); }
[data-theme="light"] .pill-active { background: var(--haldi); color: #FAF6EE; }
[data-theme="light"] .year-range { border-color: var(--line); }
[data-theme="light"] .yr-pill { border-color: var(--line); color: var(--text-soft); }
[data-theme="light"] .yr-pill-active { background: var(--haldi); color: #FAF6EE; }
[data-theme="light"] .yr-pill-future { color: var(--text-faint); }
[data-theme="light"] .ed-stats { background: rgba(26,15,15,0.04); border-color: var(--line); }
[data-theme="light"] .es-card { background: rgba(26,15,15,0.04); border-color: var(--line); border-style: dashed; }

/* --- Press & Partners --- */
[data-theme="light"] .press-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .factsheet { background: var(--ink-warm); }
[data-theme="light"] .releases { background: var(--ink); }
[data-theme="light"] .rl-row { border-top-color: var(--line); }
[data-theme="light"] .ongc-feature { background: linear-gradient(135deg, #E8D8C8 0%, #D4A890 50%, #C07878 100%); }
[data-theme="light"] .ongc-h1, [data-theme="light"] .ongc-text p { color: #1A0F0F; }
[data-theme="light"] .ongc-tag { color: #7A1515; }
[data-theme="light"] .ongc-stat-lbl { color: rgba(26,15,15,0.65); }
[data-theme="light"] .ongc-img-placeholder { background: rgba(26,15,15,0.08); border-color: rgba(26,15,15,0.15); }
[data-theme="light"] .ongc-img-cap { color: rgba(26,15,15,0.6); }
[data-theme="light"] .upes-feature { background: var(--ink); }
[data-theme="light"] .support { background: var(--ink-warm); }
[data-theme="light"] .sp-p-card { background: rgba(26,15,15,0.04); border-color: var(--line-faint); }
[data-theme="light"] .why-partner { background: var(--ink); }
[data-theme="light"] .wp-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .cv-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .cv-card:hover { background: rgba(26,15,15,0.06); }
[data-theme="light"] .cv-pill { border-color: var(--line); color: var(--text-soft); }
[data-theme="light"] .cv-pill-active { background: var(--haldi); color: #FAF6EE; }
[data-theme="light"] .contact-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .cc-detail { border-top-color: var(--line-faint); }
[data-theme="light"] .cc-detail:first-of-type { border-top-color: var(--line); }
[data-theme="light"] .address-band { background: var(--ink); }
[data-theme="light"] .address-grid { border-top-color: var(--line); }

/* --- About / The Festival --- */
[data-theme="light"] .tf-quote { background: var(--ink); }
[data-theme="light"] .tf-next { background: var(--ink-warm); }
[data-theme="light"] .nu-card { background: rgba(26,15,15,0.04); border-color: rgba(26,15,15,0.12); }
[data-theme="light"] .idea-body { background: var(--ink); }
[data-theme="light"] .principles { background: var(--ink-warm); }
[data-theme="light"] .timeline { background: var(--ink); }
[data-theme="light"] .leadership { background: var(--ink); }
[data-theme="light"] .lead-card { background: rgba(26,15,15,0.03); border-color: var(--line); }
[data-theme="light"] .lead-portrait { background: linear-gradient(135deg, var(--ink-warmer), #C8A888); color: var(--text-mute); }
[data-theme="light"] .team-section { background: var(--ink); }

/* === Theme toggle button === */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0.5px solid var(--line);
  border-radius: 99px;
  padding: 6px 14px 6px 10px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.theme-toggle:hover {
  border-color: rgba(232, 165, 71, 0.4);
  color: var(--text);
}
.theme-toggle .toggle-icon {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.3s;
}
[data-theme="light"] .theme-toggle { border-color: rgba(26,15,15,0.15); }
[data-theme="light"] .theme-toggle:hover { border-color: rgba(26,15,15,0.3); }

/* Smooth theme transition on all elements */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}
/* But NOT on images/transforms (prevents logo flash) */
img, .hero-glow, .prog-card, .legend-tile, .l-tile,
.baz-img, .ipi-visual, .sp-visual, .youth-visual,
.sf-visual, .upes-visual, .stay-visual {
  transition: opacity 0.25s ease;
}


/* === Nav right-side grouping (CTA + toggle + hamburger) === */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* === Light mode logo fallback via CSS (no-JS environments) === */
[data-theme="light"] .logo-white { display: none !important; }
[data-theme="light"] .logo-black { display: block !important; }



/* === Light-mode: text on COLORED GRADIENT banners must stay light === */
[data-theme="light"] .ipi-tag,
[data-theme="light"] .sp-tag,
[data-theme="light"] .si-tag,
[data-theme="light"] .preview-card .pc-tag,
[data-theme="light"] .preview-card .pc-title,
[data-theme="light"] .preview-card .pc-desc,
[data-theme="light"] .sv-tag,
[data-theme="light"] .sv-cat,
[data-theme="light"] .y-tag,
[data-theme="light"] .y-name,
[data-theme="light"] .day-num,
[data-theme="light"] .sf-tag,
[data-theme="light"] .sf-year,
[data-theme="light"] .sf-name,
[data-theme="light"] .upes-vtag,
[data-theme="light"] .upes-vh,
[data-theme="light"] .baz-img-cap,
[data-theme="light"] .feature-cap,
[data-theme="light"] .lead-portrait {
  color: rgba(250, 238, 218, 0.92) !important;
}
[data-theme="light"] .baz-img-cap b,
[data-theme="light"] .feature-cap b,
[data-theme="light"] .preview-card .pc-title {
  color: #FAF6EE !important;
}
/* Legend tiles always dark bg → keep their text light */
[data-theme="light"] .tile-name { color: #FAF6EE; }
[data-theme="light"] .tile-meta { color: rgba(250,238,218,0.7); }
[data-theme="light"] .tile-mem { color: var(--haldi); }


/* ======================================================================
   LIGHT MODE - page body-text contrast fixes
   These classes had hardcoded cream colours in page <style> blocks and
   sit on backgrounds that become parchment in light mode. Force dark ink.
   (Higher specificity via [data-theme="light"] beats the inline class.)
   ====================================================================== */

/* - The Festival (the-festival.html) - */
[data-theme="light"] .tf-intro-body p,
[data-theme="light"] .idea-body p,
[data-theme="light"] .t-content p,
[data-theme="light"] .lead-bio,
[data-theme="light"] .bio-lb-text,
[data-theme="light"] .nu-desc { color: var(--text-soft); }
[data-theme="light"] .nu-label { color: var(--text-faint); }
[data-theme="light"] .tf-stat-meta { color: var(--text-mute); }

/* - Crafts & Bazaar (crafts-and-bazaar.html) - */
[data-theme="light"] .story-body p,
[data-theme="light"] .cuisine-prose p,
[data-theme="light"] .youth-body p,
[data-theme="light"] .ab-body p,
[data-theme="light"] .region-blurb,
[data-theme="light"] .strip-p { color: var(--text-soft); }
[data-theme="light"] .tf-stat-meta { color: var(--text-mute); }

/* - Programmes (programmes.html) - */
[data-theme="light"] .ip-prose p { color: var(--text-soft); }

/* - Plan Your Visit (plan-your-visit.html) - */
[data-theme="light"] .it-body p,
[data-theme="light"] .local-body p,
[data-theme="light"] .g-p,
[data-theme="light"] .faq-a { color: var(--text-soft); }

/* - Legacy (legacy.html) - */
[data-theme="light"] .ed-body p,
[data-theme="light"] .t-prose p,
[data-theme="light"] .ed-summary p,
[data-theme="light"] .st-body p,
[data-theme="light"] .sf-text p { color: var(--text-soft); }

/* - Press & Partners (press-and-partners.html) - */
[data-theme="light"] .upes-text p,
[data-theme="light"] .wp-p { color: var(--text-soft); }

/* - Terms & Privacy (terms-and-privacy.php) - */
[data-theme="light"] .tp-section p,
[data-theme="light"] .tp-section li,
[data-theme="light"] .tp-note { color: var(--text-soft); }

/* NOTE: text that sits on COLORED GRADIENT banners stays light and is
   intentionally NOT included above:
   .feature-cap (gradient image), .tile-meta (legend tiles),
   .sb-p (subscribe gradient), .sf-* on stage-feature gradient visual,
   .ongc-* (handled separately), all index.html .pc-/.bv-/.lb-/.cta- */

/* ============================================================
   CMS additions - photo slots, video gallery, partner logos
   (appended; do not edit above this line when updating design)
   ============================================================ */
.photo-slot{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;border-radius:inherit}
.photo-slot.contain{background-size:contain}
.photo-slot.scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,8,7,.10) 0%,rgba(15,8,7,.86) 92%)}
/* Homepage tile photo streams - several photos per tile, cross-fading in place.
   Plain class-toggle crossfade (JS adds/removes .on), same pattern as the
   hero carousel elsewhere on the homepage - works correctly for any number
   of photos, unlike a fixed-percentage @keyframes rule. */
.tile-stream-photo{opacity:0;transition:opacity 1.2s ease}
.tile-stream-photo.on{opacity:1}
@media (prefers-reduced-motion: reduce){.tile-stream-photo{transition:none}}
/* keep card text above any uploaded photo */
.preview-card>*,.lb-card>*,.l-tile>*,.ipi-card>*,.ipi-visual>*,.craft-tile>*,.bazaar-visual>*,.si-card>*,.sp-card>*,.lead-portrait>*{position:relative;z-index:1}
.lead-portrait{position:relative;overflow:hidden}
.ts-photo{position:relative;overflow:hidden}

/* Partner / sponsor logos sit on a light chip so transparent PNGs read in dark mode */
.sp-logo,.ss-logo{position:relative;display:inline-flex;align-items:center;justify-content:center}
.sp-p-card .photo-slot.contain{background-color:rgba(250,238,218,.94);border-radius:4px}
.ss-mark .photo-slot.contain{background-color:transparent}
/* .ss-mark.has-logo no longer needs its own size — position:relative already
   comes from the base .ss-mark rule. The old width:100%/height:100% here was
   silently overriding the tile's 148px sizing (higher specificity beats the
   base rule regardless of source order) — that was the real cause of the
   "tiny logo" bug, confirmed via the live page's rendered HTML/CSS. */
[data-theme="light"] .sp-p-card .photo-slot.contain{background-color:#fff}

/* ---- Video gallery ---- */
.vg-wrap{background:var(--ink)}
.vg-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vg-card{display:block;text-decoration:none;border-radius:6px;overflow:hidden;background:var(--ink-warm);border:1px solid var(--rule-soft);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.vg-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.vg-thumb{aspect-ratio:16/9;background:#1c110d center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center}
.vg-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,8,7,0) 40%,rgba(15,8,7,.55) 100%)}
.vg-play{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:rgba(250,238,218,.92);display:flex;align-items:center;justify-content:center}
.vg-play::before{content:"";border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--brown);margin-left:3px}
.vg-body{padding:16px 18px}
.vg-title{font-family:var(--serif);font-size:18px;color:var(--text);font-weight:500;line-height:1.25;margin-bottom:4px}
.vg-sub{font-size:12.5px;color:var(--parchment-mute)}
.vg-empty{max-width:1180px;margin:0 auto;text-align:center;color:var(--parchment-mute);padding:60px;border:1px dashed var(--rule);border-radius:8px}
[data-theme="light"] .vg-card{background:#fff}
[data-theme="light"] .vg-title{color:var(--text)}
@media(max-width:1024px){.vg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.vg-grid{grid-template-columns:1fr}}

/* Team photo (when a member has a portrait) - enlarged from the original
   84px circle per client feedback; square with soft corners to match the
   card language used elsewhere (.lead-card etc). */
.ts-card .ts-photo{width:150px;height:150px;border-radius:10px;margin:0 auto 14px;border:1px solid var(--rule)}
.ts-card.has-bio{cursor:pointer;transition:transform .25s ease}
.ts-card.has-bio:hover{transform:translateY(-3px)}
.ts-card.has-bio:hover .ts-photo{border-color:var(--marigold)}
.ts-card.has-bio:focus-visible{outline:2px solid var(--marigold);outline-offset:4px;border-radius:10px}

/* ---- Shared bio popup (team members + artists) ---- */
.bio-lightbox{position:fixed;inset:0;z-index:200;display:none}
.bio-lightbox.open{display:block}
.bio-lightbox-backdrop{position:absolute;inset:0;background:rgba(15,8,7,.72);backdrop-filter:blur(2px)}
.bio-lightbox-card{position:relative;max-width:520px;width:calc(100% - 40px);margin:8vh auto 0;background:var(--ink-warm);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);max-height:82vh;overflow-y:auto}
.bio-lightbox-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:rgba(15,8,7,.5);color:var(--parchment);font-size:20px;line-height:1;cursor:pointer;z-index:2}
.bio-lb-photo{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--ink-warmer)}
.bio-lb-body{padding:26px 28px 30px}
.bio-lb-role{font-size:11px;color:var(--marigold);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:8px;font-weight:500}
.bio-lb-name{font-family:var(--serif);font-size:26px;color:var(--parchment);font-weight:500;line-height:1.2;margin-bottom:6px}
.bio-lb-meta{font-size:13px;color:var(--parchment-mute);margin-bottom:14px}
.bio-lb-text{font-size:14.5px;color:rgba(250,238,218,.82);line-height:1.6;white-space:pre-line}
button.pc-artist{font:inherit;border:none;cursor:pointer}
button.pc-artist.has-bio:hover{background:var(--marigold);color:var(--ink)}
.lu-card.has-bio{cursor:pointer}
@media (max-width:600px){.bio-lightbox-card{margin-top:4vh;max-height:88vh}.bio-lb-body{padding:20px 20px 24px}}

/* Overlay containers - ensure positioning + content above photo */
.l-tile,.si-visual,.ipi-visual,.craft-tile,.sp-p-card{position:relative;overflow:hidden}
.si-visual>*,.ipi-visual>*,.craft-tile>*,.sp-p-card>*,.lead-portrait>*{position:relative;z-index:1}

/* Partner card logo area + feature image containers */
.sp-p-logo{position:relative;height:100px;margin-bottom:10px;background:rgba(250,238,218,.94);border-radius:4px}
.sp-p-logo .photo-slot.contain{background-color:transparent;padding:12px}
.ongc-img-placeholder,.upes-visual{position:relative;overflow:hidden}
.ongc-img-placeholder>*,.upes-visual>*{position:relative;z-index:1}

/* Uploaded photos (.photo-slot) are an absolute fill layer that must sit BEHIND
   each tile's caption text. Several tiles have a ".card > *" rule that forces
   every direct child to position:relative, collapsing the empty photo layer to
   zero height (image loads but is invisible). Some of those rules live in a
   page's own inline <style>, which loads AFTER this file - so we raise this
   selector's specificity (doubled class) to win by specificity, not order, and
   photos render on every tile everywhere: legends, leadership, homepage cards,
   crafts, sponsors, bazaar. */
.photo-slot.photo-slot{position:absolute;inset:0;z-index:0}

/* Light mode: image-backed page heroes keep a fixed DARK scrim (from
   hero_bg_attr) in both themes, so their text must stay light in light mode.
   Scope to .hero[style] - only heroes that actually have an uploaded image get
   the inline background style - so image-less heroes (light bg in light mode)
   keep their dark text. Gold .ac accents set their own colour and are left as is. */
[data-theme="light"] .hero[style]{color:#FAEEDA}
[data-theme="light"] .hero[style] .h1{color:#FAEEDA}
[data-theme="light"] .hero[style] .h-sub{color:rgba(250,238,218,.82)}
[data-theme="light"] .hero[style] .crumb{color:rgba(250,238,218,.72)}