/* =====================================================
   PITCH BLAAK PRODUCTIONZ
   PHASE 2 DESIGN SYSTEM
======================================================*/

:root{

    --pb-black:#070707;
    --pb-panel:#111111;
    --pb-panel2:#1b1b1b;

    --pb-bronze:#c88b2c;
    --pb-gold:#e3b04b;

    --pb-white:#ffffff;
}

/* ---------- Album Cards ---------- */

.track-card{

    background:linear-gradient(
        180deg,
        #181818 0%,
        #101010 100%
    );

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45);
}

/* Hover */

.track-card:hover{

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:

        0 18px 55px rgba(0,0,0,.65),

        0 0 18px rgba(200,139,44,.35);
}

/* Album Image */

.track-art{
    padding:8px;

    background:
        radial-gradient(circle at top,
            rgba(200,139,44,.12),
            transparent 70%);
}


.track-art img{

    border-radius:18px;

    transition:.4s ease;

}

.track-card:hover .track-art img{

    transform:scale(1.03);

}

/* Song Titles */

.track-card h3{

    color:white;

    font-weight:800;

    letter-spacing:.5px;

    margin-top:8px;
}

/* Description */

.track-card p{

    color:#c8c8c8;

    line-height:1.6;

}

/* Buttons */

.track-card button,

.track-card .btn{

    border-radius:999px;

}

/* =====================================================
   PITCH BLAAK COVER ART SYSTEM
====================================================== */

.track-art {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 14px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(227, 176, 75, 0.14),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #181818,
            #080808
        );

    border-bottom: 1px solid rgba(227, 176, 75, 0.18);
}

/* Bronze inner frame */

.track-art::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: 2;
    pointer-events: none;

border: none;
box-shadow: none;
}

/* Album image */

.track-art > img:not(.pb-seal) {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    border-radius: 16px;
    background: #050505;

    filter:
        contrast(1.04)
        saturate(1.03);

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Premium hover effect */

.track-card:hover .track-art > img:not(.pb-seal) {
    transform: scale(1.025);

    filter:
        contrast(1.08)
        saturate(1.08)
        brightness(1.03);
}

/* Soft bronze lighting */

.track-art::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 3;
    pointer-events: none;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            transparent 24%,
            transparent 72%,
            rgba(200, 139, 44, 0.08)
        );

    opacity: 0.7;
    transition: opacity 0.35s ease;
}

.track-card:hover .track-art::after {
    opacity: 1;
}

/* =====================================================
   TRACK INFORMATION SYSTEM
====================================================== */

.track-info {
    padding: 18px 18px 20px;
    text-align: center;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(0, 0, 0, 0.08)
        );
}

.track-info p {
    margin: 0 0 6px;
    color: var(--pb-bronze);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.track-info h3 {
    margin: 0;
    color: var(--pb-white);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.track-info span {
    display: block;
    margin-top: 7px;
    color: #b8b8b8;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

/* Play button */

.track-card .play {
    display: flex;
    align-items: center;
    justify-content: center;

 width: calc(100% - 36px);
max-width: none;
    margin: 18px auto 14px;
    padding: 12px 16px;

    border: 1px solid rgba(227, 176, 75, 0.5);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(200, 139, 44, 0.95),
            rgba(227, 176, 75, 0.95)
        );

    color: #070707;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.track-card .play:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(227, 176, 75, 0.28);
    filter: brightness(1.06);
}

/* Progress bar */

.track-card .progress {
    height: 4px;
    margin: 0 18px 10px;
    overflow: hidden;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.track-card .progress span {
    display: block;
    width: 0;
    height: 100%;

    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--pb-bronze),
            var(--pb-gold)
        );
}

.track-card.playing .progress span {
  animation: activeProgressGlow 2.2s ease-in-out infinite;
}

@keyframes activeProgressGlow {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(212, 160, 58, 0);
  }

  50% {
    filter: brightness(1.35);
    box-shadow:
      0 0 8px rgba(212, 160, 58, 0.65),
      0 0 14px rgba(212, 160, 58, 0.28);
  }
}

.track-card time {
    display: block;
    padding: 0 18px 18px;
    color: #8f8f8f;
    font-size: 0.76rem;
    text-align: right;
}

/* Fix play button overlap */

.track-card {
    display: flex;
    flex-direction: column;
}

.track-card.playing {
  animation: activeCardGlow 2.2s ease-in-out infinite;
}

@keyframes activeCardGlow {
 0%,
100% {
  filter: brightness(1);
  transform: translateY(0);
  box-shadow:
    0 0 0 rgba(212, 160, 58, 0),
    0 18px 40px rgba(0, 0, 0, 0.42);
}
50% {
  filter: brightness(1.10);
transform: translateY(-2px);
box-shadow:
    0 0 22px rgba(212,160,58,.40),
    0 0 44px rgba(212,160,58,.18),
    0 18px 40px rgba(0,0,0,.42);
  }
}

.track-card .track-info {
    position: relative;
    z-index: 1;
    padding-bottom: 18px;
}

.track-card .play {
    position: static !important;
    inset: auto !important;
    transform: none;

    flex-shrink: 0;
    margin: 12px 18px 14px;
}

.track-card .play:hover {
    transform: translateY(-2px);
}

/* =====================================================
   PITCH BLAAK VINTAGE VINYL SYSTEM
====================================================== */

.track-art {
    isolation: isolate;
    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(227, 176, 75, 0.12),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #17130f,
            #080706 72%
        );
}

/* Warm vintage tint */

.track-art img {
    filter:
        sepia(0.12)
        saturate(0.88)
        contrast(1.06)
        brightness(0.95);
}

/* Vintage paper and film texture */

.track-art::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 4;
    pointer-events: none;
    border-radius: 16px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(
            circle at center,
            transparent 52%,
            rgba(0, 0, 0, 0.38) 100%
        );

    mix-blend-mode: soft-light;
    opacity: 0.78;
}

/* Double bronze sleeve border */

.track-art::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 5;
    pointer-events: none;
    border-radius: 16px;

    border: none;

    box-shadow: none;
}

/* Small vintage label treatment */

.track-card {
    position: relative;
}

.track-card::before {
    content: "CURTAIN CALL MUSIC GROUP • LICENSING READY";
    position: absolute;
    top: 26px;
    left: 32px;
    z-index: 8;
    pointer-events: none;

    color: rgba(230,199,133,.82);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
}

/* Subtle aged response on hover */

.track-card:hover .track-art img {
    filter:
        sepia(0.08)
        saturate(0.96)
        contrast(1.08)
        brightness(1.01);
}
/* ==========================================
   PB RECORDINGS SEAL
========================================== */

.pb-seal{
    position:absolute;

top:auto;
right:18px;
bottom:18px;

width:34px;
height:34px;

opacity:.32;

    z-index:12;

    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,.6));

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.track-card:hover .pb-seal{
    transform:rotate(-2deg) scale(1.08);
opacity:.55;
}

/* =====================================================
   PITCH BLAAK PREMIUM STAGE FRAME
   Permanent proscenium-style treatment for every track
   ===================================================== */

.track-art {
  --stage-side: 58px;
  --stage-top: 42px;
  --stage-bottom: 24px;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;

  padding:
    var(--stage-top)
    calc(var(--stage-side) + 18px)
    var(--stage-bottom);

  background:
    /* upper gold proscenium arch */
    linear-gradient(
      180deg,
      #2b1603 0%,
      #7b4a0a 18%,
      #e4b545 48%,
      #8f5a0d 72%,
      #2a1603 100%
    )
    center top /
    calc(100% - 34px) 26px no-repeat,

    /* left illuminated theater column */
    repeating-linear-gradient(
      90deg,
      #2b1604 0 5px,
      #7f4c0b 5px 10px,
      #e4b94f 10px 15px,
      #9e6816 15px 20px
    )
    left 18px center /
    var(--stage-side)
    calc(100% - 74px) no-repeat,

    /* right illuminated theater column */
    repeating-linear-gradient(
      90deg,
      #2b1604 0 5px,
      #7f4c0b 5px 10px,
      #e4b94f 10px 15px,
      #9e6816 15px 20px
    )
    right 18px center /
    var(--stage-side)
    calc(100% - 74px) no-repeat,

    /* left column capital */
    linear-gradient(
      90deg,
      #301a04,
      #a56d18 22%,
      #f4d67c 50%,
      #9c6514 78%,
      #301a04
    )
    left 12px top 18px /
    calc(var(--stage-side) + 12px) 24px no-repeat,

    /* right column capital */
    linear-gradient(
      90deg,
      #301a04,
      #a56d18 22%,
      #f4d67c 50%,
      #9c6514 78%,
      #301a04
    )
    right 12px top 18px /
    calc(var(--stage-side) + 12px) 24px no-repeat,

    /* left pedestal */
    linear-gradient(
      90deg,
      #261303,
      #8b5510 24%,
      #e8bd58 50%,
      #8b5510 76%,
      #261303
    )
    left 10px bottom 14px /
    calc(var(--stage-side) + 16px) 24px no-repeat,

    /* right pedestal */
    linear-gradient(
      90deg,
      #261303,
      #8b5510 24%,
      #e8bd58 50%,
      #8b5510 76%,
      #261303
    )
    right 10px bottom 14px /
    calc(var(--stage-side) + 16px) 24px no-repeat,

    /* spotlight glow over the stage */
    radial-gradient(
      ellipse at center 8%,
      rgba(255, 210, 104, 0.20),
      transparent 42%
    ),

    /* dark theater stage */
    linear-gradient(
      145deg,
      #17130f,
      #070605 72%
    );
}
/* ==========================================
   PB Stage Spotlight
========================================== */

.track-spotlight{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;

    opacity:0;

  background:
  radial-gradient(
    ellipse 24% 82% at 50% 2%,
    rgba(255, 255, 240, 0.88) 0%,
    rgba(255, 236, 170, 0.58) 16%,
    rgba(255, 205, 90, 0.26) 36%,
    rgba(212, 160, 58, 0.10) 52%,
    transparent 70%
  );

    transition:opacity .45s ease;
}

.track-card.playing .track-spotlight{
    opacity:1;
    animation:pbSpotlight 3.5s ease-in-out infinite;
}
@keyframes pbSpotlight {
  0%,
  100% {
    transform:
      translateX(-14%)
      translateY(-2%)
      rotate(-5deg)
      scaleX(.92);
    opacity: 1;
  }

  50% {
    transform:
      translateX(14%)
      translateY(0)
      rotate(5deg)
      scaleX(1.08);
    opacity: 1;
  }
}


/* Gold inner picture opening */
.track-art > img:not(.pb-seal) {
  display: block;
  position: relative;
  z-index: 3;

  width: 100%;
  height: 100%;
  max-width: 100%;

  object-fit: contain;
  object-position: center;

  box-sizing: border-box;
  border: 1px solid rgba(229, 181, 69, 0.72);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.52),
    0 14px 34px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(222, 167, 52, 0.16);
}

/* Empty-frame stage presentation */
.track-art:empty {
  min-height: 360px;
}

/* Subtle stage-floor reflection */
.track-art {
  box-shadow:
    inset 0 -22px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 216, 122, 0.12);
}

/* Responsive version for tablets and phones */
@media (max-width: 700px) {
  .track-art {
    --stage-side: 34px;
    --stage-top: 30px;
    --stage-bottom: 18px;

    padding:
      var(--stage-top)
      calc(var(--stage-side) + 10px)
      var(--stage-bottom);
  }
}

/* =====================================================
   PITCH BLAAK PREMIUM STAGE FRAME — VERSION 2
   Permanent gold theater treatment for every music frame
   ===================================================== */

.track-art {
  --stage-side: 40px;
  --stage-top: 36px;
  --stage-bottom: 22px;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;

  padding:
    var(--stage-top)
    calc(var(--stage-side) + 16px)
    var(--stage-bottom);

  background:
    /* Top proscenium highlight */
    linear-gradient(
      180deg,
      #241202 0%,
      #704306 12%,
      #c28a22 34%,
      #ffe096 50%,
      #b87916 67%,
      #4b2804 86%,
      #1b0d01 100%
    )
    center 12px /
    calc(100% - 34px) 24px no-repeat,

    /* Top marquee inner shine */
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 220, 130, 0.15) 12%,
      rgba(255, 235, 175, 0.50) 50%,
      rgba(255, 220, 130, 0.15) 88%,
      transparent 100%
    )
    center 15px /
    calc(100% - 58px) 7px no-repeat,

    /* Left decorative capital */
    linear-gradient(
      90deg,
      #251202 0%,
      #91580c 20%,
      #f6cf71 48%,
      #a76913 76%,
      #251202 100%
    )
    left 12px top 17px /
    calc(var(--stage-side) + 14px) 22px no-repeat,

    /* Right decorative capital */
    linear-gradient(
      90deg,
      #251202 0%,
      #91580c 20%,
      #f6cf71 48%,
      #a76913 76%,
      #251202 100%
    )
    right 12px top 17px /
    calc(var(--stage-side) + 14px) 22px no-repeat,

    /* Left Art Deco column */
    repeating-linear-gradient(
      90deg,
      #2a1503 0 4px,
      #7a4609 4px 8px,
      #dca83a 8px 11px,
      #ffe09a 11px 13px,
      #9c5f10 13px 17px
    )
    left 18px center /
    var(--stage-side)
    calc(100% - 74px) no-repeat,

    /* Right Art Deco column */
    repeating-linear-gradient(
      90deg,
      #2a1503 0 4px,
      #7a4609 4px 8px,
      #dca83a 8px 11px,
      #ffe09a 11px 13px,
      #9c5f10 13px 17px
    )
    right 18px center /
    var(--stage-side)
    calc(100% - 74px) no-repeat,

    /* Left pedestal */
    linear-gradient(
      90deg,
      #211001,
      #84500b 20%,
      #e5b84e 48%,
      #9b6112 78%,
      #211001
    )
    left 10px bottom 13px /
    calc(var(--stage-side) + 16px) 23px no-repeat,

    /* Right pedestal */
    linear-gradient(
      90deg,
      #211001,
      #84500b 20%,
      #e5b84e 48%,
      #9b6112 78%,
      #211001
    )
    right 10px bottom 13px /
    calc(var(--stage-side) + 16px) 23px no-repeat,

    /* Soft overhead spotlight */
    radial-gradient(
      ellipse at 50% 4%,
      rgba(255, 216, 122, 0.25) 0%,
      rgba(216, 157, 44, 0.10) 28%,
      transparent 58%
    ),

    /* Ebony theater interior */
    linear-gradient(
      145deg,
      #18130d 0%,
      #0a0806 58%,
      #050403 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 222, 139, 0.17),
    inset 0 -25px 36px rgba(0, 0, 0, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.36);

  transition:
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

/* Album artwork remains fully visible between the columns */
.track-art > img:not(.pb-seal) {
  position: relative;
  z-index: 3;

  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;

  object-fit: contain;
  object-position: center;

  box-sizing: border-box;
  border: 1px solid rgba(225, 173, 57, 0.78);
  border-radius: 16px;

  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.72),
    0 0 0 4px rgba(205, 149, 34, 0.62),
    0 16px 34px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(225, 169, 50, 0.14);

  transition:
    transform 0.38s ease,
    filter 0.38s ease,
    box-shadow 0.38s ease;
}

/* Elegant stage activation on hover */
.track-card:hover .track-art {
  filter:
    brightness(1.035)
    contrast(1.045)
    saturate(1.04);

  box-shadow:
    inset 0 1px 0 rgba(255, 233, 169, 0.25),
    inset 0 -24px 34px rgba(0, 0, 0, 0.48),
    0 18px 42px rgba(0, 0, 0, 0.47),
    0 0 25px rgba(211, 155, 38, 0.15);
}

.track-card:hover .track-art > img:not(.pb-seal) {
  transform: translateY(-3px) scale(1.01);

  filter:
    sepia(0.04)
    brightness(1.025)
    contrast(1.06)
    saturate(1.02);

  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.68),
    0 0 0 4px rgba(238, 188, 72, 0.82),
    0 20px 40px rgba(0, 0, 0, 0.76),
    0 0 29px rgba(235, 180, 65, 0.22);
}

/* Refined Pitch Blaak marquee */
.track-card::before {
  color: #e6b854;
  letter-spacing: 2.3px;

  text-shadow:
    0 1px 0 #291604,
    0 0 9px rgba(228, 174, 57, 0.30);
}

/* Permanent stage remains present without uploaded artwork */
.track-art:empty {
  min-height: 350px;
}

/* Mobile and tablet proportions */
@media (max-width: 700px) {
  .track-art {
    --stage-side: 27px;
    --stage-top: 28px;
    --stage-bottom: 16px;

    padding:
      var(--stage-top)
      calc(var(--stage-side) + 9px)
      var(--stage-bottom);
  }

  .track-art > img:not(.pb-seal) {
    border-radius: 11px;
  }
}


/* ==================================================
   TRACK TITLE ROW WITH PB RECORDINGS LOGOS
   Applies to every music play card
================================================== */

.track-title-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 18px 10px;
  box-sizing: border-box;
}

.track-title-row .track-info {
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.track-side-logo {
  display: block;
  width: 100%;
  max-width: 84px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  justify-self: center;
}
.track-card.playing .track-side-logo {
  animation: pbEmblemPulse 1.6s ease-in-out infinite;
}

.track-card.playing .track-side-logo:first-child {
  animation-delay: 0s;
}

.track-card.playing .track-side-logo:last-child {
  animation-delay: 0.35s;
}

@keyframes pbEmblemPulse {
  0%,
  100% {
    opacity: 1;
    filter:
      brightness(1)
      saturate(1);
    transform: scale(1);
  }

  50% {
    opacity: .88;
    filter:
      brightness(1.22)
      saturate(1.18);
    transform: scale(1.03);
  }
}
@media (max-width: 700px) {
  .track-title-row {
    grid-template-columns: 68px minmax(0, 1fr) 68px;
    gap: 10px;
    padding: 14px 10px 8px;
  }

  .track-side-logo {
    max-width: 68px;
  }
}


/* ==========================================================
   PITCH BLAAK MODERN LUXURY CONCERT-STAGE CURTAINS
   ========================================================== */

.track-art {
    position: relative;
    overflow: hidden;
}

.track-curtains {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(255, 210, 115, 0.08) 0%,
            rgba(255, 186, 68, 0.025) 35%,
            transparent 68%
        );
}

/* ==========================================================
   SIMPLE BLACK STAGE HEADER
   ========================================================== */

.track-curtains::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16%;
    z-index: 30;

    background:
        linear-gradient(
            to bottom,
            #292929 0%,
            #151515 18%,
            #080808 58%,
            #020202 100%
        );

    border-top: 2px solid rgba(255, 222, 127, 0.88);
    border-bottom: 4px solid rgba(193, 128, 25, 0.96);

    box-shadow:
        inset 0 8px 13px rgba(255, 255, 255, 0.055),
        inset 0 -15px 20px rgba(0, 0, 0, 0.78),
        0 8px 17px rgba(0, 0, 0, 0.75),
        0 0 10px rgba(225, 164, 52, 0.14);
}

/* Soft concert spotlight revealed when curtains open */

.track-curtains::after {
    content: "";
    position: absolute;
    inset: 16% 0 0;
    z-index: 21;

    background:
        radial-gradient(
            ellipse at 50% 16%,
            rgba(255, 224, 146, 0.14) 0%,
            rgba(255, 190, 67, 0.055) 28%,
            transparent 68%
        );

    opacity: 0;
    transition: opacity 0.75s ease;
}

/* ==========================================================
   DEEP BLACK-VELVET CURTAIN PANELS
   ========================================================== */

.track-curtain-left,
.track-curtain-right {
    position: absolute;
    top: 16%;
    bottom: 0;
    width: 52%;
    z-index: 24;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 7%,
            transparent 13%,
            rgba(255, 255, 255, 0.065) 21%,
            transparent 29%,
            rgba(255, 255, 255, 0.018) 40%,
            transparent 49%,
            rgba(255, 255, 255, 0.06) 60%,
            transparent 71%,
            rgba(255, 255, 255, 0.02) 84%,
            transparent 100%
        ),
        repeating-linear-gradient(
            90deg,
            #010101 0px,
            #090909 15px,
            #202020 32px,
            #050505 49px,
            #282828 68px,
            #070707 88px,
            #171717 109px,
            #020202 132px
        );

    border-bottom: 4px solid rgba(137, 81, 9, 0.9);

    box-shadow:
        inset 0 0 48px rgba(0, 0, 0, 0.95),
        inset 0 -40px 48px rgba(0, 0, 0, 0.64),
        inset 0 22px 28px rgba(255, 255, 255, 0.02),
        0 0 18px rgba(0, 0, 0, 0.7);

    transition:
        transform 1.15s cubic-bezier(0.66, 0.02, 0.24, 1),
        filter 0.55s ease,
        box-shadow 0.55s ease;

    will-change: transform;
}

.track-curtain-left {
    left: 0;
    transform-origin: left center;
}

.track-curtain-right {
    right: 0;
    transform-origin: right center;
}

/* ==========================================================
   REFINED GOLD INNER PIPING
   ========================================================== */

.track-curtain-left::before,
.track-curtain-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 5;

    background:
        linear-gradient(
            to bottom,
            #fff0aa 0%,
            #d89f32 22%,
            #784607 49%,
            #d49a2f 76%,
            #4c2901 100%
        );

    box-shadow:
        0 0 6px rgba(255, 198, 75, 0.25),
        inset 0 0 2px rgba(255, 255, 255, 0.28);
}

.track-curtain-left::before {
    right: 0;
}

.track-curtain-right::before {
    left: 0;
}

/* Extra velvet depth and fold shading */

.track-curtain-left::after,
.track-curtain-right::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 0px,
            transparent 16px,
            rgba(0, 0, 0, 0.22) 34px,
            transparent 54px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.022) 0%,
            transparent 24%,
            transparent 72%,
            rgba(0, 0, 0, 0.34) 100%
        );

    mix-blend-mode: soft-light;
    opacity: 0.74;
}

/* ==========================================================
   OPEN STATE — CURTAINS STACK AT THE SIDES
   ========================================================== */

.track-card.curtains-open .track-curtain-left {
    transform: translateX(-84%) scaleX(0.72);
    filter:
        brightness(1.08)
        drop-shadow(12px 0 18px rgba(0, 0, 0, 0.52));

    box-shadow:
        inset -18px 0 24px rgba(0, 0, 0, 0.82),
        inset 0 0 38px rgba(0, 0, 0, 0.9),
        10px 0 18px rgba(0, 0, 0, 0.48);
}

.track-card.curtains-open .track-curtain-right {
    transform: translateX(84%) scaleX(0.72);
    filter:
        brightness(1.08)
        drop-shadow(-12px 0 18px rgba(0, 0, 0, 0.52));

    box-shadow:
        inset 18px 0 24px rgba(0, 0, 0, 0.82),
        inset 0 0 38px rgba(0, 0, 0, 0.9),
        -10px 0 18px rgba(0, 0, 0, 0.48);
}

.track-card.curtains-open .track-curtains::after {
    opacity: 1;
}
/* =====================================================
   GOLD LETTERING ON EXISTING BLACK CURTAIN DOORS
   ===================================================== */

.curtain-door-title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 25;

  width: 84%;
  transform: translate(-50%, -50%);

  color: #d8b64c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 #6b4700,
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(216, 182, 76, 0.45);

  pointer-events: none;
}

/* Slightly smaller text for the longer right-door wording */
.track-curtain-right .curtain-door-title {
  font-size: clamp(10px, 0.95vw, 15px);
  letter-spacing: 0.08em;
}
/* ==============================
   PREMIUM DOOR ART
============================== */

.curtain-door-art{
    position:absolute;
    inset:0;
    width:128%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    z-index:30;
    pointer-events:none;
}

.track-curtain-left .curtain-door-art{
   transform:translateX(8%);
}

.track-curtain-right .curtain-door-art{
    transform:translateX(-8%);
}




/* ==========================================
   PITCH BLAAK GOLD SOUND METER
========================================== */

.pb-sound-meter{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:4px;
    height:38px;
    margin:0 auto 12px;
}






@media (max-width:600px){
    .pb-sound-meter{
        gap:3px;
        height:32px;
        margin-bottom:10px;
    }

    .pb-sound-meter span{
        width:4px;
        height:18px;
    }
}
/* =====================================================
   CCMG Version 2.0 — Explore the Catalog
===================================================== */

.catalog-intro{
    max-width:1200px;
    margin:0 auto;
    padding:90px 40px 40px;
}

.catalog-message{
    margin-top:32px;
    padding:32px 36px;
    border:1px solid rgba(212,175,55,.25);
    background:rgba(255,255,255,.02);
    border-radius:18px;
}

.catalog-message h3{
    color:#d4af37;
    font-size:1.75rem;
    margin-bottom:18px;
}

.catalog-message p{
    max-width:900px;
    line-height:1.7;
    color:#d5d5d5;
}

/* ==========================================
   CCMG Catalog Visual
========================================== */

.ccmg-catalog-visual{
    width:100%;
    max-width:620px;
    margin:20px auto 20px;
}

.ccmg-catalog-visual img{
    width:100%;
    height:390px;
    object-fit:cover;
    object-position:center 45%;
    display:block;
    border:1px solid rgba(212,175,55,.25);
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
/* ==========================================
   CCMG Hero — Restore Two-Column Layout
========================================== */

.hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,1fr);
    gap:56px;
    align-items:center;
}

.hero-copy{
    min-width:0;
}

.hero-visual{
    width:100%;
    max-width:720px;
    justify-self:end;
    min-width:0;
}

.hero-visual img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
}

@media (max-width:900px){
    .hero{
        grid-template-columns:1fr;
    }

    .hero-visual{
        max-width:680px;
        justify-self:center;
    }
}
/* ==========================================
   CCMG Hero — Force Desktop Column Placement
========================================== */

@media (min-width:901px){
  .hero{
    position:relative !important;
    display:block !important;
    min-height: 760px !important;
    padding-right:52% !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:760px !important;
    position:relative !important;
    z-index:2 !important;
  }

  .hero-visual{
    position:absolute !important;
    top:50% !important;
    right:5% !important;
    left:auto !important;
    bottom:auto !important;
    width:43% !important;
    max-width:720px !important;
    margin:0 !important;
    transform:translateY(-50%) !important;
    float:none !important;
  }

  .hero-visual img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
  }

  /* CCMG desktop hero refinement */
@media (min-width: 901px) {
  .hero-copy h1 {
    font-size: clamp(4.5rem, 6.2vw, 7rem) !important;
    line-height: 0.86 !important;
  }
    .hero-visual {
    top: 34% !important;
    width: 40% !important;
    max-width: 660px !important;
  }
}

/* CCMG Featured Release Showcase */
.featured-release {
  padding: 90px 5%;
  background:
    radial-gradient(circle at 25% 20%, rgba(218, 170, 70, 0.10), transparent 35%),
    linear-gradient(180deg, #090909 0%, #11100d 100%);
  border-top: 1px solid rgba(218, 170, 70, 0.18);
  border-bottom: 1px solid rgba(218, 170, 70, 0.18);
}

.featured-release-heading {
  max-width: 1180px;
  margin: 0 auto 16px;
}

.featured-release-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  line-height: 0.95;
  color: #f4f0e8;
  text-transform: uppercase;
}

.featured-release-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(320px, 1.22fr);
  gap: 54px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px;
  background: rgba(8, 8, 8, 0.88);
  border: 1px solid rgba(218, 170, 70, 0.42);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    inset 0 0 40px rgba(218, 170, 70, 0.035);
}

.featured-release-art {
  transform: scale(1);
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #050505;
  border: 1px solid rgba(218, 170, 70, 0.35);
}

.featured-release-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.55);
}

.featured-release-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
  border-radius: 8px;
}

.featured-release-copy {
  max-width: 560px;
}

.featured-release-label {
  margin: 0 0 12px;
  color: #d9aa46;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.featured-release-copy h3 {
  margin: 0 0 18px;
  color: #f4f0e8;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  line-height: 0.9;
  text-transform: uppercase;
}

.featured-release-copy > p:not(.featured-release-label) {
  max-width: 52ch;
  margin: 0;
  color: #bdb7ad;
  font-size: 1rem;
  line-height: 1.75;
}

.featured-release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .featured-release {
    padding: 70px 22px;
  }

  .featured-release-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 22px;
  }

  .featured-release-copy {
    max-width: none;
  }
}

/* ==========================================
   PITCH BLAAK Featured Release Polish
========================================== */

.featured-release-card{
    transition:all .45s ease;
}

.featured-release-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 20px 70px rgba(0,0,0,.55),
        0 0 40px rgba(212,175,55,.18);
}

.featured-release-visual img{
    transition:
        transform .8s ease,
        box-shadow .8s ease;
}

.featured-release-card:hover .featured-release-visual img{
    transform:scale(1.03);
    box-shadow:
        0 0 28px rgba(212,175,55,.30);
}

.featured-release-heading{
    position:relative;
    display:inline-block;
    padding-bottom:14px;
}

.featured-release-heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:90px;
    height:2px;
    background:linear-gradient(
        90deg,
        #d4af37,
        transparent
    );
}

@keyframes featuredSweep {
    0% {
        left: -45%;
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    22% {
        left: 125%;
        opacity: 0;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

/* ==========================================
   CCMG Music Library Page
========================================== */

.music-library-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(212,175,55,.10), transparent 32%),
        linear-gradient(180deg, #080808 0%, #111111 100%);
    color: #f5f1e8;
}

.music-library-page header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 5%;
    background: rgba(5,5,5,.94);
    border-bottom: 1px solid rgba(212,175,55,.18);
    backdrop-filter: blur(12px);
}

.music-library-page .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.music-library-page .brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #d4af37;
    color: #d4af37;
    font-weight: 900;
}

.music-library-page .brand strong,
.music-library-page .brand small {
    display: block;
}

.music-library-page .brand small {
    color: #d4af37;
    font-size: .7rem;
    letter-spacing: .16em;
}

.music-library-page nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.music-library-page nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.music-library-page .nav-cta {
    padding: 12px 18px;
    border: 1px solid #d4af37;
}

.library-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 110px 5% 80px;
}

.library-hero h1 {
    max-width: 800px;
    margin: 12px 0 24px;
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: .84;
    text-transform: uppercase;
}

.library-hero-copy {
    max-width: 700px;
    color: #c8c1b5;
    font-size: 1.1rem;
    line-height: 1.8;
}

.music-library-page .music-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 5% 110px;
}

.music-library-page .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 50px;
    align-items: end;
    margin-bottom: 28px;
}

.music-library-page .section-heading h2 {
    margin: 8px 0 0;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .9;
    text-transform: uppercase;
}

.music-library-page .section-heading > p {
    margin: 0;
    color: #bdb5aa;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .music-library-page header {
        align-items: flex-start;
        gap: 20px;
    }

    .music-library-page nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 14px;
    }

    .music-library-page .section-heading {
        grid-template-columns: 1fr;
    }

    .library-hero {
        padding-top: 80px;
    }
}

/* ==========================================
   Music Library Two-Column Hero
========================================== */

.music-library-page .library-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    align-items: center;
    gap: 70px;
    max-width: 1280px;
    padding-top: 90px;
    padding-bottom: 90px;
}

.library-hero-copy-block {
    min-width: 0;
}

.library-hero-visual {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.38);
    border-radius: 12px;
    background: #050505;
    box-shadow:
        0 28px 80px rgba(0,0,0,.60),
        0 0 45px rgba(212,175,55,.10);
}

.library-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.library-hero-visual:hover img {
    transform: scale(1.035);
}

.library-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0,0,0,.55);
}

@media (max-width: 900px) {
    .music-library-page .library-hero {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .library-hero-visual {
        justify-self: start;
        max-width: 520px;
    }
}

/* ==========================================
   ABOUT PAGE
========================================== */

.about-story-section{
    max-width:1400px;
    margin:40px auto 120px;
    padding:0 48px;
}

.about-story-heading{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:70px;
    align-items:start;
    margin-bottom:40px;
}

.about-story-heading h2{
    margin:8px 0;
    font-size: clamp(2.4rem,3.5vw,4rem);
    line-height:.92;
    text-transform:uppercase;
}

.about-story-heading>p{
    color:#bdb5aa;
    line-height:1.9;
    font-size:1.05rem;
}

.about-story-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.about-story-card{

    padding:42px;

    border:1px solid rgba(210,165,60,.20);

    border-radius:22px;

    background:
    linear-gradient(180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.01));

    backdrop-filter:blur(18px);

    transition:.35s;
}

.about-story-card:hover{

    transform:translateY(-10px);

    border-color:#d4a948;

    box-shadow:
    0 20px 50px rgba(0,0,0,.45);

}

.about-story-card span{

    display:inline-flex;

    width:54px;

    height:54px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:#d4a948;

    color:#000;

    font-weight:700;

    margin-bottom:24px;

}

.about-story-card h3{

    margin:0 0 18px;

    font-size:1.45rem;

}

.about-story-card p{

    color:#bdb5aa;

    line-height:1.9;

}

@media(max-width:900px){

.about-story-heading{

grid-template-columns:1fr;

}

.about-story-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   ABOUT PAGE — BRAND SHOWCASE
========================================================== */

.about-brands-section{
    max-width:1300px;
    margin:0 auto;
    padding:110px 48px 120px;
}


.about-brands-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);
    gap:60px;
    align-items:end;
    margin-bottom:70px;
}
.about-brands-heading h2{
    margin:0 0 18px;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.15;
    letter-spacing:-0.02em;
}

.about-brands-heading h2::after{
    content:"";
    display:block;
    width:90px;
    height:2px;
    margin-top:16px;
    background:linear-gradient(
        90deg,
        #dbb55a,
        rgba(219,181,90,.15)
    );
}

.about-brands-heading p{
    color:#bdb5aa;
    line-height:1.9;
}

.about-brands-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
}

.brand-showcase{
    display:block;
    background:#181818;
    border:1px solid rgba(219,181,90,.18);
    border-radius:26px;
    overflow:hidden;
    transition:.35s;
}

.brand-showcase-featured{
    display:grid;
    grid-template-columns:minmax(300px,38%) minmax(0,1fr);
    min-height:500px;
}

.brand-showcase:hover{
    transform:translateY(-8px);
    border-color:#dbb55a;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.brand-showcase-visual{
    background:#0d0d0d;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
}

.brand-showcase-visual img{
    width:100%;
    border-radius:16px;
}

.brand-showcase-content{
    padding:45px;
}

.brand-number{
    display:inline-flex;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#dbb55a;
    color:#000;
    font-weight:700;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}

.brand-showcase h3{
    font-size:2rem;
    margin:0 0 20px;
}

.brand-showcase p{
    color:#bdb5aa;
    line-height:1.9;
    margin-bottom:25px;
}

.brand-list{
    list-style:none;
    padding:0;
    margin:0;
}

.brand-list li{
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-list li:last-child{
    border-bottom:none;
}

@media(max-width:1100px){

    .about-brands-grid{
        grid-template-columns:1fr;
    }

    .brand-showcase{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .about-brands-heading{
        grid-template-columns:1fr;
    }

}

/* ==============================
   ABOUT VALUES SECTION
============================== */

.about-values-section{
    padding:90px 0 120px;
}

.about-values-inner{
    width:min(1400px,92%);
    margin:auto;
}

.about-values-heading{
    max-width:720px;
    margin:0 auto 60px;
    text-align:center;
}

.about-eyebrow{
    display:inline-block;
    color:#dbb55a;
    letter-spacing:.25em;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:18px;
}

.about-values-heading h2{
    font-size:clamp(2rem,3vw,3.2rem);
    margin-bottom:20px;
}

.about-values-heading p{
    color:#bdb5aa;
    line-height:1.9;
}

.about-values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.about-value-card{
    background:#181818;
    border:1px solid rgba(219,181,90,.15);
    border-radius:24px;
    padding:36px;
    transition:.35s;
}

.about-value-card:hover{
    transform:translateY(-8px);
    border-color:#dbb55a;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.about-value-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#dbb55a;
    color:#111;
    font-weight:700;
    margin-bottom:22px;
}

.about-value-card h3{
    margin-bottom:16px;
    font-size:1.35rem;
}

.about-value-card p{
    color:#bdb5aa;
    line-height:1.8;
}

/* ==========================================
   ABOUT CTA
========================================== */

.about-cta-section{
    padding:170px 0 140px;
}

.about-cta-inner{
    width:min(1300px,92%);
    margin:auto;
    text-align:center;
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        rgba(28,28,28,.98),
        rgba(14,14,14,.98)
    );

    border:1px solid rgba(219,181,90,.25);
    border-radius:28px;

    padding:80px 70px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);
}
.about-cta-inner::before{
    content:"";
    position:absolute;
    top:-180px;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:420px;
    pointer-events:none;
    z-index:0;

    background:radial-gradient(
        ellipse at center,
        rgba(219,181,90,.15) 0%,
        rgba(219,181,90,.05) 45%,
        transparent 80%
    );
}

.about-cta-inner > *{
    position:relative;
    z-index:1;
}

.about-cta-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:18px;
    color:#dbb55a;
    letter-spacing:.25em;
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:30px;

    }

    .about-cta-eyebrow::before,
    .about-cta-eyebrow::after{
    width:120px;
    height:1px;
    background:rgba(219,181,90,.6);

}
   .about-cta-inner h2{
   font-size:clamp(2.3rem,4vw,4.5rem);
   line-height:.95;
   max-width:1000px;
   margin:0 auto 40px;
   text-transform:uppercase;
   
}

.about-cta-inner p{
    max-width:760px;
    margin:0 auto 50px;
    color:#bdb5aa;
    line-height:1.9;
}

.about-cta-actions{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.about-cta-primary,
.about-cta-secondary{

    padding:18px 34px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;

    transition:.35s;
}

.about-cta-primary{

    background:#dbb55a;
    color:#111;
}

.about-cta-primary:hover{

    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(219,181,90,.35);
}

.about-cta-secondary{

    border:1px solid #dbb55a;
    color:#fff;
}

.about-cta-secondary:hover{

    background:#dbb55a;
    color:#111;
    transform:translateY(-4px);
}

/* =========================================================
   CCMG PREMIUM ARTIST PROFILE
   ========================================================= */

.artist-profile-page {
    margin: 0;
    background: #050505;
    color: #f5f1e8;
    font-family: Arial, Helvetica, sans-serif;
}

.artist-profile-page .site-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 12px 5%;
    background: rgba(5, 5, 5, 0.96);
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

.artist-profile-page .site-header .logo img {
    display: block;
    width: 92px;
    height: 62px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}

.artist-profile-page .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.artist-profile-page .site-header nav a {
    color: #f5f1e8;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.artist-profile-page .site-header nav a:hover {
    color: #d4af37;
}

.artist-profile-page main {
    margin: 0;
    padding: 0;
}

.artist-profile-page .artist-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #050505;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

.artist-profile-page .artist-hero-artwork {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.artist-profile-page .artist-hero-artwork img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.artist-profile-page .artist-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.91) 27%,
            rgba(0, 0, 0, 0.55) 50%,
            rgba(0, 0, 0, 0.05) 75%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.05) 65%,
            rgba(0, 0, 0, 0.75) 100%
        );
}

.artist-profile-page .artist-hero-content {
    position: relative;
    z-index: 2;
    width: min(650px, 46%);
    margin-left: 6%;
    padding: 80px 0;
}

.artist-profile-page .artist-eyebrow {
    margin: 0 0 20px;
    color: #d4af37;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.artist-profile-page .artist-hero-content h1 {
    margin: 0;
    color: #f4d77b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.7rem, 7vw, 7.5rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-shadow:
        0 2px 0 #6c4e0f,
        0 10px 30px rgba(0, 0, 0, 0.8);
}

.artist-profile-page .artist-genres {
    max-width: 620px;
    margin: 28px 0 0;
    color: #f5f1e8;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.artist-profile-page .artist-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.artist-profile-page .artist-status-row span {
    padding: 10px 15px;
    color: #f4d77b;
    background: rgba(7, 7, 7, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
}

.artist-profile-page .artist-status-row span::before {
    content: "✓";
    margin-right: 7px;
    color: #d4af37;
}

.artist-profile-page .artist-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}

.artist-profile-page .artist-hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 15px 24px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.artist-profile-page .artist-hero-buttons .btn:hover {
    transform: translateY(-2px);
}

.artist-profile-page .artist-hero-buttons .primary {
    color: #080808;
    background: linear-gradient(135deg, #f4d77b, #b8861b);
    border: 1px solid #f6df94;
    box-shadow: 0 12px 34px rgba(184, 134, 11, 0.24);
}

.artist-profile-page .artist-hero-buttons .secondary {
    color: #f4d77b;
    background: rgba(5, 5, 5, 0.7);
    border: 1px solid #c9a227;
}

.artist-profile-page footer {
    padding: 28px 5%;
    color: rgba(245, 241, 232, 0.62);
    background: #050505;
    border-top: 1px solid rgba(212, 175, 55, 0.22);
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Tablet and mobile */

@media (max-width: 900px) {
    .artist-profile-page .site-header {
        flex-direction: column;
        gap: 14px;
        padding: 14px 5% 18px;
    }

    .artist-profile-page .site-header nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 20px;
    }

    .artist-profile-page .artist-hero {
        min-height: 760px;
        align-items: flex-end;
    }

    .artist-profile-page .artist-hero-artwork img {
        object-position: 68% center;
    }

    .artist-profile-page .artist-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.12) 0%,
                rgba(0, 0, 0, 0.28) 38%,
                rgba(0, 0, 0, 0.96) 78%,
                #050505 100%
            );
    }

    .artist-profile-page .artist-hero-content {
        width: auto;
        margin: 0;
        padding: 80px 7% 60px;
    }
}

@media (max-width: 560px) {
    .artist-profile-page .site-header nav a {
        font-size: 0.65rem;
    }

    .artist-profile-page .artist-hero {
        min-height: 700px;
    }

    .artist-profile-page .artist-hero-content h1 {
        font-size: clamp(3.2rem, 16vw, 5rem);
    }

    .artist-profile-page .artist-genres {
        font-size: 0.76rem;
    }

    .artist-profile-page .artist-status-row {
        gap: 8px;
    }

    .artist-profile-page .artist-status-row span {
        padding: 8px 11px;
        font-size: 0.58rem;
    }

    .artist-profile-page .artist-hero-buttons {
        flex-direction: column;
    }

    .artist-profile-page .artist-hero-buttons .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   FEATURED TRACKS - SECTION HEADING
   ========================================================= */

.artist-profile-page .artist-tracks-section {
    padding: 100px 6%;
    background:
        radial-gradient(circle at top, rgba(184,134,11,.10), transparent 40%),
        linear-gradient(180deg,#070707,#050505);
}

.artist-profile-page .artist-section-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.artist-profile-page .artist-section-eyebrow {
    color: #d4af37;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .30em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.artist-profile-page .artist-section-heading h2 {
    margin: 0;
    color: #f3d474;
    font-family: Georgia, serif;
    font-size: clamp(2.8rem,5vw,4.8rem);
    font-weight: 500;
}

.artist-profile-page .artist-section-heading p:last-child {
    margin-top: 24px;
    color: rgba(245,241,232,.72);
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================================
   FEATURED TRACK CARD
   ========================================================= */

.artist-profile-page .artist-track-card{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    align-items:center;
    max-width:1300px;
    margin:0 auto;
    padding:34px;
    background:#0d0d0d;
    border:1px solid rgba(212,175,55,.20);
    border-radius:22px;
    transition:.35s ease;
}

.artist-profile-page .artist-track-card:hover{
    transform:translateY(-6px);
    border-color:#d4af37;
    box-shadow:0 18px 45px rgba(0,0,0,.55);
}

.artist-profile-page .artist-track-card img{
    width:100%;
    border-radius:16px;
    display:block;
}

.artist-profile-page .artist-track-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.artist-profile-page .artist-track-number{
    color:#b9932f;
    font-size:.70rem;
    letter-spacing:.25em;
    font-weight:800;
    margin:0 0 8px;
}

.artist-profile-page .artist-track-title-row h3{
    margin:0;
    color:#f6e8a8;
    font-size:2rem;
    font-family:Georgia,serif;
}

.artist-profile-page .artist-track-status{
    padding:10px 18px;
    border:1px solid #d4af37;
    border-radius:999px;
    color:#d4af37;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
}

.artist-profile-page .artist-track-description{
    margin:28px 0;
    color:rgba(245,241,232,.78);
    line-height:1.9;
}

.artist-profile-page .artist-track-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:32px;
}

.artist-profile-page .artist-track-meta span{
    padding:8px 16px;
    border-radius:999px;
    background:#171717;
    color:#cdb25b;
    font-size:.75rem;
}

.artist-profile-page .artist-track-actions{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/* =========================================================
   FEATURED TRACK - ACTION BUTTONS
   ========================================================= */

.artist-profile-page .artist-track-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 14px 22px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.artist-profile-page .artist-track-actions .btn:hover {
    transform: translateY(-2px);
}

.artist-profile-page .artist-track-actions .primary {
    color: #080808;
    background: linear-gradient(135deg, #f4d77b, #b8861b);
    border: 1px solid #f6df94;
    box-shadow: 0 10px 28px rgba(184, 134, 11, 0.2);
}

.artist-profile-page .artist-track-actions .primary:hover {
    box-shadow: 0 14px 34px rgba(212, 175, 55, 0.3);
}

.artist-profile-page .artist-track-actions .secondary {
    color: #f4d77b;
    background: rgba(5, 5, 5, 0.72);
    border: 1px solid #c9a227;
}

.artist-profile-page .artist-track-actions .secondary:hover {
    color: #080808;
    background: #d4af37;
}

.artist-profile-page .artist-track-card{
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.artist-profile-page .artist-track-card:hover{
    transform: translateY(-8px);
    border-color:#d4af37;
    box-shadow:
        0 18px 50px rgba(212,175,55,.12),
        0 0 40px rgba(212,175,55,.08);
}

/* =========================================================
   FEATURED TRACK - ALTERNATING CARD LAYOUT
   ========================================================= */

.artist-profile-page .artist-track-card-reverse {
    grid-template-columns: 1fr 320px;
}

.artist-profile-page .artist-track-card-reverse > img {
    grid-column: 2;
    grid-row: 1;
}

.artist-profile-page .artist-track-card-reverse .artist-track-info {
    grid-column: 1;
    grid-row: 1;
}

@media (max-width: 900px) {
    .artist-profile-page .artist-track-card,
    .artist-profile-page .artist-track-card-reverse {
        grid-template-columns: 1fr;
    }

    .artist-profile-page .artist-track-card-reverse > img,
    .artist-profile-page .artist-track-card-reverse .artist-track-info {
        grid-column: 1;
        grid-row: auto;
    }
}

/* =========================================================
   FEATURED TRACK - GALLERY DISPLAY EFFECT
   ========================================================= */

.artist-profile-page .artist-track-card > img {
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        filter 0.35s ease;
}

.artist-profile-page .artist-track-card:hover > img {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(244, 215, 123, 0.82);
    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.58),
        0 0 34px rgba(212, 175, 55, 0.16);
    filter: brightness(1.04);
}

/* ==============================
   Featured Artist Section
============================== */

.featured-artist-section{
    padding:90px 0;
    background:linear-gradient(180deg,#080808 0%,#111 100%);
}

.featured-artist-inner{
    width:min(1200px,92%);
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.section-kicker{
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:.8rem;
    margin-bottom:18px;
}

.featured-artist-copy h2{
    font-size:3rem;
    color:#fff;
    margin-bottom:18px;
}

.featured-artist-genres{
    color:#d4af37;
    font-size:1.05rem;
    margin-bottom:22px;
}

.featured-artist-description{
    color:#d0d0d0;
    line-height:1.8;
    max-width:520px;
    margin-bottom:34px;
}

.featured-artist-visual img{
    width:100%;
    border-radius:18px;
    border:2px solid rgba(212,175,55,.45);

    box-shadow:
        0 0 45px rgba(212,175,55,.18);

    transition:.35s ease;
}

.featured-artist-visual img:hover{
    transform:translateY(-6px);
    box-shadow:
        0 0 70px rgba(212,175,55,.30);
}

@media(max-width:900px){

.featured-artist-inner{
grid-template-columns:1fr;
text-align:center;
}

.featured-artist-description{
margin:0 auto 34px;
}

}

/* ==========================================
   Artist Roster Page
========================================== */

.artists-page{
    background:#090909;
}

.artist-roster-hero{
    padding:130px 0 80px;
    text-align:center;
    background:linear-gradient(180deg,#070707 0%,#111 100%);
}

.artist-roster-hero-inner{
    width:min(900px,92%);
    margin:0 auto;
}

.artist-roster-hero h1{
    font-size:4rem;
    color:#fff;
    margin:20px 0;
}

.artist-roster-hero p{
    color:#d0d0d0;
    font-size:1.1rem;
    line-height:1.8;
}

.artist-roster-section{
    padding:90px 0;
}

.artist-roster-grid{
    width:min(1200px,92%);
    margin:0 auto;
}

.artist-roster-card{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:50px;
    align-items:center;

    background:#111;

    border:1px solid rgba(212,175,55,.20);

    border-radius:22px;

    overflow:hidden;

    transition:.35s ease;
}

.artist-roster-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 55px rgba(212,175,55,.18);

}

.artist-roster-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.artist-roster-content{

    padding:50px;

}

.artist-roster-label{

    color:#d4af37;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:15px;

}

.artist-roster-content h2{

    color:white;

    font-size:3rem;

    margin-bottom:20px;

}

.artist-roster-genres{

    color:#d4af37;

    margin-bottom:22px;

}

.artist-roster-description{

    color:#d0d0d0;

    line-height:1.8;

    margin-bottom:35px;

}

.artist-roster-actions{

    display:flex;

    gap:18px;

}

@media(max-width:900px){

.artist-roster-card{

grid-template-columns:1fr;

}

.artist-roster-content{

padding:35px;

}

.artist-roster-actions{

flex-direction:column;

}

}

/* ==========================================
   Artist Opportunity Panel
========================================== */

.artist-roster-opportunity{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:260px;
    background:
        radial-gradient(circle at top,#5f4712 0%,#1a1408 35%,#090909 100%);
}

.artist-opportunity-panel{
    width:88%;
    height:82%;
    border:1px solid rgba(212,170,72,.55);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:28px;
    background:rgba(0,0,0,.45);
}

.artist-opportunity-mark{
    width:70px;
    height:70px;
    border:2px solid #d4aa48;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d4aa48;
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:18px;
}

.artist-opportunity-panel p{
    color:#d4aa48;
    letter-spacing:.18em;
    font-size:.75rem;
    margin-bottom:18px;
}

.artist-opportunity-panel h3{
    color:#fff;
    font-size:2rem;
    line-height:1.2;
    margin-bottom:20px;
}

.artist-opportunity-panel small{
    color:#c7c7c7;
    letter-spacing:.15em;
    line-height:1.8;
}

/*====================================================
  Artist Licensing Section
====================================================*/

.artist-licensing-section{
    max-width:1200px;
    margin:100px auto;
    padding:0 40px;
}

.artist-licensing-intro{
    text-align:center;
    margin-bottom:60px;
}

.artist-section-label{
    color:#d4aa48;
    text-transform:uppercase;
    letter-spacing:.25em;
    font-size:.82rem;
    margin-bottom:18px;
}

.artist-licensing-intro h2{
    font-size:2.8rem;
    color:#fff;
    margin-bottom:22px;
}

.artist-licensing-intro p{
    max-width:760px;
    margin:0 auto;
    color:#c7c7c7;
    line-height:1.9;
}

.artist-licensing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    margin-top:60px;
}

.artist-licensing-card{
    background:#121212;
    border:1px solid rgba(212,170,72,.35);
    border-radius:18px;
    padding:34px;
    transition:.35s;
}

.artist-licensing-card:hover{
    transform:translateY(-6px);
    border-color:#d4aa48;
    box-shadow:0 18px 40px rgba(212,170,72,.15);
}

.artist-licensing-card span{
    display:inline-flex;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#d4aa48;
    color:#111;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:22px;
}

.artist-licensing-card h3{
    color:#fff;
    margin-bottom:18px;
}

.artist-licensing-card p{
    color:#c7c7c7;
    line-height:1.8;
}

.artist-licensing-actions{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:60px;
    flex-wrap:wrap;
}

.artist-licensing-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 28px;
    border:1px solid #d4aa48;
    text-decoration:none;
    font-weight:700;
    transition:.3s ease;
}

.artist-licensing-actions .btn.primary{
    background:#d4aa48;
    color:#111;
}

.artist-licensing-actions .btn.secondary{
    background:transparent;
    color:#fff;
}

.artist-licensing-actions .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(212,170,72,.18);
}

/* ==========================================
   License Request Page
========================================== */

.license-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top,rgba(212,170,72,.10),transparent 34%),
        #070707;
    color:#fff;
}

.license-hero{
    max-width:1000px;
    margin:0 auto;
    padding: 60px 32px 60px;
    text-align:center;
}

.license-hero .section-kicker{
    color:#d4aa48;
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:.82rem;
    margin-bottom:18px;
}

.license-hero h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    line-height:1.05;
    margin-bottom:24px;
}

.license-hero > p:last-child{
    max-width:720px;
    margin:0 auto;
    color:#c7c7c7;
    font-size:1.08rem;
    line-height:1.8;
}

.license-form-section{
    max-width:980px;
    margin:0 auto 110px;
    padding:0 32px;
}

.license-form{
    background:rgba(18,18,18,.96);
    border:1px solid rgba(212,170,72,.38);
    border-radius:22px;
    padding:32px;
    box-shadow:0 24px 70px rgba(0,0,0,.42);
}

.license-form .form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.license-form label{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:18px;
    color:#fff;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:.04em;
}

.license-form input,
.license-form select,
.license-form textarea{
    width:100%;
    border:1px solid rgba(212,170,72,.28);
    border-radius:10px;
    background:#0b0b0b;
    color:#fff;
    padding:15px 16px;
    font:inherit;
    outline:none;
    transition:.25s ease;
}

.license-form input:focus,
.license-form select:focus,
.license-form textarea:focus{
    border-color:#d4aa48;
    box-shadow:0 0 0 3px rgba(212,170,72,.15);
}

.license-form textarea{
    resize:vertical;
    min-height:140px;
}

.license-form .btn{
    min-height:56px;
    padding:0 34px;
    border:none;
    cursor:pointer;
    font-size:1rem;
}

@media(max-width:768px){

    .license-form{
        padding:28px;
    }

    .license-form .form-row{
        grid-template-columns:1fr;
    }

    .license-hero{
        padding:90px 24px 50px;
    }

    .license-form-section{
        padding:0 24px 80px;
    }
}

.license-page .site-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.license-page .site-nav > a:not(.btn){
    color:#f1f1f1;
    text-decoration:none;
    font-weight:600;
    transition:.25s ease;
}

.license-page .site-nav > a:not(.btn):hover,
.license-page .site-nav > a:not(.btn)[aria-current="page"]{
    color:#d4aa48;
}

.license-page .site-nav .btn{
    margin-left:10px;
}
/* Keep Music Library cards uniform */
.music-library-page .track-card {
  display: flex;
  flex-direction: column;
  height: 540px;
}

.music-library-page .track-card h3 {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.music-library-page .track-card .play {
  margin-top: auto;
}

.music-library-page .track-card .progress {
  flex-shrink: 0;
}

/* Refine and align the song-information area */
.music-library-page .track-card .track-info {
  min-height: 132px;
  display: grid;
  grid-template-rows: 34px 78px 20px;
  align-items: center;
  text-align: center;
}

.music-library-page .track-card .track-info p,
.music-library-page .track-card .track-info h3,
.music-library-page .track-card .track-info span {
  margin: 0;
}

.music-library-page .track-card .track-info h3 {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.08;
}

/* ===== PREMIUM CATALOG TOOLBAR ===== */

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px auto 8px;
  width: min(1180px, calc(100% - 48px));
  flex-wrap: nowrap;
}

.catalog-toolbar-left {
  flex: 1;
  min-width: 280px;
}

.catalog-search {
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #111;
  color: #fff;
  font-size: 15px;
}

.catalog-search:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
}

.catalog-toolbar-right {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.catalog-toolbar select {
  padding: 10px 12px;
  border-radius: 12px;
  background: #161616;
  color: #fff;
  border: 1px solid rgba(212, 175, 55, 0.35);
  cursor: pointer;
}

.catalog-toolbar select:hover,
.catalog-toolbar select:focus {
  outline: none;
  border-color: #d4af37;
}

@media (max-width: 760px) {
  .catalog-toolbar,
  .catalog-toolbar-right {
    width: 100%;
  }

  .catalog-toolbar select {
    flex: 1;
    min-width: 150px;
  }
}

.track-card[hidden] {
  display: none !important;
}

.catalog-toolbar-status{
  max-width:1180px;
  width:calc(100% - 48px);
  margin:18px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d8c9a3;
  font-size:14px;
}

#catalog-count{
  letter-spacing:.08em;
  text-transform:uppercase;
}

#clear-filters{
  background:transparent;
  color:#d4af37;
  border:1px solid rgba(212,175,55,.45);
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  transition:.25s;
}

#clear-filters:hover{
  background:#d4af37;
  color:#111;
}

@media (max-width: 760px) {
  .catalog-toolbar-status{
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
  }
}

.catalog-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 20px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:18px;
    background:rgba(255,255,255,.02);
    margin-top:40px;
}

.catalog-empty[hidden] {
  display: none !important;
}

.catalog-empty h3{
    margin:0 0 12px;
    font-size:32px;
    color:#d4af37;
    letter-spacing:.05em;
}

.catalog-empty p{
    margin:0;
    max-width:520px;
    color:#cfcfcf;
    line-height:1.8;
    font-size:17px;
}

.catalog-empty strong{
    color:#d4af37;
}
/* =========================================
   CCMG ROOM PLAQUE
========================================= */

.room-plaque{
    max-width:1180px;
    margin:0 auto 36px;
    padding:34px 44px;
    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(32,24,10,.92),
            rgba(15,12,8,.96)
        );

    border:1px solid rgba(212,175,55,.35);
    border-radius:18px;

    box-shadow:
        0 0 40px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,235,170,.08);
}
.room-marquee-image{
    display:block;
    width:min(100%, 980px);
    height:auto;
    object-fit:contain;
    flex-shrink:1;

    filter:
        drop-shadow(0 18px 30px rgba(0,0,0,.55))
        drop-shadow(0 0 18px rgba(212,175,55,.16));
}

.room-plaque-small{
    display:block;
    color:#d4af37;
    font-size:12px;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.room-plaque-title{
    margin:0;
    font-size:54px;
    font-weight:800;
    letter-spacing:3px;
    color:#f6e8c6;
    text-transform:uppercase;
}

.room-plaque-subtitle{
    margin-top:18px;
    color:#cfcfcf;
    font-size:16px;
    line-height:1.8;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}
/* =========================================
   CCMG MUSIC LIBRARY — REGAL PLAQUE POLISH
========================================= */

.room-plaque{
    position:relative;
    overflow:visible;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255,215,120,.10) 0%,
            rgba(255,190,60,.035) 28%,
            transparent 58%
        ),
        linear-gradient(
            135deg,
            #090806 0%,
            #181207 32%,
            #080705 68%,
            #151005 100%
        );

    border:1px solid rgba(226,184,66,.58);

    box-shadow:
        0 22px 60px rgba(0,0,0,.55),
        0 0 30px rgba(212,175,55,.07),
        inset 0 1px 0 rgba(255,235,170,.14),
        inset 0 0 35px rgba(212,175,55,.035);
}


/* Soft museum-style spotlight */
.room-plaque::before{
    content:"";
    position:absolute;
    left:50%;
    top:-42px;
    transform:translateX(-50%);

    width:72%;
    height:95px;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,218,130,.20) 0%,
            rgba(255,196,75,.08) 32%,
            transparent 70%
        );

    filter:blur(10px);
}


/* Ornamental gold divider beneath plaque */
.room-plaque::after{
    content:"◆";
    position:absolute;

    left:50%;
    bottom:-24px;
    transform:translateX(-50%);

    width:72%;

    color:#d4af37;
    font-size:13px;
    letter-spacing:10px;
    text-align:center;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(212,175,55,.12) 8%,
            rgba(212,175,55,.60) 38%,
            transparent 38%,
            transparent 62%,
            rgba(212,175,55,.60) 62%,
            rgba(212,175,55,.12) 92%,
            transparent 100%
        );

    background-size:100% 1px;
    background-position:center;
    background-repeat:no-repeat;

    text-shadow:
        0 0 12px rgba(212,175,55,.45);
}


/* Richer plaque heading */
.room-plaque-title{
    font-family:Georgia, "Times New Roman", serif;
    font-weight:700;
    letter-spacing:5px;

    color:#f3d987;

    text-shadow:
        0 2px 0 #60420b,
        0 5px 16px rgba(0,0,0,.75),
        0 0 20px rgba(212,175,55,.18);
}


/* Refined CCMG inscription */
.room-plaque-small{
    color:#e1bd55;
    text-shadow:0 0 10px rgba(212,175,55,.22);
}


/* Slightly softer supporting text */
.room-plaque-subtitle{
    color:#ddd4c1;
    letter-spacing:.35px;
}
/* =========================================
   CCMG MUSIC LIBRARY — ARCHITECTURAL FRAME
========================================= */

.room-plaque-wrapper{
    position:relative;
    max-width:1100px;
    margin:20px auto 38px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.room-header-frame{
    display:block;
    width:100%;
    max-width:1100px;
    height:auto;
    object-fit:contain;
}
.room-header-text{
    position:absolute;
    top:60px;
    left:50%;
    transform:translateX(-50%);
    width:72%;
    text-align:center;
    pointer-events:none;
}

.room-header-title{
    font-family:"Cinzel", serif;
    font-size:3.4rem;
    font-weight:700;
    color:#e6c15a;
    letter-spacing:4px;
    text-shadow:
        0 2px 8px rgba(0,0,0,.85),
        0 0 18px rgba(212,175,55,.28);
}

.room-header-subtitle{
    margin-top:18px;
    font-size:.92rem;
    letter-spacing:2px;
    color:#d6c084;
    text-transform:uppercase;
}

.room-plaque-wrapper .room-plaque{
    margin:0;
}

.room-column{
    position:relative;
    height:210px;
    border-radius:4px;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            transparent 14%,
            transparent 86%,
            rgba(0,0,0,.55) 100%
        ),
        repeating-linear-gradient(
            90deg,
            #211506 0px,
            #5f3d0d 5px,
            #b88324 10px,
            #e2bb59 13px,
            #8a5a14 17px,
            #2a1905 22px
        );

    border-left:1px solid rgba(231,193,92,.55);
    border-right:1px solid rgba(121,76,12,.75);

    box-shadow:
        inset 8px 0 14px rgba(0,0,0,.45),
        inset -8px 0 14px rgba(0,0,0,.45),
        inset 0 0 18px rgba(255,221,130,.10),
        0 18px 40px rgba(0,0,0,.50);
}

.room-column::before,
.room-column::after{
    content:"";
    position:absolute;
    left:-9px;
    right:-9px;
    height:20px;

    background:
        linear-gradient(
            180deg,
            #e0b64f 0%,
            #68430d 45%,
            #171005 100%
        );

    border:1px solid rgba(230,190,80,.55);
    border-radius:5px;
}

.room-column::before{
    top:-10px;
}

.room-column::after{
    bottom:-10px;
}
.room-column-image{
    width:82px;
    height:auto;
    max-height:240px;
    object-fit:contain;
    flex-shrink:0;
    display:block;
    align-self:center;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.45))
        drop-shadow(0 0 14px rgba(212,175,55,.18));
}
@media (max-width: 900px){
    .room-plaque-wrapper{
        display:block;
    }

    .room-column-image{
    display:none;
}

    .room-plaque-wrapper .room-plaque{
        margin:0 auto;
    }
}
/* =========================================================
   CCMG ADMIN LICENSING DASHBOARD
   ========================================================= */

.licensing-dashboard {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #0d0d0d;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

.licensing-dashboard .track-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.licensing-dashboard h2 {
  margin: 0 0 6px;
  color: #d4af37;
  font-size: 28px;
  letter-spacing: 0.03em;
}

.licensing-dashboard .helper {
  margin: 0;
  color: #bdbdbd;
  line-height: 1.6;
}

#refreshInquiries {
  border: 1px solid #d4af37;
  border-radius: 10px;
  padding: 11px 17px;
  background: transparent;
  color: #f3d676;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

#refreshInquiries:hover {
  transform: translateY(-2px);
  background: rgba(212, 175, 55, 0.12);
}

.licensing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.licensing-stats article {
  padding: 20px;
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.licensing-stats span {
  display: block;
  margin-bottom: 8px;
  color: #b9b9b9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.licensing-stats strong {
  color: #f3d676;
  font-size: 34px;
  line-height: 1;
}

.licensing-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  margin-bottom: 22px;
}

.licensing-toolbar input,
.licensing-toolbar select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  background: #090909;
  color: #ffffff;
  font: inherit;
}

.licensing-toolbar input:focus,
.licensing-toolbar select:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.licensing-inquiry-list {
  min-height: 120px;
  padding: 18px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 900px) {
  .licensing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .licensing-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .licensing-dashboard .track-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .licensing-stats {
    grid-template-columns: 1fr;
  }

  #refreshInquiries {
    width: 100%;
  }
}

.track-admin-toolbar{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  margin-bottom:18px;
}

#adminTrackSearch{
  flex:1;
  min-width:280px;
  padding:12px 16px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:10px;
  background:#101010;
  color:#fff;
}

#tracks{
  max-height:700px;
  overflow-y:auto;
  padding-right:10px;
  border-top:1px solid rgba(212,175,55,.15);
}

.track-editor-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin-bottom:18px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:10px;
  background:#151515;
  color:#d4af37;
  font-size:17px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.track-editor-toggle:hover{
  background:#1c1c1c;
  border-color:rgba(212,175,55,.65);
}

.track-toggle-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.track-toggle-title {
  color: #f2f2f2;
  font-size: 17px;
  font-weight: 800;
}

.track-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.track-status-published {
  color: #8ee6ad;
  border-color: rgba(72, 187, 120, 0.48);
  background: rgba(72, 187, 120, 0.12);
}

.track-status-ready {
  color: #f5d66f;
  border-color: rgba(212, 175, 55, 0.58);
  background: rgba(212, 175, 55, 0.12);
}

.track-status-review {
  color: #9bc7ff;
  border-color: rgba(91, 156, 246, 0.48);
  background: rgba(91, 156, 246, 0.12);
}

.track-status-draft {
  color: #c4c4c4;
  border-color: rgba(196, 196, 196, 0.3);
  background: rgba(196, 196, 196, 0.08);
}

.track-toggle-icon {
  color: #d4af37;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.track-editor.is-collapsed > :not(.track-editor-toggle){
  display:none;
}

.track-editor.is-collapsed .track-editor-toggle{
  margin-bottom:0;
}
/* Track Workspace Tabs */
.track-workspace-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.track-tab {
  padding: 10px 16px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.92);
  color: #c7c7c7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.track-tab:hover {
  color: #f5d66f;
  border-color: rgba(212, 175, 55, 0.62);
}

.track-tab.is-active {
  color: #111111;
  border-color: #d4af37;
  background: #d4af37;
}

.track-tab-panel {
  display: none;
  grid-column: 1 / -1;
}

.track-tab-panel.is-active {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 16px;
}

.track-tab-panel[data-track-panel="review"].is-active {
  display: block;
}

.track-tab-panel[data-track-panel="review"] > * + * {
  margin-top: 18px;
}

.track-tab-panel[data-track-panel="files"].is-active > label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
}

.track-tab-panel[data-track-panel="files"] input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .track-tab-panel.is-active {
    grid-template-columns: 1fr;
  }
}

/* Music Catalog Dashboard Rows */
#tracks:not(.is-track-focused) .track-editor.is-collapsed {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

#tracks:not(.is-track-focused) .track-editor.is-collapsed .track-editor-toggle {
  margin-bottom: 0;
  padding: 18px 22px;
}

#tracks:not(.is-track-focused) .track-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

#tracks:not(.is-track-focused) .track-preview-button,
#tracks:not(.is-track-focused) .track-preview-unavailable,
#tracks:not(.is-track-focused) .track-toggle-icon {
  white-space: nowrap;
}

/* Phase 3.4 - Focused Track Workspace */
#tracks.is-track-focused {
  max-height: none;
  overflow: visible;
}

#tracks.is-track-focused .track-editor:not(.is-focused) {
  display: none;
}

#tracks.is-track-focused .track-editor.is-focused {
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 16px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(24, 24, 24, 0.98), rgba(9, 9, 9, 0.98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
}

#tracks.is-track-focused .track-editor.is-focused .track-editor-toggle {
  grid-column: 1 / -1;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 24px;
  background: #181818;
  border-color: rgba(212, 175, 55, 0.68);
}

#tracks.is-track-focused .track-editor.is-focused .track-toggle-heading {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

#tracks.is-track-focused .track-editor.is-focused .track-toggle-actions {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

#tracks.is-track-focused .track-toggle-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d4af37;
  font-size: 20px;
}

#tracks.is-track-focused .track-toggle-icon::before {
  content: "Return to Catalog";
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Phase 2.6B — Professional Licensing CRM */

.licensing-inquiry-card {
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(24, 24, 24, 0.98), rgba(10, 10, 10, 0.98));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.licensing-inquiry-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.licensing-inquiry-card__header h3 {
  margin: 10px 0 4px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.15;
}

.licensing-inquiry-submitted {
  margin: 0;
  color: #a9a39a;
  font-size: 13px;
}

.licensing-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.1);
  color: #f5d46a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.licensing-inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.licensing-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid #d4af37;
  border-radius: 9px;
  background: #d4af37;
  color: #080808;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.licensing-action-button.secondary {
  background: transparent;
  color: #f5d46a;
}

.licensing-action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.18);
}

/* Phase 2.6B — CRM Summary Grid */

.licensing-inquiry-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

.licensing-client-block,
.licensing-summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.crm-label {
  display: block;
  color: #a9a39a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.licensing-client-block strong,
.licensing-summary-item strong {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.35;
}

.licensing-client-block a {
  overflow-wrap: anywhere;
  color: #f5d46a;
  font-size: 13px;
  text-decoration: none;
}

.licensing-client-block a:hover {
  text-decoration: underline;
}

.licensing-inquiry-details {
  padding: 18px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.licensing-inquiry-details p {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .licensing-inquiry-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .licensing-inquiry-card__header {
    flex-direction: column;
  }

  .licensing-inquiry-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .licensing-inquiry-summary {
    grid-template-columns: 1fr;
  }
}

/* Phase 2.6B — Open Inquiry Case Panel */

.licensing-case-panel {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(23, 23, 23, 0.96),
      rgba(8, 8, 8, 0.98)
    );
}

.licensing-case-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.licensing-case-panel__grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.licensing-case-panel__grid strong {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  text-transform: capitalize;
}

.licensing-case-panel__grid a {
  overflow-wrap: anywhere;
  color: #f5d46a;
  font-size: 13px;
  text-decoration: none;
}

.licensing-case-panel__grid a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .licensing-case-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .licensing-case-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   CCMG CONTROL CENTER
========================================================== */

.control-center{
    margin:0 0 32px;
    padding:32px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:18px;
    background:linear-gradient(180deg,#171717,#111);
}

.control-center-heading{
    margin-bottom:28px;
}

.control-center-eyebrow{
    color:#d4af37;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:.8rem;
    margin-bottom:8px;
}

.control-center-heading h2{
    font-size:2rem;
    margin:0 0 10px;
}

.control-center-heading p{
    color:#b8b8b8;
}

.control-center-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.control-center-card{
    background:#1c1c1c;
    border:1px solid rgba(212,175,55,.25);
    border-radius:16px;
    padding:24px;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.control-center-card:hover{
    transform:translateY(-4px);
    border-color:#d4af37;
    box-shadow:0 10px 25px rgba(212,175,55,.18);
}

.control-center-number{
    display:block;
    color:#d4af37;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
}

.control-center-card strong{
    display:block;
    color:#f5f5f5;
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:.3px;
    margin:12px 0;
}

.control-center-card small{
    display:block;
    color:#d6d6d6;
    font-size:.95rem;
    line-height:1.7;
}

/* ==========================================
   Control Center Highlight Animation
========================================== */

.control-highlight{
    animation: controlFlash 1.6s ease;
}

@keyframes controlFlash{

    0%{
        box-shadow:0 0 0 rgba(212,175,55,0);
        border-color:rgba(212,175,55,.35);
    }

    25%{
        box-shadow:0 0 40px rgba(212,175,55,.65);
        border-color:#d4af37;
    }

    100%{
        box-shadow:0 0 0 rgba(212,175,55,0);
        border-color:rgba(212,175,55,.35);
    }

}
/* ==========================================
   Floating Back to Control Center Button
========================================== */

.back-to-control-center{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:9999;
    padding:14px 22px;
    border:1px solid #d4af37;
    border-radius:999px;
    background:#d4af37;
    color:#111;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;
    transform:translateY(20px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.back-to-control-center.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-control-center:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(212,175,55,.35);
}
/* ==========================================
   Phase 3.2A — Executive Business Overview
========================================== */

.executive-dashboard{
    margin:28px 0;
    padding:30px;
    border:1px solid rgba(212,175,55,.35);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.08),
            rgba(17,17,17,.96) 42%
        );
    box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.executive-dashboard-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin-bottom:26px;
}

.executive-dashboard-eyebrow{
    margin:0 0 8px;
    color:#d4af37;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.executive-dashboard-heading h2{
    margin:0 0 10px;
    color:#f5f5f5;
    font-size:2rem;
}

.executive-dashboard-heading p{
    max-width:760px;
    margin:0;
    color:#c8c8c8;
    line-height:1.7;
}

.executive-dashboard-refresh{
    flex:0 0 auto;
    padding:12px 18px;
    border:1px solid #d4af37;
    border-radius:10px;
    background:#d4af37;
    color:#111;
    font-weight:700;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.executive-dashboard-refresh:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(212,175,55,.25);
}

.executive-metrics-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.executive-metric-card{
    min-height:170px;
    padding:22px;
    border:1px solid rgba(212,175,55,.28);
    border-radius:14px;
    background:rgba(22,22,22,.92);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.executive-metric-label{
    color:#d8d8d8;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.executive-metric-card strong{
    display:block;
    margin:18px 0 12px;
    color:#d4af37;
    font-size:2.7rem;
    line-height:1;
}

.executive-metric-card small{
    color:#aaa;
    font-size:.9rem;
    line-height:1.55;
}

@media (max-width:1000px){
    .executive-metrics-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px){
    .executive-dashboard{
        padding:22px;
    }

    .executive-dashboard-heading{
        flex-direction:column;
    }

    .executive-dashboard-refresh{
        width:100%;
    }

    .executive-metrics-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   CCMG MUSIC LIBRARY — ARCHITECTURAL HEADER
   ========================================================= */

.music-library-page .ccmg-library-architecture {
  position: relative;
  width: min(1180px, calc(100% - 36px));
  margin: 12px auto 42px;
  isolation: isolate;
  color: #d9ad56;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.62));
}

/* ---------- GRAND TOP CORNICE ---------- */

.music-library-page .ccmg-arch-crown {
  position: relative;
  height: 112px;
  border-top: 5px solid #9f762c;
  border-bottom: 2px solid #5f4219;

  background:
    linear-gradient(
      to bottom,
      #21170c 0%,
      #513616 9%,
      #bd8d36 12%,
      #36230f 16%,
      #16100a 26%,
      #76501f 31%,
      #c79a42 34%,
      #27190c 39%,
      #0b0a09 100%
    );

  box-shadow:
    inset 0 2px 0 rgba(255, 222, 139, 0.65),
    inset 0 -10px 18px rgba(0, 0, 0, 0.82),
    0 6px 14px rgba(0, 0, 0, 0.55);
}

.music-library-page .ccmg-crown-line {
  position: absolute;
  left: 3%;
  right: 3%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #8f6728 8%,
    #e1b85f 50%,
    #8f6728 92%,
    transparent
  );
}

.music-library-page .ccmg-crown-line-1 {
  top: 29px;
}

.music-library-page .ccmg-crown-line-2 {
  top: 45px;
}

/* ---------- CENTER MUSICAL CREST ---------- */

.music-library-page .ccmg-arch-crest {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  width: 270px;
  height: 112px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  border: 3px solid #9c712b;
  border-radius: 52% 52% 20% 20% / 64% 64% 20% 20%;

  background:
    radial-gradient(circle at 50% 40%, #3a2a16 0%, #15100a 48%, #050505 100%);

  box-shadow:
    inset 0 0 0 2px rgba(234, 190, 94, 0.19),
    inset 0 0 26px rgba(191, 139, 44, 0.17),
    0 8px 20px rgba(0, 0, 0, 0.7);

  z-index: 6;
}

.music-library-page .ccmg-arch-crest::before,
.music-library-page .ccmg-arch-crest::after {
  content: "";
  position: absolute;
  bottom: 31px;
  width: 74px;
  height: 2px;
  background: linear-gradient(to right, transparent, #c59a43);
}

.music-library-page .ccmg-arch-crest::before {
  right: 69%;
  transform: rotate(-18deg);
  transform-origin: right center;
}

.music-library-page .ccmg-arch-crest::after {
  left: 69%;
  transform: rotate(18deg);
  transform-origin: left center;
  background: linear-gradient(to left, transparent, #c59a43);
}

.music-library-page .ccmg-crest-lyre {
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: #e7c16e;

  text-shadow:
    0 1px 0 #fff0ad,
    0 3px 0 #725019,
    0 7px 12px rgba(0, 0, 0, 0.9);
}

.music-library-page .ccmg-crest-wing {
  font-family: Georgia, serif;
  font-size: 38px;
  color: #a97a2c;
  transform: rotate(-23deg);
}

.music-library-page .ccmg-crest-wing-right {
  transform: scaleX(-1) rotate(-23deg);
}

/* ---------- MAIN ARCHITECTURAL BODY ---------- */

.music-library-page .ccmg-library-header-body {
  position: relative;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr) 122px;
  gap: 0;
  min-height: 275px;

  background:
    linear-gradient(
      90deg,
      rgba(40, 27, 14, 0.9),
      rgba(10, 9, 8, 0.96) 17%,
      rgba(6, 6, 6, 0.98) 50%,
      rgba(10, 9, 8, 0.96) 83%,
      rgba(40, 27, 14, 0.9)
    );

  border-left: 2px solid #77531e;
  border-right: 2px solid #77531e;
}

/* ---------- SIDE COLUMNS ---------- */

.music-library-page .ccmg-header-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;

  background:
    linear-gradient(
      90deg,
      #1b120b 0%,
      #4c301c 12%,
      #7d4e28 30%,
      #b17a44 48%,
      #704623 69%,
      #372117 86%,
      #160f0b 100%
    );

  box-shadow:
    inset 9px 0 12px rgba(0, 0, 0, 0.5),
    inset -9px 0 12px rgba(0, 0, 0, 0.58);
}

.music-library-page .ccmg-column-cap {
  width: 122%;
  height: 62px;

  border-top: 4px solid #d2a34d;
  border-bottom: 5px double #8f6426;

  background:
    linear-gradient(
      to bottom,
      #33200f,
      #b48238 24%,
      #553516 31%,
      #d0a14a 42%,
      #2b1b0e 51%,
      #9b6d2b 77%,
      #25170d
    );

  box-shadow:
    inset 0 2px 1px rgba(255, 234, 175, 0.4),
    0 6px 10px rgba(0, 0, 0, 0.45);
}

.music-library-page .ccmg-column-shaft {
  flex: 1;
  width: 68px;
  margin: 0 auto;

  border-left: 2px solid #8b5c2b;
  border-right: 2px solid #8b5c2b;

  background:
    linear-gradient(
      90deg,
      #321c13 0%,
      #86522f 20%,
      #b97b47 45%,
      #7d4629 69%,
      #2c1811 100%
    );

  box-shadow:
    inset 9px 0 10px rgba(255, 205, 129, 0.08),
    inset -10px 0 12px rgba(0, 0, 0, 0.4);
}

.music-library-page .ccmg-column-base {
  width: 116%;
  height: 42px;

  border-top: 4px double #bd8b37;
  border-bottom: 3px solid #604019;

  background:
    linear-gradient(
      to bottom,
      #8f6328,
      #32200f 25%,
      #c0913d 40%,
      #25170b 54%,
      #6c491d 100%
    );
}

/* ---------- TITLE CENTER ---------- */

.music-library-page .ccmg-title-architecture {
  position: relative;
  padding: 55px 35px 25px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    radial-gradient(
      ellipse at center,
      rgba(98, 68, 27, 0.16) 0%,
      rgba(0, 0, 0, 0) 63%
    );
}

.music-library-page .ccmg-title-upper-ornament {
  position: relative;
  height: 42px;
  margin-bottom: 7px;
}

.music-library-page .ccmg-title-upper-ornament::before,
.music-library-page .ccmg-title-upper-ornament::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 43%;
  height: 2px;
}

.music-library-page .ccmg-title-upper-ornament::before {
  left: 0;
  background: linear-gradient(to right, transparent, #906523, #d7aa4f);
}

.music-library-page .ccmg-title-upper-ornament::after {
  right: 0;
  background: linear-gradient(to left, transparent, #906523, #d7aa4f);
}

.music-library-page .ccmg-title-upper-ornament span {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 23px;
  height: 23px;

  transform: translateX(-50%) rotate(45deg);

  border: 2px solid #c5963d;
  background: #21170d;

  box-shadow:
    inset 0 0 0 3px #090807,
    0 0 12px rgba(206, 155, 59, 0.28);
}

/* ---------- MAIN PLAQUE ---------- */

.music-library-page .ccmg-title-plaque {
  position: relative;
  padding: 7px;

  border: 2px solid #6b4919;

  background:
    linear-gradient(
      to bottom,
      #8d6426,
      #d5aa4e 8%,
      #3b270f 12%,
      #18110a 100%
    );

  clip-path: polygon(
    2% 0,
    98% 0,
    100% 17%,
    99% 83%,
    97% 100%,
    3% 100%,
    1% 83%,
    0 17%
  );

  box-shadow:
    0 11px 20px rgba(0, 0, 0, 0.7);
}

.music-library-page .ccmg-title-inner {
  padding: 19px 26px 21px;

  border: 1px solid #a77d33;

  background:
    radial-gradient(
      ellipse at center,
      #24201a 0%,
      #11100e 58%,
      #060606 100%
    );

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4.7vw, 67px);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-align: center;
  white-space: nowrap;

  color: #e3b95f;

  text-shadow:
    0 1px 0 #fff0ae,
    0 2px 0 #b17a28,
    0 4px 0 #53340f,
    0 8px 11px rgba(0, 0, 0, 0.9);
}

/* ---------- LOWER ORNAMENT ---------- */

.music-library-page .ccmg-title-lower-ornament {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 18px 7% 10px;
}

.music-library-page .ccmg-ornament-line {
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #6c4a1e 12%,
      #d1a74e 50%,
      #6c4a1e 88%,
      transparent
    );
}

.music-library-page .ccmg-ornament-diamond {
  font-size: 14px;
  color: #d4a84c;

  text-shadow:
    0 0 9px rgba(212, 168, 76, 0.45);
}

/* ---------- SUBTITLE ---------- */

.music-library-page .ccmg-library-subtitle {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: 0.20em;
  line-height: 1.7;

  color: #b99653;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.9);
}

/* ---------- BOTTOM ARCHITECTURAL LEDGE ---------- */

.music-library-page .ccmg-architecture-footer {
  position: relative;
  height: 36px;

  border-top: 3px solid #b78935;
  border-bottom: 5px solid #5d4018;

  background:
    linear-gradient(
      to bottom,
      #2c1d0d 0%,
      #aa7a30 22%,
      #3b270f 34%,
      #c18e39 50%,
      #24170c 66%,
      #090807 100%
    );

  box-shadow:
    inset 0 2px 0 rgba(255, 221, 137, 0.3),
    0 9px 14px rgba(0, 0, 0, 0.62);
}

.music-library-page .ccmg-architecture-footer span {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 13px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c29640 16%,
      #e0b55b 50%,
      #c29640 84%,
      transparent
    );
}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  .music-library-page .ccmg-library-architecture {
    width: calc(100% - 18px);
    margin-bottom: 30px;
  }

  .music-library-page .ccmg-arch-crown {
    height: 82px;
  }

  .music-library-page .ccmg-arch-crest {
    width: 185px;
    height: 82px;
    bottom: -34px;
  }

  .music-library-page .ccmg-crest-lyre {
    font-size: 40px;
  }

  .music-library-page .ccmg-crest-wing {
    font-size: 27px;
  }

  .music-library-page .ccmg-library-header-body {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    min-height: 210px;
  }

  .music-library-page .ccmg-column-cap {
    height: 48px;
  }

  .music-library-page .ccmg-column-shaft {
    width: 34px;
  }

  .music-library-page .ccmg-title-architecture {
    padding: 43px 10px 18px;
  }

  .music-library-page .ccmg-title-inner {
    padding: 15px 7px 17px;
    font-size: clamp(23px, 7vw, 42px);
    letter-spacing: 0.035em;
  }

  .music-library-page .ccmg-library-subtitle {
    font-size: 8px;
    letter-spacing: 0.09em;
  }

}

/* =========================================================
   CCMG MUSIC LIBRARY — FINAL HEADER LAYOUT CORRECTION
   Keeps architectural header completely separate from cards
   ========================================================= */

.music-library-page .ccmg-library-architecture {
  position: relative;
  width: min(1080px, calc(100% - 50px));
  min-height: 360px;
  margin: 38px auto 70px;
  z-index: 2;
  overflow: visible;
}

/* Make the crown elegant rather than oversized */
.music-library-page .ccmg-arch-crown {
  height: 82px;
}

/* Refine the center crest */
.music-library-page .ccmg-arch-crest {
  width: 235px;
  height: 88px;
  bottom: -36px;
}

.music-library-page .ccmg-crest-lyre {
  font-size: 46px;
}

/* Main architectural body */
.music-library-page .ccmg-library-header-body {
  min-height: 250px;
  grid-template-columns: 105px minmax(0, 1fr) 105px;
}

/* Reduce the visual weight of the columns */
.music-library-page .ccmg-column-cap {
  width: 112%;
  height: 50px;
}

.music-library-page .ccmg-column-shaft {
  width: 58px;
}

.music-library-page .ccmg-column-base {
  width: 110%;
  height: 34px;
}

/* Give the title a clean protected center */
.music-library-page .ccmg-title-architecture {
  position: relative;
  padding: 50px 38px 26px;
  z-index: 5;
}

.music-library-page .ccmg-title-plaque {
  position: relative;
  z-index: 6;
}

.music-library-page .ccmg-title-inner {
  padding: 18px 22px 20px;
  font-size: clamp(35px, 4.2vw, 58px);
  letter-spacing: 0.065em;
}

/* Make subtitle refined and readable */
.music-library-page .ccmg-library-subtitle {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Architectural bottom ledge */
.music-library-page .ccmg-architecture-footer {
  height: 30px;
}

/* =========================================================
   CRITICAL:
   KEEP MUSIC CARDS BELOW THE HEADER
   ========================================================= */

.music-library-page #track-grid,
.music-library-page .track-grid {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;

  transform: none !important;

  margin-top: 0 !important;
  padding-top: 0 !important;

  z-index: 1 !important;
}

/* Prevent the catalog section itself from pulling upward */
.music-library-page .music-section {
  overflow: visible;
}

/* Give catalog breathing room after architecture */
.music-library-page .ccmg-library-architecture + #track-grid {
  margin-top: 55px !important;
}

/* Mobile correction */
@media (max-width: 760px) {

  .music-library-page .ccmg-library-architecture {
    width: calc(100% - 20px);
    min-height: 285px;
    margin: 25px auto 45px;
  }

  .music-library-page .ccmg-library-header-body {
    min-height: 205px;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .music-library-page .ccmg-column-shaft {
    width: 30px;
  }

  .music-library-page .ccmg-title-architecture {
    padding: 42px 10px 20px;
  }

  .music-library-page .ccmg-title-inner {
    font-size: clamp(22px, 7vw, 38px);
  }

  .music-library-page .ccmg-library-architecture + #track-grid {
    margin-top: 35px !important;
  }
}

/* =========================================================
   CCMG MUSIC LIBRARY — FINAL IMAGE HEADER
   ========================================================= */

.music-library-page .music-library-hero{
    width:min(1024px, calc(100% - 24px));
    margin:22px auto 22px;
}

.music-library-page .music-library-header-image{
    display:block;
    width:100%;
    height:auto;
    border-radius:14px;
    border:1px solid rgba(201,158,67,.45);

    box-shadow:
        0 20px 40px rgba(0,0,0,.55),
        0 0 28px rgba(191,146,53,.12);
}

/* keep the cards below the hero */
.music-library-page #track-grid{
    margin-top:0;
}

@media (max-width:900px){

    .music-library-page .music-library-hero{
        width:calc(100% - 20px);
        margin:22px auto 30px;
    }

}

/* =========================================================
   CCMG MUSIC LIBRARY — HERO / CATALOG DIVIDER
   ========================================================= */

.music-library-page .catalog-toolbar{
    position:relative;
    margin-top:30px;
    padding-top:22px;
}

.music-library-page .catalog-toolbar::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:min(980px, 86%);
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(146,103,28,.35) 15%,
        rgba(226,182,83,.85) 50%,
        rgba(146,103,28,.35) 85%,
        transparent
    );
    box-shadow:0 0 10px rgba(201,158,67,.16);
}

/* =========================================================
   CCMG MUSIC LIBRARY — ALIGN TOOLBAR WITH HERO
   ========================================================= */

.music-library-page .catalog-toolbar{
    width:min(1360px, calc(100% - 24px));
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}
/* =========================================================
   CCMG MUSIC LIBRARY — FULL FILTER LABELS
   ========================================================= */

.music-library-page .catalog-toolbar select{
    width:112px !important;
    min-width:112px !important;
    flex:0 0 112px;
    padding-left:14px;
    padding-right:32px;
}

.music-library-page .catalog-search{
    width:265px;
    min-width:265px;
    flex:0 0 265px;
}

/* =========================================================
   CCMG MUSIC LIBRARY — FINAL FILTER WIDTH REFINEMENT
   Prevent dropdown labels from crowding arrows
   ========================================================= */

.music-library-page .catalog-toolbar select{
    width:150px !important;
    min-width:150px !important;
    flex:0 0 150px !important;
    padding-left:14px !important;
    padding-right:38px !important;
    box-sizing:border-box;
}

.music-library-page .catalog-search{
    width:300px !important;
    min-width:300px !important;
    flex:0 0 300px !important;
}

/* =========================================================
   CCMG MUSIC LIBRARY — HERO TO CATALOG TRANSITION
   Tighten spacing and add refined gold divider
   ========================================================= */

.music-library-page .catalog-toolbar{
    margin-top:18px !important;
    padding-top:18px !important;
    border-top:1px solid rgba(212,175,55,0.34);
    position:relative;
}

.music-library-page .catalog-toolbar::before{
    content:"";
    position:absolute;
    top:-1px;
    left:50%;
    transform:translateX(-50%);
    width:38%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,0.85),
        transparent
    );
}

/* =========================================================
   CCMG ABOUT PAGE — PREMIUM HERO
   ========================================================= */

.about-hero {
    width: min(1180px, calc(100% - 48px));
    margin: 34px auto 54px;
    padding: 56px 64px 60px;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 0%, rgba(214,175,55,.10), transparent 38%),
        linear-gradient(180deg, rgba(17,15,10,.98), rgba(5,5,5,.98));

    border: 1px solid rgba(212,175,55,.42);
    border-radius: 18px;

    box-shadow:
        0 24px 60px rgba(0,0,0,.55),
        inset 0 0 55px rgba(212,175,55,.045);

    text-align: center;
}

.about-hero::before,
.about-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.82),
        transparent
    );
}

.about-hero::before {
    top: 24px;
}

.about-hero::after {
    bottom: 24px;
}

.about-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.about-hero-eyebrow {
    margin: 0 0 16px;

    color: #d4af37;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.about-hero h1 {
    margin: 0;

    color: #f4e5b8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: .96;
    font-weight: 700;
    letter-spacing: .035em;

    text-shadow:
        0 2px 0 rgba(255,255,255,.08),
        0 5px 12px rgba(0,0,0,.75),
        0 0 28px rgba(212,175,55,.12);
}

.about-hero-rule {
    width: min(520px, 75%);
    height: 1px;
    margin: 28px auto 22px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.9),
        transparent
    );
}

.about-hero-tagline {
    margin: 0 0 22px;

    color: #d4af37;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-style: italic;
    letter-spacing: .04em;
}

.about-hero-copy {
    max-width: 780px;
    margin: 0 auto 14px;

    color: #d8d1c0;
    font-size: 1.05rem;
    line-height: 1.8;
}

.about-hero-copy:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .about-hero {
        width: calc(100% - 24px);
        margin: 22px auto 36px;
        padding: 44px 24px 48px;
    }

    .about-hero h1 {
        font-size: clamp(2.5rem, 11vw, 4rem);
    }

    .about-hero-copy {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* =========================================================
   CCMG LICENSE PAGE — HEADER ALIGNMENT
   ========================================================= */

.license-page .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 5%;
}

.license-page .site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.license-page .site-nav a {
    text-decoration: none;
}

/* =========================================================
   CCMG LICENSE PAGE — HERO / FORM SPACING
   ========================================================= */

.license-page .license-hero {
    padding-bottom: 36px;
}

.license-page .license-form-section {
    padding-top: 0;
}

/* =========================================================
   PHASE 3.3 — CCMG ADMIN WORKSPACE
========================================================= */

.ccmg-admin-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  margin: 30px 0 36px;
  min-height: 620px;
}

/* Keep legacy editor sections hidden until navigation moves one into the active stage. */
#editorPanel > :not(#ccmgAdminWorkspace) {
  display: none !important;
}

.ccmg-admin-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  background:
    linear-gradient(
      180deg,
      rgba(18, 18, 18, 0.98),
      rgba(8, 8, 8, 0.98)
    );
  border: 1px solid rgba(214, 170, 58, 0.32);
  border-radius: 18px;
  padding: 24px 18px;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.ccmg-admin-sidebar-brand {
  padding: 4px 8px 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(214, 170, 58, 0.22);
}

.ccmg-admin-sidebar-eyebrow,
.ccmg-admin-workspace-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #d8ad43;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ccmg-admin-sidebar-brand h2 {
  margin: 0;
  color: #f4d26b;
  font-size: 1.28rem;
  line-height: 1.2;
}

.ccmg-admin-sidebar-brand p {
  margin: 6px 0 0;
  color: #8f8f8f;
  font-size: 0.82rem;
}

.ccmg-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccmg-admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 17px;
}

.ccmg-admin-nav-heading {
  padding: 0 10px 5px;
  color: #786c50;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.ccmg-admin-nav-btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #d7d7d7;
  padding: 12px 13px;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.ccmg-admin-nav-btn:hover {
  background: rgba(214, 170, 58, 0.075);
  border-color: rgba(214, 170, 58, 0.22);
  color: #f3cf67;
  transform: translateX(2px);
}

.ccmg-admin-nav-btn.active {
  background:
    linear-gradient(
      90deg,
      rgba(214, 170, 58, 0.18),
      rgba(214, 170, 58, 0.06)
    );
  border-color: rgba(214, 170, 58, 0.42);
  color: #f4d26b;
}

.ccmg-admin-workspace-panel {
  min-width: 0;
  border: 1px solid rgba(214, 170, 58, 0.24);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 17, 0.98),
      rgba(10, 10, 10, 0.98)
    );
  overflow: hidden;
}

.ccmg-admin-workspace-header {
  padding: 30px 34px 27px;
  border-bottom: 1px solid rgba(214, 170, 58, 0.18);
  background:
    radial-gradient(
      circle at top right,
      rgba(214, 170, 58, 0.08),
      transparent 38%
    );
}

.ccmg-admin-workspace-header h1 {
  margin: 0;
  color: #f5f2e8;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  line-height: 1.15;
}

.ccmg-admin-workspace-header p {
  max-width: 760px;
  margin: 11px 0 0;
  color: #9e9e9e;
  line-height: 1.65;
}

.ccmg-admin-workspace-stage {
  min-height: 420px;
  padding: 32px 34px;
}

.ccmg-admin-welcome {
  display: flex;
  min-height: 350px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(214, 170, 58, 0.25);
  border-radius: 16px;
  text-align: center;
  padding: 40px;
}

.ccmg-admin-welcome span {
  color: #d7ab3d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.ccmg-admin-welcome h2 {
  margin: 12px 0 0;
  color: #f1f1f1;
  font-size: 1.5rem;
}

.ccmg-admin-welcome p {
  max-width: 560px;
  margin: 12px auto 0;
  color: #8f8f8f;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .ccmg-admin-workspace {
    grid-template-columns: 1fr;
  }

  .ccmg-admin-sidebar {
    position: static;
  }

  .ccmg-admin-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ccmg-admin-nav-group {
    margin-top: 8px;
  }

  .ccmg-admin-workspace-header,
  .ccmg-admin-workspace-stage {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* =========================================================
   CCMG MEDIA PAGE
   ========================================================= */

.media-hero {
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 40px;
    background:
        radial-gradient(circle at center,
        rgba(212, 175, 55, 0.08) 0%,
        rgba(0, 0, 0, 0) 48%),
        #050505;
}

.media-hero-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    text-align: center;
    padding: 60px 70px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 22px;
    background: linear-gradient(
        145deg,
        rgba(212, 175, 55, 0.045),
        rgba(255, 255, 255, 0.012)
    );
}

.media-eyebrow {
    margin: 0 0 22px;
    color: #d4af37;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.media-hero h1 {
    margin: 0;
    color: #f5f0e6;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.media-hero-rule {
    width: 90px;
    height: 1px;
    margin: 32px auto;
    background: #d4af37;
}

.media-hero-copy {
    max-width: 760px;
    margin: 0 auto;
    color: #cfc8ba;
    font-size: 18px;
    line-height: 1.8;
}

@media (max-width: 760px) {
    .media-hero {
        padding: 40px 20px;
    }

    .media-hero-inner {
        padding: 45px 25px;
    }

    .media-hero h1 {
        font-size: clamp(42px, 13vw, 64px);
    }
}

/* =========================================================
   CCMG PUBLICATION STATUS BADGE
   ========================================================= */

.publishStatus {
  display: inline-block;
  margin-left: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(212, 175, 55, 0.65);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  color: #d4af37;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.08);
}

/* Authentication visibility safeguard */
[hidden] {
  display: none !important;
}

/* Keep authenticated Admin Editor inside the console workspace */
#editorPanel.console-only > :not(#ccmgAdminWorkspace) {
  display: none !important;
}

/* Keep administrator identity and Sign Out visible */
.admin-top {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(214, 170, 58, 0.28);
}
/* CCMG sign-out confirmation dialog */
.logout-confirm-dialog {
  width: min(520px, calc(100vw - 40px));
  max-width: 520px;
  padding: 0;
  overflow: hidden;
  color: #f6f2ea;
  background: #101010;
  border: 1px solid rgba(214, 170, 58, 0.55);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
}

.logout-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.logout-confirm-dialog form {
  display: block;
  padding: 30px;
}

.logout-confirm-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #d6aa3a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.logout-confirm-dialog h2 {
  margin: 0 0 16px;
  color: #f4d26b;
  font-size: 2rem !important;
  line-height: 1.1 !important;
}

.logout-confirm-dialog p {
  margin: 0;
  color: #d4d0c8;
  font-size: 1rem !important;
  line-height: 1.6;
}

.logout-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.logout-confirm-actions button {
  min-height: 46px;
  padding: 10px 18px;
  color: #f6f2ea;
  background: #191919;
  border: 1px solid rgba(214, 170, 58, 0.48);
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.logout-confirm-actions button:hover {
  border-color: #d6aa3a;
  transform: translateY(-1px);
}

.logout-confirm-actions .logout-confirm-yes {
  color: #090909;
  background: #d6aa3a;
  border-color: #d6aa3a;
}

/* =========================================================
   JOIN CCMG — PUBLIC ARTIST OPPORTUNITY PAGE
   ========================================================= */

.join-ccmg-page {
  min-height: 100vh;
  margin: 0;
  color: #f6f2ea;
  background:
    radial-gradient(circle at 85% 10%, rgba(214, 170, 58, 0.12), transparent 32%),
    #080808;
}

.join-ccmg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 5vw;
  background: rgba(7, 7, 7, 0.94);
  border-bottom: 1px solid rgba(214, 170, 58, 0.3);
}

.join-ccmg-brand {
  display: inline-flex;
  flex-direction: column;
  color: #f4d26b;
  text-decoration: none;
  letter-spacing: 0.12em;
}

.join-ccmg-brand span {
  color: #d6aa3a;
  font-size: 0.7rem;
  font-weight: 800;
}

.join-ccmg-brand strong {
  font-size: 1.35rem;
}

.join-ccmg-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.join-ccmg-nav a {
  color: #f6f2ea;
  font-weight: 700;
  text-decoration: none;
}

.join-ccmg-nav a:hover,
.join-ccmg-nav a[aria-current="page"] {
  color: #d6aa3a;
}

.join-ccmg-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 72px;
}

.join-ccmg-main section {
  margin-bottom: 34px;
  padding: clamp(26px, 4vw, 52px);
  background: linear-gradient(145deg, #151515, #0d0d0d);
  border: 1px solid rgba(214, 170, 58, 0.38);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.join-ccmg-eyebrow,
.join-ccmg-access-status {
  display: block;
  margin-bottom: 12px;
  color: #d6aa3a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.join-ccmg-main h1,
.join-ccmg-main h2,
.join-ccmg-main h3 {
  margin-top: 0;
  color: #f4d26b;
  line-height: 1.05;
}

.join-ccmg-main h1 {
  max-width: 760px;
  margin-bottom: 20px;
  font-size: clamp(3rem, 8vw, 7rem);
}

.join-ccmg-main h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.join-ccmg-lead {
  max-width: 800px;
  color: #d8d1c6;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7;
}

.join-ccmg-main form {
  display: grid;
  gap: 20px;
}

.join-ccmg-main label {
  display: grid;
  gap: 8px;
  color: #e4d9c5;
  font-weight: 700;
}

.join-ccmg-main input,
.join-ccmg-main select,
.join-ccmg-main textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  color: #f6f2ea;
  background: #101010;
  border: 1px solid rgba(214, 170, 58, 0.35);
  border-radius: 9px;
  font: inherit;
}

.join-ccmg-main textarea {
  min-height: 140px;
  resize: vertical;
}

.join-ccmg-main input:focus,
.join-ccmg-main select:focus,
.join-ccmg-main textarea:focus {
  outline: 2px solid #d6aa3a;
  outline-offset: 2px;
}

.join-ccmg-main button {
  min-height: 48px;
  padding: 12px 20px;
  color: #090909;
  background: #d6aa3a;
  border: 1px solid #d6aa3a;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.join-ccmg-main button:hover:not(:disabled) {
  background: #f4d26b;
  transform: translateY(-1px);
}

.join-ccmg-main button:disabled {
  color: #8e887d;
  background: #1b1b1b;
  border-color: #38332a;
  cursor: not-allowed;
  opacity: 0.75;
}

.join-ccmg-access-card {
  margin-top: 22px;
  padding: 26px;
  background: #101010;
  border: 1px solid rgba(214, 170, 58, 0.28);
  border-radius: 14px;
}

.join-ccmg-disclaimer {
  color: #a9a196;
  font-size: 0.9rem;
  line-height: 1.6;
}

.join-ccmg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 5vw;
  color: #aaa297;
  background: #070707;
  border-top: 1px solid rgba(214, 170, 58, 0.25);
}

.join-ccmg-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.join-ccmg-footer a {
  color: #d6aa3a;
  text-decoration: none;
}

@media (max-width: 760px) {
  .join-ccmg-header,
  .join-ccmg-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .join-ccmg-nav {
    justify-content: flex-start;
  }

  .join-ccmg-main {
    width: min(100% - 24px, 1180px);
    padding-top: 28px;
  }

  .join-ccmg-main section {
    padding: 24px 18px;
  }
}

/* Reduce Join CCMG hero heading size */
#joinCcmgTitle {
  font-size: clamp(3.25rem, 5.5vw, 5.75rem);
  line-height: 0.95;
}
/* Join CCMG action buttons */
.join-ccmg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.join-ccmg-primary-action,
.join-ccmg-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid #d6aa3a;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}

.join-ccmg-primary-action {
  color: #090909;
  background: #d6aa3a;
}

.join-ccmg-secondary-action {
  color: #f6f2ea;
  background: #191919;
}

.join-ccmg-primary-action:hover,
.join-ccmg-secondary-action:hover {
  transform: translateY(-1px);
}

.join-ccmg-secondary-action:hover {
  background: #252525;
}

/* Join CCMG process spacing and numbering */
.join-ccmg-actions {
  margin-bottom: 36px;
}

.join-ccmg-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.join-ccmg-steps > li {
  margin-bottom: 28px;
}