/* Rhonda · Mozart-meets-tech · 2026-08-10 */
:root {
  --sl-ink: #070b14;
  --sl-void: #0c1220;
  --sl-panel: #121a2b;
  --sl-cream: #f3efe6;
  --sl-cream-dim: #c9c2b4;
  --sl-gold: #d4b56a;
  --sl-gold-bright: #e8c97a;
  --sl-copper: #b87333;
  --sl-arc: #7a9bb8;
  --sl-hope: #9bb8a8;
  --sl-border: rgba(212, 181, 106, 0.22);
}
body.bg-slate-950, body {
  background-color: var(--sl-ink) !important;
  color: var(--sl-cream) !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 12% -10%, rgba(184, 115, 51, 0.14), transparent 50%),
    radial-gradient(ellipse 70% 50% at 88% 0%, rgba(122, 155, 184, 0.10), transparent 45%),
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(155, 184, 168, 0.08), transparent 50%),
    linear-gradient(180deg, var(--sl-ink), var(--sl-void) 40%, #0a101c 100%) !important;
}
.gold-gradient {
  background: linear-gradient(135deg, var(--sl-gold-bright), #f5e6c0 45%, var(--sl-copper)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
nav.fixed, nav {
  border-bottom-color: var(--sl-border) !important;
  background: rgba(7, 11, 20, 0.92) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(232, 201, 122, 0.08);
}
nav a:hover { color: var(--sl-gold-bright) !important; }
a.rounded-full.bg-amber-400, a.bg-amber-400 {
  background: linear-gradient(135deg, var(--sl-gold), var(--sl-gold-bright)) !important;
  color: #0b1220 !important;
  box-shadow: 0 0 0 1px rgba(232,201,122,.25), 0 8px 28px rgba(184,115,51,.18);
}
.rounded-2xl, .rounded-xl, section .rounded-3xl {
  border-color: var(--sl-border) !important;
  background-color: rgba(18, 26, 43, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(243, 239, 230, 0.04), 0 12px 40px rgba(0,0,0,.28);
}
.text-amber-400, .text-amber-300 { color: var(--sl-gold-bright) !important; }
.border-slate-800 { border-color: rgba(212,181,106,.12) !important; }
.text-slate-200 { color: var(--sl-cream) !important; }
.text-slate-400, .text-slate-500 { color: var(--sl-cream-dim) !important; }
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(243,239,230,.45), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(212,181,106,.35), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(122,155,184,.35), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(155,184,168,.3), transparent),
    radial-gradient(1px 1px at 55% 50%, rgba(243,239,230,.25), transparent);
}
body > * { position: relative; z-index: 1; }
.rhonda-board {
  max-width: 920px; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  font-family: Inter, system-ui, sans-serif; color: var(--sl-cream);
}
.rhonda-board h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem);
  background: linear-gradient(135deg, var(--sl-gold-bright), #f5e6c0, var(--sl-copper));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rhonda-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: .75rem; margin: 1.5rem 0; }
.rhonda-swatch {
  border-radius: 14px; min-height: 88px; padding: .75rem;
  border: 1px solid var(--sl-border);
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: .72rem; letter-spacing: .04em;
}
.rhonda-card {
  border: 1px solid var(--sl-border); border-radius: 18px; padding: 1.25rem 1.35rem;
  background: linear-gradient(160deg, rgba(18,26,43,.9), rgba(12,18,32,.95));
  margin: 1rem 0; box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.rhonda-card h2 { margin: 0 0 .5rem; color: var(--sl-gold); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.rhonda-mock {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--sl-border);
  background: linear-gradient(145deg, #0c1220, #121a2b 50%, #182338);
  min-height: 160px; padding: 1rem; position: relative;
}
.rhonda-mock .bar {
  height: 10px; border-radius: 999px; width: 40%;
  background: linear-gradient(90deg, var(--sl-gold), var(--sl-copper));
  margin-bottom: .75rem;
}
.rhonda-mock .line { height: 6px; border-radius: 4px; background: rgba(243,239,230,.12); margin: .4rem 0; }
.rhonda-mock .line.w2 { width: 70%; }
.rhonda-mock .line.w3 { width: 55%; }
.rhonda-mock .chip {
  display: inline-block; margin-top: .75rem; padding: .35rem .7rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--sl-gold), var(--sl-gold-bright));
  color: #0b1220; font-size: .7rem; font-weight: 700;
}
.rhonda-meta { color: var(--sl-cream-dim); font-size: .9rem; line-height: 1.55; }