:root {
      --bg-dark: #0f0f0f;
      --bg-light: #1b1b1b;
      --accent: #e63946;
      --text-main: #f1f1f1;
      --text-muted: #b5b5b5;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

    body {
      background: var(--bg-dark);
      color: var(--text-main);
      line-height: 1.6;
    }

    /* HEADER WITH IMAGE + LOGO */
header {
  block-size: 90vh;
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.65),
      rgba(0, 0, 0, 0.65)
    ),
    url("D:\SocialStrangersWebsite\Images\20260109_SocialStrangers 2.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.header-logo {
  max-inline-size: 420px;
  inline-size: 80%;
}

.header-image {
  margin-block-start: 25px;
  max-inline-size: 800px;
  inline-size: 80%;
  opacity: 0.85;
}

/* Optional: slightly smaller logo on very small screens */
@media (max-width: 480px) {
  .header-logo {
    max-inline-size: 300px;
  }
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-tagline {
  margin-block-start: 20px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.about-us {
  margin: 10px;
  margin-block-start: 20px;
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--text-muted);
  writing-mode: vertical-lr; /* left to right columns */
  text-orientation: upright; /* keeps letters upright */
}

    header h1 {
      font-size: 4rem;
      letter-spacing: 4px;
    }

    header p {
      color: var(--text-muted);
      margin-block-start: 15px;
      font-size: 1.3rem;
    }

    nav {
      background: var(--bg-light);
      padding: 15px;
      position: sticky;
      inset-block-start: 0;
      z-index: 10;
    }

    nav ul {
      display: flex;
      justify-content: center;
      gap: 30px;
      list-style: none;
    }

    nav a {
      color: var(--text-main);
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s;
    }

    nav a:hover {
      color: var(--accent);
    }

    section {
      padding: 70px 20px;
      max-inline-size: 1100px;
      margin: auto;
    }

    h2 {
      text-align: center;
      margin-block-end: 40px;
      font-size: 2.2rem;
      letter-spacing: 2px;
    }

    h3 {
      text-align: center;
      margin-block-end: 20px;
      font-size: 1.2rem;
      letter-spacing: 2px;
    }

    .gig-list {
      display: grid;
      gap: 20px;
    }

    .gig {
      background: var(--bg-light);
      padding: 20px;
      border-inline-start: 4px solid var(--accent);
    }

    .gig span {
      color: var(--text-muted);
    }

    .music iframe,
    .videos iframe {
      inline-size: 100%;
      block-size: 380px;
      border: none;
      margin-block-end: 30px;
    }

    .audio-player {
      margin: 15px auto;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5px;
    }
    
    .audio-player audio {
      inline-size: 180px;
    }
    .music-links {
      text-align: center;
      margin-block-end: 20px;
      font-size: 0.8rem;
      letter-spacing: 2px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
    }

    .gallery img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .gallery img:hover {
      filter: grayscale(0%);
    }

    .raye {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
    }

    .raye img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .raye img:hover {
      filter: grayscale(0%);
    }

    .adrian {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
    }

    .adrian img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .adrian img:hover {
      filter: grayscale(0%);
    }

    .uber {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
    }

    .uber img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .uber img:hover {
      filter: grayscale(0%);
    }

    .mish {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
    }

    .mish img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.3s;
    }

    .mish img:hover {
      filter: grayscale(0%);
    }

    .contact {
      block-size: 90vh;
      padding: 40px;
      color: #fff;  
    }

    footer {
      background: var(--bg-light);
      text-align: center;
      padding: 30px 20px;
      color: var(--text-muted);
      font-size: 0.9rem;
    }

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