:root{
  --bg:#eef5fb;
  --bg2:#e4eef8;
  --text:#122033;
  --muted:rgba(18,32,51,0.76);
  --muted2:rgba(18,32,51,0.58);
  --stroke:rgba(18,32,51,0.10);
  --card:rgba(255,255,255,0.72);
  --card2:rgba(255,255,255,0.58);
  --accent:#1f86d9;
  --accent2:#69b7ef;
  --shadow:0 18px 60px rgba(16,32,56,0.12);
  --radius:18px;
  --radius2:14px;
  --max:1180px;
  --headerH:72px;
  --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  text-shadow:none;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.bg-img{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url("/images/abstract-light-home.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  filter: blur(1px) brightness(0.90) contrast(1.12);
}

/*
 * Album-art backdrop. The cover is square and highly saturated, so it gets
 * blurred hard, desaturated and lifted toward white. The point is a hint of
 * the record's colour, not a recognisable image. Scaled up so the blur never
 * reveals a soft edge at the viewport rim.
 */
.bg-img.bg-album{
  transform:scale(1.22);
  filter:blur(56px) saturate(0.75) brightness(1.14) contrast(0.94);
  opacity:0.75;
}

.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.42), transparent 54%),
    radial-gradient(circle at center, transparent 66%, rgba(18,32,51,0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.40));
  pointer-events:none;
}

/*
 * Wash over album art. Tuned so the artwork reads as a hint of colour while
 * keeping enough white behind the translucent cards for text to stay legible.
 * Push these alphas down and contrast starts to suffer, on artwork nobody has
 * reviewed yet.
 */
.bg-img.bg-album ~ .bg-overlay{
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,0.40), transparent 58%),
    radial-gradient(circle at center, transparent 60%, rgba(18,32,51,0.10)),
    linear-gradient(180deg, rgba(236,245,252,0.42), rgba(255,255,255,0.54));
}

.skipLink{
  position:absolute;
  top:10px;
  left:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.92);
  color:var(--text);
  border:1px solid rgba(18,32,51,0.14);
  border-radius:12px;
  transform:translateY(-140%);
  transition:transform .12s ease;
  z-index:9999;
  box-shadow:0 8px 30px rgba(16,32,56,0.10);
}
.skipLink:focus{ transform:translateY(0); }

.siteHeader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--headerH);
  z-index:1000;
  background:rgba(255,255,255,0.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(18,32,51,0.08);
  box-shadow:0 4px 20px rgba(18,32,51,0.04);
}

.headerInner{
  max-width:var(--max);
  height:100%;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
}

.brandLink{
  display:flex;
  align-items:center;
}

.brandLogo{
  height:46px;
  width:auto;
  display:block;
}

.headerNav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.navLink{
  padding:10px 8px;
  border-radius:12px;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  transition:background .12s ease, color .12s ease, transform .06s ease;
}

.navLink:hover{
  background:rgba(18,32,51,0.06);
  color:var(--text);
  transform:translateY(-1px);
}

.navEmphasis{
  background:rgba(31,134,217,0.10);
  border:1px solid rgba(31,134,217,0.18);
  color:var(--accent);
  font-weight:600;
}

.navEmphasis:hover{
  background:rgba(31,134,217,0.16);
  color:var(--accent);
}

.wrap{
  padding:calc(var(--headerH) + 44px) 18px 72px;
  display:flex;
  justify-content:center;
}

.container{
  width:100%;
  max-width:var(--max);
}

/* Floating hero, no surrounding box */
.hero{
  margin-top:18px;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.heroInner{
  padding:12px 0 4px;
  display:grid;
  grid-template-columns:minmax(0, 600px) 420px;
  justify-content:space-between;
  gap:40px;
  align-items:center;
}

.heroCopy{
  padding:10px 0;
  max-width:600px;
}

.eyebrow{
  margin:0 0 12px;
  color:var(--accent);
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
}

.heroLead{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
  max-width:none;
}

.heroActions{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(18,32,51,0.10);
  background:rgba(255,255,255,0.66);
  color:var(--text);
  font-weight:600;
  transition:background .12s ease, transform .06s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 18px rgba(16,32,56,0.05);
}

.btn:hover{
  background:rgba(255,255,255,0.88);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(16,32,56,0.08);
}

.btnPrimary{
  background:rgba(31,134,217,0.12);
  border-color:rgba(31,134,217,0.22);
  color:var(--accent);
}

.btnPrimary:hover{
  background:rgba(31,134,217,0.18);
}

.heroCard{
  border:1px solid rgba(18,32,51,0.08);
  border-radius:22px;
  background:rgba(255,255,255,0.72);
  padding:16px;
  box-shadow:0 10px 30px rgba(16,32,56,0.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.heroCard img{
  border-radius:16px;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  margin-bottom:14px;
}

.heroCardTitle{
  margin:0;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
}

.heroCardMeta{
  margin:8px 0 0;
  color:var(--muted2);
  font-size:14px;
  line-height:1.55;
}

.section{
  margin-top:24px;
  border:1px solid rgba(18,32,51,0.08);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.62));
  box-shadow:0 12px 40px rgba(16,32,56,0.10);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.sectionHeader{
  padding:18px 20px;
  border-bottom:1px solid rgba(18,32,51,0.08);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.sectionHeader h2{
  margin:0;
  font-size:22px;
  letter-spacing:-0.02em;
  color:var(--text);
}

.sub{
  margin:0;
  color:var(--muted2);
  font-size:14px;
}

.sectionBody{
  padding:18px;
}

.videoRatio{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(18,32,51,0.08);
  background:rgba(255,255,255,0.40);
}

.videoRatio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.cardGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.cardGrid.albums{
  max-width:260px;
}

.releaseCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(18,32,51,0.08);
  border-radius:18px;
  background:rgba(255,255,255,0.62);
  padding:14px;
  transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 22px rgba(16,32,56,0.06);
}

.releaseCard:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.82);
  border-color:rgba(18,32,51,0.12);
  box-shadow:0 12px 28px rgba(16,32,56,0.10);
}

.releaseCard img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:14px;
}

.releaseAlbum img{
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.releaseCard h3{
  margin:0;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--text);
}

.releaseCard p{
  margin:0;
  color:var(--muted2);
  font-size:14px;
  line-height:1.4;
}

.personaGrid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:20px;
  align-items:center;
}

.personaImage{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(18,32,51,0.08);
  background:rgba(255,255,255,0.58);
  box-shadow:0 8px 26px rgba(16,32,56,0.08);
}

.personaCopy p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:16px;
}

.listenGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.listenBtn{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(18,32,51,0.08);
  background:rgba(255,255,255,0.62);
  border-radius:16px;
  padding:14px;
  transition:background .12s ease, transform .06s ease, box-shadow .12s ease;
  box-shadow:0 6px 20px rgba(16,32,56,0.05);
}

.listenBtn:hover{
  background:rgba(255,255,255,0.82);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(16,32,56,0.08);
}

.listenBtn img{
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:10px;
  flex:0 0 auto;
}

.listenBtn strong{
  display:block;
  font-size:15px;
  line-height:1.15;
  color:var(--text);
}

.listenBtn span{
  display:block;
  color:var(--muted2);
  font-size:13px;
  margin-top:3px;
}

.footer{
  margin-top:22px;
  padding:18px 6px 4px;
  text-align:center;
  color:var(--muted2);
  font-size:13px;
  line-height:1.5;
}

#featuredVideo,
#recentSingles,
#albums,
#personas,
#listen{
  scroll-margin-top:92px;
}

/* ------------------------------------------------------------------ */
/* Release pages                                                       */
/* ------------------------------------------------------------------ */

.releaseHead{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.releaseArt img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(18,32,51,0.08);
  box-shadow:0 10px 30px rgba(16,32,56,0.10);
}

.releaseTitle{
  margin:0 0 8px;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--text);
}

.releaseMeta{
  margin:0 0 18px;
  color:var(--muted2);
  font-size:15px;
}

.trackList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.trackItem a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(18,32,51,0.08);
  background:rgba(255,255,255,0.62);
  transition:background .12s ease, transform .06s ease, box-shadow .12s ease;
}

.trackItem a:hover{
  background:rgba(255,255,255,0.86);
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(16,32,56,0.08);
}

.trackNum{
  flex:0 0 auto;
  width:26px;
  text-align:right;
  color:var(--muted2);
  font-size:14px;
  font-variant-numeric:tabular-nums;
}

.trackName{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.trackPlay{
  flex:0 0 auto;
  color:var(--accent);
  font-size:13px;
  font-weight:600;
}

.backLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  color:var(--accent);
  font-size:14px;
  font-weight:600;
}

.staleNote{
  margin:14px 0 0;
  color:var(--muted2);
  font-size:13px;
}

@media (min-width: 768px){
  .brandLogo{
    height:52px;
  }
}

@media (max-width: 980px){
  .heroInner,
  .personaGrid,
  .releaseHead{
    grid-template-columns:1fr;
  }

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

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

  .heroLead{
    max-width:none;
  }

  .heroCard{
    max-width:520px;
  }

  .releaseArt{
    max-width:320px;
  }
}

@media (max-width: 700px){
  .headerInner{
    justify-content:center;
  }

  .headerNav{
    display:none;
  }

  .wrap{
    padding:calc(var(--headerH) + 28px) 14px 48px;
  }

  .hero{
    margin-top:10px;
  }

  .heroInner{
    padding:4px 0 0;
    gap:18px;
  }

  .heroLead{
    font-size:16px;
    line-height:1.6;
  }

  .heroActions{
    margin-top:18px;
  }

  .heroCard{
    padding:14px;
  }

  .cardGrid,
  .listenGrid{
    grid-template-columns:1fr;
  }

  .sectionHeader{
    flex-direction:column;
    align-items:flex-start;
  }

  .brandLogo{
    height:38px;
  }

  .releaseTitle{
    font-size:24px;
  }

  /*
   * Phones fall back to the standard backdrop. The album art is set inline
   * on the element, so this has to win with !important; the upside is the
   * cover is never downloaded on mobile at all, since a background-image
   * that loses the cascade is never fetched.
   */
  .bg-img.bg-album{
    background-image:url("/images/abstract-light-home.jpg") !important;
    transform:scale(1.01);
    filter:blur(1px) brightness(0.90) contrast(1.12);
    opacity:1;
  }

  .bg-img.bg-album ~ .bg-overlay{
    background:
      radial-gradient(circle at 50% 34%, rgba(255,255,255,0.42), transparent 54%),
      radial-gradient(circle at center, transparent 66%, rgba(18,32,51,0.08)),
      linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.40));
  }
}