@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap');

.music-page-body {
   background: var(--c-black, #0e0b08);
   min-height: 100vh;
   color: var(--c-text, #a89070);
   font-family: 'Lora', Georgia, serif;
}

.music-main-inner {
   max-width: 1140px;
   margin: 0 auto;
   padding: 0 1.25rem 3rem;
}

.blog-page-body .blog-main-section.news.main {
   padding-bottom: 4rem;
}

.music-page-body .blog-nav,
.music-page-body .music-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
   background: rgba(14, 11, 8, 0.92);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(180, 140, 80, 0.12);
   padding: 1rem 1.75rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.music-page-body .music-nav .nav-logo {
   font-family: 'Bebas Neue', serif;
   font-size: clamp(0.95rem, 2.5vw, 1.15rem);
   color: var(--c-dust, #c4a870);
   letter-spacing: 0.14em;
   text-decoration: none;
   text-shadow: 0 0 8px rgba(180, 140, 80, 0.35);
}

.music-page-body .music-nav .nav-logo:hover {
   color: var(--c-amber, #d4a843);
}

.music-page-body .music-nav .nav-links {
   list-style: none;
   display: flex;
   gap: 1.25rem;
   flex-wrap: wrap;
   justify-content: flex-end;
   margin: 0;
   padding: 0;
}

.music-page-body .music-nav .nav-links a {
   font-size: 0.65rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--c-text, #a89070);
   font-style: italic;
   text-decoration: none;
}

.music-page-body .music-nav .nav-links a:hover,
.music-page-body .music-nav .nav-links a.active {
   color: var(--c-sepia, #b48c50);
}

.music-page-body .nav-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
}

.music-page-body .nav-toggle span,
.music-page-body .nav-toggle span::before,
.music-page-body .nav-toggle span::after {
   display: block;
   width: 22px;
   height: 1.5px;
   background: var(--c-sepia, #b48c50);
   position: relative;
}

.music-page-body .nav-toggle span::before,
.music-page-body .nav-toggle span::after {
   content: '';
   position: absolute;
}

.music-page-body .nav-toggle span::before { top: -7px; }
.music-page-body .nav-toggle span::after { top: 7px; }

@media (max-width: 640px) {
   .music-page-body .nav-toggle { display: block; }
   .music-page-body .music-nav .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background: rgba(14, 11, 8, 0.98);
      padding: 1rem 1.75rem;
      border-bottom: 1px solid rgba(180, 140, 80, 0.15);
   }
   .music-page-body .music-nav .nav-links.open { display: flex; }
}

.music-hero {
   padding: 7rem 1.5rem 3rem;
   text-align: center;
   background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(180, 140, 80, 0.06) 0%, transparent 55%),
      var(--c-black, #0e0b08);
}

.music-hero .eyebrow {
   font-size: 0.65rem;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--c-blood, #9e2535);
   display: block;
   margin-bottom: 0.75rem;
}

.music-hero h1 {
   font-family: 'Bebas Neue', serif;
   font-size: clamp(1.75rem, 4vw, 2.75rem);
   letter-spacing: 0.12em;
   color: var(--c-dust, #c4a870);
   margin: 0 0 0.75rem;
}

.music-hero .lead {
   max-width: 36rem;
   margin: 0 auto;
   font-style: italic;
   font-size: 0.95rem;
   line-height: 1.7;
   color: rgba(168, 144, 112, 0.85);
}

.music-scroll-hint {
   margin-top: 1.5rem;
   font-size: 0.68rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
}

.music-scroll-hint a {
   color: var(--c-sepia, #b48c50);
   text-decoration: none;
}

.music-scroll-hint a:hover {
   color: var(--c-amber, #d4a843);
}

.music-videos-section {
   background: var(--c-deep, #130f0b);
   padding: 3rem 0 4rem;
   border-top: 1px solid rgba(180, 140, 80, 0.12);
}

.music-videos-section .container {
   max-width: 960px;
}

.music-videos-section .section-eyebrow {
   display: block;
   text-align: center;
   font-size: 0.68rem;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--c-blood, #9e2535);
   margin-bottom: 0.5rem;
}

.music-videos-section h2 {
   text-align: center;
   font-family: 'Bebas Neue', serif;
   font-size: clamp(1.25rem, 3vw, 1.85rem);
   letter-spacing: 0.1em;
   color: var(--c-dust, #c4a870);
   margin-bottom: 0.5rem;
}

.music-videos-lead {
   text-align: center;
   font-size: 0.88rem;
   max-width: 34rem;
   margin: 0 auto 2rem;
   line-height: 1.65;
   font-style: italic;
}

.music-video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
   gap: 1.5rem;
   align-items: start;
}

.music-video-card {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.music-video-label {
   font-size: 0.68rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--c-sepia, #b48c50);
   text-align: center;
}

.music-video-frame {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   border: 1px solid rgba(180, 140, 80, 0.2);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
   background: rgba(14, 11, 8, 0.8);
}

.music-video-frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.music-video-empty {
   text-align: center;
   color: rgba(168, 144, 112, 0.75);
   font-size: 0.9rem;
}

.music-release-grid .block-album-card {
   transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.music-release-grid .block-album-card:hover {
   transform: translateY(-4px);
}

.music-details-section {
   padding: 3rem 0 4rem;
}

.music-details-section > .container {
   max-width: 820px;
}

.music-details-section .section-head {
   text-align: center;
   margin-bottom: 2.5rem;
}

.music-details-section .section-head .eyebrow {
   font-size: 0.65rem;
   letter-spacing: 0.26em;
   text-transform: uppercase;
   color: var(--c-blood, #9e2535);
}

.music-details-section .section-head h2 {
   font-family: 'Bebas Neue', serif;
   font-size: clamp(1.35rem, 3vw, 2rem);
   letter-spacing: 0.08em;
   color: var(--c-dust, #c4a870);
   margin: 0.5rem 0 0;
}

.release-block {
   margin-bottom: 3.5rem;
   padding-bottom: 2rem;
   border-bottom: 1px solid rgba(180, 140, 80, 0.12);
}

.release-block:last-child {
   border-bottom: none;
   margin-bottom: 0;
}

.release-block h3 {
   font-family: 'Trahuma', 'Lora', serif;
   font-size: clamp(1.25rem, 3vw, 1.75rem);
   font-style: italic;
   color: var(--c-blood, #9e2535);
   margin: 0 0 0.35rem;
}

.release-block .release-sub {
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--c-text-dim, rgba(168, 144, 112, 0.55));
   margin-bottom: 1rem;
}

.release-block .release-links {
   margin-bottom: 1.25rem;
}

.release-block .release-links a {
   font-size: 0.72rem;
   letter-spacing: 0.12em;
   font-style: italic;
   color: var(--c-sepia, #b48c50);
   margin-right: 1rem;
}

.track-data {
   margin-top: 1rem;
}

.track-data details {
   border: 1px solid rgba(180, 140, 80, 0.15);
   background: rgba(26, 20, 16, 0.45);
   margin-bottom: 0.65rem;
}

.track-data summary {
   cursor: pointer;
   padding: 0.85rem 1rem;
   font-size: 0.68rem;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--c-dust, #c4a870);
   list-style: none;
}

.track-data summary::-webkit-details-marker {
   display: none;
}

.track-data summary::after {
   content: "+";
   float: right;
   color: var(--c-sepia, #b48c50);
}

.track-data details[open] summary::after {
   content: "\2212";
}

.track-data-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   gap: 0.65rem;
   padding: 0 1rem 1rem;
}

.track-data-item {
   padding: 0.65rem 0.75rem;
   border: 1px solid rgba(180, 140, 80, 0.1);
   background: rgba(14, 11, 8, 0.5);
}

.track-data-label {
   display: block;
   font-size: 0.58rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: rgba(168, 144, 112, 0.45);
   margin-bottom: 0.35rem;
}

.track-data-value {
   font-size: 0.82rem;
   color: var(--c-text-light, #c8aa88);
   line-height: 1.45;
}

.music-footer {
   padding: 2rem 1.5rem;
   text-align: center;
   border-top: 1px solid rgba(180, 140, 80, 0.1);
   font-size: 0.75rem;
   color: rgba(168, 144, 112, 0.5);
}

.music-footer a {
   color: var(--c-sepia, #b48c50);
   text-decoration: none;
}

.music-page-body .loader {
   position: fixed;
   inset: 0;
   background: var(--c-black, #0e0b08);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
}

.music-page-body .loader svg {
   animation: music-spin 1.3s linear infinite;
}

@keyframes music-spin {
   to { transform: rotate(360deg); }
}