@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ==========================================================================
   Music Page — Vars 
   ========================================================================== */
:root{
  --nav-offset: 70px;   /* fixed navbar height for sticky offset */
  --art-aspect: 5 / 4;  /* artwork thumbnail aspect */
}

/* ==========================================================================
   Navbar (music theme only)
   ========================================================================== */
.theme-music .Navbar{
  background: rgba(13,15,26,.60);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(192,167,105,.25);
  text-align: center;
}
.theme-music .Navbar a{
  font-family: "EB Garamond", serif;
  letter-spacing: .04em;
  font-size: 24px;
  color: #e7e0cf;
  background: transparent !important;
}
.theme-music .Navbar a::after{
  content:"";
  display:block;
  height:2px;
  width:0;
  background:#c0a769;
  transition: width .25s ease;
  margin-top:4px;
}
.theme-music .Navbar a:hover{ color:#fff; }
.theme-music .Navbar a:hover::after,
.theme-music .Navbar a.active::after{ width:100%; }
.theme-music .Navbar a.active{ color:#c0a769; }
@media (max-width: 576px){
  .theme-music .Navbar a{ font-size:16px; }
}

/* ==========================================================================
   Hero (painting background, cameo, lead, credit)
   ========================================================================== */
#MusicHero{
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5efe6;
  isolation: isolate;
}
#MusicHero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(140deg, rgba(13,15,26,.9), rgba(122,46,42,.6));
  mix-blend-mode: multiply;
}
#MusicHero .wrap{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding: 1.5rem 1rem 1rem;
}
#MusicHero h1{
  font-family:"EB Garamond", serif;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing:.04em;
  margin: 0 0 .25rem;
  color: #e7e0cf;
}
#MusicHero .Cameo{
  width: clamp(220px, 28vw, 360px);
  margin: 0 auto;
}
#MusicHero .Cameo img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
#MusicHero .CameoCredit{
  display: block;
  margin-top: .4rem;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-size: 12px;
  color: #e7e0cf;
  opacity: .85;
}
#MusicHero .HeroLead{
  margin-top: 1.1rem;                       /* space under portrait */
  font-family:"EB Garamond", serif;
  font-size: clamp(16px, 2.1vw, 19px);
  line-height: 1.45;
  color:#e7e0cf;
  text-align:center;
}
/* hero background credit */
#MusicHero{ position: relative; }
#MusicHero .HeroCredit{
  position: absolute;
  right: 12px; bottom: 10px;
  font-family: "EB Garamond", serif;
  font-size: 12px;
  color: #e7e0cf;
  opacity: .75;
  text-decoration: none;
}
#MusicHero .HeroCredit:hover{ opacity:1; text-decoration: underline; }

/* ==========================================================================
   Main area (painting bg), two-column grid, sticky video
   ========================================================================== */
#Music{
  position: relative;
  background: url('../images/musicBackground.jpg') center/cover fixed no-repeat;
  padding: 2.5rem 1rem 3rem;
  color: #f0ead6;
}
#Music::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,15,26,.78), rgba(13,15,26,.88));
}
#Music .Music__inner{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.25rem;                                       /* a bit more space */
  grid-template-columns: minmax(420px, 1.16fr) 1fr;   /* subtle wider left */
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

/* sticky video column (left) */
#Music .stickyVideo{
  position: sticky;
  top: calc(var(--nav-offset) + 12px);
  align-self: start;
  z-index: 2;
}
#Music .stickyVideo .VideoEmbed,
#Music .stickyVideo .VideoCaption{
  max-width: 900px;            /* make the video/caption feel a bit larger */
  margin-inline: auto;
  text-align: center;
}

/* disable sticky on mobile (stack) */
@media (max-width: 900px){
  #Music .Music__inner{ grid-template-columns: 1fr; }
  #Music .stickyVideo{ position: static; }
}

/* ==========================================================================
   Video embed + caption
   ========================================================================== */
.VideoEmbed{
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.VideoEmbed video{
  width: 100%;
  height: 100%;
  display: block;
  background: #000; /* black before load */
}
.VideoCaption{
  margin-top: .75rem;
  line-height: 1.45;
  font-family: "EB Garamond", serif;
  font-size: clamp(15px, 1.8vw, 18px);
  color: #e7e0cf;
  text-align: center;
}
.VideoCaption strong{ font-variant: small-caps; letter-spacing:.03em; }
.VideoCaption em{ font-style: italic; }

/* ==========================================================================
   Track grid + cards
   ========================================================================== */
.Music__grid{
  display: grid;
  gap: 1rem;
  justify-items: center;         /* center cards in the right column */
}
.Cue{
  width: 100%;
  max-width: 720px;
  background: rgba(10,10,10,.5);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .75rem;
  backdrop-filter: blur(1.5px);
}
.Cue__art{
  width: 100%;
  height: auto;
  aspect-ratio: var(--art-aspect);  /* taller thumbs */
  object-fit: cover;
  border-radius: 10px;
  filter: none;
}
.Cue figcaption{
  margin: .5rem 0 .25rem;
  font-family:"EB Garamond", serif;
}
.Cue .tags{
  display:block;
  font-family:"Syne", sans-serif;
  font-size:.9rem;
  opacity:.8;
}
.Cue audio{ width:100%; accent-color:#c0a769; }

/* optional per-card artwork credit */
.art-credit{
  display:block;
  margin-top:.25rem;
  font-size:12px;
  line-height:1.3;
  color:#d9d1bf;
  opacity:.8;
  font-family:"EB Garamond", serif;
}
.theme-music .art-credit a{ color:#c0a769; text-decoration: underline; }

/* ==========================================================================
   Links (content & hero)
   ========================================================================== */
.theme-music main a,
.theme-music #MusicHero a{
  color:#c0a769;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.theme-music main a:hover,
.theme-music #MusicHero a:hover{
  color:#fff;
  text-decoration-thickness: 2px;
}
.theme-music main a:visited,
.theme-music #MusicHero a:visited{ color:#c0a769; }

/* ==========================================================================
   Remove global image hover “pop” on music page
   ========================================================================== */
.theme-music img,
.theme-music img:hover{
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   Footer (Music theme) + Contact button offset
   ========================================================================== */
.theme-music footer{
  background: rgba(13,15,26,.85);
  border-top: 1px solid rgba(192,167,105,.35);
  color: #e7e0cf;
  padding: 16px 12px;
  text-align: center;
}
.theme-music footer .footer-copy{
  margin: 0;
  font-family: "EB Garamond", serif;
  letter-spacing:.02em;
  font-size: 18px;
}
.theme-music footer a{ color:#c0a769; }
.theme-music footer a:hover{ color:#fff; }
.theme-music .contact-btn{ bottom: 2.25rem; }


/* ===== LANE CENTERING + EXTRA SEPARATION ===== */

/* Equal lanes and a larger, responsive gap between them */
#Music .Music__inner{
  grid-template-columns: 1fr 1fr;                 /* equal halves */
  gap: clamp(2.5rem, 6vw, 5rem);                  /* push them apart */
  justify-items: center;                           /* center each item in its lane */
}

/* Left lane (video + caption) centered and sized */
#Music .stickyVideo{
  justify-self: center;    
  width: min(96%, 920px);
}

/* Make the media fill the lane’s width (not a fixed max) */
#Music .stickyVideo .VideoEmbed,
#Music .stickyVideo .VideoCaption{
  max-width: 100%;
  margin-inline: 0;
  text-align: center;
}

/* Right lane (track grid) centered and sized */
#Music .Music__grid{
  justify-self: center;                            /* center inside right lane */
  width: min(96%, 820px);                          /* control inner width */
}

/* Taller artwork thumbs (already set, kept here for clarity) */
#Music .Cue__art{
  height: auto;
  aspect-ratio: 4 / 3;                             /* 5/4 or 1/1 if you want taller */
  object-fit: cover;
  border-radius: 10px;
}

/* Smooth golden highlight for active media (audio + video) */
.Cue,
.VideoEmbed{
  position: relative; /* anchor the glow pseudo-element */
}

.Cue::after,
.VideoEmbed::after{
  content: "";
  position: absolute;
  inset: -4px;                         /* a little outside the card */
  border-radius: 14px;                 /* match your 12px corners + offset */
  border: 2px solid #c0a769;           /* gold */
  box-shadow: 0 0 18px rgba(192,167,105,.35);
  opacity: 0;
  transform: scale(.995);
  transition: opacity 180ms ease, transform 200ms ease;
  pointer-events: none;                /* purely decorative */
}

.playing::after{
  opacity: 1;
  transform: scale(1);
}

/* Balanced two-lane layout on large screens */
body.theme-music #Music .Music__inner{
  grid-template-columns: 1fr 1fr;                      /* equal halves */
  gap: clamp(2.5rem, 6vw, 5rem);                       /* separation */
  max-width: 1400px;                                   /* page container */
  padding-inline: clamp(24px, 6vw, 96px);              /* outer gutters */
  margin-inline: auto;
  justify-items: center;                                /* center content in each lane */
}

/* Lane max widths (so they don't hug the gutter on XL screens) */
body.theme-music #Music{
  --lane-left: 960px;                                   /* video lane */
  --lane-right: 840px;                                  /* cards lane */
}
body.theme-music #Music .stickyVideo{ width: min(100%, var(--lane-left)); justify-self: center; }
body.theme-music #Music .Music__grid{ width: min(100%, var(--lane-right)); justify-self: center; }

/* === Music theme: floating contact button === */
.theme-music .contact-btn{
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 10000;                     /* above players */
  padding: .85rem 1.15rem;
  border-radius: 999px;
  font-family: "EB Garamond", serif;
  font-size: 20px;
  letter-spacing: .02em;

  background: rgba(24,24,27,.72);
  color: #e7e0cf;
  border: 1px solid rgba(192,167,105,.35);  /* muted gold */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  animation: none;                            /* kill bounce on music page */
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .2s ease;
}
.theme-music .contact-btn:hover{
  background: rgba(34,34,40,.86);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  transform: translateY(-2px);
}
.theme-music .contact-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(192,167,105,.35);
}

/* === Music theme: contact popup === */
.theme-music .popup{
  z-index: 10001;                              /* above everything */
  background-color: rgba(10,10,14,.65);        /* darker overlay */
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease;
}
.theme-music .popup.show{ opacity:1; visibility: visible; }

.theme-music .popup-content{
  background: rgba(22,22,26,.96);
  border: 1px solid rgba(192,167,105,.28);
  color: #e7e0cf;
  max-width: 560px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.theme-music .popup-content h2{
  margin-top: 0;
  font-family: "EB Garamond", serif;
  letter-spacing: .02em;
  color: #e7e0cf;
}
.theme-music .close-btn{
  color: #c0a769;
}
.theme-music .close-btn:hover{ color: #ffffff; }

/* Inputs */
.theme-music input[type=text],
.theme-music input[type=tel],
.theme-music textarea{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(192,167,105,.25);
  background: #121317;
  color: #e7e0cf;
  font-family: "Syne", sans-serif;
  margin: 6px 0 16px 0;
}
.theme-music input[type=text]::placeholder,
.theme-music input[type=tel]::placeholder,
.theme-music textarea::placeholder{
  color: #a8a090;
}

/* Submit */
.theme-music input[type=submit]{
  background: #c0a769;
  color: #121212;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 22px;
  border: none;
  font-family: "EB Garamond", serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.theme-music input[type=submit]:hover{
  background: #d8bf82;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* Music page: contact modal typography tweaks */
.theme-music .popup-content h2{
  color: #c0a769;     
}

/* Make the field labels readable */
.theme-music .popup-content label{
  display: block;
  color: #111;                    
  font-family: "EB Garamond", serif;
  font-size: 16px;
  letter-spacing: .02em;
  margin: .25rem 0 .35rem;
}

/* (Optional) nudge placeholder contrast a touch */
.theme-music input::placeholder,
.theme-music textarea::placeholder{
  color: #8f8777;
}

/* Music theme: contact inputs (make email match) */
.theme-music input[type=text],
.theme-music input[type=email],
.theme-music input[type=tel],
.theme-music textarea{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(192,167,105,.25);
  background: #121317;
  color: #e7e0cf;
  font-family: "Syne", sans-serif;
  margin: 6px 0 16px 0;
  appearance: none;          /* normalize across browsers */
  -webkit-appearance: none;
}

.theme-music input[type=text]::placeholder,
.theme-music input[type=email]::placeholder,
.theme-music input[type=tel]::placeholder,
.theme-music textarea::placeholder{
  color: #8f8777;
}

.theme-music input[type=text]:focus,
.theme-music input[type=email]:focus,
.theme-music input[type=tel]:focus,
.theme-music textarea:focus{
  outline: none;
  border-color: #c0a769;
  box-shadow: 0 0 0 3px rgba(192,167,105,.25);
}

/* ===== Music grid: stack & pad on phones ===== */
@media (max-width: 900px){
  body.theme-music #Music .Music__inner{
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-inline: 16px;
    max-width: 720px;
    margin-inline: auto;
  }
  /* keep video non-sticky on mobile (you already do) and give it room */
  #Music .stickyVideo{ position: static; }
}

/* Larger gutters on very wide screens so lanes feel centered */
@media (min-width: 1200px){
  body.theme-music #Music .Music__inner{
    max-width: 1400px;
    padding-inline: clamp(24px, 6vw, 96px);
    justify-items: center;
  }
  #Music .stickyVideo, .Music__grid{
    width: min(100%, 860px);
  }
}

/* Contact modal on phones: full-bleed-ish */
@media (max-width: 600px){
  .theme-music .popup-content{ width: 92vw; }
}

/* Contact floating button size on phones */
@media (max-width: 600px){
  .theme-music .contact-btn{ font-size: 18px; padding: .7rem 1rem; right: 1rem; bottom: 1rem; }
}