:root {
      --bg: #050609;
      --bg-alt: #0f1117;
      --accent: #c73535;
      --accent-soft: #f25252;
      --text: #f5f5f5;
      --muted: #9ca3af;
      --border: #1f2933;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    a {
      color: var(--accent-soft);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .page {
      max-width: 900px;
      margin: 0 auto;
      padding: 2.5rem 1.5rem 3rem;
    }

    header {
      border-bottom: 1px solid var(--border);
      padding-bottom: 1.5rem;
      margin-bottom: 2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    header h1 {
      font-size: 2.4rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin: 0;
    }

    /* Brand row: logo + title */
    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
    }

    .site-brand img.logo {
      height: 100px;
      width: auto;
      display: block;
    }

    .tagline {
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
    }

    .meta-line {
      font-size: 0.95rem;
      color: var(--muted);
      margin-top: 0.3rem;
    }

    .pill {
      border-radius: 999px;
      border: 1px solid var(--accent);
      padding: 0.35rem 0.9rem;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

    .pill span.dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: var(--accent);
      display: inline-block;
    }

    section {
      margin-bottom: 2rem;
      padding: 1.5rem;
      border-radius: 0.75rem;
      background: radial-gradient(circle at top left, rgba(199, 53, 53, 0.12), transparent 55%), var(--bg-alt);
      border: 1px solid var(--border);
    }

    section h2 {
      margin-top: 0;
      font-size: 1.25rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.4rem;
      margin-bottom: 0.9rem;
    }

    .two-col {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 2rem;
    }

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

    .list-compact li {
      margin-bottom: 0.35rem;
    }

    .label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--muted);
      margin-bottom: 0.35rem;
    }

    .link-block {
      margin-bottom: 0.4rem;
      font-size: 0.95rem;
      word-break: break-all;
    }

    .grid-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.75rem 1.5rem;
    }

    /***********/

    /* Album card + tracks */
    .album-card {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      margin-bottom: 2rem;
    }

    .album-cover {
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--border);
      flex-shrink: 0;
      background: #000;
    }

    .album-info h3 {
      margin: 0 0 0.4rem 0;
      font-size: 1.1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .track-list {
      list-style: none;
      padding: 0;
      margin: 0.6rem 0 0 0;
      display: grid;
      gap: 0.6rem;
    }

    .track {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      padding: 0.45rem;
      border-radius: 6px;
    }

    .track-toggle {
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      color: var(--text);
      font-weight: 700;
      padding: 0;
      cursor: pointer;
      font-size: 0.98rem;
    }

    .track-toggle:focus {
      outline: 2px solid rgba(199, 53, 53, 0.25);
      outline-offset: 3px;
    }

    .track-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.28s ease;
      /* margin-top: 0.55rem; */
      padding-right: 0.15rem;
    }

    /* When open we allow scrolling inside the panel */
    .track-details.open {
      max-height: 220px;
      /* adjust if you want larger panel */
      overflow: auto;
    }

    /* Small tweak for mobile layout */
    @media (max-width: 720px) {
      .album-card {
        flex-direction: row;
      }

      .album-cover {
        width: 140px;
        height: 140px;
      }
    }

    .band-members-list {
      list-style: none;
      padding-left: 0;
      margin: 0.4rem 0 0;
    }

    .band-members-list li {
      margin-bottom: 0.25rem;
    }

    .highlight {
      color: var(--accent-soft);
    }

    .small {
      font-size: 0.9rem;
    }

    footer {
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--muted);
      text-align: center;
    }

    @media (max-width: 720px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }

      .two-col {
        grid-template-columns: 1fr;
      }
    }