/* =========================
   ROOM 234 — Neo Afro Global Theme (v2)
   Headings: Bricolage Grotesque
   Body: Inter
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0E0E0E;
  --bg:#0A0A0A;
  --card:#101114CC;      /* glass card bg */
  --muted:#B8BBC6;
  --gold:#D2A428;
  --purple:#8147FF;
  --electric:#00E0B8;
  --rose:#FF4D9A;
  --off:#F7F7F5;
  --border:rgba(255,255,255,.12);

  /* layout helpers */
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
}

/* RESET */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--off);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Afro textile aura + subtle pattern */
body::before{
  content:"";
  position:fixed; z-index:-1; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(129,71,255,.22), transparent 40%),
    radial-gradient(900px 900px at 90% 20%, rgba(210,164,40,.18), transparent 45%),
    radial-gradient(900px 600px at 50% 110%, rgba(0,224,184,.18), transparent 50%),
    #0A0A0A;
  filter:saturate(115%);
}
body::after{
  content:"";
  position:fixed; z-index:-1; inset:0; z-index:-1; pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(135deg, transparent 46%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.08) 53%, transparent 54%),
    linear-gradient(45deg, transparent 46%, rgba(255,255,255,.06) 47%, rgba(255,255,255,.06) 53%, transparent 54%);
  background-size: 28px 28px, 28px 28px;
}

/* Typography */
h1,h2,h3,h4{
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  letter-spacing:.2px;
}
p{ margin:0 0 10px; color:#D9DDE7 }

/* Shared */
.container{ max-width:1200px; margin:0 auto; padding:0 20px }
a{ color:var(--off); text-decoration:none; }
a:hover{ opacity:.9 }

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(16,17,20,.88), rgba(16,17,20,.55));
  border-bottom:1px solid var(--border);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:12px;
}
.logo{ height:32px; display:block }
.brand{ font-weight:800; letter-spacing:.3px; font-size:15px; margin-left:10px; }
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__links a{
  color:var(--off); opacity:.9; margin:0 10px; font-weight:600;
}
.nav__links a:hover{ opacity:1 }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background: #12131A; color:var(--off); font-weight:700;
}
.btn--gold{ border-color:transparent; background:linear-gradient(90deg, var(--gold), #f3c452); color:#111; }
.btn--primary{ background:linear-gradient(90deg, var(--purple), #9155ff); border-color:transparent }
.btn--ghost{ background:transparent; border-color:var(--border) }

.menu-toggle{ display:none; }
@media (max-width: 980px){
  .nav__links{ display:none }
  .menu-toggle{ display:inline-flex; gap:8px; align-items:center; color:var(--off); }
  .nav.open .nav__links{
    display:flex; position:absolute; left:20px; right:20px; top:66px; z-index:60;
    flex-direction:column; background:rgba(16,17,20,.95);
    border:1px solid var(--border); border-radius:12px; padding:14px;
  }
  .nav.open .nav__links a{ padding:12px; border-radius:8px; }
}

/* HERO */
.hero{ padding:46px 0 24px; }
.hero__wrap{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
}
.hero__eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.hero h1{
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.04; margin:10px 0 8px;
  font-weight:800;
  background: linear-gradient(92deg, #fff, #FFE07A, #B892FF, #7AF8E6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.28));
}
.hero .lede{ color:#D7DAE3; opacity:.95; font-size:18px; max-width:56ch }
.cta-row{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.hero__art img{
  width:100%; border-radius:var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px var(--border) inset;
}

/* GRID CARDS */
.grid{ display:grid; gap:16px; padding:26px 0; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.card{
  background: var(--card);
  border:1px solid var(--border);
  padding:18px; border-radius:var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.card h3{ margin:6px 0 6px; font-size:20px; font-weight:800 }
.card p{ color:#C9CDD7; }
.card__link{ color:var(--electric); font-weight:700; }

/* FEATURE (EP) */
.feature{
  display:grid; grid-template-columns: 1fr 1fr; gap:24px; padding:16px 0 34px;
  align-items:center;
}
.feature__text h2{ margin:0 0 6px; font-size:28px; font-weight:800 }
.feature__art img{
  width:100%; border-radius:var(--radius-md);
  box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 0 1px var(--border) inset;
}
.embed-row{ margin:12px 0 16px }

/* ARTIST GRID (Reusable) */
.artist-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding:12px 0 34px;
}
@media (max-width: 980px){ .artist-grid{ grid-template-columns: 1fr; } }
.artist-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.artist-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.artist-photo{
  width:100%;
  aspect-ratio: 4 / 3;          /* Keeps portraits proportional */
  object-fit: cover;
  display:block;
}
.artist-meta{ padding:14px }
.artist-name{ font-family:"Bricolage Grotesque", Inter, sans-serif; font-size:20px; font-weight:800 }
.artist-tag{ color:#C6C9D4; font-size:13px; margin-top:2px }
.artist-bio{ color:#D5D8E2; font-size:14px; margin-top:8px }
.artist-socials{
  display:flex; gap:10px; margin-top:12px;
}
.artist-socials a{
  background:#15161D; border:1px solid var(--border); padding:6px 10px; border-radius:8px;
  font-weight:700; font-size:13px; color:#E6E9F2;
}

/* EVENTS GRID */
.events-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding:12px 0 34px;
}
@media (max-width: 980px){ .events-grid{ grid-template-columns: 1fr; } }
.event-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden; position:relative;
}
.event-media{
  width:100%; aspect-ratio: 16 / 9; object-fit: cover; display:block;
}
.event-body{ padding:14px }
.date-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(210,164,40,.18);
  border:1px solid rgba(210,164,40,.4);
  color:#FFE9AE; padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:12px; letter-spacing:.02em;
}
.event-title{ font-size:18px; font-weight:800; margin:10px 0 4px }
.event-meta{ color:#C8CBD6; font-size:13px }
.event-cta{
  margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;
}
.btn--ticket{
  background:linear-gradient(90deg, var(--electric), #65ffe7);
  color:#06110E; border:none; font-weight:900;
}

/* SECTIONS */
.section{ padding:28px 0 }
.section h2{ font-size:28px; font-weight:800; margin:0 0 8px }
.section .sub{ color:#C9CDD7; }

/* FORMS (Studio/Contact) */
.form{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
}
label{ display:block; font-weight:700; margin-top:10px; margin-bottom:6px }
input,textarea{
  width:100%; background:#12131A; border:1px solid var(--border); color:#fff;
  border-radius:10px; padding:10px 12px; outline:none;
}
textarea{ min-height:120px }

/* FOOTER */
.footer{
  margin-top:20px; padding:20px 0; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.footer__links{ display:flex; gap:14px; align-items:center; color:var(--muted) }
.logo--sm{ height:26px; opacity:.9 }

/* Responsive */
@media (max-width: 980px){
  .hero__wrap{ grid-template-columns: 1fr; }
  .grid--3{ grid-template-columns: 1fr; }
  .feature{ grid-template-columns: 1fr; }
}

/* ===== Sticky Mini Player ===== */
.miniplayer{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(16,17,20,.92), rgba(16,17,20,.88));
  border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.miniplayer__art{ width: 44px; height: 44px; border-radius: 8px; overflow:hidden; flex: 0 0 auto; }
.miniplayer__art img{ width:100%; height:100%; object-fit:cover; display:block }
.miniplayer__meta{ display:flex; flex-direction:column; gap:2px; }
.miniplayer__title{ font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.miniplayer__sub{ color:#C8CBD6; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.miniplayer__controls{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.miniplayer__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
  background:#14151B; color:#fff; font-weight:900; font-size:14px;
}
.miniplayer__btn--gold{ background: linear-gradient(90deg, var(--gold), #f3c452); color:#111; border-color:transparent }
.miniplayer__links a{ font-weight:800; font-size:12px; color:#A1F5E7; margin-left:10px; }

/* Tabs */
.embed-tabs{ display:flex; gap:8px; margin:12px 0 }
.tab{ border:1px solid var(--border); background:#13141A; color:#EDEFF6; border-radius:999px; padding:8px 12px; font-weight:800; font-size:12px; }
.tab.active{ background:linear-gradient(90deg, var(--purple), #9155ff); border-color:transparent }
.embeds{ margin-top:8px }
.embed-panel{ display:none }
.embed-panel.show{ display:block }
cat >> assets/css/style.css <<'EOF'

/* --- Room 234 AfroLux Additions --- */
.section-divider{
  width:100%; height:32px; background:url('assets/img/afro-pattern-divider.svg') center/cover no-repeat;
  margin:24px 0;
}
.artist-grid{
  background:url('assets/img/artist-grid-bg.svg') center/contain repeat;
  padding:20px; border-radius:12px; border:1px solid #232323;
}
.footer{
  position:relative; background:#111; border-top:none;
}
.footer:before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url('assets/img/room234-footer-bg.svg') center/cover no-repeat;
  opacity:1;
}
.hero--banner{
  position:relative; overflow:hidden;
  border-radius:12px; border:1px solid #2a2a2a; margin:16px 20px;
}
.hero--banner img{ width:100%; display:block; }
.hero--banner .overlay{
  position:absolute; right:5%; top:16%; max-width:40ch; color:#fff;
}
.hero--banner .overlay h2{ margin:0 0 8px; font-size:clamp(22px,3.2vw,40px); }
.hero--banner .overlay p{ margin:0 0 12px; opacity:.9; }
.mic-deco{
  width:160px; height:auto; display:block;
}
.cta-bg{
  background:url('assets/img/room234-cta-bg.svg') center/cover no-repeat;
  border:1px solid #2a2a2a; border-radius:10px; padding:24px; color:#fff; margin:24px 20px;
}

/* === KB Tha Loverboy EP Showcase === */
.ep-showcase {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#141414,#0c0c0c);
  border-top:2px solid #D2A428; border-bottom:2px solid #D2A428;
  padding:40px 20px; gap:40px; color:#fff;
}
.ep-cover-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;}
.ep-cover{max-width:320px;width:100%;border-radius:10px;box-shadow:0 0 30px rgba(210,164,40,.3);}
.ep-info h2{font-size:clamp(22px,3vw,36px);margin-bottom:10px;color:#D2A428;}
.ep-info p{max-width:400px;opacity:.9;margin-bottom:16px;}
.ep-links a.btn{margin-right:8px;margin-bottom:8px;display:inline-block;}

/* === Structural Layout Adjustments === */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.footer {
  position: relative;
  z-index: 2;
  background: linear-gradient(to right, #141414, #0c0c0c);
  color: #ffffff;
  border-top: 2px solid #D2A428;
  padding: 20px;
  text-align: center;
}

/* === EP Cover Styling (Proportional Image) === */
.feature__art img {
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(210,164,40,0.3);
}

/* === Hero Section Layout (Text Only) === */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 40px 20px 20px;
  text-align: center;
}

/* === General Boundaries and Mobile Support === */
body * {
  max-width: 100vw;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .feature {
    grid-template-columns: 1fr;
  }
  .feature__art img {
    max-width: 320px;
  }
}


/* --- Room 234: ensure hero collage is visible and responsive --- */
.hero__art { position: relative; }
.hero__art .hero__image { display:block; width:100%; height:auto; object-fit:cover; border-radius:10px; }



/* === HERO COLLAGE VISIBILITY FIX === */
.hero__art { position: relative; z-index: 2; text-align: center; }
.hero__image { display:block; width:100%; max-width:950px; height:auto; margin:20px auto;
  border-radius:10px; object-fit:cover; box-shadow:0 6px 20px rgba(0,0,0,0.25); }
body:before { z-index:-1; } /* keep textile pattern behind content */