:root{
  --bg:#030304; --panel:#070709; --bone:#f3eee4; --muted:#9b97a3;
  --cyan:#27f3ff; --purple:#8a43ff; --magenta:#ff28d7;
  --orange:#ff8a00; --gold:#d69b24; --line:#8a5c11;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#030304;color:var(--bone);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.topbar{
  height:78px;display:flex;align-items:center;gap:2rem;padding:0 2rem;
  background:#020203;border-bottom:1px solid rgba(214,155,36,.25);
  position:sticky;top:0;z-index:50
}
.brand img{width:160px}
.nav{display:flex;gap:2.4rem;margin:auto}
.nav a{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.nav a:hover,.strip-heading a:hover{color:var(--gold)}
.social-mini{display:flex;gap:1rem;color:var(--gold);font-size:.75rem;letter-spacing:.08em}
.menu-toggle{display:none;margin-left:auto;background:none;color:#fff;border:1px solid #333;border-radius:5px;padding:.5rem .65rem}

.cinematic-hero{
  min-height:500px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:url("assets/hero/afrofuturist-hero.jpg") center center/cover no-repeat;
  border-bottom:1px solid rgba(214,155,36,.45)
}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.18) 45%,rgba(0,0,0,.05)),linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.2))}
.hero-center{position:relative;z-index:2;text-align:center;margin-top:2rem}
.hero-logo{width:min(560px,75vw);margin:auto;filter:drop-shadow(0 0 16px rgba(39,243,255,.6))}
.hero-tagline{color:#f6a900;letter-spacing:.22em;font-size:clamp(.7rem,1.5vw,1rem);margin:1rem 0 1.3rem}
.frequency-btn,.gold-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);color:#ffb41f;background:rgba(0,0,0,.55);
  padding:.8rem 1.15rem;letter-spacing:.12em;font-size:.75rem
}
.frequency-btn:hover,.gold-btn:hover{background:rgba(214,155,36,.1)}

.transmissions{border-bottom:1px solid rgba(214,155,36,.25);background:#050506}
.strip-heading{display:flex;align-items:center;justify-content:space-between;padding:.65rem 2rem;border-bottom:1px solid rgba(214,155,36,.18)}
.strip-heading h2{margin:0;color:#f3ad27;font-size:1rem;letter-spacing:.16em;font-weight:500}
.strip-heading a,.strip-heading span{font-size:.68rem;letter-spacing:.12em;color:#d7a33e}

.transmission-row{
  display:grid;grid-template-columns:repeat(6,minmax(210px,1fr));gap:.65rem;
  padding:.75rem 1rem 1rem;overflow-x:auto
}
.track{
  min-width:210px;border:1px solid rgba(214,155,36,.34);background:#080808;border-radius:7px;
  padding:.8rem;display:grid;grid-template-columns:82px 1fr;gap:.8rem;align-items:start
}
.track img{width:82px;height:82px;object-fit:cover;border-radius:50%;border:1px solid rgba(214,155,36,.45)}
.track-body h3{margin:.1rem 0 .35rem;font-size:.9rem;line-height:1.1}
.track-body p{margin:.18rem 0;color:var(--muted);font-size:.65rem}
.track-tag{color:#f2a41f!important;text-transform:uppercase;letter-spacing:.08em}
.track audio{grid-column:1/-1;width:100%;height:34px;margin-top:.25rem}

.lower-grid{
  display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:.7rem;padding:.75rem 1rem;
  background:#030304
}
.panel{
  min-height:250px;border:1px solid rgba(214,155,36,.45);background:#070708;border-radius:7px;
  position:relative;overflow:hidden
}
.human-panel{display:grid;grid-template-columns:42% 58%}
.portrait-wrap{background:radial-gradient(circle at 50% 40%,rgba(255,138,0,.15),transparent 55%)}
.portrait-wrap img{width:100%;height:100%;object-fit:cover}
.panel-copy{padding:1.1rem}
.eyebrow{color:#dca72f;letter-spacing:.13em;font-size:.65rem;margin:.1rem 0 .6rem}
.panel h2{font-size:1.65rem;letter-spacing:.08em;margin:.2rem 0 .8rem}
.panel p{font-size:.78rem;line-height:1.5}
.muted{color:var(--muted)}

.sphere-panel{padding:1rem}
.centered{text-align:center}
.sphere-map{position:relative;height:165px;margin-top:.4rem}
.sphere-map img{position:absolute;width:92px;height:92px;object-fit:cover;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid var(--cyan);box-shadow:0 0 20px rgba(39,243,255,.35)}
.node{position:absolute;border:1px solid currentColor;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;font-size:.6rem;background:#0a0a0c}
.funk{color:#ff8a00;left:50%;top:0;transform:translateX(-50%)}
.soul{color:#d872ff;left:12%;top:30%}
.rock{color:#4aa8ff;right:12%;top:30%}
.hiphop{color:#ffb100;left:7%;bottom:0}
.jazz{color:#d362ff;right:7%;bottom:0}
.sphere-caption{text-align:center;color:#d8a241!important;font-size:.62rem!important;letter-spacing:.1em}
.sphere-caption small{color:#aaa}

.vault-panel{display:grid;grid-template-columns:1fr 44%;padding:1rem;align-items:center}
.vault-panel ul{list-style:none;padding:0;margin:.4rem 0 1rem}
.vault-panel li{color:#e0a62b;font-size:.68rem;letter-spacing:.08em;margin:.55rem 0}
.vault-wheel{width:100%;border-radius:50%;border:1px solid rgba(214,155,36,.5)}
.message{color:var(--cyan)!important;font-size:.65rem!important;letter-spacing:.1em}

.all-music{padding-bottom:1rem}
.all-track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1rem}
.all-card{display:grid;grid-template-columns:110px 1fr;gap:1rem;border:1px solid rgba(214,155,36,.25);background:#070708;padding:.9rem}
.all-card img{width:110px;height:110px;object-fit:cover;border-radius:50%}
.all-card h3{margin:.2rem 0}.all-card p{color:var(--muted);font-size:.72rem}
.all-card audio{width:100%}

.contact-panel{text-align:center;padding:4rem 1rem;border-top:1px solid rgba(214,155,36,.2)}
.contact-panel h2{letter-spacing:.1em}
footer{display:flex;justify-content:space-between;gap:1rem;padding:1rem 2rem;border-top:1px solid rgba(214,155,36,.28);color:#888;font-size:.7rem}
footer strong{color:#d79d25;letter-spacing:.12em}

@media(max-width:980px){
  .nav,.social-mini{display:none}
  .menu-toggle{display:block}
  .nav.open{display:flex;position:absolute;top:78px;left:0;right:0;background:#050506;padding:1rem 2rem;flex-direction:column;border-bottom:1px solid #333}
  .cinematic-hero{min-height:420px;background-position:center center}
  .transmission-row{grid-template-columns:repeat(6,240px)}
  .lower-grid{grid-template-columns:1fr}
  .all-track-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .topbar{height:68px;padding:0 1rem}
  .brand img{width:120px}
  .cinematic-hero{min-height:370px}
  .hero-logo{width:84vw}
  .hero-tagline{letter-spacing:.14em}
  .strip-heading{padding:.7rem 1rem}
  .strip-heading h2{font-size:.82rem}
  .strip-heading a{display:none}
  .track{min-width:240px}
  .human-panel{grid-template-columns:38% 62%}
  footer{flex-direction:column;text-align:center}
}

/* V3 hero correction: cover the baked mockup text/UI with a clean black portal, then use live HTML content above it. */
.cinematic-hero::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-49%);width:min(650px,52vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#020203 0 64%,#020203 65%,rgba(2,2,3,.98) 70%,rgba(2,2,3,.25) 74%,transparent 77%);box-shadow:0 0 0 3px rgba(255,138,0,.55),0 0 55px rgba(255,138,0,.35);z-index:1;pointer-events:none}
.hero-center{z-index:3}.hero-logo{width:min(520px,70vw)}
.portrait-wrap img{object-position:38% 36%;filter:grayscale(100%);}
.social-mini a{color:var(--gold);font-weight:700}.social-mini a:hover{color:#fff}
.contact-socials{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem}.contact-socials a{border:1px solid rgba(214,155,36,.55);padding:.65rem 1rem;color:#e0a62b;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}.contact-socials a:hover{background:rgba(214,155,36,.1)}
@media(max-width:600px){.cinematic-hero::after{width:92vw;top:48%}.hero-logo{width:82vw}}

/* V4 hero cleanup */
.hero-logo{
  background: transparent !important;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(39,243,255,.55))
          drop-shadow(0 0 22px rgba(39,243,255,.22));
}
.hero-center{
  background: transparent !important;
  box-shadow: none !important;
}
.cinematic-hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(690px,52vw);
  aspect-ratio:1.6;
  transform:translate(-50%,-49%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.08) 58%,
    rgba(0,0,0,0) 76%);
  z-index:1;
}
.hero-center{z-index:2}

/* V5 — persistent hero portal ring */
.cinematic-hero{
  isolation:isolate;
}

.cinematic-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:49%;
  width:min(760px,58vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  z-index:1;

  border:3px solid rgba(255,145,24,.96);

  box-shadow:
    0 0 4px rgba(255,196,86,.95),
    0 0 12px rgba(255,145,24,.90),
    0 0 30px rgba(255,103,0,.68),
    0 0 64px rgba(125,61,255,.30),
    inset 0 0 12px rgba(255,154,28,.34);

  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 0 47.7%,
      rgba(255,177,48,.12) 47.9% 48.2%,
      rgba(255,104,0,.28) 48.3% 48.8%,
      rgba(0,0,0,0) 49.1% 100%),
    conic-gradient(
      from 205deg,
      rgba(255,111,0,.10),
      rgba(255,194,64,.48),
      rgba(255,111,0,.18),
      rgba(127,60,255,.14),
      rgba(255,111,0,.10)
    );
}

/* subtle hot flare on upper-right edge */
.cinematic-hero .hero-shade::after{
  content:"";
  position:absolute;
  left:50%;
  top:49%;
  width:min(760px,58vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 12%,
      rgba(255,245,188,.95) 0 2px,
      rgba(255,176,45,.80) 3px 7px,
      rgba(255,102,0,.35) 8px 18px,
      rgba(255,102,0,0) 28px);
  z-index:2;
}

/* keep logo/content over the persistent ring */
.hero-center{
  position:relative;
  z-index:3 !important;
}

/* keep the ring strong on phones */
@media(max-width:980px){
  .cinematic-hero::before,
  .cinematic-hero .hero-shade::after{
    width:min(690px,86vw);
  }
}

@media(max-width:600px){
  .cinematic-hero::before,
  .cinematic-hero .hero-shade::after{
    width:92vw;
    top:48%;
  }
}

/* =========================================================
   V6 — APPROVED DOPE ILLINGTON VISUAL DIRECTION
   ========================================================= */
:root{--v6gold:#e69a16;--v6cyan:#29eaff;--v6line:rgba(230,154,22,.48)}

.topbar{
  height:72px;background:#010102;border-bottom:1px solid rgba(230,154,22,.24);
}
.brand img{width:150px}
.social-mini a{color:var(--v6gold);font-weight:700}

.cinematic-hero{
  min-height:410px;
  background:
    linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)),
    url("assets/hero/v6-reference-hero.png") center 7%/cover no-repeat;
  border-bottom:1px solid var(--v6line);
}
/* The approved reference already contains the complete eclipse scene.
   Hide the old CSS-generated ring and duplicate center copy. */
.cinematic-hero::before,
.cinematic-hero::after,
.cinematic-hero .hero-shade::after{display:none!important}
.cinematic-hero .hero-shade{background:transparent}
.cinematic-hero .hero-center{display:none}

/* Make the real content below the hero match the approved reference. */
.transmissions{background:#020203}
.strip-heading{padding:.7rem 2.2rem;border-color:var(--v6line)}
.strip-heading h2{color:var(--v6gold);font-size:.9rem}
.transmission-row{
  grid-template-columns:repeat(6,minmax(225px,1fr));
  gap:.55rem;padding:.65rem 1.2rem .8rem;
}
.track{
  min-width:225px;
  grid-template-columns:78px 1fr;
  border:1px solid var(--v6line);
  border-radius:4px;background:linear-gradient(180deg,#070708,#030304);
}
.track img{width:78px;height:78px;border-color:var(--v6gold)}
.track audio{filter:sepia(.35) saturate(1.15);opacity:.9}

.lower-grid{
  grid-template-columns:1.12fr .95fr 1.05fr;
  gap:.55rem;padding:.55rem 1.2rem;
}
.panel{
  min-height:270px;border-radius:4px;border:1px solid var(--v6line);
  background:#030304;
}
.human-panel{grid-template-columns:48% 52%}
.portrait-wrap img{object-position:35% 42%;filter:grayscale(1) contrast(1.06)}
.panel h2{font-size:1.55rem}
.vault-wheel{border-color:var(--v6gold);filter:sepia(.35) saturate(1.35)}
.gold-btn{border-color:var(--v6gold);color:#f2a51f}

footer{
  border-color:var(--v6line);background:#010102;
}
footer strong{color:var(--v6gold)}

@media(max-width:980px){
  .cinematic-hero{
    min-height:360px;
    background-position:center top;
  }
  .lower-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cinematic-hero{
    min-height:300px;
    background-size:auto 100%;
    background-position:center top;
  }
}

/* =========================================================
   V7 — HERO-ONLY FIX
   Removes baked navigation/footer content from the hero image.
   ========================================================= */
.cinematic-hero{
  min-height:392px;
  background-image:url("assets/hero/v7-hero-only.jpg") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  border-top:0 !important;
}

/* The approved hero crop already includes the centered logo/tagline/button. */
.cinematic-hero .hero-center{
  display:none !important;
}

/* Ensure no old generated overlays interfere. */
.cinematic-hero::before,
.cinematic-hero::after,
.cinematic-hero .hero-shade,
.cinematic-hero .hero-shade::after{
  display:none !important;
}

/* Keep the real site header fully visible and above the hero. */
.topbar{
  position:sticky;
  top:0;
  z-index:999;
  overflow:visible !important;
}
.brand{
  display:flex;
  align-items:center;
  overflow:visible;
}
.brand img{
  max-height:58px;
  width:auto;
  object-fit:contain;
}

/* Better wide-screen fit without clipping top of artwork. */
@media (min-width:1200px){
  .cinematic-hero{
    min-height:392px;
    background-size:100% 100% !important;
  }
}

/* Tablet / mobile keep the whole visual centered instead of favoring one side. */
@media (max-width:1199px){
  .cinematic-hero{
    min-height:360px;
    background-size:cover !important;
    background-position:center center !important;
  }
}
@media (max-width:600px){
  .cinematic-hero{
    min-height:300px;
    background-position:center center !important;
  }
}

/* =========================================================
   V8 — corrected hero anatomy + full hero framing
   ========================================================= */
.cinematic-hero{
  min-height:422px !important;
  background-image:url("assets/hero/v8-corrected-anatomy-hero.jpg") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* Hero art already contains logo/tagline/CTA; avoid duplicates. */
.cinematic-hero .hero-center,
.cinematic-hero .hero-shade,
.cinematic-hero::before,
.cinematic-hero::after,
.cinematic-hero .hero-shade::after{
  display:none !important;
}

/* Preserve full cinematic composition on wide screens. */
@media(min-width:1200px){
  .cinematic-hero{
    min-height:422px !important;
    background-size:100% 100% !important;
  }
}

/* On narrower screens, keep the reclining figure and eclipse visible together. */
@media(max-width:1199px){
  .cinematic-hero{
    min-height:380px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}

@media(max-width:600px){
  .cinematic-hero{
    min-height:310px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}