/* styles/releases.css — Release cards, track lists and the preview player.
   Extracted from the former single-file monolith. */

/* Inside narrow containers (cards), let text fill the container fully */
    .quote-card p, .track-item p, .about-pillar p, .voice-stat p { max-width: 100%; }

.track-list { display: flex; flex-direction: column; gap: var(--space-3); }

.track-item {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-4) var(--space-6);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition);
    }

.track-item:hover { background: var(--color-surface-2); border-color: var(--color-gold-dim); }

.track-item.playing { border-color: var(--color-gold); background: rgba(201,168,76,0.05); }

.track-num {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      letter-spacing: 0.1em;
      text-align: center;
    }

.track-item.playing .track-num { display: none; }

.track-item.playing .play-icon-wrap { display: flex; }

.track-info {}

.track-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-weight: 400;
      color: var(--color-text);
      line-height: 1.2;
    }

.track-subtitle {
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      letter-spacing: 0.1em;
    }

.track-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--space-2);
    }

.track-actions-row {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

.track-share-btn {
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text-faint);
      padding: var(--space-2) var(--space-3);
      border: 1px solid transparent;
      transition: color var(--transition), border-color var(--transition);
      cursor: pointer;
      white-space: nowrap;
    }

.track-share-btn:hover { color: var(--color-gold); border-color: var(--color-gold-dim); }

.track-dl-btn {
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-gold);
      padding: var(--space-2) var(--space-4);
      border: 1px solid var(--color-gold-dim);
      border-radius: var(--radius-sm);
      transition: background var(--transition), color var(--transition), border-color var(--transition);
      cursor: pointer;
      white-space: nowrap;
      background: rgba(201,168,76,0.06);
    }

.track-dl-btn:hover { background: var(--color-gold); color: var(--color-bg); border-color: var(--color-gold); }

.track-pricing {
      display: block;
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-faint);
      text-align: right;
      line-height: 1.5;
    }

.track-pricing strong { color: var(--color-gold-dim); }

/* Subscribe button — desktop visible, styled like share */
    .track-subscribe-btn {
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-gold);
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--color-gold-dim);
      border-radius: var(--radius-sm);
      background: rgba(201,168,76,0.06);
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--transition), color var(--transition);
    }

.track-subscribe-btn:hover { background: var(--color-gold); color: var(--color-bg); }

/* Mobile-only: compact button grid — hidden on desktop */
    .track-mobile-grid {
      display: none;
    }

.track-give-btn {
      display: none;
    }

@media (max-width: 640px) {
      .music-intro-row { flex-direction: column; align-items: flex-start; }
      .track-item { grid-template-columns: 40px 1fr; gap: var(--space-2); padding: var(--space-4) var(--space-4); }
      /* Hide desktop-only action column on mobile */
      .track-actions { display: none; }
      /* Show mobile button grid below track info */
      .track-mobile-grid {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-border);
      }
      .track-mobile-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 4px;
        border-radius: 4px;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        border: 1px solid var(--color-border);
        background: none;
        color: var(--color-text-muted);
        transition: border-color 0.2s, color 0.2s, background 0.2s;
        width: 100%;
      }
      .track-mobile-btn--gold {
        border-color: var(--color-gold-dim);
        color: var(--color-gold);
        background: rgba(201,168,76,0.06);
      }
      .track-mobile-btn--gold:hover { background: var(--color-gold); color: var(--color-bg); }
      .track-mobile-btn:hover { border-color: var(--color-gold-dim); color: var(--color-gold); }
      .track-mobile-btn-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        pointer-events: none;
      }
      .track-mobile-btn-sub {
        font-size: 8px;
        letter-spacing: 0.05em;
        color: var(--color-text-faint);
        text-transform: none;
      }
      /* Photo mosaic: single column on small phones */
      .photo-mosaic { grid-template-columns: 1fr; }
      .photo-item:nth-child(1) { grid-column: span 1; }
      /* Photo mosaic first item: show at natural ratio, no tall min-height */
      .photo-item:nth-child(1) img { min-height: unset; aspect-ratio: unset; width: 100%; height: auto; object-fit: unset; }
      .support-methods { grid-template-columns: repeat(3, 1fr); }
      .share-modal-box { padding: var(--space-8); }
      .share-platforms { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
      /* Quote cards: ensure single column, font sizes don't overflow */
      .quotes-grid { grid-template-columns: 1fr; }
      .quote-card img { width: 100%; height: auto; }
    }

/* ══ Module 2 — Premium Music Experience ══════════════════ */

    /* Music section wrapper */
    .music-section-v2 {
      background: var(--color-bg);
      padding: var(--space-16) 0;
      overflow: hidden;
    }

.music-section-v2 .container { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6); }

/* ── Album Hero ── */
    .album-hero {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: var(--space-10);
      align-items: center;
      max-width: 900px;
      margin: 0 auto var(--space-12);
      padding: 0 var(--space-6);
    }

.album-hero-art { position: relative; }

.album-art-frame {
      position: relative;
      width: 300px;
      height: 300px;
      border-radius: 16px;
      overflow: visible;
    }

.album-art-img {
      width: 300px;
      height: 300px;
      object-fit: cover;
      object-position: top center;
      border-radius: 16px;
      display: block;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.15);
      transition: box-shadow 0.6s ease, transform 0.6s ease;
    }

.album-art-img.playing {
      box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 40px rgba(201,168,76,0.18), 0 0 0 1px rgba(201,168,76,0.3);
      transform: scale(1.02);
    }

.album-art-glow {
      position: absolute;
      inset: -20px;
      border-radius: 24px;
      background: radial-gradient(ellipse at center, rgba(201,168,76,0.12) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.8s ease;
      pointer-events: none;
      z-index: -1;
    }

.album-art-glow.active { opacity: 1; }

/* Pulsing rings when playing */
    .album-art-playing-rings {
      position: absolute;
      inset: -4px;
      border-radius: 20px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

.album-art-playing-rings.active { opacity: 1; }

.album-art-playing-rings span {
      position: absolute;
      inset: 0;
      border-radius: 20px;
      border: 1px solid rgba(201,168,76,0.4);
      animation: ringPulse 2.4s ease-out infinite;
    }

.album-art-playing-rings span:nth-child(2) { animation-delay: 0.8s; }

.album-art-playing-rings span:nth-child(3) { animation-delay: 1.6s; }

/* Album hero info */
    .album-hero-info { display: flex; flex-direction: column; gap: var(--space-3); }

.album-hero-eyebrow {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin: 0;
    }

.album-hero-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 500;
      color: var(--color-text);
      margin: 0;
      letter-spacing: 0.02em;
      line-height: 1.1;
    }

.album-hero-volume {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin: 0;
    }

.album-hero-focus { color: var(--color-gold); }

.album-hero-tracks-count {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      color: var(--color-text-faint);
      text-transform: uppercase;
      margin: 0;
    }

.album-hero-desc {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.65;
      margin: var(--space-1) 0 var(--space-2);
      max-width: 440px;
    }

.album-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-3);
    }

/* Clean track list */
    .track-list { display: flex; flex-direction: column; gap: 2px; }

.track-item {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.18s ease;
      position: relative;
      border: 1px solid transparent;
    }

.track-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(201,168,76,0.1); }

.track-item.playing {
      background: rgba(201,168,76,0.07);
      border-color: rgba(201,168,76,0.25);
    }

.track-num {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--color-text-faint);
      text-align: center;
      width: 32px;
      transition: opacity 0.2s;
    }

.track-item.playing .track-num { display: none; }

.track-item.playing .play-icon-wrap { display: flex; }

.track-item.playing .sound-bars { display: flex; }

.track-item.playing.paused .sound-bars { animation: none; }

.track-item.playing.paused .sound-bars span { animation-play-state: paused; }

.track-info { min-width: 0; }

.track-title {
      font-family: var(--font-body);
      font-size: var(--text-sm);
      color: var(--color-text);
      margin: 0 0 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 0.2s;
    }

.track-item.playing .track-title { color: var(--color-gold); font-weight: 500; }

.track-subtitle {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      margin: 0;
    }

.track-right {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

.track-duration {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      letter-spacing: 0.05em;
      min-width: 36px;
      text-align: right;
    }

.track-play-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(201,168,76,0.3);
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.18s;
      flex-shrink: 0;
      opacity: 0;
    }

.track-item:hover .track-play-btn { opacity: 1; }

.track-item.playing .track-play-btn { opacity: 0; }

.track-play-btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: #000; }

/* ── Album Description ── */
    .album-desc-section {
      max-width: 900px;
      margin: 0 auto;
      padding: var(--space-10) var(--space-6);
      text-align: center;
    }

.album-desc-inner { max-width: 600px; margin: 0 auto; }

.album-desc-quote {
      font-family: var(--font-display);
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--color-text);
      line-height: 1.65;
      font-style: italic;
      margin: 0 0 var(--space-4);
    }

.album-desc-attr {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin: 0 0 var(--space-6);
    }

.album-desc-themes {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      justify-content: center;
    }

.album-desc-themes span {
      padding: 5px 14px;
      border-radius: 100px;
      border: 1px solid rgba(201,168,76,0.25);
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-text-faint);
      transition: all 0.2s;
    }

.album-desc-themes span:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* ── Premium Player Modal ── */
    .premium-player-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 8000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      animation: ppOverlayIn 0.35s ease;
    }

.premium-player-panel {
      background: linear-gradient(180deg, rgba(28,26,22,0.96) 0%, rgba(18,16,13,0.99) 100%);
      border-top: 1px solid rgba(201,168,76,0.2);
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 480px;
      padding: var(--space-6) var(--space-6) var(--space-8);
      position: relative;
      animation: ppPanelIn 0.4s cubic-bezier(0.22,1,0.36,1);
    }

.premium-player-close {
      position: absolute;
      top: var(--space-4);
      right: var(--space-4);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: none;
      color: var(--color-text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

.premium-player-close:hover { background: rgba(255,255,255,0.15); color: var(--color-text); }

.pp-art-wrap {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto var(--space-5);
    }

.pp-art {
      width: 180px;
      height: 180px;
      object-fit: cover;
      object-position: top center;
      border-radius: 12px;
      display: block;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      transition: box-shadow 0.5s ease, transform 0.5s ease;
    }

.pp-art.playing {
      box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 30px rgba(201,168,76,0.15);
      transform: scale(1.02);
      animation: artFloat 4s ease-in-out infinite;
    }

.pp-art-glow {
      position: absolute;
      inset: -15px;
      border-radius: 20px;
      background: radial-gradient(ellipse, rgba(201,168,76,0.15) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.6s;
      pointer-events: none;
      z-index: -1;
    }

.pp-art-glow.active { opacity: 1; }

.pp-meta { text-align: center; margin-bottom: var(--space-5); }

.pp-song-title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      color: var(--color-text);
      margin: 0 0 var(--space-1);
      transition: opacity 0.2s;
    }

.pp-artist {
      font-family: var(--font-body);
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      color: var(--color-gold);
      text-transform: uppercase;
      margin: 0 0 2px;
    }

.pp-album {
      font-family: var(--font-body);
      font-size: 0.7rem;
      color: var(--color-text-faint);
      margin: 0;
    }

/* PP progress */
    .pp-progress-section { margin-bottom: var(--space-5); }

.pp-progress-bar {
      height: 4px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      cursor: pointer;
      position: relative;
      margin-bottom: var(--space-2);
      transition: height 0.15s;
    }

.pp-progress-bar:hover { height: 6px; }

.pp-progress-fill {
      height: 100%;
      background: var(--color-gold);
      border-radius: 2px;
      width: 0%;
      transition: width 0.1s linear;
      pointer-events: none;
    }

.pp-progress-thumb {
      position: absolute;
      top: 50%;
      width: 12px;
      height: 12px;
      background: var(--color-gold);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.2s;
      left: 0%;
      pointer-events: none;
    }

.pp-progress-bar:hover .pp-progress-thumb { opacity: 1; }

.pp-times {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-body);
      font-size: 0.7rem;
      color: var(--color-text-faint);
      letter-spacing: 0.05em;
    }

/* PP controls */
    .pp-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      margin-bottom: var(--space-5);
    }

.pp-btn {
      background: none;
      border: none;
      color: var(--color-text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.18s;
      padding: 0;
      border-radius: 50%;
    }

.pp-btn:hover { color: var(--color-text); transform: scale(1.12); }

.pp-btn:active { transform: scale(0.94); }

.pp-btn-sm { width: 36px; height: 36px; }

.pp-play-pause {
      width: 56px;
      height: 56px;
      background: var(--color-gold);
      color: #000;
      border-radius: 50%;
      box-shadow: 0 4px 20px rgba(201,168,76,0.35);
      transition: all 0.18s;
    }

.pp-play-pause:hover { background: #e0bb55; transform: scale(1.08); box-shadow: 0 6px 28px rgba(201,168,76,0.45); }

.pp-shuffle.active, .pp-repeat.active { color: var(--color-gold); }

.pp-repeat.repeat-one::after {
      content: '1';
      position: absolute;
      font-size: 0.55rem;
      font-weight: 700;
      color: var(--color-gold);
    }

/* PP volume row */
    .pp-volume-row {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

.pp-vol-mute {
      background: none;
      border: none;
      color: var(--color-text-faint);
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0;
      transition: color 0.18s;
      flex-shrink: 0;
    }

.pp-vol-mute:hover { color: var(--color-gold); }

.pp-volume-bar {
      flex: 1;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      cursor: pointer;
      position: relative;
      transition: height 0.15s;
    }

.pp-volume-bar:hover { height: 5px; }

.pp-volume-fill {
      height: 100%;
      background: rgba(201,168,76,0.6);
      border-radius: 2px;
      pointer-events: none;
    }

.pp-speed-btn {
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      color: var(--color-text-faint);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.18s;
      user-select: none;
      flex-shrink: 0;
    }

.pp-speed-btn:hover { color: var(--color-gold); border-color: rgba(201,168,76,0.4); }

@media (max-width: 480px) {
      .track-item { grid-template-columns: 40px 1fr auto; padding: var(--space-3); }
      .track-duration { display: none; }
    }

.track-note {
      font-size: 0.68rem;
      color: var(--color-text-faint);
      margin-left: 4px;
    }

.track-note--gold { color: var(--color-gold); opacity: 0.8; }

/* ── Album art — warm glow ── */
    .album-art-frame {
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,174,82,0.12), 0 0 40px rgba(212,174,82,0.06) !important;
    }

.player-bar-left {
      display: flex; align-items: center; gap: 12px;
      min-width: 0; flex: 0 0 auto;
      width: clamp(160px, 22vw, 260px);
    }

.player-bar-art {
      width: 46px; height: 46px; border-radius: 3px;
      overflow: hidden; flex-shrink: 0;
      border: 1px solid rgba(212,174,82,0.2);
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }

.player-bar-art img { width:100%; height:100%; object-fit:cover; display:block; }

.player-bar-meta { min-width: 0; }

.player-bar-title {
      font-family: var(--font-display);
      font-size: 0.85rem; font-weight: 400;
      color: var(--color-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }

.player-bar-artist {
      font-family: var(--font-body);
      font-size: 0.62rem; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--color-text-faint);
      white-space: nowrap;
    }

.player-bar-center {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; gap: 6px; min-width: 0;
    }

.player-bar-progress {
      display: flex; align-items: center;
      gap: 10px; width: 100%; max-width: 520px;
    }

.player-bar-time {
      font-family: var(--font-body); font-size: 0.62rem;
      color: var(--color-text-faint); letter-spacing: 0.05em;
      white-space: nowrap; flex-shrink: 0; min-width: 30px;
    }

.player-bar-time.right { text-align: right; }

.player-bar-right {
      display: flex; align-items: center;
      gap: clamp(6px, 1vw, 16px); flex: 0 0 auto;
    }

@media (max-width: 640px) {
      .music-player-bar { height: 64px; padding: 0 12px; gap: 8px; }
      .player-bar-left { width: auto; }
      .player-bar-art { width: 38px; height: 38px; }
      .player-bar-title { font-size: 0.78rem; max-width: 110px; }
      .player-bar-artist { display: none; }
      .player-bar-time { display: none; }
      #volume-bar { display: none; }
      .player-expand-btn { font-size: 0.55rem; padding: 4px 8px; }
      .player-btn { padding: 4px; }
      .player-btn.play-pause { width: 34px; height: 34px; }
    }

/* ══ PREMIUM PLAYER MODAL ════════════════════════════════════ */
    .premium-player-overlay {
      position: fixed; inset: 0;
      background: rgba(8,6,4,0.92);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      z-index: 2000; display: none;
      align-items: center; justify-content: center; padding: 20px;
    }

.premium-player-panel {
      background: linear-gradient(160deg, #201c17 0%, #171410 60%, #120f0c 100%);
      border: 1px solid rgba(212,174,82,0.15); border-radius: 4px;
      padding: clamp(24px, 4vw, 48px);
      width: 100%; max-width: 420px;
      position: relative; display: flex;
      flex-direction: column; align-items: center; gap: 20px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,174,82,0.06);
    }

.premium-player-close {
      position: absolute; top: 16px; right: 16px;
      background: none; border: none;
      color: var(--color-text-faint); cursor: pointer;
      padding: 6px; transition: color 0.2s; border-radius: 50%;
    }

.premium-player-close:hover { color: var(--color-text); }

.pp-art-wrap { width: 100%; max-width: 260px; aspect-ratio: 1; position: relative; }

.pp-art {
      width: 100%; height: 100%; object-fit: cover;
      border-radius: 3px; display: block;
      box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,174,82,0.12);
    }

.pp-art-glow {
      position: absolute; inset: -20px;
      background: radial-gradient(circle, rgba(212,174,82,0.12) 0%, transparent 70%);
      pointer-events: none; z-index: -1;
      animation: ppGlow 3s ease-in-out infinite;
    }

.pp-meta { text-align: center; width: 100%; }

.pp-song-title {
      font-family: var(--font-display); font-size: 1.3rem;
      font-weight: 400; color: var(--color-text); margin: 0 0 4px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

.pp-artist {
      font-family: var(--font-body); font-size: 0.65rem;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--color-gold); margin: 0 0 3px;
    }

.pp-album {
      font-family: var(--font-body); font-size: 0.62rem;
      letter-spacing: 0.1em; color: var(--color-text-faint); margin: 0;
    }

.pp-progress-section { width: 100%; }

.pp-progress-bar {
      width: 100%; height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px; cursor: pointer;
      position: relative; margin-bottom: 8px;
    }

.pp-progress-fill {
      height: 100%;
      background: linear-gradient(to right, var(--color-gold), var(--color-gold-light));
      border-radius: 2px; width: 0%; pointer-events: none;
    }

.pp-progress-thumb {
      position: absolute; right: -6px; top: 50%;
      transform: translateY(-50%); width: 12px; height: 12px;
      background: var(--color-gold-light); border-radius: 50%;
      box-shadow: 0 0 8px rgba(212,174,82,0.5);
      opacity: 0; transition: opacity 0.2s; pointer-events: none;
    }

.pp-progress-bar:hover .pp-progress-thumb { opacity: 1; }

.pp-times {
      display: flex; justify-content: space-between;
      font-family: var(--font-body); font-size: 0.62rem;
      color: var(--color-text-faint);
    }

.pp-controls { display: flex; align-items: center; gap: 20px; }

.pp-btn {
      background: none; border: none; color: var(--color-text-muted);
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; padding: 8px; border-radius: 50%;
      transition: color 0.2s, transform 0.15s;
    }

.pp-btn:hover { color: var(--color-text); }

.pp-btn-sm { padding: 5px; }

.pp-active { color: var(--color-gold) !important; }

.pp-volume-row { display: flex; align-items: center; gap: 8px; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   RELEASES — authored for the rebuild. Replaces the retired full-master
   player. All values come from styles/tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

.anchor-offset { display: block; height: 0; scroll-margin-top: 90px; }

/* The section itself reuses the site-wide <section> + .container rhythm and the
   existing .section-divider / .section-heading / .section-intro treatment, so no
   bespoke section wrapper styles are defined here. */

/* ── Status + confirmation messaging ─────────────────────────────────────── */
.checkout-banner,
.release-status {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto var(--space-8);
  max-width: 60ch;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.checkout-banner[data-state="confirmed"] { border-color: var(--color-gold); color: var(--color-gold-light); }
.checkout-banner[data-state="unpaid"],
.release-status { border-color: #7a3b3b; color: #e9b4b4; background: rgba(122, 59, 59, 0.12); }

/* ── Owner library ───────────────────────────────────────────────────────── */
.library-panel {
  border: 1px solid var(--color-gold-dim, var(--color-border));
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
}
.library-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-gold);
  margin: 0 0 var(--space-4);
}
.library-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.library-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-body); font-size: var(--text-sm);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider);
}
.library-item:last-child { border-bottom: 0; }
.library-item-title { color: var(--color-text); }
.library-item-link { color: var(--color-gold); text-decoration: none; }
.library-item-link:hover, .library-item-link:focus-visible { text-decoration: underline; }

/* ── Release grid ────────────────────────────────────────────────────────── */
.release-grid { display: grid; gap: var(--space-10); }
.release-loading, .release-error {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-muted); text-align: center; padding: var(--space-12) 0;
}

.release-card {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.release-cover-wrap { position: relative; }
.release-cover {
  /* height:auto keeps every cover at its native aspect ratio. Serendipity is
     5:4 landscape while the other two are square; none of them is cropped or
     padded to force a uniform shape. */
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.release-buy[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.5);
}
.release-cover-flag {
  position: absolute; top: var(--space-2); left: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px;
  background: rgba(20, 18, 16, 0.86); color: var(--color-gold);
  border: 1px solid var(--color-gold-dim, var(--color-border));
}
.release-cover-note {
  font-family: var(--font-body); font-size: var(--text-xs);
  line-height: 1.6; color: var(--color-text-faint);
  margin: var(--space-3) 0 0;
}

.release-title {
  font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--color-text); margin: 0; line-height: 1.15;
}
.release-sub {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-gold); margin: var(--space-2) 0 0;
}
.release-desc {
  font-family: var(--font-body); font-size: var(--text-sm);
  line-height: 1.7; color: var(--color-text-muted); margin: var(--space-3) 0 0;
}

/* ── Track rows ──────────────────────────────────────────────────────────── */
.release-tracks {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  border-top: 1px solid var(--color-divider);
}
.release-track {
  display: grid;
  grid-template-columns: 34px 26px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.release-track.is-active { background: var(--color-surface-2); }
.release-track-play {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-gold);
  border: 1px solid var(--color-gold-dim, var(--color-border));
  cursor: pointer; transition: var(--transition);
}
.release-track-play:hover { background: var(--color-gold); color: var(--color-bg); }
.release-track-play:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }
.release-track-play .icon-pause { display: none; }
.release-track.is-playing .release-track-play .icon-play { display: none; }
.release-track.is-playing .release-track-play .icon-pause { display: block; }
.release-track.is-loading .release-track-play { opacity: 0.55; }

.release-track-number {
  font-family: var(--font-body); font-size: var(--text-xs);
  color: var(--color-text-faint); font-variant-numeric: tabular-nums lining-nums;
}
.release-track-title {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.release-track-preview-tag {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint);
}
.release-track-dl {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold); text-decoration: none;
  border: 1px solid var(--color-gold-dim, var(--color-border));
  border-radius: 3px; padding: 5px 10px;
}
.release-track-dl:hover, .release-track-dl:focus-visible { background: var(--color-gold); color: var(--color-bg); }

/* ── Actions ─────────────────────────────────────────────────────────────── */
.release-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4); margin-top: var(--space-6);
}
.release-unavailable, .release-owned-flag {
  font-family: var(--font-body); font-size: var(--text-xs);
  line-height: 1.6; color: var(--color-text-faint); margin: 0;
}
.release-owned-flag {
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold);
}
.release-buy[disabled] { opacity: 0.6; cursor: progress; }

/* ── Retired-purchase notices elsewhere on the page ──────────────────────── */
.support-redirect { text-align: center; margin-bottom: var(--space-12); }
.support-redirect-lede {
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7;
  color: var(--color-text-muted); max-width: 46ch; margin: 0 auto var(--space-5);
}
.community-note {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7;
  color: var(--color-text-muted); margin: var(--space-4) 0 0;
}
.community-note a { color: var(--color-gold); }
.pdf-embed-notice {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: var(--space-8); text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .release-card { grid-template-columns: 1fr; gap: var(--space-6); }
  .release-cover-wrap { max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .releases-section { padding: var(--space-16) var(--space-4); }
  .release-track { grid-template-columns: 34px 26px minmax(0, 1fr); row-gap: var(--space-2); }
  .release-track-meta { grid-column: 3; }
  .release-track-download { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .release-track-play { transition: none; }
}

.release-track-subtitle {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}