/* --- GLOBAL STYLES --- */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(251,191,36,.15), transparent 60%),
            radial-gradient(900px 500px at 10% 0%, rgba(108,43,217,.18), transparent 60%),
            var(--bg);
  color:var(--text);
  font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img, video{max-width:100%;display:block}

/* --- Global Header --- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,11,19,.72);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 20px}

/* Global Logo */
.brand {
    white-space: nowrap; 
    display: inline-flex; 
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
}
.brand .mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important; 
    background: conic-gradient(from 210deg, var(--gold), var(--magenta), var(--purple)); 
    box-shadow: 0 4px 12px rgba(251,191,36,.45);
    display: grid;
    place-items: center;
}
.brand .mark i {
    color: #FFFFFF !important; 
    font-size: 1.15rem; 
    background: none; 
}
.brand > span {
    color: var(--text);
}
.brand .logo-accent {
    color: var(--gold) !important;
    font-weight: 800;
}

/* Global Header Nav Wrapper */
.navlinks {
    margin-left: auto;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* !!! FIX START: Target the menu's UL and LIs !!! */
.header-nav-list { /* This targets your custom menu <ul> class */
    display: flex; /* Make the list horizontal */
    align-items: center;
    list-style: none; /* REMOVE BULLETS */
    padding: 0; /* Remove default left padding */
    margin: 0; /* Remove default margin */
    gap: 16px; /* Space between links */
}
.header-nav-list > li { /* Target individual <li> items */
    list-style: none !important; 
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 8px !important;
    display: inline-block; 
}
/* !!! FIX END !!! */

.header-nav-list > li > a { /* Targets <a> inside the <li> */
    font-weight: 600;
    opacity: .92;
    font-size: 0.9rem;
    display: block;
    white-space: nowrap;
}
.header-nav-list > li > a:hover {
    color: var(--gold);
}
.cta{display:flex;gap:10px}
.btn{padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-weight:600;display:inline-flex;gap:8px;align-items:center}
.btn.primary{background:var(--gradient);border:0}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Global Hamburger & Drawer */
.hamburger{display:none;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px}
@media (max-width: 960px){
  .navlinks{display:none}
  .hamburger{display:inline-flex;margin-left:auto}
}
.drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.6)}
.drawer.active{display:block}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:86%;max-width:360px;background:#0f1020;border-left:1px solid rgba(255,255,255,.08);padding:24px;display:flex;flex-direction:column;gap:14px}
.drawer a{padding:12px 10px;border-radius:12px}
.drawer a:hover{background:rgba(255,255,255,.06)}

/* --- Global Footer --- */
footer{margin-top:30px;border-top:1px solid rgba(255,255,255,.08);background:#0f1020}
.foot{max-width:var(--maxw);margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.foot p{color:var(--muted)}
.foot h4{margin:0 0 10px 0}
.foot a{display:block;opacity:.9;margin:6px 0}
.copyright{border-top:1px solid rgba(255,255,255,.06);padding:12px 20px;color:#AAB4C3;text-align:center}
@media (max-width: 860px){.foot{grid-template-columns:1fr}}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-list li {
    margin-bottom: 8px;
    padding: 0;
}
.footer-list li a {
    color: #FFF; 
    opacity: 0.8;
    text-decoration: none;
    font-weight: 400;
    display: block;
}
.footer-list li a:hover {
    color: var(--gold);
    opacity: 1;
}

/* --- Global Utilities --- */
section{max-width:var(--maxw);margin:0 auto;padding:36px 20px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.section-head h2{font-family:Montserrat, var(--font);font-size:clamp(22px, 3.2vw, 34px);margin:0}
.section-head .sub{color:var(--muted);font-size:14px}
.pill{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.tag{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:12px}
.right{display:flex;gap:10px}
.muted{color:var(--muted)}

/* --- Global Single Post / Column Layouts --- */
.artist-content-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column; 
    gap: 30px;
}
.artist-main-content {
    flex: 1; 
    min-width: 0; 
}
.artist-sidebar {
    width: 100%;
    flex-shrink: 0; 
}
.sidebar-widget {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}
.sidebar-widget h3 {
    margin-top: 0;
    color: var(--gold);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-bottom: 10px;
}
@media (min-width: 768px) {
    .artist-content-container {
        flex-direction: row; 
    }
    .artist-sidebar {
        width: 300px; 
    }
}