/* ---------- BASIC RESET ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0a0a0a;
  color: #f5f5f2;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

img {
  display: block;
  width: 100%;
}

/* ---------- VIDEO HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(7,7,7,.28), rgba(7,7,7,.52)),
    url("media/gallery-1.jpg") center 42% / cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.58) 100%);
}

.nav {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px clamp(20px, 5vw, 72px);
}

.nav a {
  text-decoration: none;
}

.nav-logo {
  font-size: 0.84rem;
  letter-spacing: .18em;
  font-weight: 700;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: .86rem;
}

.mobile-merch-link {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  padding: 96px clamp(20px, 6vw, 72px) 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .72rem;
  opacity: .68;
}

h1 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.tagline {
  max-width: 600px;
  margin: 22px auto 0;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  opacity: .88;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

.hero-logo {
  display: block;
  width: min(500px, 70vw);
  max-width: 100%;
  margin: 0 auto;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.22);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.button {
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: #f5f5f2;
  color: #090909;
}

.button-ghost {
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 5vw, 72px);
  bottom: 30px;
  text-decoration: none;
  font-size: 1.5rem;
  opacity: .75;
}

/* ---------- GENERAL SECTIONS ---------- */
.section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 110px 0;
}

.section-heading {
  margin-bottom: 42px;
}

h2 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 600;
}

.music-section,
.links-section {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ---------- EMBEDS ---------- */
.player-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.player-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.player-label {
  padding: 2px 4px 12px;
  font-size: .8rem;
  opacity: .6;
}

.video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
}

.embed-note {
  opacity: .5;
  font-size: .82rem;
  margin-top: 16px;
}

/* ---------- GALLERY ---------- */
.gallery {
  columns: 2;
  column-gap: 14px;
}

.gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  break-inside: avoid;
}

.gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  transition: transform .35s ease, filter .35s ease;
}

.gallery-item:hover img {
  transform: scale(1.01);
  filter: brightness(.93);
}

/* ---------- LINKS ---------- */
.link-list {
  border-top: 1px solid rgba(255,255,255,.15);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 2px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  text-decoration: none;
  font-size: clamp(1.25rem, 2.6vw, 2.4rem);
  transition: opacity .2s ease, padding .2s ease;
}

.link-list a:hover {
  opacity: .58;
  padding-left: 10px;
}

/* ---------- FOOTER ---------- */
footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .78rem;
  opacity: .45;
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(0,0,0,.92);
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 88vh;
  width: auto;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  color: white;
  background: none;
  border: 0;
  font-size: 2.4rem;
  cursor: pointer;
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  .gallery {
    columns: 1;
  }

  .nav-logo {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .mobile-merch-link {
    display: inline-flex;
    margin-left: auto;
    font-size: .82rem;
    letter-spacing: .14em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .hero-content {
    padding-bottom: 80px;
  }

  .player-grid {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 380px;
  }

  .gallery-item,
  .gallery-a,
  .gallery-b,
  .gallery-c,
  .gallery-d {
    grid-column: auto;
    grid-row: auto;
  }

  .section {
    padding: 78px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}


.service-card {
  min-height: 352px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 28px;
  border-radius: 12px;
  background:
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15)),
    url("media/hero-poster.jpg") center / cover no-repeat;
}

.service-card p {
  max-width: 360px;
  margin: 0 0 18px;
  font-size: 1.2rem;
}


.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


.platform-name {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.platform-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

#contact-link span:last-child {
  font-size: clamp(.9rem, 1.7vw, 1.3rem);
  opacity: .58;
}


/* ---------- MERCH ---------- */
.merch-section {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.merch-note {
  max-width: 560px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.68);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

.merch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(360px, 100%);
  padding: 20px 32px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: #f5f5f2;
  color: #090909;
  text-decoration: none;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}

.merch-button:hover {
  transform: translateY(-2px);
  background: #fff;
}

/* ---------- SONGKICK / SHOWS ---------- */
.shows-section {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.songkick-wrap {
  min-height: 120px;
  width: 100%;
  overflow: hidden;
}

/* Keep Songkick visually integrated with the site */
.songkick-wrap iframe,
.songkick-wrap > div {
  max-width: 100% !important;
}


.hero-platforms {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 16px;
  width: min(640px, 92vw);
}

.platform-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 82px;
  padding: 22px 30px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 28px;
  color: #111;
  text-decoration: none;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.platform-pill:hover {
  transform: translateY(-3px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}

.pill-icon {
  font-size: 1.5em;
  line-height: 1;
  opacity: .96;
}


/* ---------- ABOUT ---------- */
.about-section {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.about-copy {
  max-width: 860px;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.about-copy p {
  margin: 0;
}

.about-copy p + p {
  margin-top: 1.1em;
  opacity: .72;
}

/* ---------- PRESS ---------- */
.press-section {
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.press-card {
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgba(224,127,196,.12), transparent 30%),
    rgba(255,255,255,.035);
}

.press-card blockquote {
  max-width: 950px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
}

.press-meta {
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  font-size: .9rem;
  opacity: .72;
}

.press-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.38);
}

.press-meta a:hover {
  opacity: .7;
}

.gallery-note {
  max-width: 650px;
  margin: 18px 0 0;
  opacity: .58;
  font-size: .88rem;
}

/* ---------- LIGHTBOX DOWNLOAD ---------- */
.lightbox-download {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #080808;
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
}

.lightbox-download:hover {
  background: #fff;
}

@media (max-width: 760px) {
  .press-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .lightbox-download {
    bottom: 14px;
  }
}


.bandcamp-follow-wrap {
  max-width: 640px;
}


/* ---------- LISTEN / FOLLOW ---------- */
.listen-follow-block {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.listen-follow-label {
  margin: 0 0 12px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .62;
}

.bandcamp-follow-wrap {
  max-width: 640px;
}




/* ---------- PLATFORM COLORS ---------- */
.spotify-pill {
  background: rgba(128, 214, 143, .96);
  border-color: rgba(168, 232, 178, .98);
  color: #0c1a10;
}

.apple-pill {
  background: rgba(250, 250, 250, .98);
  border-color: rgba(255, 255, 255, 1);
  color: #111;
}

.youtube-pill {
  background: rgba(239, 103, 103, .96);
  border-color: rgba(250, 142, 142, .98);
  color: #1a0b0b;
}

.bandcamp-pill {
  background: rgba(104, 186, 211, .96);
  border-color: rgba(148, 211, 229, .98);
  color: #09171c;
}

.instagram-pill {
  background: rgba(206, 126, 211, .96);
  border-color: rgba(226, 165, 230, .98);
  color: #190d1b;
}

.tiktok-pill {
  background: rgba(28, 33, 40, .94);
  border-color: rgba(121, 230, 230, .45);
  color: #f7f7f7;
}


@media (max-width: 520px) {
  .hero-platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 94vw;
  }

  .platform-pill {
    min-height: 68px;
    padding: 14px 10px;
    gap: 8px;
    border-radius: 22px;
    font-size: .92rem;
  }

  .pill-icon {
    font-size: 1.2em;
  }

  .hero-logo {
    width: min(430px, 82vw);
  }
}


/* YouTube icon: CSS shape avoids mobile emoji rendering */
.youtube-play-shape {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: .46em solid transparent;
  border-bottom: .46em solid transparent;
  border-left: .72em solid currentColor;
  margin-left: .08em;
}



/* Fine-tune the YouTube play mark so it sits optically centered with its label. */
.youtube-play-shape {
  position: relative;
  top: .02em;
  margin-left: 0;
  margin-right: .04em;
  border-top-width: .40em;
  border-bottom-width: .40em;
  border-left-width: .66em;
}



/* Compact Spotify mark, redrawn as SVG so the curves stay clean at small sizes */
.spotify-svg {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 1em;
}


/* Instagram icon: rounded-square camera mark at the same overall scale */
.instagram-svg {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 1em;
}


/* ---------- CONSISTENT VECTOR ARROWS ---------- */
.arrow-icon {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.08em;
  overflow: visible;
}
.arrow-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Prevent platform-link arrows from shrinking or inheriting emoji fonts on mobile. */
.platform-link > .arrow-icon {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}
.scroll-cue .arrow-icon {
  width: 20px;
  height: 20px;
  display: block;
}