:root{
  --head-w: 30%;     
  --gap: 2%;         
  --title-m: clamp(26px, 3.9vw, 30px);  
  --title-d: clamp(36px, 2.0vw, 50px);  
  --slogan-m: clamp(16px, 3.9vw, 20px); 
  --slogan-d: clamp(14px, 1.2vw, 18px); 
  --img-bd: .15vw;   
}


.content.content--music{
  display:block;      
  overflow:visible;
}
.content.content--music::after{
  content:"";
  display:table;
  clear:both;          
}

/* =========================================================
   1) Top — slogan + title (full width, centered)
========================================================= */
.band-slogan{
  text-align:center;
  font-weight:600;
  letter-spacing:.08em;
  color:#ccc;
  margin:.6rem 0 .4rem;
  font-size:var(--slogan-m);
}
.band-title-name > .title{
  text-align:center;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.12;
  margin:0 0 .8rem;
  
  word-break:keep-all;
  font-size:var(--title-m);
}
.band-title-name > .title > a{
  color:inherit;
  text-decoration:none;
  word-break:keep-all;
}

/* =========================================================
   2) Head section — keep full width on mobile
      (Image + meta only; slogan/title is not floated)
========================================================= */
.band-header-section{
  width:100%;
  display:block;
  margin:0 0 1.25rem;    
}

.band-image-box{
  width:100%;
  margin:0 0 1rem;

}
.band-image-box img{
  display:block;
  width:100%;
  height:auto;  
  box-sizing:border-box;
}


.band-meta .band-info-text table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  background:transparent;
}

.band-meta .band-info-text [style*="width"]{  width:auto; }
.band-meta .band-info-text [style*="height"]{ height:auto; }


.band-meta .band-info-text td.t-1,
.band-meta .band-info-text th.t-1{
  white-space:nowrap;
  word-break:normal;
 
  font-weight:600;
  text-align: center;
  color:#eee;
  padding:2px 6px;
  background-color: #373636;
}
.band-meta .band-info-text td.t-2,
.band-meta .band-info-text th.t-2{
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:anywhere;
  vertical-align:top;
  padding:5px 10px;
}
.band-meta .band-info-text td,
.band-meta .band-info-text th{
  border:1px solid rgba(255,255,255,.35);
  line-height:1.6;
  color:#ddd;
}

.band-info-text > p:last-child {
  margin: 0;
  line-height: 0;
  height: 0;
  display: none; 
  
}

/* =========================================================
   3) Body — ensure it can wrap around floats on desktop
========================================================= */
.content.content--music > p,
.content.content--music > div,
.content.content--music > section,
.content.content--music > article,
.content.content--music .wp-block-group,
.content.content--music .wp-block-columns,
.content.content--music .wp-block-column{
  clear:none;
  overflow:visible;
  display:block;
  float:none;              
}

/* =========================================================
   4) Desktop (≥1024px): left head floats, body wraps right
   - Fundamentally resolve top alignment issues here
========================================================= */

:root{
  --head-w: 35%; 
  --gap-img: 2%;          
  --gap-meta: 2%;         
  
}
@media (min-width:1024px){
  .band-slogan{ font-size: var(--slogan-d); }
  .band-title-name > .title{ font-size: var(--title-d); margin-top:15px;  font-family: 'Times New Roman', Times, serif;}
  .band-title-name{ display:block; margin-bottom: clamp(1rem, 1.1rem + 3vw, 7rem); }

  .band-image-box{
    float:left;
    width: var(--head-w);
    margin: 0 var(--gap-img) var(--gap-img) 0;
    
  }
  .band-meta{
    float:left;
    clear:left;
    width: var(--head-w);
    margin-top: 0;
    margin-right: var(--gap-img);
    margin-bottom: calc(var(--gap-img));
    margin-left: 0;
  }

  
  .band-header-section{ margin-bottom:0; }
  .band-header-section + p,
  .band-header-section + div,
  .band-header-section + section,
  .band-header-section + article,
  .band-header-section + .wp-block-group,
  .band-header-section + .wp-block-columns{ margin-top:0; }
  .band-header-section + .wp-block-group > *:first-child{ margin-top:0; }

  :root{ --head-top-offset: 0.35rem; }
  .band-image-box,
  .band-meta{ margin-top: var(--head-top-offset); }
}




/* =========================================================
   5) Ultra narrow tweaks (optional)
========================================================= */
@media (max-width:1023px){

  
  .band-title-name,
  .band-title-name > .title,
  .band-image-box,
  .band-thumbnail{
    position: static !important;  
    float: none !important;        
    transform: none !important;    
    z-index: auto !important;
  }

 
  .band-slogan{
    display:block;
    text-align:center !important;
    font-size: var(--slogan-m) !important;
    margin: 0 0 0px 0;
    clear: both;
  }

  
  .band-title-name{
    display:block;
    clear:both;
    margin: 0 0 clamp(12px, 5vw, 28px) 0;
  }
  .band-title-name > .title{
    display:block;
    margin: 0 !important;
    font-size: var(--title-m) !important;
    line-height: 1.15;
    font-family: 'Times New Roman', Times, serif;
  }

  
  .band-thumbnail{
    width: 100%;
    margin: 0 auto;
    display: flow-root;                 
    clear: both;

   



  
  .band-meta {
    font-size: clamp(0.75rem, 1.8vw, 0.95rem);
    margin-top: 50px !important;
    clear: both;
  }
}
}


/* =========================================================
   6) band-meta (font-reponsive)
========================================================= */

@media (min-width:1024px){
  .band-meta .band-info-text td.t-1 { font-size: clamp(0.3rem, 0.8vw, 0.95rem);}   
  .band-meta .band-info-text td.t-2 { font-size: clamp(0.8rem, 1.0vw, 0.95rem);}   

  .band-meta{
    margin-bottom: 0 !important;
  }
  
  
  .band-meta > *:last-child,
  .band-info-text > *:last-child,
  .band-meta p:last-child,
  .band-meta table {
    text-align:left;
  }

}



/* =========================================================
   7) Spacing between title & band-thumbnail (responsive)
========================================================= */



@media (max-width:480px){
  .band-thumbnail{
    
    margin-top: clamp(24px, 20vw, 36px) !important;
  }
}


@media (min-width:481px) and (max-width:767px){
  .band-thumbnail{
    
    margin-top: clamp(22px, 16vw, 30px) !important;
  }
}


@media (min-width:768px) and (max-width:1023px){
  .band-thumbnail{
    
    margin-top: clamp(24px, 18vw, 35px) !important;
  }
}




/* ========================================
   8) Post Subtitle Styles
   ======================================== */

@media (min-width: 1024px) {
	p.entry-subtitle {
  font-size: 1.5em !important;
  font-weight: 400;
  color: rgb(247, 247, 247);
  padding-top: 10px !important;
  margin-bottom: 15px;
  line-height: 1.4;
  text-align: center !important;
  font-family: times;  
  text-wrap: balance !important;
  max-width:700px;
  margin:0 auto !important;
}
}



.band-title-name .entry-subtitle {
  display: block;
  margin-top: 8px;
  text-align: center !important;
}


.bs-blog-post-title + .entry-subtitle {
  margin-top: 12px;
  text-align: center !important;
}


@media (max-width: 1023px) {
  p.entry-subtitle {
    font-size: 1.1em;
    padding-top: 7px;
    margin-bottom: 12px;
    text-align: center !important;
    text-wrap: balance !important;
    word-break: break-word !important;
  }
}


@media (min-width: 768px) and (max-width: 1023px) {
  p.entry-subtitle {
    font-size: 1.15em;
    text-align: center !important;
	padding-top: 7px;
  }
}



.mega-sub-menu li.mega-current-menu-item > a,
.mega-sub-menu li.mega-current-menu-ancestor > a,
.mega-sub-menu li.mega-current-menu-parent > a,
.mega-sub-menu li.mega-current-post-ancestor > a,
.mega-sub-menu li.mega-current-post-parent > a {
    color: #ffffff !important;
}