/* zheenga — design tokens + base + components */

:root {
  /* Editorial (default) */
  --bg: #f4ebdf;
  --bg-deep: #2a1018;
  --bg-night: #17090f;
  --surface: #fff5e8;
  --surface-2: #faecd6;
  --ink: #1a0e10;
  --ink-2: #3d2225;
  --muted: #6f5752;
  --muted-2: #8d736b;
  --line: rgba(38, 22, 21, 0.12);
  --line-strong: rgba(255, 236, 223, 0.16);
  --accent: #df6337;
  --accent-deep: #8f311f;
  /* Button-only accent. The bright --accent (#df6337) fails WCAG AA as
     a button background under white text (3.5:1). This darker shade is
     ~5.3:1 with white — used for solid CTA fills, while --accent stays
     bright for hero gradients / decorative fills where it's not a text
     background. */
  --accent-strong: #b8481c;
  --accent-gold: #f3be62;
  --teal: #0f6c6d;
  --shadow-sm: 0 2px 8px rgba(59, 23, 18, 0.06), 0 12px 28px rgba(59, 23, 18, 0.08);
  --shadow-lg: 0 28px 80px rgba(59, 23, 18, 0.18);

  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
}

[data-theme="cinematic"] {
  --bg: #1a0a0e;
  --bg-deep: #0a0405;
  --bg-night: #050203;
  --surface: rgba(36, 16, 22, 0.9);
  --surface-2: rgba(60, 24, 30, 0.85);
  --ink: #faece0;
  --ink-2: #f0d9c4;
  --muted: #b89c92;
  --muted-2: #9a7d72;
  --line: rgba(255, 220, 196, 0.12);
  --line-strong: rgba(255, 220, 196, 0.18);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: white; }

/* App shell — single column mobile-first, expands on wider screens but capped */
.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

@media (min-width: 900px) {
  .app { max-width: 1180px; }
}

/* Page transitions */
.page {
  animation: pageFade 0.4s ease;
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line-strong);
  color: #fff5e8;
}
[data-theme="cinematic"] .nav {
  background: color-mix(in srgb, var(--bg-night) 92%, transparent);
}

/* When the app is rendered inside the iOS phone frame, push the sticky
   nav down so it clears the status bar and dynamic island. */
body.in-phone-frame .nav {
  padding-top: 58px;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  font-style: italic;
  color: #fff5e8;
}
.nav-logo b {
  font-style: normal;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-link {
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
  color: rgba(255, 245, 232, 0.78);
  transition: color 200ms, background 200ms;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: #fff5e8;
  background: rgba(255, 245, 232, 0.08);
}
/* Plain-button reset so the auth-injected "Log out" control matches the
   .nav-link anchor visually. Lives in the global stylesheet (not the
   SiteNav.astro scoped block) because auth.js injects the button via
   innerHTML after hydration, so scoped Astro selectors don't match it. */
button.nav-link-button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* Quiet outlined pill — orange is reserved for the primary hero CTA so the
   two don't compete for attention above the fold. */
.nav-link.cta {
  background: transparent;
  color: #fff5e8;
  padding: 7px 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 245, 232, 0.22);
  transition: color 200ms, background 200ms, border-color 200ms;
}
.nav-link.cta:hover {
  background: rgba(255, 245, 232, 0.06);
  border-color: rgba(255, 245, 232, 0.42);
  color: #fff;
}

@media (max-width: 420px) {
  .nav { padding: 12px 14px; gap: 6px; }
  .nav-logo { font-size: 17px; }
  .nav-logo b { letter-spacing: 0.08em; }
  .nav-links { gap: 0; }
  .nav-link { padding: 7px 9px; font-size: 13px; }
  .nav-link.cta { padding: 7px 12px; }
}

/* Hero */
.hero {
  position: relative;
  padding: 32px 20px 44px;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(243, 190, 98, 0.22), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(223, 99, 55, 0.32), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 111, 66, 0.18), transparent 60%),
    linear-gradient(180deg, #17090f 0%, #2a1018 38%, #5a1b1d 78%, #efdcc4 100%);
  color: #fff5e8;
  overflow: hidden;
}
[data-theme="cinematic"] .hero {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(243, 190, 98, 0.18), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(223, 99, 55, 0.28), transparent 55%),
    linear-gradient(180deg, #050203 0%, #1a0a0e 60%, #2a0e14 100%);
}

.hero::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(243, 190, 98, 0.18), transparent 70%);
  filter: blur(20px);
  animation: pulse 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 1; }
}

.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
}
.hero .eyebrow { color: var(--accent-gold); }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 11vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 14px 0 18px;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-gold);
  font-weight: 400;
}
.hero .lede {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 240, 225, 0.78);
  max-width: 38ch;
  margin: 0 0 24px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  transition: transform 150ms, background 150ms, border-color 150ms;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 12px 28px rgba(223, 99, 55, 0.32);
}
.btn-primary:hover { transform: translateY(-1px); background: #c0501f; }
.btn-ghost {
  background: rgba(255, 245, 232, 0.06);
  color: rgba(255, 245, 232, 0.92);
  border: 1px solid rgba(255, 245, 232, 0.18);
}
.btn-ghost:hover { background: rgba(255, 245, 232, 0.12); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-block { width: 100%; justify-content: center; }
.btn .arrow { transition: transform 200ms; }
.btn:hover .arrow { transform: translateX(3px); }

/* Hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.stat {
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255, 245, 232, 0.06);
  border: 1px solid rgba(255, 245, 232, 0.1);
}
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  color: #fff5e8;
}
.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 240, 225, 0.7);
}

/* Marquee */
.marquee {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 4px;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee-chip {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 245, 232, 0.08);
  border: 1px solid rgba(255, 245, 232, 0.12);
  font-size: 13px;
  color: rgba(255, 245, 232, 0.88);
  white-space: nowrap;
}
.marquee-chip.alt {
  background: rgba(15, 108, 109, 0.22);
  border-color: rgba(126, 221, 221, 0.22);
}

/* Sections */
.section {
  padding: 36px 20px;
}
.section-head {
  margin-bottom: 22px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  max-width: 22ch;
  color: var(--ink);
  text-wrap: balance;
}
.section-head h2 em {
  font-style: italic;
  color: var(--accent-deep);
}

.event-card.spotlight--hero {
  text-decoration: none;
  color: inherit;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.event-card.spotlight--hero:hover { transform: translateY(-2px); }
/* Spotlight (next takeoff) — hero variant */
.spotlight.spotlight--hero {
  padding: 0;
  overflow: hidden;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(38, 22, 21, 0.18), 0 4px 14px rgba(38, 22, 21, 0.12);
}
.spotlight-hero {
  position: relative;
  display: block;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
}
.spotlight-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.spotlight-hero:hover img { transform: scale(1.04); }
.spotlight-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(38, 22, 21, 0) 35%, rgba(38, 22, 21, 0.55) 70%, rgba(38, 22, 21, 0.92) 100%),
    linear-gradient(180deg, rgba(38, 22, 21, 0.45) 0%, rgba(38, 22, 21, 0) 30%);
  pointer-events: none;
}
.spotlight-eyebrow {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff5e8;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(38, 22, 21, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 245, 232, 0.18);
}
.spotlight-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.35);
  animation: pulseDot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.spotlight-hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 18px 16px;
  color: #fff5e8;
}
.spotlight--hero .spotlight-hero-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff5e8;
  text-shadow: 0 2px 18px rgba(38, 22, 21, 0.45);
}
.spotlight-hero-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 245, 232, 0.92);
  text-transform: uppercase;
  font-weight: 600;
}
.spotlight-hero-meta .dot-sep { opacity: 0.6; }
.spotlight--hero .spotlight-body {
  padding: 18px;
  background: var(--surface);
  border-radius: 0;
}
.spotlight--hero .spotlight-copy {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}
@media (max-width: 480px) {
  .spotlight-hero { aspect-ratio: 5 / 4; }
  .spotlight--hero .spotlight-hero-text h2 { font-size: 32px; }
  .spotlight-hero-text { padding: 16px 16px 14px; }
  .spotlight-hero-meta { font-size: 11.5px; gap: 6px; }
  .spotlight-eyebrow { top: 12px; left: 12px; font-size: 10px; padding: 5px 10px; }
}
.spotlight {
  margin: -28px 20px 0;
  position: relative;
  z-index: 2;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.spotlight-head {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 16px;
  align-items: start;
}
.spotlight-head-text { min-width: 0; }
.spotlight-media {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
.spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms;
}
.spotlight-media:hover img { transform: scale(1.04); }
.spotlight-body { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 480px) {
  .spotlight { padding: 14px; gap: 12px; }
  .spotlight-head { grid-template-columns: 1fr 84px; gap: 12px; }
  .spotlight-media { width: 84px; height: 84px; }
  .spotlight h2 { font-size: 24px; }
}
.spotlight-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
}
.spotlight-label::before {
  content: none;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(223, 99, 55, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(223, 99, 55, 0.0); }
}
.spotlight h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.spotlight-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spotlight-copy { color: var(--muted); margin: 0 0 16px; }
.spotlight-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

/* Cities heating up */
.cities {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}
.city-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 150ms, border-color 150ms;
}
.city-row:hover {
  transform: translateY(-1px);
  border-color: rgba(143, 49, 31, 0.28);
}
.city-rank {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}
.city-name {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}
.city-sub { font-size: 12px; color: var(--muted); }
.city-meta {
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  font-weight: 600;
}
.city-meta b { display: block; font-family: var(--font-display); font-style: italic; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 2px;}

/* Moment strip — 3 editorial cards */
.moments {
  display: grid;
  gap: 12px;
}
.moment {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.moment h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 8px 0 10px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.moment p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.6; }

/* Event cards */
.event-grid { display: grid; gap: 14px; }
.event-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  position: relative;
}
.event-card:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 49, 31, 0.24);
  box-shadow: var(--shadow-lg);
}
.event-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-deep);
}
.event-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease;
}
.event-card:hover .event-card-media img { transform: scale(1.04); }
.event-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20, 8, 12, 0.7) 100%);
}
.event-card-date {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  padding: 8px 0;
  border-radius: 12px;
  background: rgba(20, 8, 12, 0.78);
  backdrop-filter: blur(12px);
  color: #fff5e8;
  text-align: center;
}
.event-card-date b {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.event-card-date span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.event-card-mood {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 245, 232, 0.16);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 245, 232, 0.22);
  color: #fff5e8;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.event-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 14px 16px;
  color: #fff5e8;
}
.event-card-overlay .meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.86;
}
.event-card-overlay h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  margin: 4px 0 0;
  letter-spacing: -0.015em;
}
.event-card-body {
  padding: 16px;
}
.event-card-body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.chip {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(38, 22, 21, 0.06);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}
[data-theme="cinematic"] .chip {
  background: rgba(255, 220, 196, 0.06);
  color: var(--ink);
}
.chip.alt {
  background: rgba(223, 99, 55, 0.1);
  color: var(--accent-deep);
  border-color: rgba(223, 99, 55, 0.24);
}
[data-theme="cinematic"] .chip.alt {
  background: rgba(243, 190, 98, 0.12);
  color: var(--accent-gold);
  border-color: rgba(243, 190, 98, 0.28);
}

/* Artist cards (compact, portrait-led) */
.artist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.artist-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 200ms, border-color 200ms;
}
.artist-card:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 49, 31, 0.24);
}
.artist-card-photo {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}
.artist-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.02);
  transition: transform 800ms ease;
}
.artist-card:hover .artist-card-photo img { transform: scale(1.05); }
.artist-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20, 8, 12, 0.55) 100%);
}
.artist-card-body { padding: 12px 14px 14px; }
.artist-card-body .meta {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.artist-card-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.artist-card-body .upcoming {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--accent-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.artist-card-body .upcoming b {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Destination cards */
.dest-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.dest-card {
  display: block;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform 200ms, border-color 200ms;
}
.dest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(143, 49, 31, 0.24);
}
.dest-card .eyebrow { color: var(--teal); margin-bottom: 8px; }
.dest-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.dest-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}
.dest-card .next {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-deep);
  font-weight: 600;
}

/* Organizer band */
.creator {
  margin: 36px 20px;
  padding: 28px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at top right, rgba(15, 108, 109, 0.18), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(243, 190, 98, 0.14), transparent 50%),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
}
.creator h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.creator p { color: var(--muted); margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.creator-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Signal band */
.signal {
  padding: 28px 20px;
  display: grid;
  gap: 20px;
}
.signal-block .eyebrow { margin-bottom: 12px; }

/* Footer line */
.footer-mark {
  padding: 32px 20px 60px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.footer-mark .footer-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────
   Site-wide footer (.site-footer)
   Editorial / magazine pattern. Sits as the last block of every public
   page. Bookends the dark sticky nav at the top — same warm-deep ground
   so the page feels printed onto a finished surface.
   ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-deep);
  color: rgba(255, 245, 232, 0.78);
  padding: 56px 28px 28px;
  margin-top: 60px;
}
.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .site-footer { padding: 44px 20px 24px; margin-top: 40px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Brand block */
.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.12em;
  color: #fff5e8;
  text-decoration: none;
  transition: color 150ms;
  align-self: flex-start;
}
.site-footer-wordmark:hover { color: var(--accent-gold); }
.site-footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 245, 232, 0.68);
  margin: 0;
  max-width: 22ch;
  line-height: 1.5;
}
.site-footer-socials {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.site-footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 245, 232, 0.55);
  border: 1px solid rgba(255, 245, 232, 0.14);
  transition: color 150ms, background 150ms, border-color 150ms;
}
.site-footer-socials a:hover {
  color: var(--accent-gold);
  background: rgba(243, 190, 98, 0.08);
  border-color: rgba(243, 190, 98, 0.32);
}
.site-footer-socials a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Nav columns */
.site-footer-col {
  display: flex;
  flex-direction: column;
}
.site-footer-col h4 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
}
.site-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer-col a {
  font-size: 14px;
  color: rgba(255, 245, 232, 0.78);
  text-decoration: none;
  transition: color 150ms;
}
.site-footer-col a:hover { color: #fff5e8; }
.site-footer-col a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Bottom strip — copyright + "made for" line, hairline rule above */
.site-footer-strip {
  max-width: 1080px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 245, 232, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 245, 232, 0.5);
  letter-spacing: 0.02em;
}
.site-footer-made {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 245, 232, 0.62);
  letter-spacing: 0;
}
@media (max-width: 520px) {
  .site-footer-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 28px;
  }
}

/* ─── Cinematic theme overrides ─────────────────────────────── */
[data-theme="cinematic"] .site-footer {
  background: var(--bg-night);
}

/* ─── Cool scheme: tool pages get a cool footer to match the nav ── */
[data-scheme="cool"] .site-footer {
  background: #06121f;
}
[data-scheme="cool"] .site-footer-strip {
  border-top-color: rgba(180, 220, 222, 0.10);
}
[data-scheme="cool"] .site-footer-socials a {
  border-color: rgba(180, 220, 222, 0.14);
}
[data-scheme="cool"] .site-footer-socials a:hover {
  border-color: rgba(243, 190, 98, 0.36);
}

/* ─── The old single-line .footer-mark is now redundant on pages that
   render the full <Footer>. Hide it inside <main> areas; keep it on
   404.html (which uses its own copy). */
.site-footer ~ .footer-mark,
.page > .footer-mark + .site-footer { /* no-op safeguard */ }

/* Event detail page */
.detail-back-bar {
  /* Quiet row above the hero — gives the back chip breathing room on its
     own surface so it never competes with the photograph. */
  padding: 14px 16px 6px;
  display: flex;
  align-items: center;
}
@media (min-width: 900px) {
  .detail-back-bar { padding: 22px 28px 10px; }
}

/* The image + meta container.
   Mobile: stacks (image, then meta below).
   Desktop ≥ 900px: side-by-side, image left, meta right — magazine spread. */
.detail-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .detail-block {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 0 28px 8px;
  }
}

.detail-hero {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
@media (min-width: 900px) { .detail-hero { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); } }
.detail-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Subtle vignette at the bottom of the photograph — quiet, doesn't host
   any text now. Just a touch of weight so the photo "sits" on the page. */
.detail-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(20, 8, 12, 0.18) 100%);
  pointer-events: none;
}

/* Hero meta — text block below (mobile) or beside (desktop) the photograph.
   Sits on the cream surface so type is fully legible and the photograph
   stays untouched. */
.detail-hero-meta {
  padding: 24px 20px 28px;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
@media (min-width: 900px) {
  .detail-hero-meta {
    padding: 0 0 0 40px;
    justify-content: center;
  }
}
.detail-hero-meta .edition {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: rgba(223, 99, 55, 0.10);
  border: 1px solid rgba(223, 99, 55, 0.22);
}
.detail-hero-meta h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.detail-hero-meta .when {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-hero-meta .when span { white-space: nowrap; }

/* Legacy `.detail-hero-text` (image overlay) is no longer used —
   keep the rule disabled in case the host or any cached preview tries
   to render it. */
.detail-hero-text { display: none; }

/* Back chip inline variant — sits in the back-bar above the photo,
   inherits ink color on light surface. */
.detail-back.detail-back--inline {
  position: static;
  top: auto; left: auto;
  z-index: auto;
  background: rgba(38, 22, 21, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink-2);
  border: 1px solid rgba(38, 22, 21, 0.12);
}
.detail-back.detail-back--inline:hover {
  background: rgba(38, 22, 21, 0.10);
  border-color: rgba(38, 22, 21, 0.22);
}
.detail-back {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  /* Stronger backdrop so it always reads against any photo. */
  background: rgba(20, 8, 12, 0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #fff5e8;
  border: 1px solid rgba(255, 245, 232, 0.22);
  font-size: 13px;
  font-style: italic;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 240ms var(--ease-z), border-color 240ms var(--ease-z), transform 240ms var(--ease-z);
}
.detail-back:hover {
  background: rgba(20, 8, 12, 0.78);
  border-color: rgba(255, 245, 232, 0.38);
  transform: translateX(-2px);
}
.detail-back svg {
  transition: transform 360ms var(--ease-z);
}
.detail-back:hover svg {
  transform: rotate(-18deg);
}

/* Volta — floating back-to-top button on event detail.
   Replaces the old top-of-page back chip. Pinned to bottom-right of the
   viewport (or just inside the content column on wide screens), fades in
   after scrolling past ~one viewport, smooth-scrolls to top on tap. */
.volta-top {
  position: fixed;
  bottom: 22px;
  right: max(18px, calc(50vw - 240px + 18px));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  border: 1px solid rgba(255, 236, 223, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 8px 22px rgba(20, 8, 12, 0.22);
  transition:
    opacity 220ms var(--ease-z),
    transform 240ms var(--ease-z),
    background 200ms var(--ease-z),
    border-color 200ms var(--ease-z);
}
.volta-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.volta-top:hover {
  background: var(--accent-deep);
  border-color: rgba(255, 236, 223, 0.28);
}
.volta-top:active {
  transform: translateY(0) scale(0.96);
}
.volta-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.volta-top svg {
  transition: transform 240ms var(--ease-z);
}
.volta-top:hover svg {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .volta-top,
  .volta-top svg {
    transition: opacity 120ms linear;
    transform: none !important;
  }
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.detail-stat {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.detail-stat:last-child { border-right: 0; }
.detail-stat .v {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: block;
}
.detail-stat .l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

.detail-section { padding: 28px 20px; border-bottom: 1px solid var(--line); }
.detail-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.detail-section .body-copy { color: var(--ink-2); line-height: 1.7; font-size: 15px; }
[data-theme="cinematic"] .detail-section .body-copy { color: var(--ink-2); }

.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Lineup */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
  margin-top: 4px;
  align-items: start;
}
.lineup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lineup-photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  position: relative;
  margin-bottom: 10px;
  transition: transform 200ms;
}
.lineup-item:hover .lineup-photo {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(59, 23, 18, 0.16);
}
.lineup-photo img { width: 100%; height: 100%; object-fit: cover; }
.lineup-photo img:not([src]), .lineup-photo img[src=""] { display: none; }
.lineup-initials {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff5e8;
  background: linear-gradient(135deg, var(--accent-deep), var(--bg-deep));
  letter-spacing: 0.02em;
}
.lineup-name {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-wrap: balance;
}
.lineup-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Map placeholder */
.venue-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.venue-map {
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    linear-gradient(135deg, #d6c4ad, #c5ad8e),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(38,22,21,0.08) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 50px, rgba(38,22,21,0.08) 50px 51px);
  background-blend-mode: multiply;
  display: grid;
  place-items: center;
}
.venue-map::before {
  content: "";
  position: absolute;
  width: 60%; height: 6px;
  top: 38%;
  background: rgba(38,22,21,0.18);
  transform: rotate(-12deg);
}
.venue-map::after {
  content: "";
  position: absolute;
  width: 70%; height: 4px;
  bottom: 30%;
  left: 5%;
  background: rgba(38,22,21,0.14);
  transform: rotate(8deg);
}
.venue-pin {
  position: relative;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(223, 99, 55, 0.22), 0 8px 20px rgba(143, 49, 31, 0.4);
  animation: pinPulse 2s ease-in-out infinite;
}
.venue-pin::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff5e8;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(223, 99, 55, 0.22), 0 8px 20px rgba(143, 49, 31, 0.4); }
  50% { box-shadow: 0 0 0 14px rgba(223, 99, 55, 0), 0 8px 20px rgba(143, 49, 31, 0.4); }
}
.venue-info { padding: 16px; }
.venue-info b { font-family: var(--font-display); font-weight: 500; font-size: 17px; display: block; margin-bottom: 2px; }
.venue-info span { font-size: 13px; color: var(--muted); }

/* Reviews */
.review-list { display: grid; gap: 14px; }
.review {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.review-stars { color: var(--accent); font-size: 14px; letter-spacing: 1px; }
.review-stars .empty { color: rgba(38, 22, 21, 0.18); }
[data-theme="cinematic"] .review-stars .empty { color: rgba(255, 220, 196, 0.18); }
.review-text { margin: 8px 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.review-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

/* Previous editions */
.history-list { display: grid; gap: 8px; }
.history-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.history-year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
}
.history-row .where { font-size: 13px; color: var(--muted); }
.history-row .where b { color: var(--ink); font-weight: 500; display: block; font-size: 14px; }
.history-rating {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.history-rating::after {
  content: " ★";
  color: var(--accent);
  font-size: 13px;
}

/* Share row */
.share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  transition: border-color 150ms, color 150ms;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* Artist profile */
.artist-hero {
  position: relative;
  padding: 32px 20px 28px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(243, 190, 98, 0.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(15, 108, 109, 0.22), transparent 55%),
    linear-gradient(180deg, #17090f 0%, #2a1018 100%);
  color: #fff5e8;
  overflow: hidden;
}
[data-theme="cinematic"] .artist-hero {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(243, 190, 98, 0.18), transparent 55%),
    linear-gradient(180deg, #050203 0%, #1a0a0e 100%);
}
.artist-hero-grid {
  display: grid;
  gap: 18px;
  align-items: center;
}
@media (min-width: 700px) {
  .artist-hero-grid { grid-template-columns: 220px 1fr; gap: 28px; }
}
.artist-portrait {
  width: 180px;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 245, 232, 0.16);
}
@media (min-width: 700px) {
  .artist-portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}
.artist-portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 9vw, 54px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 10px 0 12px;
  text-wrap: balance;
}
.artist-hero h1 em { font-style: italic; color: var(--accent-gold); }
.artist-hero .lede {
  font-size: 16px;
  color: rgba(255, 240, 225, 0.82);
  margin: 0 0 18px;
  line-height: 1.55;
  max-width: 38ch;
}
.artist-hero-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 240, 225, 0.78);
}
.artist-hero-meta b { color: #fff5e8; font-weight: 600; }

/* Upcoming list (artist) */
.upcoming-list { display: grid; gap: 10px; }
.upcoming-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 150ms, border-color 150ms;
}
.upcoming-row:hover { transform: translateY(-1px); border-color: rgba(143, 49, 31, 0.28); }
.upcoming-row .name {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.upcoming-row .where { font-size: 12px; color: var(--muted); }
.upcoming-row .attending {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  font-weight: 600;
}
[data-theme="cinematic"] .upcoming-row .attending { color: var(--accent-gold); }

/* Filters */
.filter-toolbar {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}
.filter-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.filter-toolbar-btn:hover { border-color: var(--accent); }
.filter-toolbar-btn.active {
  border-color: var(--accent);
  background: rgba(217, 119, 87, 0.08);
}
.filter-toolbar-btn.has-active {
  border-color: var(--accent);
}
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff5e8;
  font-size: 11px;
  font-weight: 700;
}
.filter-toolbar-caret {
  font-size: 10px;
  color: var(--muted);
  transition: transform 200ms;
}
.filter-toolbar-caret.up { transform: rotate(180deg); }
.sort-control { position: relative; }
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  background: var(--surface-strong, var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sort-menu-item {
  text-align: left;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.sort-menu-item:hover { background: rgba(217, 119, 87, 0.08); }
.sort-menu-item.active {
  background: var(--accent);
  color: #fff5e8;
  font-weight: 600;
}
.filter-collapse {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Filters */
.filter-bar {
  padding: 18px 20px 20px;
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 56px;
  z-index: 20;
  backdrop-filter: blur(20px);
}
.filter-row { display: flex; gap: 8px; align-items: center; }
.filter-group { display: grid; gap: 6px; }
.filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px;
}
.filter-reset {
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-reset:hover { color: var(--accent); }
[data-theme="cinematic"] .filter-reset { color: var(--accent-gold); }
.empty-state {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 8px 0 8px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.empty-state p { color: var(--muted); margin: 0; font-size: 14px; }

.organiser-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  font-size: 15px;
}
.organiser-line .eyebrow { margin: 0; }
.organiser-line b { color: var(--ink); font-weight: 600; }
.organiser-since { color: var(--muted); font-size: 13px; }

/* Trending list — stack of spotlight cards */
.trending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trend-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.trend-row:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.trend-row-photo {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}
.trend-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.trend-row:hover .trend-row-photo img { transform: scale(1.05); }
.trend-row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trend-row-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-row-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  letter-spacing: 0.01em;
}
.trend-row-meta .dot-sep { opacity: 0.5; }
.trend-row-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.trend-followers {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.trend-row-arrow {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--muted);
  transition: transform 220ms ease, color 220ms ease;
  align-self: center;
}
.trend-row:hover .trend-row-arrow {
  color: var(--accent);
  transform: translateX(3px);
}
@media (max-width: 480px) {
  .trend-row {
    grid-template-columns: 84px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .trend-row-photo { width: 84px; height: 84px; }
  .trend-row-title { font-size: 20px; }
  .trend-row-arrow { display: none; }
  .trend-row-meta { font-size: 12.5px; }
}
.spotlight--inline {
  margin: 0;
}
.spotlight--inline h2 {
  font-size: 28px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(28px * 1.05 * 2);
}
@media (max-width: 480px) {
  .spotlight--inline h2 {
    font-size: 24px;
    margin-bottom: 10px;
    min-height: calc(24px * 1.05 * 2);
  }
}
.spotlight--inline .spotlight-head { align-items: center; }
.spotlight--inline .spotlight-head-text .spotlight-meta { margin: 0; }
.spotlight-meta--sub {
  margin-top: 0;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.spotlight-meta--sub .chip {
  font-size: 11px;
  padding: 3px 9px;
}
.chip.chip-update {
  background: var(--accent);
  color: #fff5e8;
  border-color: transparent;
}

/* Mini event row — compact list item for "Going to" / "Following" lists */
.mini-event-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.mini-event-row:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.mini-event-photo {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--line);
}
.mini-event-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-event-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: center;
}
.mini-event-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: space-between;
}
.mini-event-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.mini-event-status {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(38, 22, 21, 0.06);
  color: var(--accent-deep);
  white-space: nowrap;
}
.mini-event-status.status-attending {
  background: var(--accent);
  color: #fff5e8;
}
.mini-event-status.status-teaching {
  background: var(--ink);
  color: var(--surface);
}
.mini-event-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  letter-spacing: 0.01em;
}
.mini-event-meta .dot-sep { opacity: 0.5; }
.mini-event-update {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(217, 119, 87, 0.12);
  border-radius: 6px;
  align-self: flex-start;
}
.mini-event-update-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-deep);
}
.mini-event-remove {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  align-self: flex-start;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.mini-event-remove:hover {
  background: rgba(200, 60, 60, 0.08);
  border-color: rgba(200, 60, 60, 0.35);
  color: #b03a3a;
}
.mini-event-remove svg { flex-shrink: 0; }

/* Social links field — icon + label + input */
.socials-card { gap: 10px; }
.social-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.social-field:last-of-type { border-bottom: none; }
.social-field-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: 1px solid var(--line);
}
.social-field-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.social-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.social-field input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 2px 0;
  outline: none;
}
.social-field input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
@media (max-width: 480px) {
  .mini-event-row {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 10px;
  }
  .mini-event-photo { width: 64px; height: 64px; }
  .mini-event-title { font-size: 16px; }
  .mini-event-meta { font-size: 12px; }
}
.trending-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.trending-head {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 14px;
  align-items: start;
}
.trending-head-text { min-width: 0; }
.trending-media {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
.trending-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms;
}
.trending-media:hover img { transform: scale(1.04); }
.trending-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.trending-head-text h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.trending-head-text .spotlight-meta { margin: 0; font-size: 13px; }
.trending-body .spotlight-chips { margin: 0; }
@media (max-width: 480px) {
  .trending-card { padding: 14px; gap: 12px; }
  .trending-head { grid-template-columns: 1fr 76px; gap: 12px; }
  .trending-media { width: 76px; height: 76px; }
  .trending-head-text h3 { font-size: 19px; }
}

.home-explore {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .home-explore { grid-template-columns: 1fr; }
}
.explore-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms, transform 150ms;
}
.explore-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.explore-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 4px 0;
}
.explore-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.explore-cta {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.date-range {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.date-field {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 130px;
}
.date-field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.date-field input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 150ms;
  color-scheme: light;
}
[data-theme="cinematic"] .date-field input { color-scheme: dark; }
.date-field input:focus { border-color: var(--accent); }
.date-arrow {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--muted);
  padding-bottom: 6px;
}

/* Filter row split: country + city side-by-side on wider screens */
.filter-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .filter-row-split { grid-template-columns: 1fr; }
}
.filter-row-split .filter-group { margin: 0; }

/* Searchable dropdown */
.combobox { position: relative; }
.combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms, background 150ms;
}
.combobox-trigger:hover { border-color: var(--accent); }
.combobox.open .combobox-trigger { border-color: var(--accent); }
.combobox.active .combobox-trigger {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border-color: var(--accent);
  font-weight: 600;
}
[data-theme="cinematic"] .combobox.active .combobox-trigger { color: #1a1a1a; }
.combobox-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combobox-caret {
  font-size: 11px;
  opacity: 0.7;
  transition: transform 150ms;
  flex-shrink: 0;
}
.combobox.open .combobox-caret { transform: rotate(180deg); }

.combobox-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 320px;
}
[data-theme="cinematic"] .combobox-popover { box-shadow: 0 12px 32px rgba(0,0,0,0.5); }

.combobox-search {
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.combobox-search::placeholder { color: var(--muted); }

.combobox-list {
  overflow-y: auto;
  padding: 4px;
}
.combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms;
}
.combobox-option:hover { background: var(--bg); }
.combobox-option.selected {
  background: var(--bg);
  font-weight: 600;
  color: var(--accent-deep);
}
.combobox-empty {
  padding: 16px 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.filter-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color 150ms;
}
.filter-input:focus { border-color: var(--accent); }
.filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -20px;
  padding: 0 20px;
}
.filter-pills::-webkit-scrollbar { display: none; }
/* Inside the phone frame, wrap pills to fit viewport instead of horizontal scroll. */
body.in-phone-frame .filter-pills {
  flex-wrap: wrap;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}
.filter-pill {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all 150ms;
}
.filter-pill.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="cinematic"] .filter-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Tweaks panel custom title */
.zh-tweaks h2 { font-family: var(--font-display) !important; }


/* ── Auth (Sign in / Sign up) ─────────────────────────────────── */
.auth-shell {
  padding: 48px 20px 80px;
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}
@media (max-width: 480px) {
  .auth-shell { padding: 28px 16px 60px; }
  .auth-card { padding: 24px; }
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
  text-wrap: balance;
}
.auth-title em { color: var(--accent-deep); font-style: italic; }
.auth-lede { color: var(--muted); margin: 0 0 24px; font-size: 15px; line-height: 1.5; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
}
.auth-tab {
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: grid; gap: 6px; }
.auth-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.auth-field input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 150ms;
}
.auth-field input:focus { border-color: var(--accent); }

.auth-forgot {
  align-self: flex-end;
  font-size: 13px;
  color: var(--accent-deep);
  text-decoration: none;
  margin-top: -4px;
}
.auth-forgot:hover { text-decoration: underline; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.auth-social .btn { width: 100%; justify-content: center; }

.auth-switch {
  text-align: center;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.auth-switch a {
  color: var(--accent-deep);
  text-decoration: none;
  font-weight: 600;
}
.auth-switch a:hover { text-decoration: underline; }

.auth-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.auth-check:hover { border-color: var(--accent); }
.auth-check input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.auth-check span { display: flex; flex-direction: column; gap: 4px; }
.auth-check strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.auth-check em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}


/* ── Profile (dancer + artist studio) ─────────────────────────── */
.profile-hero {
  position: relative;
  padding: 40px 20px 28px;
  color: #fff5e8;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.22), transparent 55%),
    radial-gradient(ellipse at 8% 100%, rgba(223, 99, 55, 0.28), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 111, 66, 0.14), transparent 60%),
    linear-gradient(180deg, #17090f 0%, #2a1018 55%, #4a161a 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 245, 232, 0.10);
}
[data-theme="cinematic"] .profile-hero {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.16), transparent 55%),
    radial-gradient(ellipse at 8% 100%, rgba(223, 99, 55, 0.22), transparent 55%),
    linear-gradient(180deg, #050203 0%, #1a0a0e 60%, #2a0e14 100%);
}
.profile-hero::before {
  content: "";
  position: absolute;
  top: -15%;
  right: -10%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(243, 190, 98, 0.20), transparent 70%);
  filter: blur(22px);
  animation: pulse 9s ease-in-out infinite;
  pointer-events: none;
}
.profile-hero::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -15%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(223, 99, 55, 0.18), transparent 70%);
  filter: blur(30px);
  animation: pulse 11s ease-in-out infinite reverse;
  pointer-events: none;
}
.profile-hero > * { position: relative; z-index: 2; }
.profile-hero .eyebrow { color: var(--accent-gold); }
.profile-hero h1 { color: #fff5e8; }
.profile-hero .profile-meta { color: rgba(255, 240, 225, 0.78); }
.profile-hero .profile-meta-static { color: rgba(255, 240, 225, 0.78); }
.profile-hero .profile-inline-text { color: #fff5e8; }

/* Pencil + confirm/cancel buttons live on the dark hero now — keep
   them legible without losing the orange hover. */
.profile-hero .profile-edit-pencil {
  color: rgba(255, 245, 232, 0.7);
  border-color: rgba(255, 245, 232, 0.22);
  background: rgba(255, 245, 232, 0.06);
}
.profile-hero .profile-edit-pencil:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Inline-edit input stays light-card on dark hero — readable + bright. */
.profile-hero .profile-inline-input {
  color: var(--ink);
  background: #fff5e8;
  border-color: rgba(255, 245, 232, 0.28);
}
.profile-hero .profile-inline-input::placeholder { color: var(--muted); }

/* Avatar gets a soft glow ring on the dark backdrop. */
.profile-hero .profile-avatar {
  box-shadow:
    0 0 0 2px rgba(255, 245, 232, 0.12),
    0 0 0 6px rgba(243, 190, 98, 0.18),
    0 16px 36px rgba(20, 8, 12, 0.45);
}
.profile-hero .profile-avatar span {
  /* initials fallback — keep readable on the warm hero */
  background: linear-gradient(135deg, var(--accent-deep), var(--bg-deep));
  color: #fff5e8;
}

/* Outline buttons in the actions row now sit on dark — invert them. */
.profile-hero .profile-actions .btn-outline {
  color: #fff5e8;
  border-color: rgba(255, 245, 232, 0.28);
  background: rgba(255, 245, 232, 0.06);
}
.profile-hero .profile-actions .btn-outline:hover {
  color: #fff;
  border-color: var(--accent-gold);
  background: rgba(243, 190, 98, 0.12);
}

/* The bell icon button — invert for dark. */
.profile-hero .icon-btn,
.profile-hero .notif-bell {
  color: #fff5e8;
  border-color: rgba(255, 245, 232, 0.22);
  background: rgba(255, 245, 232, 0.06);
}
.profile-hero .notif-bell:hover {
  border-color: var(--accent-gold);
  background: rgba(243, 190, 98, 0.12);
}
.profile-hero .notif-bell.has-unread {
  color: var(--accent-gold);
  border-color: rgba(243, 190, 98, 0.5);
  background: rgba(243, 190, 98, 0.10);
}
.profile-hero .notif-bell.has-unread:hover {
  border-color: var(--accent-gold);
  background: rgba(243, 190, 98, 0.18);
}

/* Profile stat strip sits below the actions row — tighten the gap so
   it doesn't read as a separate band. */
.profile-hero .profile-hero-stats {
  margin-top: 22px;
}
.profile-hero-row { display: flex; gap: 18px; align-items: center; min-width: 0; }
.profile-hero-text { flex: 1 1 auto; min-width: 0; }
.profile-hero-text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
}
.profile-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px; margin: 0;
}
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.profile-avatar {
  border-radius: 50%; overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 28px; color: var(--accent-deep);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-section { padding-top: 28px; }
.profile-card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.profile-card .auth-field textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  resize: vertical;
}
.profile-card .auth-field textarea:focus { border-color: var(--accent); }
.profile-help { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.5; }

.promo-grid, .photo-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.promo-tile { display: flex; flex-direction: column; gap: 6px; }
.promo-thumb {
  position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  background: var(--bg);
}
.promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-thumb .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px;
  background: rgba(0,0,0,0.25);
}
.promo-tile p { margin: 0; font-size: 13px; color: var(--ink); }
.promo-add, .photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; aspect-ratio: 16/9;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--bg); color: var(--muted); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color 150ms, color 150ms;
}
.photo-add { aspect-ratio: 1/1; }
.promo-add:hover, .photo-add:hover { border-color: var(--accent); color: var(--accent-deep); }
.promo-add .plus, .photo-add .plus { font-size: 22px; line-height: 1; }
.upload-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.photo-tile { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: var(--bg); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.link-row select {
  flex: 1; min-width: 200px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
.linked-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.linked-row p { margin: 0; }

.profile-danger {
  margin: 32px 20px 60px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, #c93838 30%, var(--line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #c93838 5%, var(--surface));
}
.profile-danger h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  margin: 0 0 6px; color: #b22d2d;
}
[data-theme="cinematic"] .profile-danger h3 { color: #ff8a8a; }
.profile-danger p { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.btn-danger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: #c93838; color: #fff; border: none;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 150ms;
}
.btn-danger:hover { background: #a82828; }

/* Follow list — compact rows of artists */
.follow-list { display: flex; flex-direction: column; }
.follow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 150ms;
}
.follow-row:hover { background: rgba(0,0,0,0.02); }
.follow-row:last-child { border-bottom: none; }
.follow-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}
.follow-row-body { flex: 1; min-width: 0; }
.follow-row-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.follow-row-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.follow-row-arrow { color: var(--muted); font-size: 16px; flex-shrink: 0; }

/* "What's new" badge on followed/attending events */
.update-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 87, 0.14);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.update-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18);
  animation: update-pulse 1.6s ease-in-out infinite;
}
@keyframes update-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(217, 119, 87, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .update-dot { animation: none; }
}

/* Settings overlay sheet */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 22, 21, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: fade-in 200ms ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.settings-sheet {
  background: var(--surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 8px 24px 32px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
  animation: slide-up 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 720px) {
  .settings-overlay { align-items: center; }
  .settings-sheet { border-radius: 20px; max-height: 86vh; }
}
.settings-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.settings-header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
}
.settings-close {
  background: var(--bg);
  border: 1px solid var(--line);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.settings-group:last-child { border-bottom: none; }
.settings-group h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
}
.settings-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.settings-row em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.settings-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.settings-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.settings-link:hover { color: var(--accent-deep); }
.settings-link:last-child { border-bottom: none; }
.settings-danger { padding-top: 20px; }
.settings-danger p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Field rows: stacked label + edit action (used in artist settings) */
.settings-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.settings-field-row:last-child { border-bottom: none; }
.settings-field-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.settings-field-row strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.settings-field-row em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-link-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.settings-link-btn:hover {
  background: var(--bg);
  border-color: var(--ink);
}

.settings-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-delete-actions {
  display: flex;
  gap: 8px;
}
.settings-delete-actions .btn { flex: 1; }

.settings-signout {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms;
}
.settings-signout:hover { background: var(--line); }

/* Tweaks: Jump-to grid */
.zh-jump-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.zh-jump {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  color: #29261b;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.zh-jump:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.22);
}
.zh-jump-num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 11px;
  font-weight: 400;
  color: rgba(41, 38, 27, 0.55);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.zh-jump-lbl {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #29261b;
}
.zh-jump-accent {
  background: rgba(217, 119, 87, 0.18);
  border-color: rgba(170, 70, 50, 0.35);
}
.zh-jump-accent:hover {
  background: rgba(217, 119, 87, 0.30);
  border-color: rgba(170, 70, 50, 0.55);
}
.zh-jump-accent .zh-jump-lbl { color: #6b1e16; }
.zh-jump-accent .zh-jump-num { color: rgba(107, 30, 22, 0.75); }

/* Stronger label/section text in the zheenga tweaks panel */
.zh-tweaks .twk-sect { color: rgba(41, 38, 27, 0.75) !important; font-weight: 700; }
.zh-tweaks .twk-lbl { color: #29261b !important; }
.zh-tweaks .twk-lbl > span:first-child { font-weight: 600; }
.zh-tweaks .twk-seg button { color: #29261b; font-weight: 600; }

/* Inline-edit hero affordances (dancer profile) */
.profile-avatar-btn {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; flex-shrink: 0;
}
.profile-avatar { position: relative; overflow: hidden; }
.profile-avatar-edit {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center;
  height: 28px; background: rgba(0, 0, 0, 0.55); color: #fff;
  opacity: 0; transition: opacity 160ms ease;
}
.profile-avatar-btn:hover .profile-avatar-edit,
.profile-avatar-btn:focus-visible .profile-avatar-edit { opacity: 1; }
.profile-avatar-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.profile-inline-static {
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: baseline;
}
.profile-inline-text { display: inline; }
.profile-edit-pencil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(41, 38, 27, 0.06);
  border: 1px solid rgba(41, 38, 27, 0.12);
  border-radius: 50%;
  color: rgba(41, 38, 27, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
  flex-shrink: 0;
}
.profile-edit-pencil:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.profile-edit-pencil:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.profile-edit-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  max-width: 100%;
}
.profile-inline-input {
  font: inherit; color: inherit;
  background: #fff;
  border: 1px solid rgba(41, 38, 27, 0.2);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  outline: none;
  min-width: 6ch;
  max-width: 100%;
  box-sizing: border-box;
}
.profile-name-edit.profile-inline-input { font-family: inherit; min-width: 8ch; width: 100%; }

.profile-edit-confirm,
.profile-edit-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.profile-edit-confirm { background: #2f7d4f; color: #fff; }
.profile-edit-confirm:hover { background: #266b42; }
.profile-edit-cancel  { background: rgba(41, 38, 27, 0.08); color: rgba(41, 38, 27, 0.7); }
.profile-edit-cancel:hover { background: rgba(41, 38, 27, 0.16); color: #29261b; }
.profile-edit-confirm:focus-visible,
.profile-edit-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.profile-meta-static { color: var(--muted); }

/* Profile meta on narrow screens: stack inline fields so they never overflow */
.profile-meta { flex-wrap: wrap; row-gap: 6px; }
.profile-meta .profile-edit-wrap { max-width: 100%; }
.profile-meta .profile-inline-input { max-width: 100%; }
@media (max-width: 480px) {
  .profile-meta > span[aria-hidden="true"] { display: none; }
  .profile-meta {
    flex-direction: column; align-items: flex-start; gap: 6px;
  }
  .profile-name-edit.profile-inline-input { width: 100%; }
}

/* Location autocomplete — dropdown of validated cities/countries.
   Anchors to the .profile-edit-wrap that wraps the input + buttons. */
.location-field { position: relative; }
.location-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 14, 4, 0.16), 0 2px 6px rgba(20, 14, 4, 0.06);
  min-width: 220px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
}
.location-suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
}
.location-suggest-item svg { color: var(--muted); flex-shrink: 0; }
.location-suggest-item.is-active,
.location-suggest-item:hover {
  background: rgba(217, 119, 87, 0.12);
}
.location-suggest-item.is-active svg,
.location-suggest-item:hover svg { color: var(--accent-deep); }
.location-hint {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.location-hint-warn { color: #b03a3a; font-weight: 600; }
.location-attrib {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.location-attrib a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}
.location-attrib a:hover { color: var(--accent-deep); }

/* Artist contact sheet — reuses settings overlay/sheet base styling */
.contact-sheet { max-width: 520px; }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}
.contact-help {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.contact-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.contact-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.contact-actions .btn { flex: 1; }
.contact-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 8px 8px;
}
.contact-sent-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(60, 160, 90, 0.12);
  color: #2d8a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-sent h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}
.contact-sent p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 360px;
}
.contact-sent .btn {
  margin-top: 12px;
  min-width: 140px;
}

/* Bell button + unread badge in profile-actions */
.icon-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 120ms, border-color 120ms, color 120ms;
  flex-shrink: 0;
  align-self: center;
  padding: 0;
  box-sizing: border-box;
}
.icon-btn:hover {
  background: var(--bg);
  border-color: var(--ink);
}
.notif-bell.has-unread { border-color: var(--accent); color: var(--accent-deep); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: #fff5e8;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--surface);
}

/* Notifications inbox sheet */
.inbox-sheet { max-width: 560px; }
.inbox-header-actions { display: inline-flex; gap: 8px; align-items: center; }
.inbox-text-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 120ms, background 120ms;
}
.inbox-text-btn:hover { color: var(--ink); background: var(--bg); }
.inbox-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}
.inbox-section { padding: 8px 0 14px; }
.inbox-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 0 6px;
}
.inbox-section-head h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-row { position: relative; }
.notif-row-body {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: background 120ms, border-color 120ms;
}
.notif-row-body:hover {
  background: var(--bg);
  border-color: var(--line);
}
.notif-row.is-unread .notif-row-body { background: rgba(217, 119, 87, 0.07); }
.notif-row.is-unread .notif-row-body:hover { background: rgba(217, 119, 87, 0.12); }
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  flex-shrink: 0;
}
.notif-row.notif-booking .notif-icon {
  background: rgba(217, 119, 87, 0.12);
  color: var(--accent-deep);
  border-color: rgba(217, 119, 87, 0.3);
}
.notif-row.notif-event_update .notif-icon {
  background: rgba(80, 120, 200, 0.1);
  color: #3c5fb0;
  border-color: rgba(80, 120, 200, 0.25);
}
.notif-row.notif-partner_link .notif-icon {
  background: rgba(180, 90, 160, 0.1);
  color: #8a3b78;
  border-color: rgba(180, 90, 160, 0.25);
}
.notif-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.notif-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.notif-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.notif-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.notif-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  flex-wrap: wrap;
}
.notif-from.is-verified { color: #2d8a4a; }
.notif-from.is-unverified { color: #b03a3a; }
.notif-from svg { flex-shrink: 0; }
.notif-from-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.notif-from.is-verified .notif-from-tag {
  background: rgba(45, 138, 74, 0.14);
  color: #1f6a36;
}
.notif-from.is-unverified .notif-from-tag {
  background: rgba(176, 58, 58, 0.12);
  color: #8c2d2d;
}

/* Public artist profile — promo videos / gallery / links / following */
.btn-outline-inverse {
  background: rgba(255, 245, 232, 0.92);
  color: var(--ink);
  border: 1px solid rgba(255, 245, 232, 0.92);
}
.btn-outline-inverse:hover { background: #fff; border-color: #fff; }
.btn-outline-inverse svg { color: var(--accent-deep); }

.artist-promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.artist-promo-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artist-promo-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}
.artist-promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.artist-promo-tile:hover .artist-promo-thumb img { transform: scale(1.04); }
.artist-promo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: background 150ms, transform 150ms;
}
.artist-promo-tile:hover .artist-promo-play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.artist-promo-tile p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.artist-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.artist-gallery-tile {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.artist-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}
.artist-gallery-tile:hover img { transform: scale(1.06); }

.artist-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.artist-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.artist-link-chip:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.artist-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.artist-link-chip:hover .artist-link-icon {
  background: rgba(217, 119, 87, 0.12);
  color: var(--accent-deep);
}
.artist-link-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist-link-arrow { color: var(--muted); flex-shrink: 0; }
.artist-link-chip:hover .artist-link-arrow { color: var(--accent-deep); }

/* Section head with right-aligned View-all link */
.media-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.media-section-head h2 { margin: 0; }
.media-view-all {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 120ms;
}
.media-view-all:hover { background: rgba(217, 119, 87, 0.12); }

/* "+N" overlay on the last preview tile */
.artist-gallery-tile {
  position: relative;
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--bg);
}
.artist-gallery-more {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 4, 0.55);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

/* Media gallery overlay (full-set viewer) */
.media-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 12, 8, 0.78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 180ms ease;
  overflow-y: auto;
  padding: 0;
}
@media (min-width: 720px) {
  .media-gallery-overlay { align-items: center; padding: 24px; }
}
.media-gallery-sheet {
  background: var(--surface);
  width: 100%;
  max-width: 880px;
  max-height: 100vh;
  overflow-y: auto;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 22px 22px 28px;
  animation: slide-up 220ms ease;
  box-sizing: border-box;
}
@media (min-width: 720px) {
  .media-gallery-sheet { border-radius: 20px; max-height: 90vh; }
}
.media-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  position: sticky;
  top: 0;
  background: var(--surface);
  padding-top: 4px;
  padding-bottom: 12px;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}
.media-gallery-header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}
.media-gallery-header .eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Videos in overlay: 2-col responsive grid */
.media-gallery-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.media-gallery-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-gallery-video .artist-promo-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.media-gallery-video p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* Photos in overlay: lightbox + thumbs */
.media-gallery-lightbox {
  position: relative;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  aspect-ratio: 4 / 3;
}
.media-gallery-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a140e;
}
.media-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: background 120ms, transform 120ms;
}
.media-gallery-nav:hover:not(:disabled) { background: #fff; transform: translateY(-50%) scale(1.05); }
.media-gallery-nav:disabled { opacity: 0.35; cursor: default; }
.media-gallery-nav.prev { left: 12px; }
.media-gallery-nav.next { right: 12px; }
.media-gallery-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 14, 4, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.media-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.media-gallery-thumb {
  appearance: none;
  border: 2px solid transparent;
  background: var(--bg);
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: border-color 120ms, transform 120ms;
}
.media-gallery-thumb:hover { border-color: var(--line); }
.media-gallery-thumb.is-active { border-color: var(--accent); }
.media-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  transition: opacity 120ms;
}
.media-gallery-thumb:hover img,
.media-gallery-thumb.is-active img { opacity: 1; }
.notif-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.notif-action {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.notif-action:hover { background: var(--bg); border-color: var(--ink); }
.notif-action-primary {
  background: var(--accent);
  color: #fff5e8;
  border-color: var(--accent);
}
.notif-action-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff5e8; }
.notif-action-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.notif-action-ghost:hover { background: var(--bg); color: var(--ink); }
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.18);
}

/* Notifications settings matrix: type × (in-app, email) */
.settings-group-help {
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.notif-matrix {
  display: grid;
  gap: 0;
}
.notif-matrix-head {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.notif-matrix-col {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.notif-matrix-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.notif-matrix-row:last-child { border-bottom: none; }
.notif-matrix-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: 8px;
}
.notif-matrix-label strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.notif-matrix-label em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.notif-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notif-matrix-cell input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}

@media (max-width: 480px) {
  .notif-matrix-head { grid-template-columns: 1fr 48px 48px; }
  .notif-matrix-row { grid-template-columns: 1fr 48px 48px; }
  .notif-row-body { grid-template-columns: 32px 1fr auto; padding: 10px; }
  .notif-icon { width: 32px; height: 32px; }
}

/* "What's new" banner — sits above the Open event button instead of crowding the city line */
.update-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(217, 119, 87, 0.10);
  border: 1px solid rgba(217, 119, 87, 0.28);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6b1e16;
  letter-spacing: 0.01em;
}
.update-banner .update-dot {
  flex-shrink: 0;
}
.update-banner-label {
  font-weight: 600;
}
.update-banner-cta {
  margin-left: auto;
  color: rgba(107, 30, 22, 0.7);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .update-banner-cta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Shared "page-hero" — warm gradient atmosphere for list/about/auth
   pages so they share the editorial energy of the home hero.
   ═══════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 36px 20px 32px;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.20), transparent 55%),
    radial-gradient(ellipse at 8% 100%, rgba(223, 99, 55, 0.28), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 111, 66, 0.14), transparent 60%),
    linear-gradient(180deg, #17090f 0%, #2a1018 55%, #4a161a 100%);
  color: #fff5e8;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 245, 232, 0.10);
}
[data-theme="cinematic"] .page-hero {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.16), transparent 55%),
    radial-gradient(ellipse at 8% 100%, rgba(223, 99, 55, 0.22), transparent 55%),
    linear-gradient(180deg, #050203 0%, #1a0a0e 60%, #2a0e14 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(243, 190, 98, 0.18), transparent 70%);
  filter: blur(20px);
  animation: pulse 9s ease-in-out infinite;
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(223, 99, 55, 0.16), transparent 70%);
  filter: blur(28px);
  animation: pulse 11s ease-in-out infinite reverse;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 2; }
.page-hero .eyebrow {
  color: var(--accent-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-hero .eyebrow .spotlight-live-dot {
  width: 6px;
  height: 6px;
}

/* Eyebrow markers — alternates to the live dot, so heros don't all wear the
   same ornament. Pick by context:
     ● spotlight-live-dot  → time-bound, "active right now" surfaces
     — .eyebrow-rule       → editorial, set into prose
     → .eyebrow-arrow      → directional / actionable
     Vol .eyebrow-nr       → archival / volume framing */
.eyebrow-rule {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  margin-right: 2px;
  flex-shrink: 0;
  vertical-align: middle;
}
.eyebrow-arrow {
  font-style: normal;
  letter-spacing: 0;
  opacity: 0.75;
  font-size: 0.95em;
  line-height: 1;
  transform: translateY(-0.5px);
}
.eyebrow-nr {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 1.05em;
  opacity: 0.78;
  /* Hairline divider keeps it from glueing to the next word */
  padding-right: 8px;
  border-right: 1px solid currentColor;
  border-right-color: rgba(243, 190, 98, 0.32);
  margin-right: 2px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 10vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 14px 0 14px;
  text-wrap: balance;
  color: #fff5e8;
  max-width: 14ch;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--accent-gold);
  font-weight: 400;
}
.page-hero .lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 240, 225, 0.78);
  max-width: 44ch;
  margin: 0;
}
.page-hero-stats {
  display: flex;
  gap: 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 245, 232, 0.14);
  flex-wrap: wrap;
}
.page-hero-stats .ph-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-hero-stats .ph-stat-v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff5e8;
}
.page-hero-stats .ph-stat-v em {
  font-style: italic;
  color: var(--accent-gold);
  font-weight: 400;
}
.page-hero-stats .ph-stat-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-gold);
  opacity: 0.85;
  font-weight: 600;
}
@media (max-width: 480px) {
  .page-hero { padding: 28px 18px 26px; }
  .page-hero-stats { gap: 18px; margin-top: 20px; padding-top: 16px; }
  .page-hero-stats .ph-stat-v { font-size: 22px; }
}

/* Filter bar adjustment when stacked under .page-hero: lose the
   stuck-at-top:56 jitter and the redundant border-top. */
.page-hero + .filter-bar {
  top: auto;
  position: static;
  border-top: none;
}

/* ── Portrait marquee (Artists list intro) ─────────────────── */
.portrait-marquee {
  position: relative;
  margin-top: 24px;
  margin-left: -20px;
  margin-right: -20px;
  padding: 2px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.portrait-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
}
.portrait-marquee:hover .portrait-marquee-track { animation-play-state: paused; }
.portrait-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 245, 232, 0.06);
  border: 1px solid rgba(255, 245, 232, 0.14);
  color: #fff5e8;
  text-decoration: none;
  transition: background 200ms, border-color 200ms;
}
.portrait-chip:hover {
  background: rgba(255, 245, 232, 0.12);
  border-color: rgba(243, 190, 98, 0.4);
}
.portrait-chip-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-deep);
  flex-shrink: 0;
}
.portrait-chip-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.portrait-chip-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.portrait-chip-name .pc-country {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.7;
  font-family: var(--font-body);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── About — editorial numbered "moments" ────────────────────
   Replaces the flat card stack with an alternating editorial
   rhythm anchored by a big italic numeral. */
.moments {
  display: grid;
  gap: 0;
}
.moment {
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 24px;
  padding: 28px 4px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.moment:last-child { border-bottom: 1px solid var(--line); }
.moment-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.04em;
  text-align: right;
  padding-top: 4px;
}
.moment .eyebrow {
  color: var(--accent-deep);
  margin-bottom: 6px;
}
[data-theme="cinematic"] .moment .eyebrow { color: var(--accent-gold); }
.moment h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 4.6vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.moment h3 em {
  font-style: italic;
  color: var(--accent-deep);
}
[data-theme="cinematic"] .moment h3 em { color: var(--accent-gold); }
.moment p {
  color: var(--muted);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 56ch;
}
@media (max-width: 520px) {
  .moment {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }
  .moment-num {
    font-size: 48px;
    text-align: left;
    padding-top: 0;
  }
}

/* ── Creator band glow-up ──────────────────────────────────── */
.creator {
  position: relative;
  overflow: hidden;
}
.creator::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 110%, rgba(223, 99, 55, 0.18), transparent 60%),
    radial-gradient(ellipse at 10% -10%, rgba(243, 190, 98, 0.14), transparent 60%);
  pointer-events: none;
}
.creator > * { position: relative; z-index: 1; }
.creator .eyebrow { color: var(--accent-deep); }
[data-theme="cinematic"] .creator .eyebrow { color: var(--accent-gold); }
.creator h2 em {
  font-style: italic;
  color: var(--accent-deep);
}
[data-theme="cinematic"] .creator h2 em { color: var(--accent-gold); }

/* ── Auth — sit the card on the warm gradient ──────────────── */
.auth-shell {
  position: relative;
  padding: 56px 20px 80px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(243, 190, 98, 0.18), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(223, 99, 55, 0.25), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 111, 66, 0.10), transparent 60%),
    linear-gradient(180deg, #17090f 0%, #2a1018 40%, #5a1b1d 100%);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  gap: 32px;
}
[data-theme="cinematic"] .auth-shell {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(243, 190, 98, 0.16), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(223, 99, 55, 0.22), transparent 55%),
    linear-gradient(180deg, #050203 0%, #1a0a0e 60%, #2a0e14 100%);
}
.auth-shell::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(243, 190, 98, 0.18), transparent 70%);
  filter: blur(28px);
  animation: pulse 9s ease-in-out infinite;
  pointer-events: none;
}
.auth-shell::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -15%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(223, 99, 55, 0.16), transparent 70%);
  filter: blur(34px);
  animation: pulse 12s ease-in-out infinite reverse;
  pointer-events: none;
}
.auth-shell > * { position: relative; z-index: 2; }
.auth-card {
  background: var(--surface);
  box-shadow: 0 32px 80px rgba(20, 8, 12, 0.45), 0 6px 20px rgba(20, 8, 12, 0.25);
}
.auth-tease {
  align-self: center;
  color: rgba(255, 240, 225, 0.92);
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.auth-tease .eyebrow {
  color: var(--accent-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.auth-tease p {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  font-style: italic;
  color: rgba(255, 240, 225, 0.88);
  text-wrap: balance;
}
.auth-tease p .next-city {
  font-style: normal;
  color: var(--accent-gold);
  letter-spacing: -0.005em;
}
@media (min-width: 760px) {
  .auth-shell {
    grid-template-columns: 1fr minmax(0, 440px) 1fr;
    align-items: center;
    padding: 64px 28px 96px;
  }
  .auth-tease { text-align: left; margin: 0; max-width: 320px; }
  .auth-tease .eyebrow { justify-content: flex-start; }
  .auth-tease.left { grid-column: 1; justify-self: end; }
  .auth-tease.right { grid-column: 3; justify-self: start; }
  .auth-card-wrap { grid-column: 2; }
}

/* Consistent event-row alignment on phone */
@media (max-width: 480px) {
  .trending-head { align-items: center; }
  .trending-head-text .spotlight-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .trending-head-text h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .trending-head-text .spotlight-meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}


/* ── Hero candle-light — drifting warm orbs behind headline ─────────── */
.hero { isolation: isolate; }
.hero > *:not(.hero-candles) { position: relative; z-index: 1; }

.hero-candles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-candles > span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.75;
  will-change: transform;
}
.hero-candles .c1 {
  width: 360px; height: 360px;
  top: -8%; left: -12%;
  background: radial-gradient(circle, rgba(243, 190, 98, 0.62), rgba(243, 190, 98, 0) 65%);
  animation: candleDrift1 42s ease-in-out infinite;
}
.hero-candles .c2 {
  width: 300px; height: 300px;
  top: 38%; left: 58%;
  background: radial-gradient(circle, rgba(223, 99, 55, 0.66), rgba(223, 99, 55, 0) 65%);
  animation: candleDrift2 56s ease-in-out infinite;
  animation-delay: -8s;
}
.hero-candles .c3 {
  width: 320px; height: 320px;
  top: 62%; left: 12%;
  background: radial-gradient(circle, rgba(255, 111, 66, 0.52), rgba(255, 111, 66, 0) 60%);
  animation: candleDrift3 68s ease-in-out infinite;
  animation-delay: -22s;
}
[data-theme="cinematic"] .hero-candles > span { opacity: 0.85; }
[data-theme="cinematic"] .hero-candles { mix-blend-mode: screen; }

/* Tone down the pre-existing pulse blob so it doesn't compete with the orbit. */
.hero::before { opacity: 0.35; }

@keyframes candleDrift1 {
  0%   { transform: translate(0, 0)        scale(1);    }
  28%  { transform: translate(140px,  60px) scale(1.10); }
  56%  { transform: translate(240px, -28px) scale(0.94); }
  82%  { transform: translate( 80px,  40px) scale(1.04); }
  100% { transform: translate(0, 0)        scale(1);    }
}
@keyframes candleDrift2 {
  0%   { transform: translate(0, 0)         scale(1);    }
  30%  { transform: translate(-160px,  80px) scale(1.14); }
  60%  { transform: translate( -60px, -90px) scale(0.92); }
  85%  { transform: translate(-140px,  30px) scale(1.06); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@keyframes candleDrift3 {
  0%   { transform: translate(0, 0)         scale(1);    }
  35%  { transform: translate( 180px, -110px) scale(0.96); }
  65%  { transform: translate( -70px,   40px) scale(1.12); }
  88%  { transform: translate( 110px,  -30px) scale(1.02); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .hero-candles > span { animation: none; }
}


/* ── Ken-burns: slow imperceptible drift on featured imagery ─────────
   Pauses on hover so users can read overlay meta in peace. Staggered
   delays + slight duration variance so a grid never pulses in sync. */
.event-card-media img,
.spotlight-hero img,
.detail-hero img {
  animation: kenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
.spotlight-hero img { animation-duration: 34s; }
.detail-hero img    { animation-duration: 38s; }

.event-card:hover .event-card-media img,
.spotlight-hero:hover img {
  animation-play-state: paused;
}

/* Stagger across a grid of event cards */
.event-card:nth-child(2n)   .event-card-media img { animation-delay: -7s;  }
.event-card:nth-child(3n)   .event-card-media img { animation-delay: -14s; animation-duration: 32s; }
.event-card:nth-child(4n+1) .event-card-media img { animation-delay: -20s; animation-duration: 26s; }
.event-card:nth-child(5n)   .event-card-media img { animation-delay: -3s;  animation-duration: 30s; }

@keyframes kenBurns {
  0%   { transform: scale(1)    translate3d(0,      0,     0); }
  50%  { transform: scale(1.05) translate3d( 0.4%,  0.8%,  0); }
  100% { transform: scale(1.10) translate3d( 1.2%, -0.4%,  0); }
}

/* During an active view transition, pause ken-burns on the participating
   images so their snapshots are captured at a consistent (no-transform)
   state and the live DOM takes over without a scale jump. */
.vt-active .event-card-media img,
.vt-active .spotlight-hero img,
.vt-active .detail-hero img,
.vt-active .artist-card-photo img,
.vt-active .artist-portrait img,
.vt-active .lineup-photo img {
  animation: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .event-card-media img,
  .spotlight-hero img,
  .detail-hero img { animation: none; transform: none; }
}


/* ── View Transitions: shared-element morph between cards and detail heroes ── */
/* All durations synced so the image lands together with the rest of the page,
   not 160ms after — that gap was reading as a snap at the end of the morph. */
::view-transition-old(vt-event-image),
::view-transition-new(vt-event-image),
::view-transition-old(vt-artist-image),
::view-transition-new(vt-artist-image) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
  mix-blend-mode: normal;
}

/* The browser pairs old/new automatically; this group rule shapes the morph. */
::view-transition-group(vt-event-image),
::view-transition-group(vt-artist-image) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Root crossfade synced to the image morph so they land at the same moment. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ── Filter change cross-fade: events-list results swap smoothly ─────── */
::view-transition-old(events-results),
::view-transition-new(events-results) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-group(events-results) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   Admin surface — denser layouts, monospace numerals, semantic
   status pills. Scoped to .adm-page so nothing leaks out.
   ============================================================ */

/* Admin link in the user nav */
.nav-link.nav-link-admin {
  color: var(--accent-gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link.nav-link-admin:hover { background: rgba(243, 190, 98, 0.12); color: var(--accent-gold); }
.nav-admin-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(223, 99, 55, 0.32);
  flex-shrink: 0;
}

/* Admin tokens — a few semantic colors that fit the cream palette */
.adm-page {
  --adm-ok:    #2f7a44;
  --adm-ok-bg: rgba(47, 122, 68, 0.08);
  --adm-warn:  #a3690d;
  --adm-warn-bg: rgba(163, 105, 13, 0.10);
  --adm-bad:   #a32a2a;
  --adm-bad-bg:  rgba(163, 42, 42, 0.10);
  --adm-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-family: var(--font-body);
  /* Backstage is full-bleed: drop the 480/1180px cap on .app while we're
   * mounted (see `.app:has(.adm-page)` below) and fill the parent. The
   * old `width: 100vw` + negative-margin trick caused horizontal overflow
   * equal to the vertical scrollbar width on desktop. */
  width: 100%;
  max-width: 100%;
}
/* When .app hosts the admin surface, remove its max-width cap and the
   centring auto-margins so Backstage fills the viewport cleanly without
   any 100vw scrollbar-overflow trick. */
.app:has(> .adm-page) {
  max-width: none;
  width: 100%;
}
[data-theme="cinematic"] .adm-page { background: #14080c; }

.is-admin .app { /* hide tweaks panel jump grid color clash etc — no-op for now */ }

/* ── Topbar ───────────────────────────────────────────────── */
.adm-topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line-strong);
  color: #fff5e8;
}
.adm-topbar-left { display: flex; align-items: center; gap: 12px; }
.adm-logo {
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  font-size: 18px; letter-spacing: 0.16em;
  text-transform: lowercase;
}
.adm-logo b { font-style: normal; font-weight: 700; }
.adm-badge {
  font-family: var(--adm-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(243, 190, 98, 0.22);
  color: var(--accent-gold);
  border: 1px solid rgba(243, 190, 98, 0.32);
}
.adm-tabs {
  display: flex; gap: 2px; justify-content: center;
  background: rgba(255, 245, 232, 0.06);
  border-radius: 999px;
  padding: 4px;
}
.adm-tab-btn {
  appearance: none; border: 0; background: transparent;
  padding: 7px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: rgba(255, 245, 232, 0.7);
  cursor: pointer;
  transition: background 150ms, color 150ms;
  letter-spacing: 0.01em;
}
.adm-tab-btn:hover { color: #fff5e8; }
.adm-tab-btn.is-on {
  background: rgba(255, 245, 232, 0.16);
  color: #fff5e8;
}
.adm-topbar-right { justify-self: end; }
.adm-exit {
  font-size: 13px; color: rgba(255, 245, 232, 0.72);
  text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  transition: background 150ms, color 150ms;
}
.adm-exit:hover { color: #fff5e8; background: rgba(255, 245, 232, 0.08); }

/* ── Body grid ────────────────────────────────────────────── */
.adm-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex; flex-direction: column;
  gap: 20px;
}
.adm-tab { display: flex; flex-direction: column; gap: 20px; animation: admFade 0.3s ease; }
@keyframes admFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.adm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 1px 0 rgba(38,22,21,0.02), 0 8px 20px rgba(38,22,21,0.05);
}
[data-theme="cinematic"] .adm-card {
  background: rgba(36,16,22,0.85);
  border-color: var(--line);
}
.adm-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.adm-card-head h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.adm-card-sub, .adm-card-total {
  font-family: var(--adm-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-card-total {
  color: var(--accent-deep);
  background: rgba(143, 49, 31, 0.06);
  padding: 3px 8px; border-radius: 6px;
}

.adm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.adm-split.adm-split--lopsided { grid-template-columns: 2fr 1fr; }
@media (max-width: 880px) {
  .adm-split, .adm-split.adm-split--lopsided { grid-template-columns: 1fr; }
}

/* ── KPI tiles ────────────────────────────────────────────── */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .adm-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.adm-kpi {
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
[data-theme="cinematic"] .adm-kpi { background: rgba(36,16,22,0.85); }
.adm-kpi-label {
  margin: 0 0 8px;
  font-family: var(--adm-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.adm-kpi-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.adm-kpi-value {
  font-family: var(--font-display);
  font-weight: 500; font-size: 30px;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.adm-kpi-value em { font-style: normal; font-size: 16px; color: var(--muted); margin-left: 4px; }
.adm-kpi-trend {
  margin: 8px 0 0;
  font-family: var(--adm-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.adm-kpi-trend.is-up   { color: var(--adm-ok); }
.adm-kpi-trend.is-down { color: var(--adm-bad); }
.adm-kpi-trend-note { color: var(--muted); margin-left: 4px; }
.adm-kpi-arrow { margin-right: 2px; }
.adm-spark { flex-shrink: 0; }

/* ── Queue list ───────────────────────────────────────────── */
.adm-queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-queue-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  color: inherit;
}
.adm-queue-row:hover { border-color: var(--accent); background: rgba(223, 99, 55, 0.04); }
.adm-queue-num {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: 24px;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.adm-queue-label { font-size: 14px; color: var(--ink); font-weight: 500; }
.adm-queue-arrow { color: var(--muted); font-size: 14px; }

/* ── Activity feed ────────────────────────────────────────── */
.adm-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.adm-activity-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.adm-activity-row:hover { background: rgba(38, 22, 21, 0.03); }
.adm-activity-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.adm-activity-text { line-height: 1.4; }
.adm-activity-text b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.adm-activity-text i { font-style: normal; color: var(--accent-deep); }
.adm-activity-time {
  font-family: var(--adm-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Failed searches ticker ──────────────────────────────── */
.adm-failed-track {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.adm-failed-chip {
  appearance: none; border: 1px dashed var(--accent-deep);
  background: rgba(143, 49, 31, 0.04);
  padding: 7px 12px;
  border-radius: 999px;
  font: inherit; font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  animation: admChipIn 0.5s ease both;
  animation-delay: var(--delay, 0s);
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.adm-failed-chip:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff5e8;
  transform: translateY(-1px);
}
.adm-failed-chip:hover .adm-failed-count { color: rgba(255, 245, 232, 0.7); }
@keyframes admChipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.adm-failed-q { font-weight: 500; }
.adm-failed-count {
  font-family: var(--adm-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

/* ── Editorial: spotlight pick ───────────────────────────── */
.adm-help {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.adm-spotlight-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) { .adm-spotlight-options { grid-template-columns: 1fr; } }
.adm-spotlight-option {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.adm-spotlight-option:hover { border-color: var(--accent); }
.adm-spotlight-option.is-on {
  border-color: var(--accent);
  background: rgba(223, 99, 55, 0.06);
}
.adm-spotlight-option input { position: absolute; opacity: 0; pointer-events: none; }
.adm-spotlight-option img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 6px;
}
.adm-spotlight-info {
  display: flex; flex-direction: column; gap: 4px;
  align-self: center; min-width: 0;
}
.adm-spotlight-info b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.adm-spotlight-info span {
  font-size: 12px;
  color: var(--muted);
}
.adm-spotlight-mark {
  position: absolute;
  top: 6px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff5e8;
  display: grid; place-items: center;
  font-size: 11px;
  opacity: 0; transition: opacity 150ms;
}
.adm-spotlight-option.is-on .adm-spotlight-mark { opacity: 1; }

/* Featured city chips */
.adm-city-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-city-chip {
  appearance: none; border: 1px solid var(--line);
  background: var(--surface);
  padding: 7px 12px; border-radius: 999px;
  font: inherit; font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms;
}
.adm-city-chip:hover { border-color: var(--accent); }
.adm-city-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Crate (trending order) */
.adm-crate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.adm-crate-row {
  display: grid;
  grid-template-columns: 36px 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-deep);
  border-radius: 8px;
  transition: transform 120ms;
}
.adm-crate-row:hover { transform: translateX(2px); }
.adm-crate-rank {
  font-family: var(--adm-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}
.adm-crate-thumb {
  width: 64px; height: 40px; object-fit: cover;
  border-radius: 4px;
}
.adm-crate-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-crate-meta b {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-crate-meta span { font-size: 12px; color: var(--muted); }
.adm-crate-actions { display: flex; gap: 4px; }
.adm-crate-actions button {
  appearance: none; border: 1px solid var(--line);
  background: var(--surface);
  width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-2);
  transition: all 120ms;
}
.adm-crate-actions button:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent-deep);
}
.adm-crate-actions button:disabled { opacity: 0.3; cursor: not-allowed; }
.adm-crate-actions button.adm-danger:hover {
  border-color: var(--adm-bad); color: var(--adm-bad);
}

/* ── View-live button ────────────────────────────────────────
   Opens the corresponding public page in a new tab, so an admin can verify
   their editorial decision against the actual live surface without leaving
   Backstage. Two variants:
     --corner  pinned top-right of a card option (spotlight picker)
     --icon    inline within an actions cluster (trending crate row) */
.adm-view-live {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-gold);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color 150ms, color 150ms, background 150ms;
}
.adm-view-live:hover {
  color: #fff5e8;
  background: rgba(243, 190, 98, 0.10);
  border-color: rgba(243, 190, 98, 0.42);
}
.adm-view-live:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
/* Corner variant — top-right of the spotlight option card. */
.adm-view-live--corner {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
/* Icon variant — slots into the .adm-crate-actions cluster. The cluster
   already styles `button` children to 28×28; this override gives it the
   same footprint with the arrow glyph centered. */
.adm-crate-actions .adm-view-live--icon {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-gold);
  border-color: var(--line);
}
.adm-crate-actions .adm-view-live--icon:hover {
  color: var(--accent-gold);
  background: rgba(243, 190, 98, 0.12);
  border-color: rgba(243, 190, 98, 0.45);
}
/* Inline variant — sits as another line within a text block (claim rows,
   not floated/absolutely positioned). Aligns to the start so it feels like
   "another piece of evidence" rather than a primary action. */
.adm-view-live--inline {
  align-self: flex-start;
  margin-top: 4px;
}
@media (max-width: 700px) {
  /* Compact mobile: corner button shrinks but stays visible. */
  .adm-view-live--corner {
    font-size: 10px;
    padding: 3px 8px;
    top: 6px;
    right: 6px;
  }
  .adm-crate-actions .adm-view-live--icon {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

/* ── Moderation: tables ──────────────────────────────────── */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.adm-table thead th {
  text-align: left;
  font-family: var(--adm-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.adm-table thead th.num { text-align: right; }
.adm-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.adm-table tbody td.num { text-align: right; }
.adm-table tbody tr { transition: background 120ms; }
.adm-table tbody tr:hover { background: rgba(38, 22, 21, 0.02); }
.adm-table tbody tr.is-on {
  background: rgba(223, 99, 55, 0.06);
  cursor: pointer;
}
.adm-table.adm-table--compact tbody td { padding: 8px 12px; }
.adm-table.adm-table--compact { cursor: default; }
.adm-table.adm-table--compact tbody tr { cursor: pointer; }
.adm-cell-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.adm-tabular { font-family: var(--adm-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.adm-cell-actions { display: flex; gap: 6px; justify-content: flex-end; }
.is-up { color: var(--adm-ok); }
.is-down { color: var(--adm-bad); }

/* Confidence bar */
.adm-conf { display: flex; align-items: center; gap: 8px; }
.adm-conf-bar {
  flex: 1; height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  min-width: 80px;
}
.adm-conf-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 2px;
}

/* Pills */
.adm-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--adm-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.adm-pill--ok      { background: var(--adm-ok-bg);   color: var(--adm-ok);   border-color: rgba(47, 122, 68, 0.24); }
.adm-pill--warn    { background: var(--adm-warn-bg); color: var(--adm-warn); border-color: rgba(163, 105, 13, 0.24); }
.adm-pill--bad     { background: var(--adm-bad-bg);  color: var(--adm-bad);  border-color: rgba(163, 42, 42, 0.24); }
.adm-pill--high    { background: var(--adm-ok-bg);   color: var(--adm-ok); }
.adm-pill--med     { background: var(--adm-warn-bg); color: var(--adm-warn); }
.adm-pill--low     { background: rgba(38, 22, 21, 0.06); color: var(--muted); }
.adm-pill--neutral { background: rgba(38, 22, 21, 0.06); color: var(--muted); }

/* Buttons */
.adm-btn {
  appearance: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms;
  letter-spacing: 0.01em;
}
.adm-btn:hover { border-color: var(--accent); }
.adm-btn-ok {
  background: var(--adm-ok);
  border-color: var(--adm-ok);
  color: #fff5e8;
}
.adm-btn-ok:hover { background: #266135; border-color: #266135; color: #fff5e8; }
.adm-btn-no {
  background: transparent;
  border-color: rgba(163, 42, 42, 0.30);
  color: var(--adm-bad);
}
.adm-btn-no:hover { background: var(--adm-bad-bg); border-color: var(--adm-bad); }

.adm-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

/* Claim list */
.adm-claim-list, .adm-report-list, .adm-draft-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.adm-claim {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.adm-claim-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-claim-text b { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.adm-claim-text span { font-size: 12.5px; color: var(--muted); }
.adm-claim-text a { font-family: var(--adm-mono); font-size: 11.5px; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

/* Reports */
.adm-report {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-left-width: 3px;
}
.adm-report--high   { border-left-color: var(--adm-bad); }
.adm-report--medium { border-left-color: var(--adm-warn); }
.adm-report--low    { border-left-color: var(--line); }
.adm-report-text { display: flex; flex-direction: column; gap: 4px; }
.adm-report-text b { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink); }
.adm-report-text span { font-size: 12.5px; color: var(--muted); }
.adm-report-head { display: flex; gap: 8px; align-items: center; }
.adm-report-when { font-family: var(--adm-mono); font-size: 11px; color: var(--muted); }

/* ── Audience: chart ──────────────────────────────────────── */
.adm-legend {
  display: flex; gap: 14px;
  font-family: var(--adm-mono);
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.adm-legend .dot--a { background: var(--accent); }
.adm-legend .dot--b { background: var(--accent-deep); }
.adm-chart { width: 100%; height: auto; display: block; }
.adm-chart-x {
  font-family: var(--adm-mono);
  font-size: 10px;
  fill: var(--muted);
  letter-spacing: 0.04em;
}

/* Radar pulse map */
.adm-radar-wrap {
  display: grid; place-items: center;
  padding: 10px 0;
}
.adm-radar { width: 100%; max-width: 460px; height: auto; }
.adm-radar-axis {
  font-family: var(--adm-mono);
  font-size: 10px;
  fill: var(--muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.adm-radar-city { cursor: pointer; transition: filter 150ms; }
.adm-radar-city:hover, .adm-radar-city.is-on { filter: drop-shadow(0 0 6px rgba(223, 99, 55, 0.4)); }
.adm-radar-city.is-on circle:nth-of-type(2) { fill: var(--accent-gold); }
.adm-radar-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-2);
  font-weight: 500;
}
.adm-radar-focus {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px;
}
.adm-radar-focus b {
  font-family: var(--font-display); font-weight: 500;
  color: var(--ink); font-size: 15px;
  letter-spacing: -0.01em;
}
.adm-radar-focus em { font-style: normal; font-weight: 600; font-family: var(--adm-mono); font-size: 12px; }

/* ── Comms ────────────────────────────────────────────────── */
.adm-channel-pills { display: flex; gap: 4px; }
.adm-pill-btn {
  appearance: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 120ms;
}
.adm-pill-btn:hover { border-color: var(--accent); color: var(--ink); }
.adm-pill-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.adm-field { display: grid; gap: 6px; margin-bottom: 14px; }
.adm-field span {
  font-family: var(--adm-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.adm-field input,
.adm-field select,
.adm-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font: inherit; font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 120ms;
  font-family: var(--font-body);
  resize: vertical;
}
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus {
  border-color: var(--accent);
}

.adm-composer-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.adm-reach { font-size: 13px; color: var(--muted); }
.adm-reach b { color: var(--ink); font-weight: 600; font-family: var(--adm-mono); font-variant-numeric: tabular-nums; }

/* Comms previews */
.adm-preview-push { padding: 14px; background: linear-gradient(135deg, #1a1a1a, #2a1a20); border-radius: 12px; }
.adm-pushcard {
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  color: #1a0e10;
  display: flex; flex-direction: column; gap: 4px;
}
.adm-pushcard-app {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adm-pushcard-subject {
  font-size: 14px; font-weight: 700; color: #1a0e10;
  font-family: var(--font-body);
}
.adm-pushcard p { margin: 0; font-size: 13px; color: #444; line-height: 1.4; }

.adm-preview-email {
  padding: 0;
  background: var(--surface-2);
  border-radius: 8px;
  overflow: hidden;
}
.adm-emailcard { padding: 18px 20px 20px; }
.adm-emailcard-meta {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 14px;
  font-family: var(--adm-mono);
  font-size: 11px; color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.adm-emailcard h4 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.adm-emailcard p { margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.adm-email-cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff5e8;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}

.adm-preview-banner {
  padding: 20px;
  background: linear-gradient(135deg, #17090f, #2a1018);
  border-radius: 8px;
}
.adm-banner {
  background: rgba(255, 245, 232, 0.1);
  border: 1px solid rgba(255, 245, 232, 0.2);
  color: #fff5e8;
  padding: 12px 18px;
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: -0.005em;
}

.adm-draft {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.adm-draft > div { display: flex; flex-direction: column; gap: 2px; }
.adm-draft b { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink); }
.adm-draft span { font-size: 12.5px; color: var(--muted); }

/* ── Toast ────────────────────────────────────────────────── */
.adm-toast-host {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
}
.adm-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--ink);
  color: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
  animation: admToastIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}
.adm-toast--ok .adm-toast-dot   { background: var(--adm-ok); }
.adm-toast--warn .adm-toast-dot { background: var(--adm-warn); }
.adm-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@keyframes admToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Smaller screens */
@media (max-width: 700px) {
  .adm-topbar { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 16px; }
  .adm-tabs {
    grid-column: 1 / -1;
    order: 2;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 8px;
  }
  .adm-tab-btn { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
  .adm-body { padding: 18px 16px 80px; }
  .adm-table { font-size: 12.5px; }
  .adm-table thead th, .adm-table tbody td { padding: 10px 8px; }
}


/* When rendered inside the iOS phone frame, push the sticky Backstage
   topbar below the dynamic island, matching the user-nav offset. */
body.in-phone-frame .adm-topbar {
  padding-top: 58px;
}


/* ============================================================
   Backstage — mobile tightening (<= 560px)
   Trades some density for actually fitting on a phone.
   ============================================================ */
@media (max-width: 560px) {

  /* ── Topbar: keep it compact on mobile ────────────────── */
  .adm-topbar {
    padding: 10px 14px;
    gap: 10px;
  }
  body.in-phone-frame .adm-topbar { padding-top: 58px; }
  .adm-logo  { font-size: 16px; letter-spacing: 0.12em; }
  .adm-badge { font-size: 9px; padding: 2px 6px; letter-spacing: 0.18em; }
  .adm-topbar-right {
    /* Was hidden on mobile under the assumption browser-back would cover it.
       It doesn't (no browser back inside the phone frame, and the affordance
       admins actually want is "see the live site", not "previous tab").
       Keep the link visible but compact. The label shrinks via .adm-exit below. */
    justify-self: end;
  }
  .adm-exit {
    /* Compact form on mobile — keep the gold-tinted text, shrink the padding
       and the label. Full "Exit backstage →" is kept on desktop. */
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  /* Hide the "backstage" word at the smallest sizes so the wordmark + tabs
     still fit. The arrow + "Exit" stays. */
  .adm-exit .adm-exit-long { display: none; }
  .adm-tabs {
    padding: 3px;
    background: rgba(255, 245, 232, 0.06);
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .adm-tabs::-webkit-scrollbar { display: none; }
  .adm-tab-btn { padding: 6px 11px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* ── Body / cards ─────────────────────────────────────── */
  .adm-body { padding: 14px 12px 64px; gap: 12px; }
  .adm-card { padding: 14px 14px 16px; border-radius: 12px; }
  .adm-card-head { flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
  .adm-card-head h3 { font-size: 16px; }
  .adm-card-sub, .adm-card-total { font-size: 10px; }

  /* ── KPIs: 2-up, tighter ──────────────────────────────── */
  .adm-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .adm-kpi { padding: 12px 12px 14px; }
  .adm-kpi-label { font-size: 9.5px; letter-spacing: 0.12em; margin-bottom: 6px; }
  .adm-kpi-row { gap: 6px; align-items: center; }
  .adm-kpi-value { font-size: 22px; }
  .adm-kpi-value em { font-size: 12px; }
  .adm-kpi-trend { font-size: 10.5px; margin-top: 6px; }
  .adm-spark { width: 56px; height: 18px; flex-shrink: 0; }

  /* ── Queues snapshot ─────────────────────────────────── */
  .adm-queue-row { grid-template-columns: 44px 1fr auto; padding: 10px 12px; }
  .adm-queue-num { font-size: 20px; }
  .adm-queue-label { font-size: 13px; }

  /* ── Activity feed: time stacks below text ───────────── */
  .adm-activity-row {
    grid-template-columns: 8px 1fr;
    align-items: flex-start;
    padding: 6px 8px;
    font-size: 13px;
  }
  .adm-activity-time {
    grid-column: 2;
    grid-row: 2;
    margin-top: 2px;
  }
  .adm-activity-dot { margin-top: 6px; }

  /* ── Failed search ticker: tighter chips ─────────────── */
  .adm-failed-chip { padding: 6px 10px; font-size: 12px; }

  /* ── Tables: horizontally scrollable on mobile ───────── */
  .adm-card .adm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin: 0 -14px;
    padding: 0 14px 4px;
    max-width: calc(100% + 28px);
  }
  .adm-card .adm-table thead,
  .adm-card .adm-table tbody { display: table; width: max-content; min-width: 100%; }
  .adm-card .adm-table thead th,
  .adm-card .adm-table tbody td { padding: 10px 10px; font-size: 12.5px; }
  .adm-card .adm-table thead th { font-size: 9.5px; letter-spacing: 0.12em; }
  /* Allow event/subject titles to wrap a little */
  .adm-table tbody td b { white-space: normal; display: inline-block; max-width: 22ch; line-height: 1.2; }
  .adm-cell-sub { white-space: normal; max-width: 22ch; }

  /* Stack action buttons vertically inside cells when needed */
  .adm-cell-actions { flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .adm-btn { padding: 5px 10px; font-size: 11.5px; }

  /* Confidence bar narrower */
  .adm-conf { gap: 6px; }
  .adm-conf-bar { min-width: 50px; max-width: 70px; }

  /* ── Editorial: spotlight + crate ─────────────────────── */
  .adm-split.adm-split--lopsided > * { min-width: 0; }
  .adm-spotlight-options { grid-template-columns: 1fr; gap: 8px; }
  .adm-spotlight-option { grid-template-columns: 56px 1fr; padding: 8px; }
  .adm-spotlight-option img { width: 56px; height: 56px; }
  .adm-spotlight-info b { font-size: 14px; }

  .adm-crate-row {
    grid-template-columns: 26px 48px 1fr auto;
    gap: 8px;
    padding: 6px 6px 6px 4px;
  }
  .adm-crate-rank { font-size: 11px; }
  .adm-crate-thumb { width: 48px; height: 32px; border-radius: 4px; }
  .adm-crate-meta b { font-size: 13.5px; }
  .adm-crate-meta span { font-size: 11.5px; }
  .adm-crate-actions { gap: 3px; }
  .adm-crate-actions button { width: 26px; height: 26px; font-size: 12px; }

  /* ── Moderation: reports + claims stack actions below ── */
  .adm-claim, .adm-report {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .adm-claim .adm-cell-actions,
  .adm-report .adm-cell-actions {
    justify-content: flex-start;
  }

  /* ── Audience: chart shorter, radar fits ──────────────── */
  .adm-chart { aspect-ratio: 16 / 9; }
  .adm-radar-axis { font-size: 9px; }
  .adm-radar-label { font-size: 10px; }
  .adm-legend { font-size: 10px; gap: 10px; }

  /* ── Comms: composer foot stacks ──────────────────────── */
  .adm-composer-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .adm-composer-foot .adm-cell-actions { justify-content: flex-end; }
  .adm-reach { font-size: 12px; }
  .adm-channel-pills { flex-wrap: wrap; }

  /* Email preview tighter */
  .adm-emailcard { padding: 14px; }
  .adm-emailcard h4 { font-size: 18px; }
  .adm-emailcard p { font-size: 13px; }

  /* Drafts */
  .adm-draft { padding: 10px 12px; gap: 10px; }
  .adm-draft b { font-size: 13.5px; }
  .adm-draft span { font-size: 11.5px; }
}


/* ============================================================
   Scout tab — AI-assisted event scouting
   ============================================================ */

.adm-tab--scout { gap: 18px; }

/* ── Console (search bar) ─────────────────────────────────── */
.adm-scout-console {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-deep);
  border-radius: 12px;
  color: rgba(255, 245, 232, 0.86);
  border: 1px solid rgba(243, 190, 98, 0.18);
  box-shadow: 0 6px 20px rgba(20, 8, 12, 0.18);
}
[data-theme="cinematic"] .adm-scout-console { background: rgba(8,3,5,0.92); }
.adm-scout-console-tag {
  font-family: var(--adm-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.24em;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--accent-gold);
  border: 1px solid rgba(243, 190, 98, 0.36);
  background: rgba(243, 190, 98, 0.06);
}
.adm-scout-console-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  background: rgba(255, 245, 232, 0.06);
  border: 1px solid rgba(255, 245, 232, 0.12);
  border-radius: 8px;
  padding: 6px 6px 6px 12px;
  transition: border-color 150ms, background 150ms;
}
.adm-scout-console-form:focus-within {
  border-color: var(--accent);
  background: rgba(255, 245, 232, 0.10);
}
.adm-scout-console-glyph {
  font-family: var(--adm-mono);
  color: var(--accent-gold); font-size: 13px; line-height: 1;
}
.adm-scout-console-form input {
  appearance: none; background: transparent; border: 0; outline: 0;
  color: #fff5e8; font: inherit; font-size: 14px;
  padding: 6px 0;
}
.adm-scout-console-form input::placeholder { color: rgba(255, 245, 232, 0.36); }
.adm-scout-console-run {
  appearance: none; border: 0;
  background: var(--accent);
  color: #fff5e8; font: inherit; font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: 6px;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
}
.adm-scout-console-run:hover { background: var(--accent-deep); transform: translateY(-1px); }
.adm-scout-console-run:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.adm-scout-console-stats {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px;
}
.adm-scout-console-stats > span {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.adm-scout-console-stats b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 18px;
  color: #fff5e8; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.adm-scout-console-stats em {
  font-style: normal;
  font-family: var(--adm-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 245, 232, 0.5);
}
.adm-scout-toggle {
  font-family: var(--adm-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 245, 232, 0.6);
}
.adm-scout-toggle i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; background: rgba(255, 245, 232, 0.3);
  vertical-align: 1px;
}
.adm-scout-toggle.is-on { color: var(--accent-gold); }
.adm-scout-toggle.is-on i {
  background: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(243, 190, 98, 0.18);
  animation: admScoutPulse 1.8s ease-in-out infinite;
}
@keyframes admScoutPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(243, 190, 98, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(243, 190, 98, 0.05); }
}
.adm-scout-console-time {
  color: rgba(255, 245, 232, 0.42);
  font-size: 10.5px;
}

/* ── Active jobs strip ────────────────────────────────────── */
.adm-scout-jobs {
  display: grid; gap: 8px;
}
.adm-scout-jobs-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--muted);
  padding: 0 2px;
}
.adm-scout-jobs-track {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.adm-scout-job {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink);
}
.adm-scout-job-q {
  font-family: var(--adm-mono);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
}
.adm-scout-job-q::before { content: "“"; color: var(--muted); margin-right: 1px; }
.adm-scout-job-q::after  { content: "”"; color: var(--muted); margin-left: 1px; }
.adm-scout-job-meta {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.adm-scout-job-meta b {
  font-family: var(--adm-mono);
  color: var(--accent-deep); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.adm-scout-job-meta em { font-style: normal; text-transform: lowercase; }
.adm-scout-job.is-running {
  border-color: var(--accent);
  background: rgba(223, 99, 55, 0.04);
}
.adm-scout-job-pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(223, 99, 55, 0.18);
  animation: admScoutPulse2 1.4s ease-in-out infinite;
}
@keyframes admScoutPulse2 {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ── Scouted queue ────────────────────────────────────────── */
.adm-scout-queue-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}
.adm-scout-filter-group {
  display: inline-flex; gap: 4px; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.adm-scout-filter-sort {
  background: transparent;
  border: 0; padding: 0; gap: 6px;
}
.adm-scout-filter-sort > span {
  font-size: 10px; letter-spacing: 0.16em; color: var(--muted);
}
.adm-scout-filter {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 500;
  color: var(--muted);
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  display: inline-flex; align-items: center; gap: 5px;
}
.adm-scout-filter em {
  font-style: normal;
  font-family: var(--adm-mono); font-size: 10px;
  color: var(--muted);
  background: rgba(38, 22, 21, 0.06);
  padding: 1px 5px; border-radius: 4px;
}
.adm-scout-filter:hover { color: var(--ink); }
.adm-scout-filter.is-on {
  background: var(--ink);
  color: #fff5e8;
}
.adm-scout-filter.is-on em {
  background: rgba(255, 245, 232, 0.16);
  color: rgba(255, 245, 232, 0.78);
}
.adm-scout-filter-sort .adm-scout-filter {
  border: 1px solid var(--line);
}
.adm-scout-filter-sort .adm-scout-filter.is-on {
  border-color: var(--ink);
}

.adm-scout-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.adm-scout-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.adm-scout-row:hover { border-color: var(--accent); }
.adm-scout-row.is-open {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(38, 22, 21, 0.08);
}
.adm-scout-row.is-tier-high { border-left: 3px solid var(--adm-ok); }
.adm-scout-row.is-tier-med  { border-left: 3px solid var(--adm-warn); }
.adm-scout-row.is-tier-low  { border-left: 3px solid var(--adm-bad); }

.adm-scout-row-main {
  display: grid;
  grid-template-columns: 56px 1fr auto auto 14px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  appearance: none; border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
  color: inherit;
  transition: background 120ms;
}
.adm-scout-row-main:hover { background: rgba(38, 22, 21, 0.02); }
.adm-scout-thumb {
  width: 56px; height: 56px;
  border-radius: 8px; object-fit: cover;
  background: var(--bg-deep);
}
.adm-scout-meta { min-width: 0; }
.adm-scout-title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.adm-scout-title b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink);
}
.adm-scout-loc {
  font-size: 12px; color: var(--muted);
}
.adm-scout-sub {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--muted);
  margin-top: 2px;
}
.adm-scout-sub b { color: var(--ink); font-weight: 600; }
.adm-scout-sep { color: rgba(38, 22, 21, 0.24); }
.adm-scout-mono {
  font-family: var(--adm-mono);
  font-variant-numeric: tabular-nums;
}

/* Confidence strip */
.adm-scout-strip {
  display: inline-flex; gap: 3px;
  padding: 4px 0;
}
.adm-scout-dot {
  display: inline-flex; flex-direction: column; align-items: center;
  width: 20px;
  font-family: var(--adm-mono);
  font-size: 10px;
}
.adm-scout-dot i {
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  font-style: normal; font-weight: 700; font-size: 11px;
  line-height: 1;
}
.adm-scout-dot em {
  font-style: normal;
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}
.adm-scout-dot.is-ok i   { background: var(--adm-ok-bg);   color: var(--adm-ok);   border: 1px solid rgba(47, 122, 68, 0.32); }
.adm-scout-dot.is-warn i { background: var(--adm-warn-bg); color: var(--adm-warn); border: 1px solid rgba(163, 105, 13, 0.32); }
.adm-scout-dot.is-bad i  { background: rgba(38, 22, 21, 0.05); color: var(--muted); border: 1px dashed rgba(38, 22, 21, 0.20); }

.adm-scout-score {
  display: flex; align-items: baseline; gap: 1px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 64px; justify-content: center;
}
.adm-scout-score b {
  font-family: var(--font-display);
  font-weight: 600; font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.adm-scout-score em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-left: 1px;
}
.adm-scout-score--ok {
  background: var(--adm-ok-bg);
  border-color: rgba(47, 122, 68, 0.28);
}
.adm-scout-score--ok b   { color: var(--adm-ok); }
.adm-scout-score--warn {
  background: var(--adm-warn-bg);
  border-color: rgba(163, 105, 13, 0.28);
}
.adm-scout-score--warn b { color: var(--adm-warn); }
.adm-scout-score--bad {
  background: rgba(163, 42, 42, 0.06);
  border-color: rgba(163, 42, 42, 0.22);
}
.adm-scout-score--bad b  { color: var(--adm-bad); }

.adm-scout-chev {
  color: var(--muted);
  transition: transform 150ms;
}
.adm-scout-chev.is-open { transform: rotate(180deg); color: var(--accent); }

/* Expanded panel */
.adm-scout-expand {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: 16px 18px 18px;
  animation: admScoutExpand 240ms ease;
}
@keyframes admScoutExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.adm-scout-expand-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
.adm-scout-expand h4 {
  margin: 0 0 8px;
  font-family: var(--adm-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-scout-expand-grid > div + div h4:not(:first-child) {
  margin-top: 16px;
}

.adm-scout-check-list {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 4px;
}
.adm-scout-check {
  display: grid;
  grid-template-columns: 18px 88px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.adm-scout-check-glyph {
  display: grid; place-items: center;
  font-family: var(--adm-mono);
  font-weight: 800; font-size: 12px;
  width: 18px; height: 18px;
  border-radius: 4px;
}
.adm-scout-check.is-ok   .adm-scout-check-glyph { background: var(--adm-ok-bg);   color: var(--adm-ok); }
.adm-scout-check.is-warn .adm-scout-check-glyph { background: var(--adm-warn-bg); color: var(--adm-warn); }
.adm-scout-check.is-bad  .adm-scout-check-glyph { background: rgba(38, 22, 21, 0.05); color: var(--muted); }
.adm-scout-check-label {
  font-family: var(--font-display);
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.adm-scout-check-detail {
  font-size: 12.5px;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-scout-check.is-bad .adm-scout-check-detail { color: var(--muted); font-style: italic; }
.adm-scout-check-weight {
  font-family: var(--adm-mono);
  font-size: 10px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}

.adm-scout-hint {
  margin: 8px 0 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  background: rgba(243, 190, 98, 0.10);
  border: 1px solid rgba(243, 190, 98, 0.28);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.adm-scout-hint span {
  font-family: var(--adm-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--accent-deep);
  flex-shrink: 0;
}
[data-theme="cinematic"] .adm-scout-hint span { color: var(--accent-gold); }

.adm-scout-lineup {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; gap: 3px;
}
.adm-scout-artist {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.adm-scout-artist-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(38, 22, 21, 0.20);
}
.adm-scout-artist.is-known .adm-scout-artist-dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(223, 99, 55, 0.18);
}
.adm-scout-artist-name { color: var(--ink); font-weight: 500; }
.adm-scout-artist.is-known .adm-scout-artist-name { color: var(--accent-deep); }
[data-theme="cinematic"] .adm-scout-artist.is-known .adm-scout-artist-name { color: var(--accent-gold); }
.adm-scout-artist-tag {
  font-family: var(--adm-mono);
  font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.adm-scout-artist.is-known .adm-scout-artist-tag {
  color: var(--accent-deep);
}

.adm-scout-sources {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.adm-scout-sources li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.adm-scout-sources a {
  color: var(--ink); font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--muted);
}
.adm-scout-sources a:hover { color: var(--accent-deep); border-color: var(--accent); }
.adm-scout-source-url {
  font-family: var(--adm-mono); font-size: 11px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-scout-source-when {
  font-family: var(--adm-mono); font-size: 10.5px;
  color: var(--muted);
}

.adm-scout-expand-actions {
  display: flex; gap: 8px; align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.adm-scout-expand-spacer { flex: 1; }

.adm-scout-outreach {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.adm-scout-outreach header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.adm-scout-outreach header b {
  font-family: var(--adm-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-deep);
}
.adm-scout-outreach header span { font-size: 11px; color: var(--muted); }
.adm-scout-outreach header em { font-style: italic; color: var(--ink-2); }
.adm-scout-outreach pre {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Circuit ribbon ───────────────────────────────────────── */
.adm-scout-circuit { display: grid; gap: 12px; }
.adm-scout-circuit-picker {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.adm-scout-circuit-pick {
  appearance: none; border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer;
  transition: all 120ms;
}
.adm-scout-circuit-pick:hover { border-color: var(--accent); color: var(--ink); }
.adm-scout-circuit-pick.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff5e8;
}

.adm-scout-circuit-stage {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 4px;
  overflow: hidden;
}
.adm-scout-circuit-svg { width: 100%; height: auto; display: block; }
.adm-scout-month {
  font-family: var(--adm-mono);
  font-size: 9.5px; letter-spacing: 0.1em;
  fill: var(--muted);
  text-transform: uppercase;
}

.adm-scout-pin-label {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.2;
  pointer-events: none;
}
.adm-scout-pin-label b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 13.5px;
  color: var(--ink); letter-spacing: -0.01em;
}
.adm-scout-pin-label span {
  font-family: var(--adm-mono);
  font-size: 9.5px; color: var(--muted);
  letter-spacing: 0.04em;
}
.adm-scout-pin-label.is-scouted b { color: var(--accent-deep); font-style: italic; }
[data-theme="cinematic"] .adm-scout-pin-label.is-scouted b { color: var(--accent-gold); }
.adm-scout-pin-label.is-scouted span { color: var(--accent-deep); }
[data-theme="cinematic"] .adm-scout-pin-label.is-scouted span { color: var(--accent-gold); }

.adm-scout-circuit-pin { cursor: pointer; }
.adm-scout-circuit-pin:hover circle:last-of-type { r: 8; }

.adm-scout-circuit-legend {
  display: flex; align-items: center; gap: 16px;
  font-size: 11px; color: var(--muted);
  padding: 2px 6px 0;
}
.adm-scout-legend-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--accent-deep);
  vertical-align: -1px; margin-right: 5px;
}
.adm-scout-legend-dot.is-scouted {
  background: var(--surface);
  border: 1.5px dashed var(--accent);
}
.adm-scout-circuit-summary {
  margin-left: auto;
  font-family: var(--adm-mono); font-size: 10.5px;
  color: var(--ink-2);
}

/* ── Signals grid ─────────────────────────────────────────── */
.adm-scout-signals-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 1080px) {
  .adm-scout-signals-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .adm-scout-signals-grid { grid-template-columns: 1fr; }
}

/* Emerging artists */
.adm-scout-emerging {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.adm-scout-emerging li {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.adm-scout-emerging-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.adm-scout-emerging-head b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 16px; color: var(--ink);
  letter-spacing: -0.01em;
}
.adm-scout-emerging-origin {
  font-family: var(--adm-mono); font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.adm-scout-emerging li p {
  margin: 6px 0 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.adm-scout-emerging-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.adm-scout-emerging-foot .adm-scout-mono {
  color: var(--accent-deep); font-weight: 600;
}
[data-theme="cinematic"] .adm-scout-emerging-foot .adm-scout-mono { color: var(--accent-gold); }
.adm-scout-emerging-btn {
  margin-left: auto;
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.adm-scout-emerging-btn:hover { color: var(--accent); }
[data-theme="cinematic"] .adm-scout-emerging-btn { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }

/* Hot regions */
.adm-scout-regions {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.adm-scout-region-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.adm-scout-region-row b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 15px;
  color: var(--ink);
}
.adm-scout-region-delta {
  font-family: var(--adm-mono);
  font-size: 11px; font-weight: 700;
}
.adm-scout-region-delta.is-up    { color: var(--adm-ok); }
.adm-scout-region-delta.is-down  { color: var(--adm-bad); }
.adm-scout-region-delta.is-flat  { color: var(--muted); }
.adm-scout-region-delta.is-new {
  color: var(--accent-deep);
  background: rgba(223, 99, 55, 0.08);
  padding: 1px 6px; border-radius: 4px;
  text-transform: uppercase;
}
.adm-scout-region-bar {
  position: relative;
  height: 18px;
  background: rgba(38, 22, 21, 0.04);
  border-radius: 4px;
  overflow: hidden;
}
.adm-scout-region-bar > span {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  opacity: 0.85;
}
.adm-scout-region-bar > em {
  position: absolute; inset: 0 8px 0 auto;
  display: grid; place-items: center;
  font-style: normal;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Trending styles */
.adm-scout-styles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
}
.adm-scout-styles li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.adm-scout-styles li b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.adm-scout-styles-count {
  font-size: 12px;
  color: var(--accent-deep);
  font-weight: 700;
}
[data-theme="cinematic"] .adm-scout-styles-count { color: var(--accent-gold); }

/* Source health table */
.adm-scout-sources-table .adm-scout-source-bar {
  width: 120px; height: 8px;
  background: rgba(38, 22, 21, 0.06);
  border-radius: 999px; overflow: hidden;
}
.adm-scout-sources-table .adm-scout-source-bar > span {
  display: block; height: 100%;
  border-radius: 999px;
}
.adm-scout-sources-table .adm-scout-source-bar > span.is-ok   { background: var(--adm-ok); }
.adm-scout-sources-table .adm-scout-source-bar > span.is-warn { background: var(--adm-warn); }
.adm-scout-sources-table .adm-scout-source-bar > span.is-bad  { background: var(--adm-bad); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .adm-scout-console {
    grid-template-columns: 1fr;
  }
  .adm-scout-console-stats { flex-wrap: wrap; gap: 10px; }
  .adm-scout-row-main {
    grid-template-columns: 48px 1fr auto;
    grid-template-areas:
      "thumb meta score"
      "strip strip strip";
    gap: 8px;
  }
  .adm-scout-thumb       { grid-area: thumb; width: 48px; height: 48px; }
  .adm-scout-meta        { grid-area: meta; }
  .adm-scout-score       { grid-area: score; padding: 4px 10px; min-width: 56px; }
  .adm-scout-score b     { font-size: 20px; }
  .adm-scout-strip       { grid-area: strip; padding-top: 6px; border-top: 1px dashed var(--line); }
  .adm-scout-chev        { display: none; }
  .adm-scout-expand-grid { grid-template-columns: 1fr; gap: 14px; }
  .adm-scout-check {
    grid-template-columns: 18px 1fr auto;
    grid-template-areas:
      "glyph label weight"
      "glyph detail detail";
    row-gap: 2px;
  }
  .adm-scout-check-glyph  { grid-area: glyph; align-self: start; }
  .adm-scout-check-label  { grid-area: label; }
  .adm-scout-check-weight { grid-area: weight; align-self: start; }
  .adm-scout-check-detail { grid-area: detail; white-space: normal; }
}

@media (max-width: 680px) {
  .adm-scout-circuit-stage { padding: 4px 0; }
  .adm-scout-expand-actions { flex-wrap: wrap; }
  .adm-scout-expand-spacer { display: none; }
}