/* ============================================================
   MUSIC PAGE — "Voices Carried in Cloth"
   Scoped to body.music-page so the shared style.css and every
   other page are left exactly as they were.
   ============================================================ */

.music-page{
  --ink:#05060c;
  --ink-2:#080a14;
  --panel-line:rgba(214,163,74,.28);
  --kente-h:url('images/music/kente-strip-h.jpg');
  --kente-v:url('images/music/kente-strip-v.jpg');
  background:var(--ink);
}

/* ---------- shared bits ---------- */
.music-page .kente-band{
  height:46px;
  background:var(--kente-h) repeat-x center / auto 260%;
  position:relative;
}
.music-page .kente-band::after{           /* knock the saturation back a touch */
  content:''; position:absolute; inset:0;
  background:rgba(5,6,12,.14);
}

/* The vertical selvedge that runs down both edges of a section.
   The hero wears a narrow strip so the seascape stays the subject; the
   featured-tracks band is the one framed in full-width cloth. */
.music-page .selvedge{
  position:absolute; top:0; bottom:0; width:var(--selvedge, 20px); z-index:3;
  background:var(--kente-v) repeat-y center / 118% auto;
  pointer-events:none;
}
.music-page .selvedge--l{ left:0; }
.music-page .selvedge--r{ right:0; }

/* a hairline on the inner edge, so the cloth reads as bound into the section
   rather than floating over it */
.music-page .selvedge::after{
  content:''; position:absolute; top:0; bottom:0; width:1px;
  background:rgba(214,163,74,.5);
}
.music-page .selvedge--l::after{ right:0; }
.music-page .selvedge--r::after{ left:0; }

/* the hero strip is trim, not subject: knocked back so the seascape leads.
   The tracks band keeps the cloth at full strength. */
.music-page .m-hero .selvedge{ filter:brightness(.62) saturate(.8); }

@media(max-width:900px){ .music-page .selvedge{ --selvedge:12px; } }

.music-page .rule-diamond{
  display:flex; align-items:center; gap:14px; margin:22px 0;
}
.music-page .rule-diamond::before,
.music-page .rule-diamond::after{
  content:''; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.music-page .rule-diamond i{
  width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;
}

/* ---------- header ----------
   The music page now uses the same header markup as every other page; only
   the ink background and the centred nav are page-specific. */
.music-page .site-header{ background:var(--ink); border-bottom:none; }
.music-page .header-row{ gap:28px; }
.music-page .nav-desktop{ margin:0 auto; gap:26px; }

/* ---------- "THE MUSIC WORLD" title band ---------- */
.music-page .world-band{ position:relative; }
.music-page .world-band .kente-band{ height:28px; }
.music-page .world-band-label{
  position:absolute; inset:0; margin:auto;
  width:max-content; max-width:60%; height:100%;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:0 46px;
  background:linear-gradient(90deg, transparent, var(--ink) 14%, var(--ink) 86%, transparent);
  font-size:.72rem; letter-spacing:.42em; color:var(--gold-bright); white-space:nowrap;
}
@media(max-width:700px){
  .music-page .world-band-label{ max-width:88%; padding:0 18px; font-size:.58rem; letter-spacing:.28em; }
}

/* ---------- HERO ---------- */
.music-page .m-hero{
  position:relative;
  --selvedge:22px;
  min-height:clamp(400px, 54vh, 560px);
  display:flex; align-items:center;
  overflow:hidden;
  background:#04050a;
  isolation:isolate;
}
/* The plate is a 2:1 seascape carrying the eclipse AND the skyline. At 145%
   it was blown up until only the disc and a strip of water were left; `cover`
   keeps the whole scene - horizon, city and all - inside the frame. */
.music-page .m-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('images/music/hero-eclipse-ocean.jpg') no-repeat center 30% / cover;
}
.music-page .m-hero-bg::after{           /* keep the copy readable over the water */
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,5,10,.93) 0%, rgba(4,5,10,.8) 26%, rgba(4,5,10,.42) 42%, rgba(4,5,10,.08) 62%, transparent 76%);
}
.music-page .m-hero-figure{
  position:absolute; top:0; bottom:0; z-index:1;
  right:clamp(24px, 7vw, 150px);
  width:min(30%, 430px);
}
.music-page .m-hero-figure img{
  width:100%; height:100%; object-fit:cover; object-position:50% 4%;
  /* the portrait sits on black, so soft edges melt it into the sky on both
     sides now that it no longer runs off the right of the frame */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 13%, #000 30%, #000 74%, rgba(0,0,0,.6) 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 13%, #000 30%, #000 74%, rgba(0,0,0,.6) 90%, transparent 100%);
}
.music-page .m-hero-copy{
  position:relative; z-index:2;
  width:100%; max-width:var(--hair-w); margin:0 auto;
  padding:0 clamp(48px, 6vw, 110px);
}
.music-page .m-hero-copy > *{ max-width:560px; }

.music-page .m-hero h1{
  font-family:'Cormorant Garamond', serif;
  line-height:.96; letter-spacing:.02em; color:var(--bone);
}
.music-page .m-hero h1 .l1{
  display:block; font-size:clamp(2.9rem, 7vw, 5.6rem); letter-spacing:.06em;
  color:var(--gold-bright);
}
.music-page .m-hero h1 .l2{
  display:block; font-size:clamp(1.5rem, 3.2vw, 2.55rem); letter-spacing:.11em; margin-top:.12em;
}
.music-page .m-quote{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(1rem, 1.5vw, 1.28rem); line-height:1.65; color:var(--bone);
}
.music-page .m-quote-by{
  font-size:.7rem; letter-spacing:.3em; color:var(--smoke); margin-top:14px;
}
.music-page .btn-play{
  display:inline-flex; align-items:center; gap:14px; margin-top:34px;
  border:1px solid var(--gold); color:var(--gold-bright);
  font-size:.72rem; letter-spacing:.2em; padding:15px 26px;
  background:rgba(5,6,12,.4);
  transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.music-page .btn-play:hover{
  background:var(--gold); color:var(--ink); box-shadow:0 0 28px rgba(214,163,74,.4);
}
.music-page .btn-play svg{ flex-shrink:0; }

@media(max-width:860px){
  .music-page .m-hero{ min-height:auto; padding:56px 0 40px; }
  .music-page .m-hero-figure{
    right:0; width:100%; opacity:.32;
  }
  .music-page .m-hero-figure img{
    object-position:58% 6%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 40%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 40%);
  }
  .music-page .m-hero-bg{ background-size:cover; background-position:center; }
  .music-page .m-hero-bg::after{
    background:linear-gradient(180deg, rgba(4,5,10,.8) 0%, rgba(4,5,10,.7) 60%, rgba(4,5,10,.92) 100%);
  }
  .music-page .m-hero-copy{ padding:0 34px; }
}

/* ---------- section heading ---------- */
.music-page .m-heading{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:.74rem; letter-spacing:.4em; color:var(--gold-bright);
  padding:34px 0 26px; text-align:center;
}
.music-page .m-heading i{
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
}

/* ---------- FEATURED TRACKS ---------- */
.music-page .m-tracks{
  position:relative; background:var(--ink); padding-bottom:8px;
  --selvedge:clamp(34px, 4.4vw, 64px);
}
.music-page .m-tracks-inner{
  padding:0 clamp(52px, 5vw, 86px) 34px;
  display:grid; gap:26px; grid-template-columns:1fr;
}
@media(min-width:1080px){ .music-page .m-tracks-inner{ grid-template-columns:1fr 1fr; } }

.music-page .track{
  display:grid;
  grid-template-columns:186px 168px 1fr;
  border:1px solid var(--panel-line);
  background:var(--ink-2);
  min-height:274px;
  overflow:hidden;
}
.music-page .track-sigil{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; text-align:center;
  padding:0 16px 26px;
  background-image:var(--sigil);
  background-size:132% auto;
  background-position:center 24%;
  background-repeat:no-repeat;
}
.music-page .track-sigil::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, var(--tint) 88%);
}
.music-page .track-sigil h4,
.music-page .track-sigil p{ position:relative; z-index:1; }
.music-page .track-sigil h4{
  font-family:'Cormorant Garamond', serif;
  font-size:1.34rem; letter-spacing:.16em; color:var(--gold-bright);
}
.music-page .track-sigil p{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:.92rem; line-height:1.4; color:rgba(242,234,217,.86); margin-top:8px;
}
.music-page .track-shot{ overflow:hidden; }
.music-page .track-shot img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.music-page .track-body{
  padding:26px 26px 24px;
  display:flex; flex-direction:column;
}
.music-page .track-body h3{
  font-family:'Cormorant Garamond', serif;
  font-size:1.62rem; line-height:1.12; letter-spacing:.04em;
  color:var(--gold-bright); margin-bottom:14px;
}
.music-page .track-body p{
  font-size:.84rem; line-height:1.72; color:var(--smoke);
}
.music-page .listen{
  display:inline-flex; align-items:center; gap:12px; margin-top:auto; padding-top:20px;
  font-size:.72rem; letter-spacing:.2em; color:var(--gold-bright);
}
.music-page .listen svg{ transition:transform .25s ease; }
.music-page .listen:hover svg{ transform:translateX(3px); }

.music-page .track-progress{ margin-top:14px; }
.music-page .track-progress-track{
  position:relative; height:3px; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.14); touch-action:none;
}
.music-page .track-progress-fill{
  position:relative; height:100%; width:0%; border-radius:2px;
  background:var(--gold-bright);
}
.music-page .track-progress-fill::after{
  content:''; position:absolute; right:-5px; top:50%; width:10px; height:10px;
  border-radius:50%; background:var(--gold-bright); transform:translate(0,-50%);
  opacity:0; transition:opacity .2s ease; box-shadow:0 0 6px rgba(214,163,74,.6);
}
.music-page .track-progress-track:hover .track-progress-fill::after,
.music-page .track-progress-track.is-scrubbing .track-progress-fill::after{ opacity:1; }
.music-page .track-progress-time{
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:.66rem; letter-spacing:.08em; color:var(--smoke);
}

@media(max-width:720px){
  .music-page .track{ grid-template-columns:1fr 1fr; }
  .music-page .track-body{ grid-column:1 / -1; }
  .music-page .track-sigil{ min-height:210px; }
}
@media(max-width:420px){
  .music-page .track{ grid-template-columns:1fr; }
  .music-page .track-shot{ height:200px; }
}

/* ---------- STORY ROW ---------- */
.music-page .m-story{
  position:relative;
  display:grid; grid-template-columns:1fr;
  border-top:1px solid rgba(214,163,74,.16);
  background:var(--ink);
}
@media(min-width:1080px){
  .music-page .m-story{ grid-template-columns:1.05fr 1.05fr .9fr; }
}
.music-page .m-story > section{
  position:relative; display:flex; align-items:stretch;
  border-left:1px solid rgba(214,163,74,.16);
  min-height:216px;
}
.music-page .m-story > section:first-child{ border-left:none; }
.music-page .m-story h3{
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem; letter-spacing:.085em; color:var(--gold-bright);
  line-height:1.34; margin-bottom:14px;
}
.music-page .m-story p{
  font-size:.8rem; line-height:1.78; color:var(--smoke);
}
.music-page .story-txt{ padding:26px 24px; flex:1; }
.music-page .story-img{ width:30%; flex-shrink:0; overflow:hidden; }
.music-page .story-img img{ width:100%; height:100%; object-fit:cover; }

/* the vision panel reads as verse, not prose */
.music-page .verse p{ line-height:1.95; }

/* skyline sits behind the copy rather than beside it */
.music-page .m-story .story--skyline{ position:relative; overflow:hidden; }
.music-page .story-skyline-bg{
  position:absolute; right:0; bottom:0; left:0; top:0;
  background:url('images/music/skyline.jpg') no-repeat right bottom / 96% auto;
  opacity:.95; pointer-events:none;
}
.music-page .story--skyline .story-txt{
  background:linear-gradient(90deg, var(--ink) 34%, rgba(5,6,12,.72) 62%, transparent);
}
.music-page .story--skyline .story-txt{ position:relative; z-index:1; }

@media(max-width:1079px){
  .music-page .m-story > section{ border-left:none; border-top:1px solid rgba(214,163,74,.16); }
  .music-page .m-story > section:first-child{ border-top:none; }
}
@media(max-width:520px){
  .music-page .story-img{ width:40%; }
}

/* ---------- CLOSING BAND ---------- */
.music-page .m-outro{
  position:relative;
  padding:38px clamp(24px, 5vw, 70px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:22px 30px;
  border-top:1px solid rgba(214,163,74,.16);
  background:
    linear-gradient(rgba(4,5,10,.72), rgba(4,5,10,.9)),
    url('images/music/hero-eclipse-ocean.jpg') no-repeat center 68% / cover;
}
.music-page .m-outro h2{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.5rem, 3vw, 2.2rem); letter-spacing:.12em; color:var(--gold-bright);
  margin-right:auto;
}
@media(max-width:860px){
  .music-page .m-outro h2{ margin-right:0; width:100%; text-align:center; }
  .music-page .m-outro{ justify-content:center; }
}
.music-page .btn-outro{
  display:inline-flex; align-items:center; gap:12px;
  border:1px solid var(--gold); color:var(--gold-bright);
  font-size:.68rem; letter-spacing:.18em; padding:14px 22px;
  background:rgba(5,6,12,.5);
  transition:background .3s ease, color .3s ease;
}
.music-page .btn-outro:hover{ background:var(--gold); color:var(--ink); }

/* ---------- FOOTER ----------
   Shared .site-footer markup, sitting on the music page's ink background. */
.music-page .site-footer{ background:var(--ink); border-top:1px solid rgba(255,255,255,.06); }

/* ---------- scroll reveal ---------- */
.music-page .m-reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s ease, transform .8s ease;
}
.music-page .m-reveal.in{ opacity:1; transform:translateY(0); }

@media(prefers-reduced-motion: reduce){
  .music-page .m-reveal{ transition:none; opacity:1; transform:none; }
}