:root {
  /* Colors */
  --main-green: #0C3C36;
  --dark-gray: #212020;
  --beige:  #FFFADE;

  /* Fonts */
  --header-font-family: "Petrona", serif;
  --header-font-weight: 600;
--light: 300;
--regular: 400;
  --medium: 500;
  --semibold: 600;
    --bold: 700;
    --italic: italic;
  --paragraph-font-family: "Montserrat", sans-serif;
  --paragraph-font-weight: 400;
--really-big-margin: 24vw;
  --big-margin: 12vw;
  --standard-margin: 8vw;
    --half-margin: 4vw;
 --quarter-margin: 2vw;
   --standard-padding: 8vw;
     --half-padding: 4vw;
     --quarter-padding:2vw;
     --p-font-size:14px;
}

/* V1: hide until musicals, lyrics carousel, or nav ship */
.v1-hidden {
  display: none !important;
}

h1,h2,h3,h4 {
  font-family: var(--header-font-family);
}

h3 {
  text-align: center;
      font-size: 30px;
      font-weight: var(--regular);
        color: var(--main-green);
}

h4 {
     font-size: 20px;
      font-weight: var(--semibold);
        color: var(--main-green);
}

.collaborators__list-item span {
  font-family: var(--header-font-family);
}


i {
  color: var(--main-green);
}
@media all and (min-width: 960px) {
.nav-right a{
   font-size: 14px;
  }

  .nav-left {
    font-size: 18px;
  }
}

#first-border-section {
  margin-right: 0;
  position: relative;
}

#second-border-section {
  border-top:1px solid white;
  height:25px;
  border-bottom:1px solid white;
}

.third-border-wrapper {
  position: relative;
  overflow: visible;   /* important if any ancestor was clipping */
}

/* 2) Draw the line as an absolutely-positioned pseudo-element */
.third-border-wrapper::before {
  content: "";
  position: absolute;
  top: -50px;
  bottom: 0;
  height: 109%;
  left: 70px;
  width: 1px;
  background: white;
  z-index: 1;
}

#fourth-border-section, #fifth-border-section {
  border-top: 1px solid white;
  height: 10px;
  margin-left: -200px;
  margin-right: -200px;
}

@media all and (max-width: 959px) and (min-width: 600px) {
.nav-right a{
     font-size: 12px;
  }

  .nav-left {
  font-size: 20px;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
.nav-right a{
 font-size: 10px;
  }

  .nav-left {
  font-size: 18px;
  }
}



/* Reset basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
background: linear-gradient(
  to bottom,
  #F7F3ED 0%,
  #F7F3ED 17%,
  #CAD6D5 63%,
  #728482 100%
);



  color: var(--dark-gray);
  font-family: var(--paragraph-font-family);
  font-weight: var(--paragraph-font-weight);
  line-height: 1.5;
}

/* Sticky Top Navigation */
.top-nav {
  position: sticky;
  top: 0;
  width: 100%;
  color: var(--main-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  z-index: 1000;
  max-width: 1240px;

}

.lyric-count {
      margin-right: .5vw;
    font-weight: 600;
}

.nav-left {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.title-control-holder {
  display:flex;
  justify-content:end;
}

.nav-right a {
  font-family: var(--paragraph-font-family);
  font-weight: var(--paragraph-font-weight);

  color: var(--main-green);
  text-decoration: none;
  margin-left: 20px;
  position: relative;
  padding-bottom: 4px;
}

.nav-right a.active::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--main-green);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.lyricist-banner {
  position: relative;
  display: inline-block;
  margin: 40px auto;
  max-width: 100%;
}

.lyricist-banner img {
  display: block;
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.lyricist-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 68vh;/* adjust as needed */
}

/* Shared styles for both text pieces */
.lyricist-banner span {
  position: absolute;
  font-family: var(--header-font-family);
  font-weight: 400;
  font-size: 120px;
  color: var(--main-green);
  pointer-events: none;
  white-space: nowrap;
}


/* Position left piece (desktop: fixed offset from photo) */
.lyricist-left {
  top: 50%;
  left: -175px;
  transform: translateY(-50%);
}

/* Position right piece */
.lyricist-right {
  top: 50%;
  right: -128px;
  left: auto;
  transform: translateY(-50%);
  font-style: italic;
}

/* Tablet / phone: anchor split text to photo edges so it tracks image width */
@media (max-width: 900px) {
  .lyricist-wrapper {
    min-height: auto;
    padding: 1rem max(0.75rem, env(safe-area-inset-left)) 1.5rem max(0.75rem, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  .lyricist-banner {
    margin: 1.5rem auto;
    max-width: min(320px, 82vw);
  }

  .lyricist-banner img {
    max-width: 100%;
    width: 100%;
  }

  .lyricist-banner span {
    font-size: clamp(2rem, 11vw, 4.25rem);
  }

  .lyricist-left {
    left: 0;
    transform: translate(calc(-100% - 0.2em), -50%);
  }

  .lyricist-right {
    right: 0;
    left: auto;
    transform: translate(calc(100% + 0.2em), -50%);
  }
}

/* Narrow phones: smaller photo + gutter so “Lyri” / “cist” stay on-screen */
@media (max-width: 520px) {
  .lyricist-wrapper {
    padding-left: max(1.25rem, min(14vw, 3.25rem));
    padding-right: max(1.25rem, min(14vw, 3.25rem));
  }

  .lyricist-banner {
    max-width: min(240px, 72vw);
  }

  .lyricist-banner span {
    font-size: clamp(1.75rem, 10vw, 3rem);
  }
}

.italic {
  font-style: var(--italic);
  line-height:0;
}


.hello {
  font-family: var(--header-font-family);
  font-weight: var(--regular);
  font-size: 30px;
  text-align: center;
  padding: 2vw;
  margin-left: 20vw;
  margin-right: 20vw;
  line-height: initial;
  color: var(--main-green);

}



.intro-box {
  background:white;
 background-color: rgba(255, 255, 255, 0.3);
  margin: 0 var(--big-margin) var(--half-margin) var(--big-margin);
  padding: var(--half-padding) var(--standard-padding) var(--half-padding) var(--standard-padding);
  position:relative;

}

.signature-img {
  position: absolute;
    bottom: -23px;
    right: -5px;  /* distance from right edge */
  max-width: 200px; /* adjust size as needed */
  height: auto;
}

.intro-box p {
  font-size:var(--p-font-size);
  color: var(--dark-gray);
  opacity:100%;
  margin-bottom: var(--quarter-margin);
}

.intro-box p:last-of-type {
  margin-bottom: 0;
}
.bio-text p {
   margin-bottom: var(--quarter-margin);
   font-size: var(--p-font-size);
}


.bio-text p:last-of-type {
  margin-bottom:0;
}



.lyrics-section {
margin: var(--half-margin) var(--big-margin);

}

.lyrics-text {
  position: relative;

}

.lyrics-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
column-gap: 2em;
  background: rgba(255, 255, 255, 0.3);
    
}

.lyrics-image {
  border-radius: 4px;
      width: 100%;
}

.lyrics-section h3 {

  margin-bottom: 10px;
}

.lyrics-text p {
line-height:3vw;
  font-size: var(--p-font-size);
  white-space: pre-line;
}


.fa-volume-high {
  position: absolute;
    right: 5%;
    cursor:pointer;
}

.fa-arrow-circle-left, .fa-arrow-circle-right {
  cursor:pointer;
  font-size:22px;
}

.fa-arrow-circle-right {
  margin-left: .7vw;
}

.lyrics-controls {
  margin-top: 10px;
}

.lyrics-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--main-green);
  border-radius: 50%;
  margin-right: 5px;
  opacity: 0.3;
}

.lyrics-dot.active {
  opacity: 1;
}

.lyrics-next {
  background: none;
  border: none;
  color: var(--main-green);
  font-family: var(--paragraph-font-family);
  cursor: pointer;
  margin-left: 20px;
  font-weight: var(--bold);
}


.biography {
  margin: var(--half-margin) var(--big-margin);
  background: rgba(255, 255, 255, 0.3);
  padding: var(--half-padding);
}

.biography h3 {
  font-family: var(--header-font-family);
  font-size: 30px;
  color: var(--main-green);
  margin-bottom: 20px;
}

.bio-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.bio-photo {
  max-width: 250px;
  border-radius: 8px;
}

.collaborators {
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  margin: var(--half-margin) auto;
  padding: var(--quarter-padding) var(--half-padding);
}

.collaborators h3 {
  font-family: var(--header-font-family);
  font-size: 30px;
  color: var(--main-green);
  text-align: center;
  margin-bottom: 20px;
}

/* Grid Layout */
.collaborators__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0;
}

@media (min-width: 1024px) {
  .collaborators__grid {
    grid-template-columns: 35% 65%;
    gap: 1.5rem;
    align-items: start;
  }

  .collaborators__detail {
    justify-self: center;
  }
}

/* List Styles */
.collaborators__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0;
}

.collaborators__list-item {
  background: transparent;
  border: none;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  color: var(--main-green);
  position: relative;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.collaborators__list-item:hover {
  background: rgba(255, 255, 255, 0.5);
}


.collaborators__list-item.is-active {
  background: rgba(255, 255, 255, 0.3);
  padding-left: 1.5rem;
}

.collaborators__list-item.is-active[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.3);
}

.collaborators__list-name {
  font-size: 20px;
  font-weight: var(--semibold);
    color: var(--main-green);
}

.collaborators__list-role {
  font-style: var(--italic);
  color: var(--main-green);
  opacity: 0.8;
  font-size: 16px;
}

/* Detail Panel */
.collaborators__detail {
  background: rgba(255, 255, 255, 0.3);
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 0;
  max-width:400px;
}

.collaborators__photo-wrap {
  margin: 0 0 1.5rem 0;
  text-align: center;
}

.collaborators__photo {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.25s ease;
}

.collaborators__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.collaborators__name {
  font-family: var(--header-font-family);
  font-size: 20px;
  color: var(--main-green);
  margin: 0;
  font-weight: var(--semibold);
}

.collaborators__role {
  font-family: var(--paragraph-font-family);
  font-size: 16px;
  color: var(--main-green);
  margin: 0;
  font-style: var(--italic);
}

.collaborators__blurb {
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  color: var(--dark-gray);
  line-height: 1.6;
  margin: 0;
}

.collaborators__link-wrap {
  margin: 0;
  margin-top: 0.5rem;
}

.collaborators__link {
  color: var(--main-green);
  text-decoration: none;
  font-weight: var(--semibold);
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.collaborators__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .collaborators__list-item,
  .collaborators__photo {
    transition: none;
  }
}

/* Photo fallback */
.collaborators__photo-fallback {
  width: 200px;
  height: 200px;
  background: var(--main-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  border-radius: 8px;
  margin: 0 auto;
  font-family: var(--header-font-family);
}

/* Mobile improvements */
@media (max-width: 1023px) {
  .collaborators__grid {
    gap: 1.5rem;
  }
  
  .collaborators__detail {
    padding: 1.5rem;
  }
  
  .collaborators__list-item {
    min-height: 60px;
    padding: 1.25rem;
  }
  
  .collaborators__photo {
    max-width: 250px;
  }
}

/* Instagram feed slot (paste widget iframe / script from SnapWidget, Elfsight, etc.) */
.instagram-section {
  margin: var(--half-margin) var(--big-margin);
  padding: var(--half-padding);
}

.instagram-section h3 {
  font-family: var(--header-font-family);
  font-size: 30px;
  color: var(--main-green);
  margin-bottom: 0.75rem;
  text-align: center;
}

.instagram-section__lead {
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  color: var(--dark-gray);
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.instagram-section__lead a {
  color: var(--main-green);
  font-weight: var(--semibold);
  text-decoration: none;
}

.instagram-section__lead a:hover {
  text-decoration: underline;
}

.instagram-section__embed-wrap {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 1rem;
  min-height: 8rem;
}

.instagram-section__embed-wrap:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
}

.instagram-section__embed-wrap:empty::after {
  content: "Add your Instagram feed embed here (see HTML comment in index.html).";
  font-family: var(--paragraph-font-family);
  font-size: 13px;
  color: var(--dark-gray);
  opacity: 0.75;
  text-align: center;
  padding: 1rem;
  max-width: 22rem;
  line-height: 1.5;
}

.instagram-section__embed-wrap iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 6px;
}

.instagram-section__cta {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.instagram-section__cta-link {
  display: inline-block;
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--semibold);
  color: var(--main-green);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--main-green);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, color 0.2s ease;
}

.instagram-section__cta-link:hover {
  background: var(--main-green);
  color: #fff;
}

/* Musicals: grid with thin white lines, page gradient shows through */
.musicals {
  margin: 0 var(--big-margin) var(--half-margin);
  padding: var(--half-padding);
}

.musicals h3 {
  font-family: var(--header-font-family);
  font-size: 30px;
  color: var(--main-green);
  margin-bottom: 0;
  text-align: center;
  padding-bottom: 20px;
}

/* White line directly below "Musicals" title + full grid border */
.musicals-grid-wrapper {
  border: 1px solid white;
  margin-top: 0;
}

.musicals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.musical-item {
  padding: 1.5rem 1.75rem;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Right column: no extra right border (wrapper provides edge) */
.musical-item:nth-child(2n) {
  border-right: none;
}

/* Last row: no bottom border (wrapper provides edge) */
.musical-item:nth-child(n+7) {
  border-bottom: none;
}

.musical-item--empty {
  min-height: 80px;
}

.musical-item p {
  font-family: var(--header-font-family);
  font-size: 1.25rem;
  font-weight: var(--regular);
  color: var(--dark-gray);
  margin-bottom: 12px;
}

.musical-see-more {
  display: inline-block;
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  font-weight: var(--semibold);
  color: #212020;
  text-decoration: none;
  border: 1px solid #212020;
  background: rgba(255, 255, 255, 0.35);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.musical-see-more:hover {
  background: #212020;
  color: #fff;
}

.contact {
  margin: var(--half-margin) var(--big-margin);
}

.contact h3 {
  font-family: var(--header-font-family);
  font-size: 30px;
  color: var(--main-green);
  margin-bottom: 20px;
  text-align: left;
}

.contact-box {
  display: flex;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  padding: var(--half-padding);
  border-radius: 6px;
  width: 100%;
}

.contact-image-wrap {
  width: 260px;
  flex-shrink: 0;
}

.contact-photo {
  display: block;
  max-width: 100%;
  width: 100%;
  border-radius: 4px;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.contact-inquiries-title {
  font-family: var(--header-font-family);
  font-size: 22px;
  font-weight: var(--semibold);
  color: var(--main-green);
  margin-bottom: 1rem;
}

.contact-details {
  font-family: var(--paragraph-font-family);
  font-size: var(--p-font-size);
  color: var(--dark-gray);
  margin-bottom: 0.25rem;
}

.contact-details:last-child {
  margin-bottom: 0;
}

.contact a {
  color: var(--main-green);
  text-decoration: none;
  font-family: var(--paragraph-font-family);
}

/* ---------- Mobile & tablet portrait ---------- */
@media (max-width: 900px) {
  .top-nav {
    max-width: none;
    width: 100%;
    padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .nav-left {
    letter-spacing: 1px;
    font-size: clamp(14px, 3.8vw, 18px);
  }

  .nav-right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: flex-end;
  }

  .hello {
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
    padding: 1rem 0;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .intro-box {
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
    margin-bottom: 2rem;
    padding: 1.25rem 1.25rem 2.5rem;
  }

  .signature-img {
    max-width: min(160px, 42vw);
    right: 0.5rem;
    bottom: -18px;
  }

  .biography {
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
    padding: 1.25rem;
  }

  .biography h3 {
    text-align: center;
  }

  .bio-content {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .bio-photo {
    max-width: min(280px, 100%);
  }

  .collaborators {
    margin-left: auto;
    margin-right: auto;
    padding: 1.25rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }

  .collaborators h3 {
    text-align: center;
  }

  .collaborators__grid {
    margin-left: 0;
    margin-right: 0;
  }

  .instagram-section {
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
    padding: 1.25rem;
  }

  .instagram-section__embed-wrap iframe {
    min-height: 360px;
  }

  .contact {
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
  }

  .contact h3 {
    text-align: center;
  }

  .contact-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
  }

  .contact-image-wrap {
    width: 100%;
    max-width: 260px;
  }
}