@charset "utf-8";
/* CSS Document */

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

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

    header {
      border-bottom: 1px solid #222;
      background: #050505;
    }

    .nav {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0.75rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .nav-title {
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.95rem;
      color: var(--accent);
    }

    .nav-links {
      display: flex;
      gap: 1.25rem;
      font-size: 0.9rem;
    }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
    }

    .section {
      padding-block: 2.5rem;
      border-bottom: 1px solid #222;
    }

    .section:last-of-type {
      border-bottom: none;
    }

    .section h2 {
      font-size: 1.8rem;
      margin: 0 0 0.75rem;
      color: var(--accent);
    }
    
    .hero h2 {
      font-size: 1.8rem;
      margin: 0 0 0.75rem;
      color: var(--accent);
    }

    .section p {
      max-width: 780px;
      line-height: 1.6;
      margin: 0 0 0.75rem;
    }

    /* Hero */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 2.5rem;
      align-items: center;
      padding-block: 2.5rem;
      border-bottom: 1px solid #222;
    }

    .hero-title {
      font-size: 2.4rem;
      margin: 0 0 0.5rem;
      color: var(--accent);
    }

    .hero-subtitle {
      font-size: 1.05rem;
      color: var(--muted);
      margin: 0 0 1rem;
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1.1rem;
      border-radius: 999px;
      border: 1px solid #444;
      font-size: 0.9rem;
      text-decoration: none;
      cursor: pointer;
      background: transparent;
      color: var(--fg);
    }
    .btn-primary {
      border-color: var(--accent);
      background: var(--accent);
      color: #000;
      font-weight: 600;
    }
    .btn:hover {
      filter: brightness(1.1);
      text-decoration: none;
    }

    .hero-media {
      justify-self: center;
    }

    .hero-media img {
      display: block;
      max-width: 380px;
      width: 100%;
      height: auto;
      border-radius: 16px;
    }

    /* Featured music grid */
    .music-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

    .music-card {
      border: 1px solid #222;
      border-radius: 12px;
      padding: 0.9rem;
      background: #050505;
    }

    .music-cover {
      width: 100%;
      border-radius: 8px;
      display: block;
      margin-bottom: 0.6rem;
    }

    .music-title {
      font-weight: 600;
      margin-bottom: 0.2rem;
    }

    .music-meta {
      font-size: 0.8rem;
      color: var(--muted);
      margin-bottom: 0.35rem;
    }

    .music-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      font-size: 0.8rem;
      margin-top: 0.4rem;
    }

    .pill-link {
      padding: 0.18rem 0.6rem;
      border-radius: 999px;
      border: 1px solid #333;
    }

    /* Crew teaser */
    .crew-teaser-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 1.25rem;
    }

    .crew-card {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .crew-card img {
      width: 128px;
      height: 128px;
      border-radius: 999px;
      display: block;
    }

    .crew-card-name {
      font-weight: 600;
      margin-bottom: 0.1rem;
    }

    .crew-card-role {
      font-size: 0.85rem;
      color: var(--muted);
    }

    /* Links section */
    .links-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1.5rem;
      font-size: 0.9rem;
      margin-top: 1rem;
    }

    footer {
      border-top: 1px solid #222;
      padding: 1.5rem;
      font-size: 0.85rem;
      color: var(--muted);
    }

    footer .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
    }
	  
	.footer-links {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 0.6rem 1.25rem;
	  font-size: 0.85rem;
	  color: var(--muted);
	}

	.footer-links a {
	  color: var(--muted);
	  text-decoration: none;
	  border-bottom: 1px dotted transparent;
	}

	.footer-links a:hover {
	  color: var(--accent);
	  border-bottom-color: var(--accent);
	  text-decoration: none;
}

	.feature-card {
		border: 1px solid #222;
		border-radius: 12px;
		padding: 1rem 1.1rem;
		background: #050505;
		max-width: 860px;
		margin-top: 1rem;
	  }

	  .feature-kicker {
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--muted);
		margin: 0 0 0.35rem;
	  }

	  .feature-title {
		font-size: 1.15rem;
		font-weight: 700;
		margin: 0 0 0.35rem;
		color: var(--fg);
	  }

	  .feature-meta {
		font-size: 0.85rem;
		color: var(--muted);
		margin: 0 0 0.65rem;
	  }

	  .feature-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.85rem;
	  }

    @media (max-width: 768px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
      }
      .hero-media {
        order: -1;
      }
      .nav {
        flex-direction: column;
        align-items: flex-start;
      }
      .nav-links {
        flex-wrap: wrap;
      }
    }