html {
  scroll-behavior: smooth;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Figtree", sans-serif;
    background:#0E0E0F;
  }
  h1,
  h2,
  h3, 
  h4 {
     font-family: "Outfit", sans-serif;
     font-weight:600;
     line-height:120%;
  }
  h1 {
     font-size: 4em;
  }
  h2 {
     font-size:2.5em;
  }
  h3 {
     font-size:2em;
  }
  h4 {
     font-size:1.5em;
  }
  p {
     font-size:1em;
     font-family: "Figtree", sans-serif;
     font-weight:300;
     line-height:150%;
  }
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
.large {
    font-size:1.2em;
  }
.container-flex {
    overflow: hidden;
    padding: 0 30px 0 0;
    display:flex;
    align-items:initial;
    justify-content:center;
    gap:0;
  }
.hero {
    height:95vh;
    overflow:hidden;
    background:url("/imgs/band.jpg") center no-repeat #222;
    background-size:cover;
    color:#fff;
  }
.overlay {
    background:rgba(0,0,0,0.4);
    /padding:80px;
    height:100%;
  }
.hero-grid-container {
    display:grid;
    grid-template-columns:60px auto 60px;
    grid-template-rows:70px auto 60px;
    overflow:hidden;
    align-items: stretch;
  }
:root {
    --border: 1px solid rgba(256,256,256,0.1);
    --shadow-sm: 0 0.5rem 1rem rgba(0,0,0,0.2);
    --shadow-md: 0 1rem 2rem rgba(0,0,0,0.2);
    --shadow-lg: 0 1rem 2.5rem rgba(0,0,0,0.2);
  }
.corner-top-left{
    grid-column-start:1;
    grid-row-start:1;
    border-bottom: var(--border);
  }
.top-center{
  grid-column-start:2;
    grid-row-start:1;
    border-bottom: var(--border);
}
.menu-top {
    border-bottom: var(--border);
    text-align:center;
    position: fixed;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: none;
    transition: background-color 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease, border-color 200ms ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 12px;
    width:100%;
  }
  
.menu-links a {
    color:#CBBAEF;
    text-decoration:none;
    font-size:1.15em;
    letter-spacing:5%;
    padding:1.25em;
  
  }
.menu-links a:hover{
    color:#BAEFD7;
    transition: color 500ms linear;
     -webkit-transition: color 500ms linear;
  }

.menu-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #e5e7eb;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
  }
.menu-toggle .bar { 
  display:block; 
  width:20px; 
  height:1.5px; 
  background:#e5e7eb; 
  margin:5px 0; 
}
.menu-links { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}
.hero-content {
    grid-column-start: 2;
    grid-column-end:4;
    grid-row-start: 2;
    padding:2.5em;
    border-bottom: var(--border);
    border-left: var(--border);
    text-align:center;
  }
.socials {
  display:flex;
  justify-content:center;
  gap:1rem;
  padding-top:2rem;
}
.social-link {
  padding:0.75rem;
  background:rgba(256,256,256,0.3);
  color:black;
  border-radius:1rem;
  backdrop-filter:blur(4px);
  border:1px solid rgba(256,256,256,0.3);
  transition: background 300ms ease, color 300ms ease;
}
.social-link:hover {
  background:rgba(0,0,0,0.3);
  color:#BAEFD7;
  transition: background 300ms ease, color 300ms ease;
  border:none;
  margin:1px;
}
.logo-main { 
    height: 320px; 
    width: auto; 
    display: inline-block; 
    mix-blend-mode: soft-light; 
    -webkit-mask-image: none; 
    mask-image: none; 
    filter: none; 
    margin: 6px 0 18px; 
}

.brand {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    letter-spacing: 0.15em;
    font-size: 5em;
    margin: 0 0 32px 0;
    text-shadow: 0 6px 30px rgba(0,0,0,0.6);
  }

.platforms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 5rem;

  }
.platform:hover {
	filter:sepia(100);
	box-shadow: 0 8px 24px rgba(0,0,0,0.2);
	transition:filter 500ms ease, box-shadow 300ms ease;
}
.platforms .platform { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 

}
.platforms img { 
  height: 28px; 
  filter: none; 
  display:block; 
}
.platforms img[alt="Tidal"] { height: 22px; }
.platforms img[alt="Deezer"] { height: 24px; }
.platforms img[alt="Apple Music"] { height: 24px; }
.platforms img[alt="YouTube Music"] { height: 22px; }
.corner-bottom-left{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    border-top: var(--border);
    border-right: var(--border);
  }
.music {
    background:#151216;
    color:#fafafa;
    width:100%;
  }
.card {
    padding:24px;
    background:#222;
    border: 1px solid rgba(256,256,256,0.1);
    border-radius:0em;
    width: calc(33% - 0px);
}
.albums {
  padding: 4rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  border-left: 1px solid rgba(256,256,256,0.1);
  border-right: 1px solid rgba(256,256,256,0.1);
  }
.album-card .cover { 
    aspect-ratio: 1 / 1; 
    background:#111; 
    overflow:hidden; 
    border:1px solid rgba(256,256,256,0.1);
    border-radius:0.25rem;
    box-shadow: 0px 40px 80px -20px rgba(58, 105, 138, 0.15), 0px 32px 64px -16px rgba(183, 89, 90, 0.15);
  z-index:10;
  position:relative;
}
.album-card .cover img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block; 

}
.album-meta { 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    padding-top:1.5rem; 
    border-top:1px solid rgba(255,255,255,0.06); 
    position:inherit;
    z-index:9;
}
.btn-secondary { 
    background:rgba(0,0,0,0.4); 
    font-size:1rem;
    text-align:center;
    text-decoration:none;
    color:#e5e7eb; 
    border:1px solid rgba(255,255,255,0.2);
    padding:16px 24px; 
    border-radius:0.25rem;
    cursor:pointer; 
    width:100%;
}
.btn-secondary:hover { 
    background:#17171B; 
    transition: background 300ms linear;
}
.btn-primary { 
    background:#7CBD8F; 
    font-size:1rem;
    text-align:center;
    text-decoration:none;
    color:#000;
    border:1px solid rgba(256,256,256,0.3);
    padding:16px 24px; 
    border-radius:4px;
    cursor:pointer; 
    width:100%;
}
.btn-primary:hover { 
    background:#CBBAEF;
    transition: background 300ms linear;  
}
.two-ctas {
  display:flex;
  gap:24px;
}
.videos { 
    background: #17171B; 
    color:#e5e7eb; 
    padding: 56px 24px 80px; 
}
.videos h2 { 
    text-align:center; 
    margin: 0 0 24px 0; 
    color:#d9d9e6; 
}
.video-grid-container {
    margin: auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1.25fr 1.25fr 0.75fr 0.75fr;
    column-gap: 1rem;
    row-gap: 1rem;
    overflow:hidden;
    align-items: stretch;
    min-height:800px;
    max-width:1300px;
  }
.video1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  border-radius:1rem;
  box-shadow: var(--shadow-lg);
}
.video2 {
  grid-column-start: 3;
  grid-column-end: end;
  grid-row-start: 1;
  grid-row-end: 2;
  border-radius:1rem;
  box-shadow: var(--shadow-sm);
}
.video3 {
  grid-column-start: 3;
  grid-column-end: end;
  grid-row-start: 2;
  grid-row-end: 3;
  border-radius:1rem;
  box-shadow: var(--shadow-sm);
}
.video4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: end;
  border-radius:1rem;
  box-shadow:  var(--shadow-sm);
}
.video5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: end;
  border-radius:1rem;
  box-shadow: var(--shadow-sm);
}
.video6 {
  grid-column-start: 3;
  grid-column-end: end;
  grid-row-start: 3;
  grid-row-end: end;
  border-radius:1rem;
  box-shadow: var(--shadow-sm);
}
  /* subtle diagonal lines like in the mock */
  .videos::before, .videos::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image: linear-gradient(115deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(155deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 140px 140px, 220px 220px;
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  }

.bio-container {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
}
.bio {
  position:relative;
  margin-top:-200px;
  margin-left:80px;
  margin-right:80px;
  margin-bottom:80px;
  max-width:1200px;
  background:#0D0D0D;
  color:white;
  text-align:left;
  padding:7.5rem;
  border: 1px solid rgba(256,256,256,0.1);
  
}

 /* Responsive: tablets */
 @media (max-width: 1024px) {
   h1 { font-size: 3em; }
   h2 { font-size: 2.1em; }
   h3 { font-size: 1.6em; }

   .hero { height: 95vh; }
   .hero-content { padding: 2em; }
.platforms { 
  gap: 2rem; 
  flex-wrap:wrap;
  }
   .menu-links a { padding: 1em; font-size: 1.05em; }

  .albums { grid-template-columns: repeat(2, 1fr); }

.menu-toggle {
  display:block;
}

/* burger bars */
.menu-toggle .bar {
  height: 1.5px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* when menu is open, add .open to button */
.menu-toggle.open .bar:nth-child(1) {
  transform: rotate(45deg) translateY(4px) translateX(4px);
}

.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-5px) translateX(5px);
}   
  .menu-top { 
    justify-content: space-between; 
    padding: 0.5em 1em; 
   }
  .menu-links { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 56px; 
    background: rgba(15,15,20,0.92); 
    border-bottom: 1px solid rgba(255,255,255,0.10);     transform: translateY(-120%); 
    transition: transform 220ms ease; 
    display:flex; 
    flex-direction: column; 
    gap: 4px; 
    padding: 8px 0; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
   }
  .menu-links.open { 
    transform: translateY(0); 
   }
.video-grid-container {
    margin: 0;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
    overflow:hidden;
    align-items: stretch;
    min-height:0;
  }
   .bio {
  position:relative;
  margin-top:-400px;
  margin-left:60px;
  margin-right:60px;
  margin-bottom:80px;
  max-width:1200px;
  background:#0D0D0D;
  color:white;
  text-align:left;
  padding:5rem;
  border: 1px solid rgba(256,256,256,0.1);
}
 }
 /* Responsive: phones */
 @media (max-width: 640px) {
   h1 { font-size: 2.2em; }
   h2 { font-size: 1.8em; }
   h3 { font-size: 1.35em; }
   p  { font-size: 0.95em; }
   .large { font-size: 1.05em; }

   .hero { height: 95vh; }
   .hero-grid-container {
     grid-template-columns: 0px 100% 0px;
     grid-template-rows: 48px auto 48px;
   }
  .menu-top { padding: 0.5em 0.75em; }
  .menu { white-space: nowrap; overflow-x: visible; }
  .menu-links a { padding: 0.75em; font-size: 1em; }

   .hero-content { padding: 1.25em; }
  .logo-main { height: 200px; width: auto; margin: 2px 0 14px; }

  .platforms { 
  gap: 2rem; 
  
  }
  .platforms img { height: 22px; }
  .platforms img[alt="Apple Music"] { height: 20px; }
  .platforms img[alt="Deezer"] { height: 20px; }
  .albums { grid-template-columns: 1fr; gap: 18px; padding: 24px 12px; }
   .album-card {
     margin-bottom: 1.5rem;
   }
  .videos { padding: 40px 12px 56px; }
   .video-grid-container {
    margin: 0;
    display:flex;
    flex-wrap: wrap;
     min-height:1400px;
  }
 .bio {
  position:relative;
  margin-top:-300px;
  margin-left:16px;
  margin-right:16px;
  margin-bottom:24px;
  max-width:1200px;
  background:#0D0D0D;
  color:white;
  text-align:left;
  padding:2rem;
  border: 1px solid rgba(256,256,256,0.1);
}
 }