/* ===========================================================
   BANASHEE — silentnationmusic.com
   Palette: fog grey / bone white / Atlantic teal + oxblood accent
   Type: Bodoni Moda (display) / Inter (body)
   =========================================================== */

:root{
  --bg:        #121417;   /* fog-dark, near black */
  --bg-2:      #181b1f;
  --panel:     #1e2329;
  --bone:      #ece7df;   /* bone white text */
  --fog:       #9aa1a4;   /* muted grey */
  --fog-dim:   #6c7276;
  --teal:      #3a787c;   /* Atlantic teal */
  --oxblood:   #8a262c;   /* the single accent */
  --oxblood-lt:#a8333a;
  --maxw:      1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:60px; /* clear the fixed player */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 6vw; width:100%; }
.wrap--narrow{ max-width:720px; }

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--oxblood-lt); font-weight:500; margin-bottom:1.4rem;
}
.display{
  font-family:'Bodoni Moda',serif; font-weight:500;
  font-size:clamp(2.2rem,6vw,4rem); line-height:1.04; letter-spacing:.01em;
  margin-bottom:1.4rem;
}
.lede{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--fog); max-width:46ch; }
.from-album{ font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog-dim); margin:-.6rem 0 1.4rem; }
.from-album em{ font-style:normal; color:var(--bone); letter-spacing:.06em; text-transform:none; font-family:'Bodoni Moda',serif; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 6vw; transition:background .4s ease, padding .4s ease;
}
.nav.is-scrolled{ background:rgba(18,20,23,.86); backdrop-filter:blur(10px); padding:.9rem 6vw; }
.nav__mark{
  font-family:'Bodoni Moda',serif; font-weight:700;
  letter-spacing:.34em; font-size:1.05rem; padding-left:.34em;
}
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fog); transition:color .25s ease;
}
.nav__links a:hover{ color:var(--bone); }
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:30px; padding:0; background:none; border:0; cursor:pointer;
}
.nav__bar{ display:block; width:24px; height:2px; background:var(--bone);
  transition:transform .3s ease, opacity .3s ease; }
.nav.is-open .nav__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__bar:nth-child(2){ opacity:0; }
.nav.is-open .nav__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; height:100vh; min-height:600px; display:flex;
  align-items:flex-end; justify-content:center; text-align:center; overflow:hidden; }
.hero__media{
  position:absolute; inset:0;
  background:#0a0e12 url('assets/hero-banner.jpg') center top / cover no-repeat;
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,12,16,.20) 0%, rgba(8,12,16,0) 28%, rgba(8,12,16,0) 56%, rgba(8,12,16,.82) 84%, rgba(8,12,16,.99) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:0 1.5rem calc(7vh + 60px); }
.hero__mark{ margin:0; }
.hero__logo{
  width:min(460px,80vw); height:auto; margin:0 auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.95)) drop-shadow(0 0 40px rgba(0,0,0,.85));
}
.hero__tag{
  margin-top:1.2rem; font-size:clamp(.95rem,2.5vw,1.25rem);
  letter-spacing:.46em; text-transform:uppercase; color:var(--bone);
  padding-left:.46em;
}
.hero__cta{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; bottom:calc(2rem + 60px); left:50%; transform:translateX(-50%);
  z-index:2; font-size:1.4rem; color:var(--fog); animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 2.1rem; border:1px solid transparent; transition:all .25s ease; cursor:pointer;
}
.btn--solid{ background:var(--oxblood); color:var(--bone); }
.btn--solid:hover{ background:var(--oxblood-lt); }
.btn--ghost{ border-color:rgba(236,231,223,.5); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--bone); background:rgba(236,231,223,.08); }
.btn--spotify{ background:#1db954; color:#fff; display:inline-flex; align-items:center; gap:.58rem; }
.btn--spotify:hover{ background:#1ed760; }
.btn--spotify svg{ width:18px; height:18px; fill:#fff; flex:none; }

/* ---------- sections ---------- */
.section{ padding:clamp(5rem,12vh,9rem) 0; }
.section--music{ background:var(--bg); }
.section--band{ background:var(--bg-2); }
.section--members{ background:var(--bg); }
.section--connect{ background:var(--bg-2); text-align:center; }
.section--connect .eyebrow{ display:inline-block; }
.section--connect .lede{ margin:0 auto; }

/* ---------- music / smart links ---------- */
.links{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.chip{
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.4rem; border:1px solid var(--fog-dim); color:var(--bone);
  transition:all .25s ease;
}
.chip:hover{ border-color:var(--teal); background:rgba(58,120,124,.14); }

/* ---------- watch / video ---------- */
.watch{ margin-top:3.5rem; }
.watch__frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:var(--panel); border:1px solid rgba(236,231,223,.08); overflow:hidden;
}
.watch__frame iframe, .watch__frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.watch__placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--fog-dim); letter-spacing:.3em; text-transform:uppercase; font-size:.8rem;
}

/* ---------- band lore ---------- */
.band__lore{
  font-family:'Bodoni Moda',serif; font-weight:400;
  font-size:clamp(1.25rem,2.6vw,1.7rem); line-height:1.55; color:var(--bone);
  margin-bottom:1.6rem;
}
.band__lore:last-child{ color:var(--fog); }

/* ---------- members ---------- */
.members{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:2.6rem; }
.member__photo{ aspect-ratio:3/4; overflow:hidden; background:var(--panel); margin-bottom:1.3rem; }
.member__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(1.02); transition:transform .6s ease, filter .6s ease;
}
.member:hover .member__photo img{ transform:scale(1.04); filter:grayscale(0) contrast(1.05); }
.member__name{ font-family:'Bodoni Moda',serif; font-weight:500; font-size:1.7rem; }
.member__role{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxblood-lt); margin:.4rem 0 .9rem;
}
.member__bio{ font-size:.98rem; color:var(--fog); }

/* ---------- signup ---------- */
.signup{ display:flex; gap:.7rem; max-width:480px; margin:2.4rem auto 0; flex-wrap:wrap; justify-content:center; }
.signup input{
  flex:1 1 240px; background:transparent; border:1px solid var(--fog-dim);
  color:var(--bone); padding:.95rem 1.2rem; font-size:.95rem; font-family:inherit;
}
.signup input::placeholder{ color:var(--fog-dim); }
.signup input:focus{ outline:none; border-color:var(--teal); }
.signup__note{ min-height:1.2em; margin-top:1rem; font-size:.85rem; color:var(--teal); letter-spacing:.04em; }

/* ---------- socials ---------- */
.socials{ margin-top:3rem; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; }
.socials a{
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fog);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:all .25s ease;
}
.socials a:hover{ color:var(--bone); border-color:var(--oxblood); }

/* ---------- footer ---------- */
.footer{ text-align:center; padding:4rem 6vw 3rem; background:var(--bg); border-top:1px solid rgba(236,231,223,.06); }
.footer__mark{ font-family:'Bodoni Moda',serif; font-weight:700; letter-spacing:.34em; padding-left:.34em; font-size:1.1rem; margin-bottom:1.2rem; }
.footer__credit{ color:var(--fog); font-size:.95rem; }
.footer__credit strong{ color:var(--bone); font-weight:500; }
.footer__sn{ width:84px; height:auto; display:block; margin:1.6rem auto .4rem; opacity:.62; }
.footer__label{ color:var(--fog-dim); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; }

/* ---------- persistent player ---------- */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:60px; display:flex; align-items:center; gap:.9rem;
  padding:0 clamp(.8rem,3vw,1.6rem);
  background:rgba(14,16,18,.94); backdrop-filter:blur(12px);
  border-top:1px solid rgba(236,231,223,.10);
}
.player__btn{
  flex:none; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--oxblood); color:var(--bone);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.player__btn:hover{ background:var(--oxblood-lt); }
.player__btn svg{ fill:currentColor; }
.player__btn--skip{ width:30px; height:30px; background:transparent; color:var(--fog); }
.player__btn--skip:hover{ background:transparent; color:var(--bone); }
.player__cover{ flex:none; width:38px; height:38px; object-fit:cover; }
.player__meta{ flex:none; display:flex; flex-direction:column; line-height:1.2; }
.player__title{ font-size:.82rem; color:var(--bone); white-space:nowrap; }
.player__artist{ font-size:.68rem; color:var(--fog); letter-spacing:.1em; text-transform:uppercase; }
.player__seek{ flex:1; height:4px; background:rgba(236,231,223,.16); cursor:pointer; position:relative; min-width:50px; }
.player__seek:focus-visible{ outline:1px solid var(--teal); outline-offset:3px; }
.player__fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--oxblood-lt); }
.player__time{ flex:none; font-size:.72rem; color:var(--fog); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
@media (max-width:520px){
  /* keep the cover + song/band info visible on phones, shrunk to fit */
  .player{ gap:.55rem; padding:0 .7rem; }
  .player__btn--skip{ width:28px; height:28px; }
  .player__cover{ width:34px; height:34px; }
  .player__meta{ min-width:0; max-width:42%; }
  .player__title{ font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player__artist{ font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .player__seek{ min-width:36px; }
  .player__time{ min-width:30px; font-size:.66rem; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav__links{ gap:1.2rem; }
  .nav__links a{ font-size:.72rem; letter-spacing:.1em; }
  .members{ grid-template-columns:1fr; gap:2.6rem; max-width:380px; margin-left:auto; margin-right:auto; }

  /* Mobile hero: show the full banner uncropped (logo + tagline + all 3 women),
     buttons in a charcoal strip below — the wide wordmark won't fit a full-bleed crop. */
  .hero{ height:auto; min-height:0; display:block; padding-top:62px; }
  .hero__media{ position:relative; inset:auto; width:100%; aspect-ratio:3500/1953;
    background:#0a0e12 url('assets/hero-banner.jpg') center / cover no-repeat; transform:none; }
  .hero__veil{ display:none; }
  .hero__inner{ position:relative; padding:2rem 1.5rem 2.8rem; }
  .hero__scroll{ display:none; }
}
@media (max-width:520px){
  .nav__mark{ font-size:.92rem; letter-spacing:.24em; }
  .nav__toggle{ display:flex; }
  /* links collapse into a tap-to-open dropdown panel below the bar */
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    padding:.2rem 6vw 1rem;
    background:rgba(18,20,23,.96); backdrop-filter:blur(10px);
    border-top:1px solid rgba(236,231,223,.08);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav.is-open .nav__links{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ padding:.9rem 0; font-size:.8rem; letter-spacing:.18em;
    border-bottom:1px solid rgba(236,231,223,.06); }
}

/* ---------- share button + popover ---------- */
/* Bright Facebook blue so it pops out of the chip row and signals "share me" */
.chip--share{
  font-family:inherit; cursor:pointer;
  background:#1877F2; color:#fff;
  border-color:#1877F2;
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:500;
  transition:background .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.chip--share svg{ width:14px; height:14px; flex:none; color:#fff; }
.chip--share:hover{
  background:#1664d6; border-color:#1664d6; color:#fff;
  box-shadow:0 4px 14px rgba(24,119,242,.35);
  transform:translateY(-1px);
}
.chip--share:active{ transform:translateY(0); }
.chip--share:focus-visible{ outline:2px solid #4d9bff; outline-offset:2px; }

.share-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(8,10,12,.6);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .18s ease;
}
.share-backdrop.is-in{ opacity:1; }

.share-popover{
  position:fixed; z-index:9999;
  left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
  width:min(320px, calc(100vw - 2rem));
  background:#171a1e; color:var(--bone);
  border:1px solid rgba(236,231,223,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
  border-radius:4px; padding:.45rem;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}
.share-popover.is-in{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.share-popover__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .9rem .55rem;
  border-bottom:1px solid rgba(236,231,223,.07);
  margin-bottom:.4rem;
}
.share-popover__title{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--fog); font-weight:500;
}
.share-popover__close{
  background:transparent; border:0; color:var(--fog); cursor:pointer;
  width:24px; height:24px; padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; transition:color .2s ease, background .2s ease;
}
.share-popover__close:hover{ color:var(--bone); background:rgba(236,231,223,.06); }
.share-popover__list{
  display:grid; grid-template-columns:1fr 1fr; gap:.2rem;
}
.share-popover__item{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.7rem .85rem; min-height:44px;
  background:transparent; border:0; cursor:pointer; width:100%;
  color:var(--bone); text-align:left; text-decoration:none;
  font-family:inherit; font-size:.85rem; letter-spacing:.02em;
  border-radius:3px;
  transition:background .15s ease, color .15s ease;
}
.share-popover__item:hover, .share-popover__item:focus-visible{
  background:rgba(236,231,223,.06); color:var(--bone); outline:none;
}
.share-popover__item svg{ width:18px; height:18px; flex:none; color:var(--fog); transition:color .15s ease; }
.share-popover__item:hover svg, .share-popover__item:focus-visible svg{ color:var(--bone); }
.share-popover__item--copy svg{ color:var(--teal); }
.share-popover__item--native svg{ color:var(--oxblood-lt); }

.share-toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(8px);
  z-index:10000; pointer-events:none;
  background:#1a1d21; color:var(--bone);
  border:1px solid rgba(236,231,223,.12);
  padding:.7rem 1.2rem; font-size:.82rem; letter-spacing:.04em;
  border-radius:3px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transition:opacity .22s ease, transform .22s ease;
}
.share-toast.is-in{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:520px){
  /* On phones: bottom-sheet rather than centered, easier thumb reach */
  .share-popover{
    top:auto; bottom:74px; left:50%; transform:translate(-50%,16px);
    width:calc(100vw - 1.6rem); max-width:none;
    border-radius:6px;
  }
  .share-popover.is-in{ transform:translate(-50%,0); }
  .share-popover__list{ grid-template-columns:1fr 1fr; }
  .share-toast{ bottom:72px; }
}

/* ---------- support callout ---------- */
.support{ margin:3rem auto 0; text-align:center; max-width:520px; }
.support__line{ color:var(--fog); font-size:.92rem; letter-spacing:.04em; margin:0 0 1.2rem; line-height:1.5; font-style:italic; }
.support__btn{
  display:inline-block; padding:.85rem 2rem;
  border:1px solid rgba(236,231,223,.18); background:transparent; color:var(--bone);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:500;
  text-decoration:none;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.support__btn:hover{ background:rgba(236,231,223,.06); border-color:var(--oxblood); color:var(--bone); }