/* RIP DJs — built from src/input.css by deploy.sh (Tailwind v4).
 * This placeholder keeps the file path valid for local previews. Replace via:
 *   npx @tailwindcss/cli -i src/input.css -o assets/css/style.css --minify
 * The custom component layer below mirrors src/input.css and survives locally
 * until the first real build. */

:root {
  --brand-hue: 345;
  --color-brand: #FF2E63;

  --color-ink: #0B0708;
  --color-ink-2: #160D11;
  --color-ink-3: #1F1218;
  --color-oxblood: #4A0E1C;
  --color-oxblood-2: #6B1226;
  --color-rose: #FF2E63;
  --color-rose-soft: #FF6B8E;
  --color-bone: #ECE3E2;
  --color-mauve: #9C7C88;
  --color-thorn: #3B5B49;

  --color-bg: #0B0708;
  --color-bg-elevated: #160D11;
  --color-bg-hover: #1F1218;
  --color-text: #ECE3E2;
  --color-text-muted: #9C7C88;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
body { background: var(--color-ink, #0B0708); color: var(--color-bone, #ECE3E2); font-size: 1rem; }
::selection { background: #FF2E63; color: #1a0409; }
a { color: var(--color-rose-soft, #FF6B8E); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.hidden { display: none !important; }

/* Minimal utility shims so pages render before Tailwind builds */
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-7xl { max-width: 80rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.min-h-screen { min-height: 100vh; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-3xl { font-size: 1.875rem; line-height: 1.2; }
.text-5xl { font-size: 3rem; line-height: 1.1; }
.grid { display: grid; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.border-b { border-bottom: 1px solid rgba(236, 227, 226, 0.10); }
.border-t { border-top: 1px solid rgba(236, 227, 226, 0.10); }
.text-muted { color: var(--color-mauve, #9C7C88); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- type ---- */
.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-rose, #FF2E63);
}

/* ---- buttons (default / hover / active / disabled) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(236, 227, 226, 0.25);
  color: var(--color-bone, #ECE3E2);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:hover { border-color: var(--color-rose, #FF2E63); color: var(--color-rose-soft, #FF6B8E); text-decoration: none; }
.btn:active { background: var(--color-ink-3, #1F1218); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; border-color: rgba(236, 227, 226, 0.15); color: var(--color-mauve, #9C7C88); }
.btn:focus-visible { outline: 2px solid var(--color-rose, #FF2E63); outline-offset: 2px; }
.btn.solid { background: var(--color-rose, #FF2E63); border-color: var(--color-rose, #FF2E63); color: #1a0409; font-weight: 600; }
.btn.solid:hover { background: var(--color-rose-soft, #FF6B8E); border-color: var(--color-rose-soft, #FF6B8E); color: #1a0409; }
.btn.solid:active { background: #d92552; border-color: #d92552; }
.btn.solid:disabled { background: var(--color-oxblood, #4A0E1C); border-color: var(--color-oxblood, #4A0E1C); color: var(--color-mauve, #9C7C88); }

/* ---- inputs ---- */
.field { display: block; margin-bottom: 1rem; }
.field label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-mauve, #9C7C88); margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  background: var(--color-ink-2, #160D11);
  border: 1px solid rgba(236, 227, 226, 0.18);
  color: var(--color-bone, #ECE3E2);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--color-rose, #FF2E63);
  outline-offset: 1px;
  border-color: var(--color-rose, #FF2E63);
}
.field.has-error input, .field.has-error textarea { border-color: var(--color-rose, #FF2E63); }
.field .error-msg { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--color-rose-soft, #FF6B8E); }

/* ---- cards ---- */
.rip-card {
  background: var(--color-ink-2, #160D11);
  border: 1px solid rgba(236, 227, 226, 0.10);
  padding: 1.5rem;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.rip-card:hover { background: var(--color-ink-3, #1F1218); border-color: var(--color-oxblood-2, #6B1226); }

/* ---- genre DNA chips ---- */
.chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-oxblood-2, #6B1226);
  color: var(--color-rose-soft, #FF6B8E);
}
.dj-accent { --accent: #FF2E63; }
.dj-accent .chip { color: var(--accent, #FF6B8E); border-color: var(--accent, #6B1226); }

/* ---- lazy embed shells ---- */
.embed-shell {
  position: relative;
  background: var(--color-ink-2, #160D11) center/cover no-repeat;
  border: 1px solid rgba(236, 227, 226, 0.10);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.embed-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- rose canvas hero (scoped id only — hero CSS gotcha) ---- */
#rose-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rose-hero { position: relative; overflow: hidden; background: var(--color-ink, #0B0708); }
.rose-hero > .hero-inner { position: relative; z-index: 1; }

/* ---- grain ---- */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---- overlays: gradient, never flat scrim ---- */
.overlay-fade { background: linear-gradient(180deg, rgba(11, 7, 8, 0) 0%, rgba(11, 7, 8, 0.85) 100%); }

/* ============================================================
 * Artist-forward redesign (2026-07-21) — self-contained components.
 * Mirrors src/input.css (kept in sync by hand until a real Tailwind build).
 * Each block carries its own layout so it renders without un-shimmed
 * utilities. Every var() has a literal fallback; AA on dark; 320px-safe.
 * ============================================================ */

/* ---- video hero: the poster photo is the FLOOR, video only enhances ---- */
.video-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 34rem;
  background: var(--color-ink, #0B0708);
  display: grid;
  place-items: center;
}
@media (min-width: 768px) { .video-hero { min-height: 42rem; } }
.video-hero__poster {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  filter: saturate(0.92) contrast(1.04);
}
.video-hero__frame {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  width: 100vw; height: 56.25vw;          /* 16:9 by width  */
  min-height: 100%; min-width: 177.78vh;  /* 16:9 by height → no letterbox */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  opacity: 0; transition: opacity 700ms ease;
}
.video-hero__frame.is-playing { opacity: 1; }
.video-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,7,8,0.55) 0%, rgba(11,7,8,0.30) 42%, rgba(11,7,8,0.94) 100%);
}
.video-hero #rose-canvas { z-index: 2; opacity: 0.5; mix-blend-mode: screen; }
.video-hero__inner { position: relative; z-index: 3; text-align: center; padding: 5rem 1rem; max-width: 60rem; }
.video-hero__title { font-size: clamp(2.75rem, 8vw, 5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.video-hero__sub { margin-top: 0.75rem; color: var(--color-bone, #ECE3E2); opacity: 0.9; font-size: clamp(1rem, 2.5vw, 1.2rem); }

/* ---- artist spotlight: balanced 2-up, media-forward ---- */
.artist-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .artist-grid { grid-template-columns: 1fr 1fr; } }

.artist-spotlight {
  --accent: #FF2E63;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem;
  overflow: hidden;
  border: 1px solid rgba(236, 227, 226, 0.10);
  background: var(--color-ink-2, #160D11);
  color: var(--color-bone, #ECE3E2);
  transition: transform 160ms ease, border-color 160ms ease;
}
.artist-spotlight:hover { transform: translateY(-2px); border-color: var(--accent, #6B1226); }
.artist-spotlight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent, #FF2E63); z-index: 3; }
.artist-spotlight__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.artist-spotlight__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,7,8,0.12) 0%, rgba(11,7,8,0.55) 46%, rgba(11,7,8,0.95) 100%); }
.artist-spotlight__body { position: relative; z-index: 2; padding: 1.75rem; }
.artist-spotlight__eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #FF2E63); }
.artist-spotlight__name { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; margin-top: 0.35rem; }
.artist-spotlight__tag { margin-top: 0.4rem; color: var(--color-bone, #ECE3E2); opacity: 0.86; }
.artist-spotlight__chips { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.artist-spotlight .chip { color: var(--accent, #FF6B8E); border-color: var(--accent, #6B1226); }
.artist-spotlight__cta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.artist-spotlight.reserved { justify-content: center; text-align: center; }
.artist-spotlight.reserved .artist-spotlight__veil { background: radial-gradient(ellipse at 50% 38%, rgba(31,18,24,0.55), rgba(11,7,8,0.94)); }
.artist-spotlight__rose { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; opacity: 0.14; pointer-events: none; }
.artist-spotlight__rose img { width: 62%; max-width: 260px; height: auto; }
.artist-spotlight__badge { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-mauve, #9C7C88); border: 1px solid var(--color-oxblood-2, #6B1226); padding: 0.3rem 0.8rem; }

/* ---- live sets grid (reuses .embed-shell + mix-embed.js click-to-load) ---- */
.live-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .live-grid { grid-template-columns: 1fr 1fr; } }
.embed-shell.is-playing { cursor: default; }

/* ---- EPK photo-forward hero ---- */
.epk-hero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* dual gradient: darkens the LEFT (where the hero text sits) for AA while the
 * RIGHT reveals the photo — a gradient reveal, never a flat scrim. */
.epk-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,7,8,0.88) 0%, rgba(11,7,8,0.55) 42%, rgba(11,7,8,0.18) 100%),
    linear-gradient(180deg, rgba(11,7,8,0.28) 0%, rgba(11,7,8,0.32) 45%, rgba(11,7,8,0.90) 100%);
}
.epk-hero > .hero-inner { z-index: 2; }

/* ---- reduced motion: video stays a static poster; lift/pan off ---- */
@media (prefers-reduced-motion: reduce) {
  .video-hero__frame { display: none !important; }
  .artist-spotlight { transition: none; }
  .artist-spotlight:hover { transform: none; }
}