/* =========================================================
   OC MENA Festival — Shared Stylesheet (site.css)
   Canonical CSS for all pages. Page-specific tweaks can be
   added inline on individual pages as needed.
   Source: extracted from about.html 2026-04-21
   ========================================================= */


/* =========================================================
   OC MENA Festival — Wireframe Stylesheet
   Palette: warm off-white, burgundy, olive, ink, gold
   Fonts: Winsome (display), Inter (body), Aisha+Aldhabi (Arabic),
          Warbler (banner), Centrifuge (eyebrows), Highjinks (codes)
   ========================================================= */
/* =========================================================
   OC MENA Festival — Wireframe Stylesheet
   Palette: warm off-white, burgundy, olive, ink, gold
   Fonts: Winsome (display), Inter (body), Aisha+Aldhabi (Arabic),
          Warbler (banner), Centrifuge (eyebrows), Highjinks (codes)
   ========================================================= */

/* ---------- Custom Fonts ---------- */
@font-face {
  font-family: 'Warbler';
  src: url('./assets/fonts/WarblerBanner-Bold-Testing-BF674fd3863b486.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Warbler';
  src: url('./assets/fonts/WarblerDisplay-Regular-Testing-BF674fd38517d84.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'WarblerText';
  src: url('./assets/fonts/WarblerText-Regular-Testing-BF674fd38749b97.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'WarblerText';
  src: url('./assets/fonts/WarblerText-Bold-Testing-BF674fd3871360d.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Aldhabi';
  src: url('./assets/fonts/aldhabi.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Aisha Arabic';
  src: url('./assets/fonts/aisha-arabic-regular.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}


:root {
  /* Light browns → light grays per client */
  --cream: #F4F4F5;
  --cream-2: #E7E7EA;
  --cream-3: #D4D4D8;
  --burgundy: #8B1E1E;
  --burgundy-deep: #5E1313;
  --olive: #6B7D4F;
  --olive-deep: #4E5C3A;
  --gold: #C89B3C;
  --ink: #1A1512;
  --ink-2: #3A2F28;
  --muted: #6B7280;
  --line: rgba(26, 21, 18, 0.12);
  --line-2: rgba(26, 21, 18, 0.22);

  /* Live-site red pill button */
  --red: #DC2F3F;
  --red-hover: #B71D2D;

  --f-display: "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-ar: "Aldhabi", "Aisha Arabic", "Times New Roman", serif;
  --f-ar-body: "Aldhabi", "Aisha Arabic", "Times New Roman", serif;
  --f-ar-accent: "Aldhabi", "Aisha Arabic", serif;
  --f-eyebrow: "Inter", system-ui, sans-serif;
  --f-code: "JetBrains Mono", "Courier New", monospace;

  --maxw: 1320px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   ARABIC SIZING RULE  ·  ★ project convention
   ------------------------------------------------------------
   Whenever Aldhabi (Arabic) sits NEXT TO Latin text — inline,
   in the same line/heading/label — its font-size MUST be 1.7em.
   Use `em` (not rem/clamp) so the Arabic always scales with its
   English neighbor automatically.
   Standalone Arabic blocks (no English neighbor) keep their own
   designed size.
   ============================================================ */


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- Placeholder pattern ---------- */
.img-placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(139, 30, 30, 0.06) 0 12px,
      rgba(139, 30, 30, 0.02) 12px 24px),
    var(--cream-2);
  border: 1px dashed rgba(139, 30, 30, 0.3);
  color: var(--burgundy-deep);
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1rem;
}

/* ---------- NAV ---------- */
.brand-en {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--ink);
}
.brand-dot { color: var(--burgundy); }

.nav .nav-drop .caret { font-size: 0.7rem; color: var(--muted); }
.nav-drop-menu a { color: rgba(255,255,255,0.9); }
/* ---------- Adaptive nav: light pages (dark hero background) → white text ---------- */
/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  overflow: visible;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  /* Extend bg down to cover the carousel area */
  bottom: -260px;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3)  0%,
    rgba(0,0,0,0.15) 25%,
    rgba(0,0,0,0.5)  55%,
    rgba(0,0,0,0.88) 80%,
    rgba(0,0,0,0.95) 100%
  );
}
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.hero-content {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(4rem, 8vh, 7rem) var(--pad) 2rem;
  position: relative; z-index: 2;
}
.hero-logo {
  height: clamp(60px, 8vw, 100px);
  width: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.8rem;
}
/* Arabic word inline in English headline */
.ar-inline {
  font-family: var(--f-ar);
  font-weight: 700;
  color: #7BCDCC;
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.1em;
  letter-spacing: 0;
}
/* SoCal mark — Crimson Text serif from Wahhab's site */
.la-mark {
  font-family: 'Crimson Text', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  color: #7BCDCC;
  letter-spacing: -0.03em;
}
.hero-pill {
  display: inline-block;
  background: rgba(15, 8, 5, 0.55);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(200, 155, 60, 0.45);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}
.eyebrow {
  font-family: var(--f-body);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 1.5rem;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.eyebrow .sep { color: rgba(200, 155, 60, 0.5); }
.hero-title {
  display: flex; flex-direction: column; gap: 0.6rem;
  align-items: center;
  margin: 0 0 1.5rem;
  text-align: center;
}
.h1-en {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-align: center;
  max-width: 22ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}
.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 52ch;
  color: rgba(255,255,255,0.85);
  margin: 0 0 2.2rem;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.8rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.22s ease;
}
.btn-primary {
  background: linear-gradient(135deg,
    rgba(200, 155, 60, 0.35) 0%,
    rgba(160, 110, 15, 0.35) 50%,
    rgba(120, 80, 5, 0.35) 100%
  );
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(200, 155, 60, 0.35);
  color: var(--gold);
}
.btn-primary:hover { background: rgba(200, 155, 60, 0.45); border-color: rgba(200, 155, 60, 0.5); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(15, 8, 5, 0.25);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.4); }

.hero-countdown {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  margin: 0.4rem auto 0;
}
.cd-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,238,224,0.6);
}
.cd-value {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.cd-value span { color: var(--gold); font-weight: 700; }

/* ---------- Section head ---------- */
.section-head {
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 0 var(--pad);
}
.section-head.centered { text-align: center; }
.eyebrow-dark {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 1rem;
}
.ar-small {
  font-family: var(--f-ar);
  font-weight: 400;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.7em;     /* Aldhabi-next-to-English rule */
  margin-left: 0.5rem;
  vertical-align: middle;
  line-height: 1;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  max-width: 24ch;
  color: var(--ink);
}
.section-head.centered .h2 { margin-left: auto; margin-right: auto; }
.link-arrow {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link-arrow:hover { color: var(--burgundy-deep); border-color: var(--burgundy-deep); }
.link-arrow-sm {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--burgundy);
}
.link-arrow-sm:hover { color: var(--burgundy-deep); }

/* ---------- Three days ---------- */
.three-days {
  padding: 6rem 0;
  background: var(--cream-2);
}
.days-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.day-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 2rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.day-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(26, 21, 18, 0.2);
}
.day-card.is-featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.day-card.is-featured .day-label,
.day-card.is-featured .day-date,
.day-card.is-featured .day-body { color: var(--cream); }
.day-card.is-featured .link-arrow-sm { color: var(--gold); }
.day-card.is-featured .link-arrow-sm:hover { color: var(--cream); }
.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1.25rem;
}
.day-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink);
}
.day-date {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.day-img {
  height: 180px;
  margin-bottom: 1.25rem;
}
.day-card.is-featured .day-img {
  background:
    repeating-linear-gradient(45deg,
      rgba(200, 155, 60, 0.1) 0 12px,
      rgba(200, 155, 60, 0.02) 12px 24px),
    var(--ink-2);
  border-color: rgba(200, 155, 60, 0.25);
  color: var(--gold);
}
.day-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.day-body strong {
  color: var(--burgundy);
  font-weight: 600;
}
.day-card.is-featured .day-body strong { color: var(--gold); }

/* ---------- Experience ---------- */
.experience {
  padding: 6rem 0;
  background: var(--cream);
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.exp-card {
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  transition: border-color 0.2s, transform 0.25s;
}
.exp-card:hover { border-color: var(--burgundy); transform: translateY(-4px); }
.exp-img {
  height: 220px;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.exp-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 1.5rem 1.5rem 0.6rem;
  letter-spacing: -0.01em;
}
.exp-sub {
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 1.5rem 1.5rem;
  line-height: 1.55;
}
.exp-link {
  margin: auto 1.5rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
}

/* ---------- MENA Teaser ---------- */
.mena-teaser {
  padding: 6rem 0;
  background: var(--ink);
  color: var(--cream);
}
.mena-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.mena-teaser .eyebrow-dark { color: var(--gold); }
.mena-teaser .ar-small { color: rgba(245, 238, 224, 0.5); }
.mena-teaser .h2 { color: var(--cream); max-width: 20ch; }
.mena-teaser .body-lg {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(245, 238, 224, 0.78);
  margin: 1.2rem 0 1.5rem;
  max-width: 52ch;
}
.mena-teaser .link-arrow {
  color: var(--gold);
  border-color: var(--gold);
}
.mena-teaser .link-arrow:hover { color: var(--cream); border-color: var(--cream); }
.mena-img {
  height: 380px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200, 155, 60, 0.18), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(200, 155, 60, 0.08) 0 12px,
      transparent 12px 24px),
    var(--ink-2);
  border-color: rgba(200, 155, 60, 0.25);
  color: var(--gold);
}

/* ---------- Sponsors ---------- */
.sponsors {
  padding: 6rem 0 4rem;
  background: var(--cream-2);
}
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.sponsor-slot .sp-img {
  height: 120px;
  font-size: 0.7rem;
  background: var(--cream);
}
.sponsor-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ---------- Instagram ---------- */
.ig-feed {
  padding: 6rem 0;
  background: var(--cream);
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.ig-tile {
  aspect-ratio: 1 / 1;
  font-size: 0.72rem;
}

/* ---------- Footer ---------- */
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: var(--cream); }
.footer-legal span { margin: 0 0.5rem; }

/* =========================================================
   PAGE: Lineup
   ========================================================= */
.page-head {
  padding: 6rem var(--pad) 3rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.page-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 1.25rem;
}
.page-title {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin: 0 0 1.5rem;
}
.page-title .pt-ar {
  font-family: var(--f-ar);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--burgundy);
  line-height: 1;
  direction: rtl;
}
.page-title .pt-en {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.page-lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.55;
  margin: 0;
}

.filter-bar {
  position: sticky; top: 72px; z-index: 30;
  background: rgba(245, 238, 224, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--pad);
}
.filter-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.filter-group { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-right: 0.5rem;
}
.filter-btn {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--burgundy); color: var(--burgundy); }
.filter-btn.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem var(--pad) 6rem;
}
.lineup-card {
  display: flex; flex-direction: column;
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: transform 0.25s, border-color 0.25s;
  position: relative;
}
.lineup-card:hover { transform: translateY(-5px); border-color: var(--burgundy); }
.lineup-card .artist-img { height: 300px; }
.lineup-card .day-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--burgundy);
  color: var(--cream);
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.lineup-card .day-badge.sat { background: var(--burgundy); }
.lineup-card .day-badge.sun { background: var(--olive); }
.lineup-card .day-badge.fri { background: var(--gold); color: var(--ink); }
.lineup-card .lc-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.lineup-card .lc-ar {
  font-family: var(--f-ar);
  font-weight: 700;
  color: var(--burgundy);
  font-size: calc(1.7 * 1.45rem);   /* Aldhabi-next-to-English rule: 1.7× .lc-en (1.45rem) */
  line-height: 1.1;
  direction: rtl;
  margin: 0 0 0.2rem;
}
.lineup-card .lc-en {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.45rem;
  margin: 0 0 0.6rem;
}
.lineup-card .lc-meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.lineup-card .lc-bio {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.lineup-card .lc-cta {
  margin-top: auto;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
}

/* =========================================================
   PLACEHOLDER PAGE
   ========================================================= */
.placeholder-page {
  padding: 8rem var(--pad) 10rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.placeholder-page .pp-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 1.5rem;
}
.placeholder-page .pp-en {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}
.placeholder-page .pp-note {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--cream-2);
  border: 1px dashed rgba(139, 30, 30, 0.3);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy-deep);
  margin: 0 0 2rem;
}
.placeholder-page .pp-body {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto 2.5rem;
}
.placeholder-page .pp-next {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  background: var(--burgundy);
  color: var(--cream);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.placeholder-page .pp-next:hover { background: var(--burgundy-deep); }

/* =========================================================
   PAGE: Tickets
   ========================================================= */
.tickets-intro {
  background: var(--cream);
  padding: 0 var(--pad) 3rem;
}
.tickets-intro-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: end;
}
.tickets-intro .page-lede { max-width: 50ch; }
.tickets-quickfacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
  padding: 1.5rem;
  background: var(--cream-2);
  border-left: 3px solid var(--burgundy);
}
.qf-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.qf-value {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 0.6rem;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem var(--pad) 4rem;
}
.tier-card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--burgundy);
  box-shadow: 0 20px 40px -20px rgba(26, 21, 18, 0.2);
}
.tier-card.is-featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.tier-card.is-featured .tier-name,
.tier-card.is-featured .tier-includes li,
.tier-card.is-featured .tier-price,
.tier-card.is-featured .tier-tag { color: var(--cream); }
.tier-card.is-featured .tier-includes li::before { color: var(--gold); }
.tier-tag {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
}
.tier-card.is-featured .tier-tag { color: var(--gold); }
.tier-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.tier-ar {
  font-family: var(--f-ar);
  color: var(--burgundy);
  font-size: calc(1.7 * 1.6rem);   /* Aldhabi-next-to-English rule: 1.7× .tier-name (1.6rem) */
  margin: 0 0 1rem;
  direction: rtl;
}
.tier-card.is-featured .tier-ar { color: var(--gold); }
.tier-price {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 500;
  margin: 0.5rem 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tier-price-note {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.tier-card.is-featured .tier-price-note { color: rgba(245, 238, 224, 0.6); }
.tier-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.92rem;
}
.tier-includes li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(26, 21, 18, 0.08);
  line-height: 1.45;
}
.tier-card.is-featured .tier-includes li {
  border-bottom-color: rgba(245, 238, 224, 0.12);
  color: rgba(245, 238, 224, 0.88);
}
.tier-includes li:last-child { border-bottom: 0; }
.tier-includes li::before {
  content: "◆";
  position: absolute;
  left: 0; top: 0.5rem;
  color: var(--burgundy);
  font-size: 0.7rem;
}
.tier-cta {
  display: block;
  text-align: center;
  padding: 0.9rem 1.2rem;
  background: var(--burgundy);
  color: var(--cream);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  transition: background 0.2s;
}
.tier-cta:hover { background: var(--burgundy-deep); }
.tier-card.is-featured .tier-cta { background: var(--gold); color: var(--ink); }
.tier-card.is-featured .tier-cta:hover { background: var(--cream); }

.tickets-notes {
  background: var(--cream-2);
  padding: 4rem var(--pad);
}
.tickets-notes-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.note-block h4 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.8rem;
  color: var(--burgundy);
}
.note-block p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* =========================================================
   PAGE: Schedule
   ========================================================= */
.day-tabs {
  position: sticky; top: 72px; z-index: 30;
  background: rgba(245, 238, 224, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--pad);
}
.day-tabs-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.day-tab {
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  transition: all 0.2s;
  background: transparent;
}
.day-tab:hover { border-color: var(--burgundy); color: var(--burgundy); }
.day-tab.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.day-tab .dt-date {
  display: inline-block;
  margin-left: 0.4rem;
  opacity: 0.7;
  font-size: 0.8em;
}

.schedule-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem var(--pad) 5rem;
}
.stage-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.stage-row:first-of-type { border-top: 0; padding-top: 0; }
.stage-label {
  position: sticky;
  top: 150px;
  align-self: flex-start;
}
.stage-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stage-name-ar {
  font-family: var(--f-ar);
  font-size: calc(1.7 * 1.3rem);   /* Aldhabi-next-to-English rule: 1.7× .stage-name (1.3rem) */
  color: var(--burgundy);
  direction: rtl;
  margin: 0 0 0.5rem;
}
.stage-capacity {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.set-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.set-block {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--cream-2);
  border-left: 3px solid var(--burgundy);
  transition: background 0.2s, transform 0.2s;
  color: inherit;
}
.set-block:hover {
  background: var(--cream-3);
  transform: translateX(4px);
}
.set-block.is-headline {
  background: var(--ink);
  color: var(--cream);
  border-left-color: var(--gold);
}
.set-block.is-headline .set-artist { color: var(--cream); }
.set-block.is-headline .set-note { color: rgba(245, 238, 224, 0.7); }
.set-time {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.set-block.is-headline .set-time { color: var(--gold); }
.set-artist {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.set-artist-ar {
  font-family: var(--f-ar);
  font-weight: 400;
  color: var(--burgundy);
  font-size: 1.7em;     /* Aldhabi-next-to-English rule (inline inside .set-artist) */
  margin-left: 0.5rem;
  direction: rtl;
}
.set-block.is-headline .set-artist-ar { color: var(--gold); }
.set-note {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.set-arrow {
  font-size: 1rem;
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
}
.set-block:hover .set-arrow { transform: translateX(3px); color: var(--burgundy); }
.set-block.is-headline .set-arrow { color: var(--gold); }

.schedule-empty {
  padding: 2rem;
  text-align: center;
  font-style: italic;
  color: var(--muted);
  background: var(--cream-2);
  border: 1px dashed var(--line-2);
}

/* =========================================================
   PAGE: Map
   ========================================================= */
.map-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem var(--pad) 5rem;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}
.map-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(200, 155, 60, 0.12), transparent 60%),
    repeating-linear-gradient(45deg,
      rgba(107, 125, 79, 0.08) 0 12px,
      transparent 12px 24px),
    var(--cream-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.map-canvas svg { width: 100%; height: 100%; display: block; }
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.map-pin-dot {
  width: 14px; height: 14px;
  background: var(--burgundy);
  border: 2px solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(26, 21, 18, 0.25);
  transition: transform 0.2s, background 0.2s;
}
.map-pin:hover .map-pin-dot { transform: scale(1.3); background: var(--gold); }
.map-pin-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background: rgba(245, 238, 224, 0.92);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
.map-pin.is-stage .map-pin-dot { background: var(--gold); width: 18px; height: 18px; }
.map-pin.is-amenity .map-pin-dot { background: var(--olive); }
.map-pin.is-entry .map-pin-dot { background: var(--ink); }

.map-legend {
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 1.75rem;
  position: sticky;
  top: 100px;
}
.map-legend h3 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin: 0 0 1rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.legend-group {
  margin-bottom: 1.5rem;
}
.legend-group:last-child { margin-bottom: 0; }
.legend-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(26, 21, 18, 0.06);
}
.legend-item:last-child { border-bottom: 0; }
.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot.stage { background: var(--gold); }
.legend-dot.food { background: var(--burgundy); }
.legend-dot.amenity { background: var(--olive); }
.legend-dot.entry { background: var(--ink); }

/* =========================================================
   PAGE: Info
   ========================================================= */
.info-toc {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem var(--pad);
  position: sticky; top: 72px; z-index: 30;
}
.info-toc-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.info-toc a {
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  transition: all 0.2s;
}
.info-toc a:hover {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}

.info-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem var(--pad) 2rem;
  border-bottom: 1px solid var(--line);
}
.info-section:last-of-type { border-bottom: 0; padding-bottom: 6rem; }
.info-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin: 0 0 0.8rem;
}
.info-title {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  margin: 0 0 0.3rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.info-title-ar {
  font-family: var(--f-ar);
  color: var(--burgundy);
  font-size: clamp(calc(1.7 * 1.7rem), calc(1.7 * 3vw), calc(1.7 * 2.4rem));   /* Aldhabi-next-to-English rule: 1.7× .info-title */
  margin: 0 0 1.5rem;
  direction: rtl;
}
.info-body {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.info-body strong { color: var(--ink); font-weight: 600; }
.info-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.info-list li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  position: relative;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(26, 21, 18, 0.08);
  line-height: 1.5;
  font-size: 0.97rem;
}
.info-list li:last-child { border-bottom: 0; }
.info-list li::before {
  content: "▸";
  position: absolute;
  left: 0; top: 0.8rem;
  color: var(--burgundy);
  font-size: 0.8rem;
}
.info-callout {
  background: var(--cream-2);
  border-left: 3px solid var(--burgundy);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.info-callout strong { color: var(--burgundy); }

/* =========================================================
   PAGE: What is MENA
   ========================================================= */
.mena-hero {
  background: var(--ink);
  color: var(--cream);
  padding: 6rem var(--pad) 5rem;
}
.mena-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mena-hero .page-eyebrow { color: var(--gold); }
.mena-hero .pt-ar { color: var(--gold); }
.mena-hero .pt-en { color: var(--cream); }
.mena-hero-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(245, 238, 224, 0.8);
  max-width: 52ch;
  margin: 1.5rem 0 0;
}
.mena-hero-visual .img-placeholder {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200, 155, 60, 0.18), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(200, 155, 60, 0.08) 0 14px,
      transparent 14px 28px),
    var(--ink-2);
  border-color: rgba(200, 155, 60, 0.3);
  color: var(--gold);
}

.mena-stats {
  background: var(--cream);
  padding: 5rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.mena-stats-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.stat-block {
  border-top: 2px solid var(--burgundy);
  padding-top: 1.25rem;
}
.stat-number {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.stat-label {
  font-family: var(--f-body);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.stat-note {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

.region-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.region-card {
  padding: 2rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: transform 0.25s, border-color 0.2s;
}
.region-card:hover { transform: translateY(-4px); border-color: var(--burgundy); }
.region-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.region-name-ar {
  font-family: var(--f-ar);
  color: var(--burgundy);
  font-size: calc(1.7 * 1.4rem);   /* Aldhabi-next-to-English rule: 1.7× .region-name (1.4rem) */
  margin: 0 0 0.8rem;
  direction: rtl;
}
.region-countries {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1rem;
}
.region-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.why-mena {
  background: var(--cream-2);
  padding: 6rem var(--pad);
}
.why-mena-inner {
  max-width: 900px;
  margin: 0 auto;
}
.why-mena h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 2rem;
  max-width: 22ch;
}
.why-mena p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.25rem;
}
.why-mena .pull-quote {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--burgundy);
  border-left: 3px solid var(--burgundy);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  letter-spacing: -0.005em;
}

/* =========================================================
   PAGE: About
   ========================================================= */
.about-hero {
  padding: 4rem var(--pad) 5rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
.about-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about-hero-img {
  aspect-ratio: 5 / 4;
}

.about-pillars {
  background: var(--cream-2);
  padding: 6rem var(--pad);
}
.about-pillars-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.pillar {
  padding-top: 1.5rem;
  border-top: 2px solid var(--burgundy);
}
.pillar-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.pillar-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 0.8rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pillar-body {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.team-section {
  padding: 6rem var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.team-card {
  text-align: left;
}
.team-img {
  aspect-ratio: 4 / 5;
  margin-bottom: 1rem;
}
.team-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.team-role {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.team-bio {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

.partner-band {
  background: var(--ink);
  color: var(--cream);
  padding: 5rem var(--pad);
  text-align: center;
}
.partner-band h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 auto 1rem;
  max-width: 28ch;
  color: var(--cream);
  letter-spacing: -0.015em;
}
.partner-band p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(245, 238, 224, 0.75);
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.partner-band .btn-ghost {
  color: var(--cream);
  border-color: var(--cream);
}
.partner-band .btn-ghost:hover { background: var(--cream); color: var(--ink); }

/* =========================================================
   PAGE: Food & Bazaar
   ========================================================= */
.cuisine-map {
  background: var(--cream-2);
  padding: 5rem var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cuisine-map-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.cuisine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.cuisine-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 1.5rem;
  transition: transform 0.25s, border-color 0.2s;
}
.cuisine-card:hover { transform: translateY(-4px); border-color: var(--burgundy); }
.cuisine-flag {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 0.5rem;
}
.cuisine-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cuisine-name-ar {
  font-family: var(--f-ar);
  color: var(--burgundy);
  font-size: calc(1.7 * 1.3rem);   /* Aldhabi-next-to-English rule: 1.7× .cuisine-name (1.3rem) */
  margin: 0 0 0.8rem;
  direction: rtl;
}
.cuisine-dishes {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.cuisine-dishes em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

.featured-stalls {
  padding: 6rem var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.stalls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.stall-card {
  display: flex; flex-direction: column;
  background: var(--cream-2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.25s;
}
.stall-card:hover { transform: translateY(-4px); }
.stall-img {
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.stall-body { padding: 1.5rem; }
.stall-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.2rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.stall-loc {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.8rem;
}
.stall-body p {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.bazaar-band {
  background: var(--ink);
  color: var(--cream);
  padding: 5rem var(--pad);
}
.bazaar-band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.bazaar-band h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}
.bazaar-band .pt-ar { color: var(--gold); font-size: 2rem; margin: 0 0 1rem; }
.bazaar-band p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(245, 238, 224, 0.8);
  margin: 0 0 1.25rem;
}
.bazaar-band .pillar-num { color: var(--gold); }
.bazaar-categories {
  background: rgba(200, 155, 60, 0.08);
  border: 1px solid rgba(200, 155, 60, 0.2);
  padding: 1.8rem;
}
.bazaar-categories h4 {
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
  font-weight: 600;
}
.bazaar-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bazaar-categories li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(245, 238, 224, 0.1);
  font-size: 0.95rem;
  color: rgba(245, 238, 224, 0.88);
}
.bazaar-categories li:last-child { border-bottom: 0; }

/* =========================================================
   PAGE: Stages
   ========================================================= */
.stage-detail {
  padding: 6rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.stage-detail:nth-child(even) { background: var(--cream-2); }
.stage-detail-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.stage-visual .img-placeholder {
  aspect-ratio: 5 / 4;
}
.stage-detail-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 600;
  margin: 0 0 1rem;
}
.stage-detail h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.3rem;
}
.stage-detail .stage-name-ar {
  font-family: var(--f-ar);
  color: var(--burgundy);
  font-size: 1.7em;     /* Aldhabi-next-to-English rule (inherits .stage-detail .stage-name size as em base) */
  margin: 0 0 1.5rem;
  direction: rtl;
}
.stage-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--cream);
  border-left: 3px solid var(--burgundy);
}
.stage-detail:nth-child(even) .stage-specs { background: var(--cream); }
.spec-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.spec-value {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.stage-detail p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1rem;
}
.stage-detail.is-headliner {
  background: var(--ink);
  color: var(--cream);
}
.stage-detail.is-headliner h2 { color: var(--cream); }
.stage-detail.is-headliner .stage-name-ar { color: var(--gold); }
.stage-detail.is-headliner .stage-detail-eyebrow { color: var(--gold); }
.stage-detail.is-headliner p { color: rgba(245, 238, 224, 0.78); }
.stage-detail.is-headliner .stage-specs {
  background: rgba(200, 155, 60, 0.08);
  border-left-color: var(--gold);
}
.stage-detail.is-headliner .spec-label { color: rgba(200, 155, 60, 0.65); }
.stage-detail.is-headliner .spec-value { color: var(--cream); }
.stage-detail.is-headliner .stage-visual .img-placeholder {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200, 155, 60, 0.18), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(200, 155, 60, 0.08) 0 14px,
      transparent 14px 28px),
    var(--ink-2);
  border-color: rgba(200, 155, 60, 0.3);
  color: var(--gold);
}

/* =========================================================
   RIDES & FAMILY
   ========================================================= */
.rides-hero {
  background: linear-gradient(135deg, rgba(139, 30, 30, 0.08) 0%, rgba(200, 155, 60, 0.06) 100%);
  padding: 5rem var(--pad) 4rem;
  border-bottom: 1px solid var(--line);
}
.rides-hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center;
}
.rides-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem;
}
.rides-stat {
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem;
}
.rides-stat .num {
  font-family: var(--f-display); font-size: 2rem; color: var(--burgundy);
  font-weight: 600; line-height: 1;
}
.rides-stat .lbl {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(26, 21, 18, 0.6); margin-top: 0.5rem;
}
.rides-grid-section { padding: 5rem var(--pad); }
.rides-grid {
  max-width: 1200px; margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.ride-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.ride-img {
  aspect-ratio: 4 / 3; background: rgba(139, 30, 30, 0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(26, 21, 18, 0.4); font-size: 0.85rem; text-align: center; padding: 1rem;
  border-bottom: 1px solid var(--line);
}
.ride-body { padding: 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.ride-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--burgundy); font-weight: 600;
}
.ride-name { font-family: var(--f-display); font-size: 1.35rem; color: var(--ink); }
.ride-meta {
  display: flex; gap: 1rem; font-size: 0.8rem; color: rgba(26, 21, 18, 0.6);
  padding-top: 0.5rem; border-top: 1px dashed var(--line); margin-top: auto;
}
.family-band {
  background: var(--ink); color: var(--cream); padding: 5rem var(--pad);
}
.family-band-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.family-band h2 { color: var(--cream); }
.family-list {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; gap: 0.85rem;
}
.family-list li {
  padding: 0.75rem 0; border-bottom: 1px solid rgba(245, 238, 224, 0.12);
  color: rgba(245, 238, 224, 0.85);
}
.family-list li strong { color: var(--gold); display: block; font-family: var(--f-display); font-weight: 500; margin-bottom: 0.2rem; font-size: 1.05rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-layout {
  max-width: 1100px; margin: 3rem auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 240px 1fr; gap: 3rem;
}
.faq-toc {
  position: sticky; top: 90px; align-self: start;
  display: flex; flex-direction: column; gap: 0.25rem;
  border-left: 1px solid var(--line); padding-left: 1rem;
}
.faq-toc a {
  color: rgba(26, 21, 18, 0.7); text-decoration: none; padding: 0.4rem 0;
  font-size: 0.9rem; transition: color 150ms;
}
.faq-toc a:hover { color: var(--burgundy); }
.faq-section { margin-bottom: 3rem; }
.faq-section h2 {
  font-family: var(--f-display); font-size: 1.6rem; color: var(--burgundy);
  margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line); padding: 1rem 0;
}
.faq-q {
  font-family: var(--f-display); font-size: 1.1rem; color: var(--ink);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; font-size: 1.5rem; color: var(--burgundy); font-weight: 300;
  transition: transform 200ms;
}
details[open] .faq-q::after { content: '−'; }
.faq-a {
  padding-top: 0.75rem; color: rgba(26, 21, 18, 0.75); line-height: 1.7;
  font-size: 0.95rem;
}
.faq-a p + p { margin-top: 0.75rem; }

/* =========================================================
   SPONSORS / VENDORS PAGES (sales-y)
   ========================================================= */
.sales-hero {
  background: var(--ink); color: var(--cream);
  padding: 6rem var(--pad) 5rem;
  position: relative; overflow: hidden;
}
.sales-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(200, 155, 60, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(139, 30, 30, 0.15) 0%, transparent 50%);
}
.sales-hero-inner {
  max-width: 1100px; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: end;
}
.sales-hero h1 {
  font-family: var(--f-display); font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.05; color: var(--cream); font-weight: 500;
}
.sales-hero h1 em { color: var(--gold); font-style: normal; }
.sales-hero p { color: rgba(245, 238, 224, 0.75); font-size: 1.1rem; line-height: 1.6; margin-top: 1.5rem; }
.sales-hero .page-eyebrow { color: var(--gold); margin-bottom: 1.5rem; }
.sales-numbers {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  padding: 2rem; border: 1px solid rgba(245, 238, 224, 0.15); border-radius: 16px;
  background: rgba(245, 238, 224, 0.02);
}
.sales-num .big {
  font-family: var(--f-display); font-size: 2.5rem; color: var(--gold);
  line-height: 1; font-weight: 500;
}
.sales-num .lbl {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(245, 238, 224, 0.55); margin-top: 0.4rem;
}

.why-band { padding: 5rem var(--pad); background: var(--cream); }
.why-grid {
  max-width: 1100px; margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.why-card {
  padding: 2rem; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(139, 30, 30, 0.02);
}
.why-num {
  font-family: var(--f-display); color: var(--burgundy); font-size: 1.3rem;
  font-weight: 500; margin-bottom: 0.75rem;
}
.why-card h3 { font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 0.5rem; }
.why-card p { color: rgba(26, 21, 18, 0.7); font-size: 0.95rem; line-height: 1.6; }

.tier-pricing { padding: 5rem var(--pad); background: rgba(245, 238, 224, 0.5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sponsor-tier-grid {
  max-width: 1200px; margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.sponsor-tier {
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  padding: 2rem 1.5rem; display: flex; flex-direction: column;
}
.sponsor-tier.is-featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(200, 155, 60, 0.05) 0%, var(--cream) 100%); box-shadow: 0 10px 40px rgba(139, 30, 30, 0.08); }
.sponsor-tier.is-featured .tier-badge { background: var(--gold); color: var(--ink); }
.tier-badge {
  display: inline-block; background: rgba(26, 21, 18, 0.08); color: var(--ink);
  padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  align-self: flex-start; margin-bottom: 1rem;
}
.tier-label {
  font-family: var(--f-display); font-size: 1.5rem; color: var(--burgundy);
  margin-bottom: 0.3rem;
}
.sponsor-tier .tier-ar {
  font-family: var(--f-ar); color: rgba(26, 21, 18, 0.5);
  font-size: calc(1.7 * 1.5rem);   /* Aldhabi-next-to-English rule: 1.7× .tier-label (1.5rem) */
  margin-bottom: 1rem;
}
.tier-price-line {
  font-family: var(--f-display); font-size: 2rem; color: var(--ink);
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line);
}
.tier-price-line span { font-size: 0.85rem; color: rgba(26, 21, 18, 0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.tier-perks {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem;
}
.tier-perks li {
  font-size: 0.9rem; color: rgba(26, 21, 18, 0.75); line-height: 1.5;
  padding-left: 1.25rem; position: relative;
}
.tier-perks li::before {
  content: '◆'; position: absolute; left: 0; top: 0;
  color: var(--gold); font-size: 0.7rem;
}

.audience-band { padding: 5rem var(--pad); background: var(--cream); }
.audience-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.audience-chart {
  background: var(--ink); color: var(--cream); padding: 2.5rem; border-radius: 16px;
  display: grid; gap: 1rem;
}
.audience-bar { display: grid; gap: 0.35rem; }
.audience-bar-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: rgba(245, 238, 224, 0.8);
}
.audience-bar-label strong { color: var(--gold); font-family: var(--f-display); font-weight: 500; }
.audience-bar-track {
  height: 6px; background: rgba(245, 238, 224, 0.1); border-radius: 3px; overflow: hidden;
}
.audience-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--burgundy), var(--gold));
  border-radius: 3px;
  width: var(--w, 0%);   /* data-driven width passed via inline style="--w: 52%" */
}

.cta-band {
  background: var(--burgundy); color: var(--cream);
  padding: 4rem var(--pad); text-align: center;
}
.cta-band h2 { color: var(--cream); font-family: var(--f-display); font-size: 2.2rem; font-weight: 500; }
.cta-band p { color: rgba(245, 238, 224, 0.85); margin: 1rem 0 2rem; font-size: 1.05rem; }
.cta-band .btn { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cta-band .btn:hover { background: var(--cream); border-color: var(--cream); }

/* Vendor-specific */
.vendor-process-band { padding: 5rem var(--pad); background: var(--cream); }
.process-steps {
  max-width: 1100px; margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  position: relative;
}
.process-step {
  background: rgba(245, 238, 224, 0.6); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem; position: relative;
}
.step-n {
  font-family: var(--f-display); color: var(--gold); font-size: 2.5rem;
  line-height: 1; margin-bottom: 0.5rem; font-weight: 500;
}
.process-step h4 { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 0.4rem; }
.process-step p { font-size: 0.88rem; color: rgba(26, 21, 18, 0.7); line-height: 1.55; }

.vendor-types-band { padding: 5rem var(--pad); background: rgba(245, 238, 224, 0.5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vtype-grid {
  max-width: 1100px; margin: 2rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  align-items: stretch;   /* explicit: every card fills its row's tallest height */
}
.vtype {
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem;
  display: flex; flex-direction: column;
  height: 100%;   /* belt-and-suspenders: fill the stretched grid cell */
  /* flex column + margin-top:auto on .vtype-fee pins the dashed rule to the bottom
     of every card so the fee line aligns across the row regardless of paragraph length */
}
.vtype h4 { font-family: var(--f-display); font-size: 1.15rem; color: var(--burgundy); margin: 0 0 0.75rem; }
.vtype p { font-size: 0.92rem; color: rgba(26, 21, 18, 0.75); line-height: 1.55; margin: 0 0 1rem; }
.vtype-fee {
  margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--line);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 600;
}

/* Form */
.apply-form-band { padding: 5rem var(--pad); background: var(--cream); }
.apply-form {
  max-width: 700px; margin: 2rem auto 0;
  display: grid; gap: 1.25rem;
}
.form-row { display: grid; gap: 0.4rem; }
.form-row.is-split { grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(26, 21, 18, 0.65); font-weight: 600;
}
.form-row input, .form-row select, .form-row textarea {
  background: rgba(245, 238, 224, 0.5); border: 1px solid var(--line);
  padding: 0.85rem 1rem; border-radius: 10px;
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink);
  transition: border-color 150ms;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--burgundy);
}
.form-row textarea { min-height: 120px; resize: vertical; }

/* =========================================================
   PARTNERS PAGE
   ========================================================= */
.partners-intro { padding: 5rem var(--pad) 3rem; max-width: 1100px; margin: 0 auto; }
.partner-category { padding: 4rem var(--pad); border-top: 1px solid var(--line); }
.partner-category-inner { max-width: 1100px; margin: 0 auto; }
.pcat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2rem; gap: 2rem; flex-wrap: wrap; }
.pcat-head h2 { font-family: var(--f-display); font-size: 1.8rem; color: var(--burgundy); }
.pcat-head .pcat-ar { font-family: var(--f-ar); color: rgba(26, 21, 18, 0.5); font-size: 1.7em; }   /* Aldhabi-next-to-English rule */
.pcat-head p { color: rgba(26, 21, 18, 0.65); font-size: 1.3rem; max-width: 500px; }
.partner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.partner-logo {
  aspect-ratio: 3 / 2; border: 1px solid var(--line); border-radius: 12px;
  background: var(--cream); display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center;
  font-family: var(--f-display); font-size: 1rem; color: rgba(26, 21, 18, 0.5);
  transition: all 200ms;
}
.partner-logo:hover { border-color: var(--burgundy); color: var(--ink); }
.affiliate-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.affiliate {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(245, 238, 224, 0.4);
}
.affiliate-mark {
  width: 56px; height: 56px; border-radius: 12px; background: var(--burgundy);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 1.4rem; font-weight: 500;
}
.affiliate h4 { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 0.25rem; }
.affiliate p { font-size: 0.9rem; color: rgba(26, 21, 18, 0.7); line-height: 1.55; }
.affiliate a { color: var(--burgundy); font-size: 0.85rem; text-decoration: none; margin-top: 0.4rem; display: inline-block; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-layout {
  max-width: 1100px; margin: 3rem auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem;
}
.contact-side { display: grid; gap: 2rem; align-content: start; }
.contact-block {
  padding: 1.5rem; background: rgba(245, 238, 224, 0.5);
  border: 1px solid var(--line); border-radius: 14px;
}
.contact-block .lbl {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--burgundy); font-weight: 600; margin-bottom: 0.5rem;
}
.contact-block h3 { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.5rem; }
.contact-block p { font-size: 0.92rem; color: rgba(26, 21, 18, 0.75); line-height: 1.55; }
.contact-block a { color: var(--burgundy); text-decoration: none; font-weight: 500; display: inline-block; margin-top: 0.4rem; }
.contact-form {
  background: var(--cream); border: 1px solid var(--line); border-radius: 16px;
  padding: 2.5rem; display: grid; gap: 1.25rem; align-self: start;
}
.contact-form h2 { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }
.social-row { display: flex; gap: 1rem; margin-top: 0.75rem; }
.social-row a {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ink); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-family: var(--f-display); font-weight: 500;
  transition: background 200ms;
}
.social-row a:hover { background: var(--burgundy); }

/* =========================================================
   ARTIST DETAIL PAGE
   ========================================================= */
.artist-hero {
  min-height: 70vh; position: relative; overflow: hidden;
  background: var(--ink); color: var(--cream);
  padding: 7rem var(--pad) 4rem;
  display: flex; align-items: end;
}
.artist-hero.is-warm { background: linear-gradient(135deg, #3a1010 0%, #1a0808 100%); }
.artist-hero.is-blue { background: linear-gradient(135deg, #0f1f2e 0%, #0a0f1a 100%); }
.artist-hero.is-olive { background: linear-gradient(135deg, #1f2a18 0%, #0d110a 100%); }
.artist-hero.is-gold { background: linear-gradient(135deg, #2e2310 0%, #1a1308 100%); }
.artist-hero.is-purple { background: linear-gradient(135deg, #25102e 0%, #13081a 100%); }
.artist-hero.is-ink { background: linear-gradient(135deg, #1a1512 0%, #000 100%); }
.artist-hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: end;
}
.artist-portrait {
  aspect-ratio: 3 / 4; border-radius: 20px;
  width: 100%; object-fit: cover; object-position: top center;
  display: block;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.artist-head {
  text-align: center;
}
.artist-head p.back {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(245, 238, 224, 0.5); margin-bottom: 2.5rem; text-align: left;
}
.artist-head p.back a { color: var(--gold); text-decoration: none; }
.artist-name-ar {
  font-family: var(--f-ar); font-size: 1.7em;     /* Aldhabi-next-to-English rule (vs .artist-name) */
  color: rgba(200, 155, 60, 0.85); font-weight: 400; margin: 0 0 0.25rem;
  direction: rtl; line-height: 1.2; text-align: center;
}
.artist-name {
  font-family: var(--f-display); font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.0; color: var(--cream); font-weight: 700;
  margin: 0 0 0.75rem; letter-spacing: 0.01em; text-align: center;
}
.artist-origin {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--gold); font-weight: 600; margin: 0 0 2rem; text-align: center;
}
.artist-tag {
  font-family: var(--f-body); font-style: italic;
  color: rgba(245, 238, 224, 0.7); font-size: 1.1rem; line-height: 1.5;
  max-width: 500px; border-left: 2px solid var(--gold); padding-left: 1rem;
  text-align: left; margin: 0 auto;
}
.artist-set {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(245, 238, 224, 0.15);
  display: flex; flex-wrap: wrap; gap: 2rem;
}
.set-meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.set-meta-item .k {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(245, 238, 224, 0.5); font-weight: 600;
}
.set-meta-item .v {
  font-family: var(--f-display); font-size: 1.1rem; color: var(--cream); font-weight: 500;
}

.artist-body {
  max-width: 900px; margin: 4rem auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 200px 1fr; gap: 3rem;
}
.artist-body-side {
  display: grid; gap: 2rem; align-content: start;
  position: sticky; top: 90px;
}
.artist-stat-line { display: grid; gap: 0.3rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.artist-stat-line .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(26, 21, 18, 0.55); font-weight: 600; }
.artist-stat-line .v { font-family: var(--f-display); font-size: 1.05rem; color: var(--ink); }

.artist-prose { font-size: 1.05rem; line-height: 1.8; color: rgba(26, 21, 18, 0.85); }
.artist-prose h2 {
  font-family: var(--f-display); font-size: 1.8rem; color: var(--burgundy);
  margin: 2rem 0 1rem; font-weight: 500;
}
.artist-prose h2:first-child { margin-top: 0; }
.artist-prose p { margin-bottom: 1.2rem; }
.artist-prose p:first-of-type::first-letter {
  font-family: var(--f-display); font-size: 3.8rem; color: var(--burgundy);
  float: left; line-height: 1; padding: 0.25rem 0.5rem 0 0; font-weight: 500;
}
.artist-prose blockquote {
  border-left: 3px solid var(--gold); padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0; font-family: var(--f-ar-accent); font-size: 1.5rem;
  color: var(--burgundy); font-style: normal; line-height: 1.65;
  direction: rtl; text-align: right;
}
.artist-prose blockquote cite {
  display: block; font-family: var(--f-body); font-size: 0.85rem;
  color: rgba(26, 21, 18, 0.6); font-style: normal; margin-top: 0.75rem; letter-spacing: 0.05em;
}

.essentials-band {
  background: var(--ink); color: var(--cream); padding: 5rem var(--pad);
}
.essentials-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
}
.essentials-head { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.essentials-head h3 { font-family: var(--f-display); font-size: 1.5rem; color: var(--gold); font-weight: 500; }
.tracklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.tracklist li {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 1rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(245, 238, 224, 0.1);
  font-size: 0.95rem;
}
.tracklist .n { color: rgba(245, 238, 224, 0.45); font-family: var(--f-display); font-size: 0.9rem; }
.tracklist .t { color: var(--cream); }
.tracklist .y { color: rgba(245, 238, 224, 0.5); font-size: 0.85rem; }
.listen-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1rem;
}
.listen-pill {
  padding: 0.85rem 1rem; border: 1px solid rgba(245, 238, 224, 0.15); border-radius: 10px;
  text-decoration: none; color: rgba(245, 238, 224, 0.85); font-size: 0.88rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  transition: all 200ms;
}
.listen-pill:hover { border-color: var(--gold); color: var(--gold); }
.listen-pill span { font-family: var(--f-display); font-size: 0.85rem; }

.artist-more { padding: 4rem var(--pad); background: rgba(245, 238, 224, 0.5); border-top: 1px solid var(--line); }
.artist-more-inner { max-width: 1200px; margin: 0 auto; }
.artist-more h3 { font-family: var(--f-display); font-size: 1.5rem; color: var(--burgundy); text-align: center; margin-bottom: 2rem; }
.artist-more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

/* =========================================================
   DSP BUTTONS — artist streaming links
   ========================================================= */
.dsp-buttons {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.25rem;
}
.dsp-btn {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(245, 238, 224, 0.18);
  border-radius: 10px;
  background: rgba(245, 238, 224, 0.03);
  text-decoration: none;
  color: rgba(245, 238, 224, 0.9);
  transition: all 220ms ease;
  position: relative; overflow: hidden;
}
.dsp-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 238, 224, 0.4);
  background: rgba(245, 238, 224, 0.08);
}
.dsp-btn-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dsp-btn-icon svg { width: 100%; height: 100%; }
.dsp-btn-text { display: flex; flex-direction: column; line-height: 1.15; }
.dsp-btn-text .sub {
  font-family: var(--f-eyebrow); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245, 238, 224, 0.5);
}
.dsp-btn-text .name {
  font-family: var(--f-display); font-size: 1rem; color: var(--cream);
  margin-top: 2px;
}
.dsp-btn.spotify:hover { border-color: #1DB954; background: rgba(29, 185, 84, 0.08); }
.dsp-btn.spotify:hover .name { color: #1DB954; }
.dsp-btn.apple:hover { border-color: #FA57C1; background: rgba(250, 87, 193, 0.08); }
.dsp-btn.apple:hover .name { color: #FA57C1; }
.dsp-btn.youtube:hover { border-color: #FF0033; background: rgba(255, 0, 51, 0.08); }
.dsp-btn.youtube:hover .name { color: #FF0033; }
.dsp-btn.anghami:hover { border-color: #A020F0; background: rgba(160, 32, 240, 0.08); }
.dsp-btn.anghami:hover .name { color: #A020F0; }

.dsp-label {
  font-family: var(--f-eyebrow); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(245, 238, 224, 0.55);
  margin-top: 1.5rem; margin-bottom: 0.5rem;
}

/* =========================================================
   HEARTBEAT — primary Get Tickets CTA
   ========================================================= */
@keyframes heartbeat {
  0%   { box-shadow: 0 0 0 0 rgba(139, 30, 30, 0.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 12px rgba(139, 30, 30, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(139, 30, 30, 0); transform: scale(1); }
}
.heartbeat { animation: heartbeat 1.6s infinite ease-in-out; }

/* Arabic display calibration — Aisha/Aldhabi render optically smaller, boost them */
[lang="ar"], :lang(ar),
.heartbeat.on-dark {
  animation-name: heartbeat-dark;
}
@keyframes heartbeat-dark {
  0%   { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0.6); transform: scale(1); }
  50%  { box-shadow: 0 0 0 14px rgba(200, 155, 60, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0); transform: scale(1); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ==========================================================
   RESPONSIVE — mobile-first
   Breakpoints: 1024 → tablet landscape
                768  → tablet portrait / large phone
                480  → phone
   ========================================================== */

/* --- add viewport meta reminder (already in HTML) --- */

/* ---- 1024px ---- */
@media (max-width: 1024px) {
  /* Layouts → single column */
  .days-grid, .exp-grid,
  .mena-inner, .footer-top,
  .tier-grid,
  .tickets-intro-inner, .tickets-notes-inner,
  .stage-row, .map-layout,
  .mena-hero-inner,
  .region-grid,
  .about-hero-split, .about-pillars-inner,
  .stalls-grid, .bazaar-band-inner,
  .stage-detail-inner,
  .rides-hero-inner, .family-band-inner,
  .faq-layout,
  .sales-hero-inner,
  .why-grid,
  .audience-inner,
  .affiliate-list,
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }

  .stage-label { position: static; }
  .map-legend { position: static; }

  /* Grids → 2-col at tablet */
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .lineup-grid { grid-template-columns: repeat(3, 1fr); }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .mena-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .cuisine-grid { grid-template-columns: repeat(2, 1fr); }
  .rides-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-tier-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .vtype-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(3, 1fr); }

  .faq-toc { position: static; border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
  .form-row.is-split { grid-template-columns: 1fr; }

  /* Centre text on collapsed hero/section layouts */
  .mena-inner, .mena-hero-inner,
  .about-hero-split, .bazaar-band-inner,
  .stage-detail-inner, .rides-hero-inner,
  .sales-hero-inner { text-align: center; }
}

/* ---- 900px — artist pages ---- */
@media (max-width: 900px) {
  .artist-hero-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .artist-body { grid-template-columns: 1fr; gap: 2rem; }
  .artist-body-side { position: static; }
  .essentials-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .artist-more-grid { grid-template-columns: 1fr; }
  .artist-portrait { max-width: 360px; margin: 0 auto; }
  .dsp-strip { justify-content: center; }
}

/* ---- 768px — tablet portrait / large phone ---- */
@media (max-width: 768px) {
  /* NAV — collapse to hamburger */
  .nav {
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    padding: 0.65rem var(--pad);
  }
  /* Hide desktop links */
  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5rem 2rem 2rem;
    background: rgba(20, 10, 5, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    gap: 0;
    z-index: 60;          /* above nav (50) so it covers the bar */
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  /* Dropdown inline on mobile */
  .nav-drop-menu {
    position: static;
    opacity: 1; visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 1rem;
  }
  .nav-drop-menu a { color: rgba(255,255,255,0.7) !important; font-size: 1rem; padding: 0.6rem 0; }
  .nav-drop-menu a:hover { color: var(--gold) !important; background: transparent; }
  .nav-drop .caret { color: rgba(255,255,255,0.5) !important; }
  /* Show burger, hide CTA in nav row (CTA shown inside menu) */
  .nav-burger {
    display: flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    font-size: 1.6rem;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: fixed;
    top: 38px;
    right: 12px;
    z-index: 70;          /* above the overlay (60) — always tappable */
  }
  .nav-cta {
    display: none;
  }
  /* CTA inside open menu */
  .nav-links.is-open::after {
    content: "GET TICKETS";
    display: block;
    margin-top: 2rem;
    padding: 0.85rem 2rem;
    background: var(--burgundy);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    width: 100%;
  }

  /* HERO */
  .hero { min-height: 85vh; padding: 5rem var(--pad) 4rem; text-align: center; }
  .hero-eyebrow, .hero-title, .hero-sub, .hero-meta { text-align: center; }
  .hero-ctas { justify-content: center; }
  .hero-countdown { margin-top: 1rem; }

  /* LANDING STACKED TIMER — shrink base so both lines fit one row on tablet/phone */
  .hero-countdown.cd-stack { font-size: 1.35rem; gap: 0.3rem; margin-top: 2rem; }
  .hero-countdown.cd-stack .cd-value-ar { font-size: 1.3em; }

  /* LINEUP-BY-DAY — Aldhabi header eases down on narrow screens */
  .lineup-by-day .day-col-ar { font-size: calc(1.5em * 1.5); }

  /* SCHEDULE */
  .set-block { grid-template-columns: 70px 1fr; gap: 0.6rem; padding: 0.85rem; }
  .set-time { font-size: 0.85rem; }
  .set-artist { font-size: 0.95rem; }

  /* GRIDS */
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-tier-grid { grid-template-columns: 1fr; }

  /* FILTER BAR */
  .filter-bar { top: 58px; }
  .filter-inner { gap: 0.6rem; flex-wrap: wrap; }
  .filter-btn { padding: 0.45rem 0.9rem; font-size: 0.78rem; }

  /* SECTION SPACING */
  .section { padding: 3rem var(--pad); }
  .section-title { text-align: center; }
  .section-eyebrow { text-align: center; }

  /* TYPOGRAPHY */
  h1, .h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); text-align: center; }
  h2, .h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); text-align: center; }
  h3, .h3 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }

  /* TICKET CARDS */
  .ticket-card { padding: 1.5rem; }
  .ticket-price { font-size: 2.5rem; }
}

/* ---- 480px — phone ---- */
@media (max-width: 480px) {
  :root { --pad: 1.1rem; }

  /* NAV */
  .brand-logo { height: 40px; }

  /* GRIDS → full width */
  .lineup-grid { grid-template-columns: 1fr; }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .cuisine-grid { grid-template-columns: 1fr; }
  .rides-grid { grid-template-columns: 1fr; }
  .vtype-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .mena-stats-inner { grid-template-columns: repeat(2, 1fr); }

  /* BUTTONS */
  .hero-ctas { flex-direction: column; align-items: center; width: 100%; }
  .btn { width: 100%; justify-content: center; text-align: center; }

  /* ARTIST PAGE */
  .artist-portrait { max-width: 280px; }
  /* .artist-name-ar handled by 1.7em on parent; no mobile override needed */
  .ar-small { font-size: 1.7em; }     /* Aldhabi-next-to-English rule */

  /* COUNTDOWN */
  .countdown-unit { min-width: 52px; padding: 0.5rem 0.6rem; }
  .countdown-num { font-size: 1.8rem; }
  .countdown-label { font-size: 0.6rem; }

  /* LANDING STACKED TIMER — tighter on narrow phones */
  .hero-countdown.cd-stack { font-size: 1.1rem; }
  .hero-countdown.cd-stack .cd-value-ar { font-size: 1.25em; }

  /* LINEUP-BY-DAY — ease Aldhabi header further */
  .lineup-by-day .day-col-ar { font-size: calc(1.4em * 1.4); }

  /* FOOTER */
  /* SECTION TEXT */
  p { font-size: 0.95rem; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2rem); }

  /* SCHEDULE */
  .set-block { grid-template-columns: 60px 1fr; }
  .filter-inner { justify-content: center; }
}

/* ==========================================================
   TALENT GRID (lineup.html) — 3-column masonry-style, no JS
   ========================================================== */
.col-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem var(--pad) 6rem;
  align-items: start;
}
/* Odd columns offset down to create staggered masonry feel */
.col-scroll__box:nth-child(odd) { margin-top: 3rem; }
.col-scroll__box:nth-child(even) { margin-top: 0; }

.col-scroll__box { display: flex; flex-direction: column; gap: 1.5rem; }
.col-scroll__list { display: flex; flex-direction: column; gap: 1.5rem; }

@media (max-width: 900px) {
  .col-scroll { grid-template-columns: repeat(2, 1fr); }
  .col-scroll__box:nth-child(odd) { margin-top: 2rem; }
}
@media (max-width: 560px) {
  .col-scroll { grid-template-columns: 1fr; }
  .col-scroll__box:nth-child(odd) { margin-top: 0; }
}

/* ==========================================================
   TALENT GRID 4-COL VARIANT (index.html landing)
   - 4 columns instead of 3
   - Outer columns (1, 4) staggered DOWN; inner columns (2, 3) sit HIGH
   - Smaller cards via .lineup-card-sm (shorter image, tighter text)
   ========================================================== */
.col-scroll-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  padding: 4rem var(--pad) 4rem;
}
/* Reset the parent stagger pattern, then apply our 1+4 down / 2+3 up rule */
.col-scroll-4 .col-scroll__box:nth-child(odd),
.col-scroll-4 .col-scroll__box:nth-child(even) { margin-top: 0; }
.col-scroll-4 .col-scroll__box:nth-child(1),
.col-scroll-4 .col-scroll__box:nth-child(4) { margin-top: 3rem; }
.col-scroll-4 .col-scroll__box:nth-child(2),
.col-scroll-4 .col-scroll__box:nth-child(3) { margin-top: 0; }
.col-scroll-4 .col-scroll__list { gap: 1.1rem; }

/* Smaller card variant — shorter image, tighter padding */
.lineup-card-sm .artist-img { height: 220px; }
.lineup-card-sm .lc-body { padding: 0.95rem 1rem; padding-bottom: 0.5rem; }
.lineup-card-sm .lc-ar { font-size: calc(1.7 * 1.05rem); margin-bottom: 0.1rem; }   /* Aldhabi-next-to-English rule: 1.7× .lc-en (1.05rem) */
.lineup-card-sm .lc-en { font-size: 1.05rem; margin-bottom: 0.4rem; }
.lineup-card-sm .lc-meta { font-size: 0.65rem; margin-bottom: 0.4rem; }
.lineup-card-sm .lc-bio { font-size: 0.78rem; line-height: 1.45; margin: 0 0 0.6rem; }
.lineup-card-sm .lc-cta { font-size: 0.7rem; }
.lineup-card-sm:hover .lc-body { padding-bottom: 0.95rem; }
.lineup-card-sm .day-badge { font-size: 0.6rem; padding: 0.25rem 0.6rem; }

/* Section wrapper for lineup-preview on index landing */
.lineup-preview {
  padding: 3rem 0 4rem;
  background: var(--cream-2);
}
.lineup-preview .section-head { margin-bottom: 1.5rem; }
.lineup-preview .col-scroll,
.lineup-preview .col-scroll-4,
.lineup-preview .col-scroll-stagger { padding-top: 0; padding-bottom: 0; }
.lineup-preview .center-mt { text-align: center; margin-top: 2.5rem; }

/* ==========================================================
   LINEUP BY DAY (index landing) — staggered 3-col grid, no dividers.
   Mirrors the lineup.html .col-scroll layout: col 2 sits high,
   cols 1 + 3 staggered down. Day headers above each column.
   ========================================================== */
.lineup-by-day .col-scroll-stagger {
  /* uses the existing .col-scroll grid; we just override its padding */
  padding: 0 var(--pad) 0;
}
/* Day-column header above each .col-scroll__box */
.lineup-by-day .day-col-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-bottom: 1.1rem;
}
.lineup-by-day .day-col-en {
  display: block;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.lineup-by-day .day-col-ar {
  display: block;
  font-family: var(--f-ar);
  font-size: 1.7em;         /* Aldhabi-next-to-English rule (vs .day-col-en at 1.4rem) */
  font-weight: 700;
  color: var(--burgundy);
  line-height: 1;
  direction: rtl;
}
.lineup-by-day .day-col-date {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

@media (max-width: 1100px) {
  .col-scroll-4 { grid-template-columns: repeat(3, 1fr); }
  .col-scroll-4 .col-scroll__box:nth-child(1),
  .col-scroll-4 .col-scroll__box:nth-child(4) { margin-top: 0; }
}
@media (max-width: 900px) {
  .col-scroll-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .col-scroll-4 { grid-template-columns: 1fr; }
}

/* ==========================================================
   GLASS TECHNIQUE SYSTEM — GradientClaw adapted to MENA palette
   Technique: blur/surface depth/lift/stagger/glass-border
   Colors: burgundy · gold · ink — no blue/purple
   ========================================================== */

/* ---- Shared glass tokens ---- */
:root {
  --glass-border: rgba(200, 155, 60, 0.18);
  --glass-border-hover: rgba(139, 30, 30, 0.5);
  --glass-shadow: 0 4px 32px rgba(26, 21, 18, 0.22);
  --glass-shadow-hover: 0 12px 40px rgba(26, 21, 18, 0.32);
  --glass-glow-burgundy: 0 0 28px rgba(139, 30, 30, 0.22);
  --glass-glow-gold: 0 0 28px rgba(200, 155, 60, 0.2);
  --transition-glass: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-glass-slow: 0.44s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================================
   1. NAV — tighter glass, gold border-bottom, subtle glow
   ====================================================== */
.nav-drop-menu {
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: opacity var(--transition-glass), transform var(--transition-glass), visibility var(--transition-glass);
}



/* ======================================================
   2. COUNTDOWN — dark glass card, burgundy ambient glow
   ====================================================== */
.hero-countdown {
  background: rgba(15, 8, 5, 0.4);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(200, 155, 60, 0.15);
  border-radius: 999px;
  padding: 0.5rem 1.4rem;
}
.cd-label {
  color: rgba(200, 155, 60, 0.75);
  font-size: 0.65rem;
}
.cd-value {
  color: var(--gold);
  font-weight: 600;
}
.cd-value span {
  color: var(--gold);
  font-weight: 700;
}

/* ======================================================
   3. FILTER CHIPS — glass-active pill, lift on hover
   ====================================================== */
.filter-bar {
  background: rgba(245, 238, 224, 0.82);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 2px 16px rgba(26, 21, 18, 0.06);
}
.filter-btn {
  border-radius: 999px;
  border: 1px solid rgba(26, 21, 18, 0.15);
  transition: all var(--transition-glass);
  backdrop-filter: blur(4px);
}
.filter-btn:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
  background: rgba(139, 30, 30, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 30, 30, 0.12);
}
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(139, 30, 30, 0.35);
  transform: translateY(-1px);
}

/* ======================================================
   4. ARTIST CARDS (marquee) — glass dark surface, lift
   ====================================================== */
.artist-card {
  background: rgba(26, 21, 18, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition-glass), box-shadow var(--transition-glass), border-color var(--transition-glass);
  box-shadow: var(--glass-shadow);
}
.artist-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-burgundy);
}
/* Image scrim overlay */
.artist-img {
  position: relative;
  overflow: hidden;
}
.artist-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(15, 8, 5, 0.55) 100%);
  pointer-events: none;
}
/* Country badge — glass pill over image bottom */
.artist-card .a-meta {
  margin: 0 1rem 1rem;
  display: inline-block;
  background: rgba(15, 8, 5, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 155, 60, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(245, 238, 224, 0.85);
  text-transform: uppercase;
}

/* ======================================================
   5. LINEUP CARDS — dark ink surface, glass border, lift + glow
   ====================================================== */
.lineup-card {
  background: var(--ink);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  transition: transform var(--transition-glass), box-shadow var(--transition-glass), border-color var(--transition-glass);
}
.lineup-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-burgundy);
}
/* Day badge — glass pill */
.lineup-card .day-badge {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.68rem;
}
/* Body text on dark card */
.lineup-card .lc-body { background: transparent; }
.lineup-card .lc-ar { color: var(--gold); }
.lineup-card .lc-en { color: var(--cream); }
.lineup-card .lc-meta { color: rgba(245, 238, 224, 0.5); }
.lineup-card .lc-bio { color: rgba(245, 238, 224, 0.7); }
.lineup-card .lc-cta { color: var(--gold); }
/* Image scrim */
.lineup-card .artist-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(15, 8, 5, 0.7) 100%);
  pointer-events: none;
}

/* --- Hover-expand bio --- */
/* Collapsed: bio + CTA hidden, zero height */
.lineup-card .lc-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.05s;
  overflow: hidden;
}
.lineup-card .lc-expand > .lc-expand-inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0.6rem;
}
.lineup-card .lc-expand .lc-bio { margin: 0 0 0.8rem; }
.lineup-card .lc-expand .lc-cta { display: inline-block; margin-top: 0; }
/* Expanded on hover */
.lineup-card:hover .lc-expand {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Keep lc-body compact when not hovered */
.lineup-card .lc-body {
  padding-bottom: 0.6rem;
}
.lineup-card:hover .lc-body {
  padding-bottom: 1.3rem;
}

/* ======================================================
   6. TICKET TIER CARDS — surface depth, glass border, gradient top edge
   ====================================================== */
.tier-card {
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--cream);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform var(--transition-glass), box-shadow var(--transition-glass), border-color var(--transition-glass);
}
/* Gold gradient top edge accent */
.tier-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(135deg, var(--gold) 0%, rgba(139, 30, 30, 0.4) 100%);
  margin: 0 0 1.5rem;
  border-radius: 2px 2px 0 0;
  opacity: 0.5;
  transition: opacity var(--transition-glass);
}
.tier-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-gold);
}
.tier-card:hover::before { opacity: 1; }
/* Featured card — dark glass surface */
.tier-card.is-featured {
  background: var(--ink);
  border-color: rgba(200, 155, 60, 0.4);
  box-shadow: var(--glass-shadow-hover), var(--glass-glow-gold);
}
.tier-card.is-featured::before {
  background: linear-gradient(135deg, var(--gold) 0%, var(--burgundy) 100%);
  opacity: 1;
}
.tier-cta {
  border-radius: 999px;
  transition: all var(--transition-glass);
}
.tier-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(139, 30, 30, 0.3);
}
.tier-card.is-featured .tier-cta:hover {
  box-shadow: 0 6px 18px rgba(200, 155, 60, 0.35);
}

/* ======================================================
   7. ARTIST PORTRAIT BADGE (artist pages) — glass pill
   ====================================================== */
.artist-country-badge,
.artist-hero .country-tag {
  display: inline-block;
  background: rgba(15, 8, 5, 0.55);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(200, 155, 60, 0.3);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 238, 224, 0.9);
  font-weight: 600;
}

/* ======================================================
   8. CARD STAGGER — slideUp on entry for all card grids
   ====================================================== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply to lineup cards */
.lineup-card {
  animation: slideUp 0.5s var(--transition-glass) both;
}
.lineup-card:nth-child(1)  { animation-delay: 0.00s; }
.lineup-card:nth-child(2)  { animation-delay: 0.05s; }
.lineup-card:nth-child(3)  { animation-delay: 0.10s; }
.lineup-card:nth-child(4)  { animation-delay: 0.15s; }
.lineup-card:nth-child(5)  { animation-delay: 0.20s; }
.lineup-card:nth-child(6)  { animation-delay: 0.25s; }
.lineup-card:nth-child(7)  { animation-delay: 0.30s; }
.lineup-card:nth-child(8)  { animation-delay: 0.35s; }
.lineup-card:nth-child(9)  { animation-delay: 0.40s; }
.lineup-card:nth-child(10) { animation-delay: 0.45s; }
.lineup-card:nth-child(11) { animation-delay: 0.50s; }
.lineup-card:nth-child(12) { animation-delay: 0.55s; }

/* Apply to tier cards */
.tier-card {
  animation: slideUp 0.5s var(--transition-glass) both;
}
.tier-card:nth-child(1) { animation-delay: 0.00s; }
.tier-card:nth-child(2) { animation-delay: 0.08s; }
.tier-card:nth-child(3) { animation-delay: 0.16s; }
.tier-card:nth-child(4) { animation-delay: 0.24s; }

/* Apply to artist marquee cards */
.artist-card {
  animation: slideUp 0.5s var(--transition-glass) both;
}
.artist-card:nth-child(1)  { animation-delay: 0.00s; }
.artist-card:nth-child(2)  { animation-delay: 0.04s; }
.artist-card:nth-child(3)  { animation-delay: 0.08s; }
.artist-card:nth-child(4)  { animation-delay: 0.12s; }
.artist-card:nth-child(5)  { animation-delay: 0.16s; }
.artist-card:nth-child(6)  { animation-delay: 0.20s; }
.artist-card:nth-child(7)  { animation-delay: 0.24s; }
.artist-card:nth-child(8)  { animation-delay: 0.28s; }



/* ── FIXED VIDEO BACKGROUND ── */
/* ── MAIN SCROLL CONTAINER ── */

/* ====== SHARED CHUNKS (from index.html) ====== */
/* ============================================
   SHARED CSS CHUNKS — extracted from index.html
   ============================================ */

/* --- VIDEO-BG --- */
.video-bg-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -10;
  pointer-events: none;
}

/* --- VIDEO-BG VIDEO --- */
.video-bg-fixed video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --- VIDEO-BG OVERLAY --- */
.video-bg-fixed::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}

/* --- ANNOUNCEMENT --- */
.nav-announcement {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  background: var(--red);
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.45rem var(--pad);
}

/* --- .nav { --- */
.nav {
  position: fixed; top: 32px; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1.5rem;
  align-items: center;
  padding: 0.6rem var(--pad);
  background: #1a1512;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* --- .nav-links { --- */
.nav-links {
  display: flex; gap: 1.5rem; align-items: center;
  justify-content: center;
  font-size: 0.9rem; font-weight: 500;
}

/* --- .nav-links > a, .nav-drop > a { --- */
.nav-links > a, .nav-drop > a {
  position: relative;
  padding: 0.4rem 0;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}

/* --- .nav-links > a:hover, .nav-drop:hover > a { --- */
.nav-links > a:hover, .nav-drop:hover > a { color: rgba(255,255,255,0.7); }

/* --- .nav-links > a::after { --- */
.nav-links > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: #ffffff; transition: width 0.25s ease;
}

/* --- .nav-links > a:hover::after { --- */
.nav-links > a:hover::after { width: 100%; }

/* --- .nav-drop { --- */
.nav-drop { position: relative; }

/* --- .nav-drop .caret { --- */
.nav-drop .caret { color: #ffffff; }

/* --- .nav-drop-menu { --- */
.nav-drop-menu {
  position: absolute; top: 100%; left: -1rem;
  min-width: 220px;
  background: #1a1512;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.5rem 0;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s;
}

/* --- .nav-drop:hover .nav-drop-menu { --- */
.nav-drop:hover .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* --- .nav-drop-menu a { --- */
.nav-drop-menu a {
  display: block;
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  transition: background 0.15s, color 0.15s;
}

/* --- .nav-drop-menu a:hover { --- */
.nav-drop-menu a:hover { background: rgba(255,255,255,0.1); color: #ffffff; }

/* --- .nav-cta { --- */
.nav-cta {
  padding: 0.6rem 1.4rem;
  background: var(--red);
  color: #ffffff;
  border: 0;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(220, 47, 63, 0.3);
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* --- .nav-cta:hover { --- */
.nav-cta:hover { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(220, 47, 63, 0.4); color:#ffffff; }

/* --- .nav-icons { --- */
.nav-icons { display: flex; gap: 0.5rem; align-items: center; }

/* --- .nav-icon { --- */
.nav-icon {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.2s;
  position: relative;
}

/* --- .brand { --- */
.brand { display: flex; align-items: center; text-decoration: none; }

/* --- .brand-logo { --- */
.brand-logo { height: 64px; width: auto; display: block; }

/* --- DATA-NAV --- */
[data-nav="light"] .nav-links > a,
[data-nav="light"] .nav-drop > a { color: #ffffff; }

/* --- DATA-NAV --- */
[data-nav="light"] .nav-links > a:hover,
[data-nav="light"] .nav-drop:hover > a { color: rgba(255,255,255,0.75); }

/* --- DATA-NAV --- */
[data-nav="light"] .nav-links > a::after { background: #ffffff; }

/* --- DATA-NAV --- */
[data-nav="light"] .nav .nav-drop .caret { color: rgba(255,255,255,0.65); }

/* --- DATA-NAV --- */
[data-nav="light"] .nav-cta {
  background: var(--red);
  color: #ffffff;
  border-color: transparent;
}

/* --- DATA-NAV --- */
[data-nav="light"] .nav-cta:hover {
  background: var(--red-hover);
  border-color: transparent;
  color: #ffffff;
}

/* --- DATA-NAV --- */
[data-nav="light"] .brand-dot { color: var(--gold); }

/* --- BURGER --- */
.nav-burger {
  display: none;
  font-size: 1.5rem;
  color: var(--ink);
}

/* --- PAGE-CONTAINER --- */
.page-container {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 6rem));
  margin: 2.5rem auto 4rem;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(26,21,18,0.08),
    0 12px 48px rgba(0,0,0,0.32),
    0 40px 96px rgba(0,0,0,0.28);
}

@media (max-width: 720px) {
  .page-container {
    width: calc(100% - 2rem);
    margin: 2rem auto 2rem;
    border-radius: 10px;
  }
}

/* Utility: legible text directly on video background */
.on-video {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
}
.on-video-img {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 18px 48px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.4);
}

/* --- BTN-RED --- */
.btn-red {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red);
  color: #ffffff;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.95rem 2.2rem;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 6px 20px rgba(220, 47, 63, 0.35);
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* --- BTN-RED HOVER --- */
.btn-red:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(220, 47, 63, 0.45);
  color: #ffffff;
}

/* --- .footer { --- */
.footer {
  background: #0d0d0d;
  color: #ffffff;
  padding: 3rem var(--pad) 1.5rem;
  font-family: var(--f-body);
}

/* --- .footer-cols { --- */
.footer-cols {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* --- .footer-col h4 { --- */
.footer-col h4 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1rem;
}

/* --- .footer-col a { --- */
.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  padding: 0.25rem 0;
  transition: color 0.15s;
  text-decoration: none;
}

/* --- .footer-col a:hover { --- */
.footer-col a:hover { color: #ffffff; }

/* --- .footer-social-icons { --- */
.footer-social-icons {
  display: flex; gap: 0.75rem; margin-top: 0.5rem;
}

/* --- .footer-social-icons a { --- */
.footer-social-icons a {
  color: #ffffff;
  font-size: 1.3rem;
  padding: 0;
  transition: opacity 0.2s;
}

/* --- .footer-social-icons a:hover { --- */
.footer-social-icons a:hover { opacity: 0.7; }

/* --- .footer-newsletter { --- */
.footer-newsletter {
  margin-top: 1rem;
}

/* --- .footer-newsletter form { --- */
.footer-newsletter form {
  display: flex; gap: 0;
}

/* --- .footer-newsletter input { --- */
.footer-newsletter input {
  flex: 1;
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-right: none;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  border-radius: 4px 0 0 4px;
}

/* --- .footer-newsletter button { --- */
.footer-newsletter button {
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: background 0.2s;
}

/* --- .footer-bottom { --- */
.footer-bottom {
  max-width: var(--maxw);
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

/* --- .footer-bottom a { --- */
.footer-bottom a { color: inherit; text-decoration: none; }




/* ============================================
   HERO ON VIDEO — used when hero sits directly
   on the video background (no plate/photo).
   ============================================ */
.hero.hero-on-video {
  background: transparent !important;
  min-height: auto;
  padding: 9rem var(--pad) 0.5rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero.hero-on-video .hero-bg,
.hero.hero-on-video .hero-grain { display: none !important; }

.hero-on-video .hero-content {
  position: relative;
  z-index: 2;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-on-video .hero-logo {
  display: block;
  max-width: 200px;
  width: auto;
  height: auto;
  margin: 0 auto 0.3rem;   /* tight to hero title */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55));
}

.hero-on-video .hero-title {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}

.hero-on-video .hero-subhead {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  margin: 0.4rem 0 0.6rem;
  font-weight: 500;
}

.hero-on-video .hero-sub {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  margin-bottom: 1.6rem;
}

/* Strip glass plate from countdown when sitting bare on video */
.hero-countdown.hero-countdown-bare {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 2rem auto 0;
}
.hero-countdown.hero-countdown-bare .cd-value {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}


/* ============================================
   ARTIST HERO ON VIDEO — strip dark plate, place
   portrait + text directly on the video bg.
   ============================================ */
.artist-hero.artist-hero-on-video {
  background: transparent !important;
  background-image: none !important;
  padding: 5rem var(--pad) 3rem;
  position: relative;
  z-index: 2;
}

.artist-hero-on-video .artist-hero-inner {
  position: relative;
  z-index: 2;
}

.artist-hero-on-video .artist-portrait {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 18px 48px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.4);
}

.artist-hero-on-video .artist-name,
.artist-hero-on-video .artist-name-ar,
.artist-hero-on-video .artist-origin,
.artist-hero-on-video .artist-tag,
.artist-hero-on-video .back a {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}

.artist-hero-on-video .back a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
}
.artist-hero-on-video .back a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,0.7);
}

.artist-hero-on-video .ar-small {
  color: rgba(255,255,255,0.7) !important;
}

/* Set-meta pills get glass treatment for legibility on video */
.artist-set.artist-set-on-video .set-meta-item {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 0.7rem 1rem;
}
.artist-set.artist-set-on-video .set-meta-item .k {
  color: rgba(255,255,255,0.65);
}
.artist-set.artist-set-on-video .set-meta-item .v {
  color: #ffffff;
}


/* ============================================
   PAGE HEADER ON VIDEO — for page-head and
   about-hero blocks that sit on the video bg.
   ============================================ */
section.page-hero-on-video,
.about-hero.page-hero-on-video,
.page-head.page-hero-on-video {
  background: transparent !important;
  background-image: none !important;
  padding: 5rem var(--pad) 3rem !important;
  position: relative;
  z-index: 2;
}

.page-hero-on-video .page-eyebrow,
.page-hero-on-video .page-title,
.page-hero-on-video .page-title .pt-en,
.page-hero-on-video .page-title .pt-ar,
.page-hero-on-video .page-lede {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5);
}

.page-hero-on-video .ar-small,
.page-hero-on-video .pt-ar {
  color: rgba(255,255,255,0.85) !important;
}


/* ============================================
   SPONSORS — black plate, small centered logos
   ============================================ */
section.sponsors {
  background: var(--ink) !important;
  color: var(--cream);
  padding: 4.5rem var(--pad) 4rem !important;
  border-radius: 0;
}

section.sponsors .section-head .eyebrow-dark,
section.sponsors .section-head .ar-small {
  color: rgba(245, 238, 224, 0.65) !important;
}
section.sponsors .section-head .h2 {
  color: var(--cream) !important;
}

section.sponsors .sponsor-tier {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 1.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

section.sponsors .sponsor-tier-label {
  color: rgba(245, 238, 224, 0.55);
  font-family: var(--f-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  text-align: center;
}

section.sponsors .sponsor-tier-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

section.sponsors .sponsor-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 0 1.25rem;
  transition: opacity 0.22s ease, transform 0.22s ease;
  opacity: 0.92;
}
section.sponsors .sponsor-logo-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

section.sponsors .sponsor-logo-img {
  display: block;
  height: 80px;
  max-height: 80px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* SVGs use white fill already; do NOT apply brightness/invert (it makes them invisible). */
}

section.sponsors .sponsor-cta {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
section.sponsors .sponsor-cta .btn {
  border-color: rgba(245, 238, 224, 0.3);
  color: var(--cream);
}

@media (max-width: 720px) {
  section.sponsors .sponsor-logo-link { min-height: 60px; }
  section.sponsors .sponsor-logo-img { height: 60px; max-height: 60px; max-width: 160px; }
  section.sponsors .sponsor-tier-logos { gap: 1.5rem; }
}


/* ============================================
   BTN-RED-GHOST — outlined red pill (companion to btn-red)
   ============================================ */
.btn-red-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: #ffffff;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.95rem 2.2rem;
  border-radius: 999px;
  border: 2px solid var(--red);
  text-decoration: none;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.btn-red-ghost:hover {
  background: var(--red);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(220, 47, 63, 0.35);
}

/* When ghost button sits inside the white card (not on video), tint text red so it reads */
.page-container .btn-red-ghost,
.footer .btn-red-ghost {
  color: var(--red);
}
.page-container .btn-red-ghost:hover,
.footer .btn-red-ghost:hover {
  color: #ffffff;
}

/* ============================================
   NAV CTA GHOST — outlined red pill in nav bar
   ============================================ */
.nav-cta.nav-cta-ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid var(--red) !important;
  box-shadow: none !important;
  margin-right: 0.5rem;
}
.nav-cta.nav-cta-ghost:hover {
  background: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(220, 47, 63, 0.3) !important;
}

/* ============================================
   FOOTER CTA STRIP — Become-a-Sponsor band above footer cols
   ============================================ */
.footer-cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem var(--pad);
  border-bottom: 1px solid rgba(245, 238, 224, 0.1);
  margin-bottom: 2rem;
}
.footer-cta-text {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--cream);
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 240px;
}
.footer-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.footer .footer-cta-strip .btn-red-ghost {
  color: var(--cream);
  border-color: rgba(245, 238, 224, 0.4);
}
.footer .footer-cta-strip .btn-red-ghost:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

@media (max-width: 720px) {
  .nav-cta.nav-cta-ghost { display: none; }  /* Ghost CTA hides on mobile to save nav space */
  .footer-cta-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-cta-actions { justify-content: center; }
}


/* ============================================
   UTILITY CLASSES — extracted from inline styles
   ============================================ */

/* Image utilities */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-cover-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.artist-img-tall {
  height: 300px;
  object-fit: cover;
  width: 100%;
  object-position: top;
}

/* Text utilities */
.text-gold       { color: var(--gold); }
.text-cream-mid  { color: rgba(245, 238, 224, 0.5); }
.ar-gold         { font-family: var(--f-ar); color: var(--gold); }

/* Spacing utilities */
.no-spacing      { padding: 0; margin-bottom: 0; }
.pt-6            { padding-top: 6rem; }
.center-mt       { text-align: center; margin-top: 2rem; }

/* Color utilities */
.bg-olive        { background: var(--olive); }

/* Button override for dark backgrounds */
.btn-on-dark {
  color: var(--cream);
  border-color: rgba(245, 238, 224, 0.3);
  margin-top: 1rem;
}
.btn-on-dark:hover {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--cream);
}

/* ============================================
   ALT-LANDING — bilingual countdown stack.
   Arabic on top (gold, RTL), English below (white, LTR).
   ============================================ */
.hero-countdown.cd-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3.5rem;        /* push down from CTAs */
  font-size: 1.9rem;          /* single size lever for both timer lines */
}
.hero-countdown.cd-stack .cd-value:not(.cd-value-ar) {
  font-size: 1em;            /* English timer — base = .cd-stack's 1.9rem */
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.hero-countdown.cd-stack .cd-value-ar {
  font-family: var(--f-ar);
  font-size: 1.4em;       /* tuned to visually match the English timer width (Aldhabi glyphs run wider per em than Latin digits) */
  color: var(--gold);     /* Arabic LETTERS: gold (ي س د ث) */
  direction: rtl;
  unicode-bidi: isolate;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  line-height: 1.05;
}
.hero-countdown.cd-stack .cd-value-ar span {
  color: #ffffff;         /* Arabic NUMBERS: white */
  font-weight: 700;
}
/* English line — letters white, numbers gold */
.hero-countdown.cd-stack .cd-value:not(.cd-value-ar) {
  color: #ffffff !important;       /* English LETTERS: white (d / h / m / s) */
}
.hero-countdown.cd-stack .cd-value:not(.cd-value-ar) span {
  color: var(--gold);              /* English NUMBERS: gold */
  font-weight: 700;
}


/* =========================================================
   SITE-WIDE — Aldhabi ×1.7 bump  (April 2026)
   ---------------------------------------------------------
   Every Aldhabi (Arabic) class on every page is scaled by an
   extra 1.7× from its baseline site-wide rendered size.

   Excluded:
   - .pt-ar (page-title display ornament) — designed as a
     large two-line treatment; a further bump would break
     the hero layouts
   - .ar-gold (.bazaar-band decorative line) — same reason
   (.cd-value-ar was excluded originally; re-included on 2026-04-22
    to match the rest of the landing page's Arabic treatment)
   ========================================================= */
.ar-inline                   { font-size: calc(1.1em * 1.7); }
.ar-small                    { font-size: calc(1.7em * 1.7); }
.ar-small.ar-tight           { font-size: 1.7em; }   /* single 1.7× bump for long Arabic phrases that would otherwise wrap */
.lineup-by-day .day-col-ar   { font-size: calc(1.7em * 1.7); }
.lineup-card .lc-ar          { font-size: calc(1.7 * 1.45rem * 1.7); }
.lineup-card-sm .lc-ar       { font-size: calc(1.7 * 1.05rem * 1.7); }
.artist-name-ar              { font-size: calc(1.7em * 1.7); }
.set-artist-ar               { font-size: calc(1.7em * 1.7); }
.pcat-head .pcat-ar          { font-size: calc(1.7em * 1.7); }
.tier-ar                     { font-size: calc(1.7 * 1.6rem * 1.7); }        /* vs .tier-name 1.6rem */
.sponsor-tier .tier-ar       { font-size: calc(1.7 * 1.5rem * 1.7); }        /* vs .tier-label 1.5rem */
.stage-name-ar               { font-size: calc(1.7 * 1.3rem * 1.7); }        /* vs .stage-name 1.3rem */
.stage-detail .stage-name-ar { font-size: calc(1.7em * 1.7); }
.info-title-ar               { font-size: clamp(calc(1.7 * 1.7rem * 1.7), calc(1.7 * 3vw * 1.7), calc(1.7 * 2.4rem * 1.7)); }
.region-name-ar              { font-size: calc(1.7 * 1.4rem * 1.7); }        /* vs .region-name 1.4rem */
.cuisine-name-ar             { font-size: calc(1.7 * 1.3rem * 1.7); }        /* vs .cuisine-name 1.3rem */

/* =========================================================
   Small presentational utilities extracted from inline style="..."
   (kept last so they reliably win over component defaults)
   ========================================================= */
.fine-print-centered {
  text-align: center;
  max-width: 700px;
  margin: 2rem auto 0;
  color: rgba(26, 21, 18, 0.6);
  font-size: 0.92rem;
}
.source-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: rgba(26, 21, 18, 0.6);
}
.center-block {
  text-align: center;
  margin-top: 2rem;
}
.mt-1 { margin-top: 1rem; }