@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Roboto:wght@400;500;600;700;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #1a1508;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.bg-fixed { display: none; }

/* NAV */
.site-nav {
  width: calc(100% - 48px);
  padding: 32px 20px 24px;
  margin: 0 auto 24px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}

.nav-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-bottom: 20px;
}

.nav-social a { color: #fff; opacity: 0.9; transition: opacity 0.2s; }
.nav-social a:hover { opacity: 1; }
.nav-social svg { width: 24px; height: 24px; fill: currentColor; }

.nav-wordmark {
  display: block;
  font-family: 'Arvo', serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

.nav-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
}

.nav-links li { text-align: center; }

.nav-links a {
  font-family: 'Roboto', sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.88;
  transition: opacity 0.2s;
}

.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Primary-nav menus -------------------------------------------------
   MUSIC carries a small menu (Releases / Mom's Photo Album). The five-column
   grid above is untouched: the toggle is positioned OUTSIDE the link's box so
   the word MUSIC sits exactly where it always has, and the menu is absolutely
   positioned so it never pushes the header around. Any primary item can take
   the same shape later (li.has-menu). Desktop: hover or keyboard focus. Phones
   have no hover, so the small caret is a tap target (see nav.js). */
.nav-links li { position: relative; }
.nav-item { position: relative; display: inline-block; }

.menu-toggle {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;          /* comfortable tap target ... */
  margin-left: 2px;
  padding: 0;
  background: none; border: none;
  color: #fff; opacity: 0.55;
  cursor: pointer;
}
.menu-toggle::after {                 /* ... small caret drawn inside it */
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -30%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.menu-toggle:hover, .has-menu.open > .nav-item > .menu-toggle { opacity: 0.95; }
.menu-toggle:focus-visible { outline: 1px solid rgba(255,255,255,0.6); outline-offset: 2px; border-radius: 3px; }

.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 200px;
  padding: 10px 22px;
  list-style: none;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.62);   /* the site's panel tint, darker so it reads over the photo */
  border: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
}
/* Invisible bridge across the 12px gap, so the cursor can travel from MUSIC into
   the menu without the menu closing. */
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
.nav-menu li { text-align: center; }
.nav-menu a {
  display: block;
  padding: 8px 0;
  font-size: 0.72rem;                  /* a step down from the 0.82rem primary links */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.78;
}
.nav-menu a:hover { opacity: 1; }

.has-menu.open > .nav-menu { display: block; }
@media (hover: hover) {
  .has-menu:hover > .nav-menu,
  .has-menu:focus-within > .nav-menu { display: block; }
}

/* SECTION HEADINGS */
.section-heading {
  font-family: 'Arvo', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 auto 28px;
  max-width: 1300px;
}

.music-page-section .section-heading { max-width: 1300px; }

/* EMAIL SIGNUP */
.signup-section {
  background-color: rgba(0, 0, 0, 0.25);
  text-align: center;
  padding: 60px 20px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
}

.signup-section p {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 22px;
  color: #fff;
}

.signup-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}

.signup-form input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  background: #fff;
  border: none;
  color: #111;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  outline: none;
}

.signup-form input[type="email"]::placeholder { color: #888; }

.signup-form button {
  padding: 14px 28px;
  background: #1a1a1a;
  border: none;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.signup-form button:hover { background: #333; }

/* ABOUT (homepage) */
.about-section { padding: 20px 20px 60px; width: calc(100% - 48px); margin: 0 auto 24px; background-color: rgba(0, 0, 0, 0.25); }

.about-grid {
  margin: 0 auto;
  max-width: 1300px;
  overflow: hidden;
}

.about-photo {
  float: left;
  width: 420px;
  margin: 0 40px 20px 0;
}

.about-photo img { width: 100%; border-radius: 8px; }

.about-name {
  font-family: 'Arvo', serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.about-subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.75);
}

.about-body p {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.85;
  color: rgba(255,255,255,0.92);
  margin-bottom: 16px;
}

/* LATEST MUSIC (homepage) */
.music-section { padding: 20px 20px 60px; width: calc(100% - 48px); margin: 0 auto 24px; background-color: rgba(0, 0, 0, 0.25); }

.music-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin: 0 auto 48px;
  max-width: 1300px;
}

.audio-player.music-item-player {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.music-item > .music-item-link { grid-column: 1 / -1; }

.music-section .section-heading { max-width: 1300px; }

.music-item img { width: 100%; }

.music-item-title {
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.music-item-artist {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}

.music-item-desc {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.78;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}

.music-item-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* BIO PAGE */
.bio-section { padding: 20px 20px 80px; width: calc(100% - 48px); margin: 24px auto; background-color: rgba(0, 0, 0, 0.25); }

.bio-plot-heading {
  font-family: 'Arvo', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 auto 48px;
  max-width: 1300px;
}

.act-block {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
  margin-bottom: 72px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.act-block:nth-of-type(even) { grid-template-columns: 380px 1fr; }

.act-label {
  font-family: 'Arvo', serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.act-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
}

.act-body p {
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.88;
  color: rgba(255,255,255,0.92);
  margin-bottom: 16px;
}

.act-photo img { width: 100%; }

.act-block:nth-of-type(3) .act-photo { margin-top: 60px; }

/* SHOWS PAGE */
.shows-section { padding: 20px 20px 60px; width: calc(100% - 48px); margin: 24px auto; background-color: rgba(0, 0, 0, 0.25); }

.shows-heading {
  font-family: 'Arvo', serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  line-height: 1.1;
}

.shows-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
}

.shows-text { flex: 0 1 480px; }

.shows-live-photo { flex: 0 0 320px; max-width: 320px; }
.shows-live-photo img { width: 100%; }

.shows-booking { margin-top: 36px; font-size: 0.9rem; }
.shows-booking span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 5px;
}
.shows-booking a { color: #fff; text-decoration: underline; }

/* MUSIC PAGE */
.music-page-section { padding: 20px 20px 80px; width: calc(100% - 48px); margin: 24px auto; background-color: rgba(0, 0, 0, 0.25); }

.release-block { margin-bottom: 64px; }

.release-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
  margin: 0 auto;
  max-width: 1300px;
}

.release-artwork img { width: 100%; }

.release-title {
  font-family: 'Arvo', serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.release-artist {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}

.release-share {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.release-desc {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}

.stream-links { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.stream-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: border-color 0.2s, color 0.2s;
}

.stream-link:hover { border-color: #fff; color: #fff; }
.stream-link svg { width: 13px; height: 13px; fill: currentColor; }

/* AUDIO PLAYER */
.audio-player {
  margin-top: 12px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(15,15,15,0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
}

.player-track {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.15s;
}

.player-track:last-of-type { border-bottom: none; }
.player-track:hover { background: rgba(255,255,255,0.06); }
.player-track.active { background: rgba(255,255,255,0.09); }

.track-num { font-size: 0.85rem; color: rgba(255,255,255,0.4); text-align: right; }
.track-play-icon { display: none; align-items: center; }
.player-track.active .track-num { display: none; }
.player-track.active .track-play-icon { display: flex; }
.track-play-icon svg { width: 15px; height: 15px; fill: #fff; }

.track-name { font-size: 0.98rem; color: rgba(255,255,255,0.88); }
.player-track.active .track-name { color: #fff; font-weight: 700; }
.track-duration { font-size: 0.8rem; color: rgba(255,255,255,0.4); }

.player-controls {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.play-btn {
  width: 52px; height: 52px;
  background: #fff;
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.2s;
}

.play-btn:hover { background: #ddd; }
.play-btn svg { width: 20px; height: 20px; fill: #111; }

.player-right { display: flex; flex-direction: column; gap: 8px; }

.now-playing-title {
  font-size: 0.95rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.progress-row { display: flex; align-items: center; gap: 12px; }

.progress-bar {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.2);
  cursor: pointer; border-radius: 2px;
}

.progress-fill {
  height: 100%; background: #fff;
  border-radius: 2px; width: 0%;
  pointer-events: none;
}

.time-display { font-size: 0.78rem; color: rgba(255,255,255,0.45); white-space: nowrap; }

.lyrics-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.lyrics-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

.lyrics-panel {
  display: none;
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
  font-size: 0.88rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.85);
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}

.lyrics-panel.open { display: block; }

/* CONTACT PAGE */
.contact-section { padding: 20px 20px 80px; width: calc(100% - 48px); margin: 24px auto; background-color: rgba(0, 0, 0, 0.25); }

.contact-emails { margin-bottom: 36px; }

.contact-email-item { margin-bottom: 18px; }

.contact-email-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 3px;
}

.contact-email-item a { font-size: 0.9rem; color: #fff; }

.contact-form { display: flex; flex-direction: column; }

.contact-form label {
  font-size: 0.85rem; font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-top: 16px; margin-bottom: 5px; display: block;
}

.contact-form input,
.contact-form textarea {
  width: 100%; max-width: 760px;
  padding: 12px 16px;
  background: #fff; border: none;
  color: #111;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem; outline: none; resize: vertical;
}

.contact-form textarea { min-height: 130px; }

.contact-form button {
  margin-top: 18px; align-self: flex-start;
  padding: 12px 32px;
  background: #1a1a1a; border: none; color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s;
}

.contact-form button:hover { background: #333; }

.hidden-field { display: none !important; }

/* FOOTER */
.site-footer {
  padding: 36px 20px;
  width: calc(100% - 48px);
  margin: 24px auto 0;
  background-color: rgba(0, 0, 0, 0.25);
  font-size: 0.76rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  body { background-image: none !important; }
  .bg-fixed {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }

  .nav-links { gap: 16px; flex-wrap: wrap; }
  .nav-links a { font-size: 0.72rem; }
  .menu-toggle { width: 24px; height: 24px; margin-left: 0; }
  /* MUSIC is the right-most column on a phone; hang its menu from the right edge
     so it never runs off-screen. */
  .has-menu:last-child > .nav-menu { left: auto; right: 0; transform: none; }
  .nav-menu { min-width: 180px; padding: 8px 18px; }
  .nav-menu a { font-size: 0.68rem; }
  .nav-wordmark { font-size: clamp(1.9rem, 8vw, 2.8rem); }

  .about-section, .music-section, .bio-section,
  .shows-section, .music-page-section, .contact-section,
  .site-footer { padding-left: 20px; padding-right: 20px; }

  .act-block, .act-block:nth-of-type(even), .music-item, .release-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .act-block > .act-body { order: 1; }
  .act-block > .act-photo { order: 2; margin-top: 0; }
  .act-photo img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }

  .about-photo { float: none; width: 100%; margin: 0 0 20px; }

  .signup-form { flex-direction: column; }

  .shows-heading { font-size: clamp(1.6rem, 6vw, 2.5rem); }

  .shows-layout { flex-direction: column; }
  .shows-text, .shows-live-photo { max-width: 100%; flex: 1 1 auto; }
}

.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;}

/* Terms / Privacy line in the site footer. Carriers reviewing the toll-free
   registration need both documents reachable from any page, not just /marina. */
.footer-legal { margin-top: 4px; }
.footer-legal a { color: rgba(255,255,255,0.55); text-decoration: underline; }
.footer-legal a:hover { color: rgba(255,255,255,0.85); }

/* ---------------------------------------------------------------- REFERENCES
   Sits under Latest Music. Quiet by design — it is a citation list, not a
   feature. The KBTX line is third-party proof of the Leslie's Laces story told
   in the bio above, which is worth more to a reader (and to Google) than a
   link back to something Colton owns. */
.refs-section {
  padding: 20px 20px 48px;
  width: calc(100% - 48px);
  margin: 0 auto 24px;
  background-color: rgba(0, 0, 0, 0.25);   /* same panel as About and Music */
  text-align: left;
}
.refs-section .section-heading { max-width: 1300px; }
.refs-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1300px;
}
.refs-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.refs-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.refs-label {
  display: inline-block;
  min-width: 96px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.refs-list a { color: #fff; text-decoration: underline; }
.refs-list a:hover { color: rgba(255,255,255,0.75); }
.refs-meta { color: rgba(255,255,255,0.45); font-size: 0.82rem; }

@media (max-width: 768px) {
  .refs-section { padding: 16px 20px 36px; width: calc(100% - 40px); }
  .refs-label { display: block; min-width: 0; margin-bottom: 3px; }
  .refs-meta { display: block; }
}