/* ================================================================
   CUSTOM STYLES — Tomás Méndez Sosa (Ethos template adaptation)
   ================================================================ */

/* Language toggle */
.lang-toggle {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
}

/* Facts grid (hero) */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media screen and (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}
.fact-card {
  text-align: center;
  padding: 20px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
}
.fact-card__number {
  font-size: 36px;
  font-weight: 700;
  color: #c9a84c;
  line-height: 1;
  margin-bottom: 6px;
}
.fact-card__label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: .03em;
}

/* ── Song catalog grids ── */

.celebrated-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 4rem;
}
@media screen and (max-width: 900px) {
  .celebrated-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
  .celebrated-grid { grid-template-columns: 1fr; }
}
.celebrated-item {
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.celebrated-item:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.05);
}
.celebrated-item__title {
  font-size: 15px;
  font-weight: 600;
  color: #c9a84c;
}
.celebrated-item__spotify {
  flex-shrink: 0;
  color: #1DB954;
  border: 1px solid rgba(29,185,84,0.3);
  border-radius: 50px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.celebrated-item:hover .celebrated-item__spotify { opacity: 1; }

.song-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media screen and (max-width: 900px) {
  .song-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px) {
  .song-grid { grid-template-columns: 1fr; }
}

.song-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-left: 2px solid #c9a84c;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.song-item:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.05);
}
.song-item__num {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  font-family: monospace;
  flex-shrink: 0;
}
.song-item__title {
  font-size: 13px;
  font-weight: 600;
  color: #c9a84c;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-item__spotify {
  flex-shrink: 0;
  color: #1DB954;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
}

/* Search */
.song-search {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 2.5rem;
  display: block;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.song-search:focus { border-color: #c9a84c; }
.song-search::placeholder { color: rgba(255,255,255,0.3); }

.song-count {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.song-count strong {
  color: #c9a84c;
  font-size: 24px;
  font-weight: 700;
  margin-right: 4px;
}

/* Letter dividers in song grid */
.song-grid__letter-divider {
  grid-column: 1 / -1;
  font-size: 20px;
  font-weight: 700;
  color: #c9a84c;
  padding: 2rem 0 0.5rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  margin-top: 1rem;
}

.no-results {
  text-align: center;
  color: rgba(255,255,255,0.3);
  padding: 2rem;
  font-size: 14px;
}

/* ── Song Modal ── */

.song-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.song-modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.song-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(201,168,76,0.08);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.3s;
}
.song-modal-overlay.is-active .song-modal {
  transform: scale(1) translateY(0);
}

.song-modal__header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.song-modal__title {
  font-size: 22px;
  font-weight: 700;
  color: #c9a84c;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.song-modal__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  line-height: 1;
}
.song-modal__close:hover { transform: scale(1.1); }

.song-modal__body {
  overflow-y: auto;
  padding: 24px 32px;
  flex: 1;
}

/* Spotify carousel */
.spotify-carousel { margin-bottom: 24px; }

.spotify-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.spotify-carousel__arrows { display: flex; gap: 8px; }
.spotify-carousel__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #c9a84c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  font-size: 18px;
  line-height: 1;
}
.spotify-carousel__arrow:hover { transform: scale(1.1); }

.spotify-carousel__iframe {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.spotify-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.spotify-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}
.spotify-carousel__dot.is-active {
  background: #c9a84c;
  transform: scale(1.4);
}

/* Modal lyrics */
.song-modal__lyrics {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  white-space: pre-line;
}
.song-modal__lyrics p { margin-bottom: 3px; }

/* Modal footer */
.song-modal__footer {
  padding: 16px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.song-modal__spotify-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px solid rgba(29,185,84,0.4);
  color: #1DB954 !important;
  font-size: 12px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: transform 0.2s;
}
.song-modal__spotify-link:hover { transform: scale(1.05); }

/* Epitaph */
.epitaph-quote {
  font-size: 28px;
  font-style: italic;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  margin: 2rem 0;
}


/* ================================================================
   SECTION BACKGROUND & TEXT COLOR OVERRIDES
   The Ethos template uses white backgrounds on portfolio,
   testimonials, and CTA sections. We force them dark.
   ================================================================ */

/* 1. Header — prevent logo/nav overlap with text-based logo */
.header-logo a {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #c9a84c !important;
  text-decoration: none !important;
  letter-spacing: .05em !important;
  white-space: nowrap;
}

/* Push nav + lang button to the right so they clear the text logo */
.header-nav-wrap {
  padding-left: 240px !important;
}
.header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2rem;
}

@media screen and (max-width: 900px) {
  .header-logo {
    left: 4rem !important;
  }
  .header-logo a {
    font-size: 14px !important;
  }
  .header-nav-wrap {
    padding-left: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .header-logo {
    left: 2.5rem !important;
  }
  .header-logo a {
    font-size: 13px !important;
  }
}

/* 2. Portfolio / Catalog section — dark background */
.s-portfolio {
  background-color: #0b0a15 !important;
}
.s-portfolio::before {
  background-color: transparent !important;
}
.s-portfolio h1,
.s-portfolio h3,
.s-portfolio .display-1,
.s-portfolio .subhead {
  color: #ffffff !important;
}
.s-portfolio .section-intro[data-num]::before {
  color: #c9a84c !important;
}
.s-portfolio p {
  color: rgba(255,255,255,0.5) !important;
}

/* 3. Testimonials — dark background */
.s-testimonials {
  background-color: #111111 !important;
}
.testimonial-slider p {
  color: rgba(255,255,255,0.85) !important;
}
.testimonial-slider__cite strong {
  color: #c9a84c !important;
}
.testimonial-slider__cite span {
  color: rgba(255,255,255,0.5) !important;
}
.testimonial-slider .slick-dots li button {
  background: rgba(255,255,255,0.3) !important;
}
.testimonial-slider .slick-dots li.slick-active button,
.testimonial-slider .slick-dots li:hover button {
  background: #c9a84c !important;
}

/* 4. CTA / Epitaph — dark background */
.s-cta {
  background-color: #0b0a15 !important;
  color: rgba(255,255,255,0.7) !important;
}
.s-cta h2 {
  color: #c9a84c !important;
}
.s-cta p {
  color: rgba(255,255,255,0.6) !important;
}

/* 5. Section intro numbers — gold on dark sections */
.s-portfolio .section-intro::before,
.s-testimonials .section-intro::before {
  color: rgba(201,168,76,0.15) !important;
}

/* 6. Portfolio section header text overrides */
.s-portfolio__header .display-1 {
  color: #ffffff !important;
}


/* ================================================================
   UX REVIEW FIXES
   ================================================================ */

/* ── 1.1 Biography section — dark background ── */
.s-about {
  background-color: #0d0c18 !important;
}
.s-about h1, .s-about h3, .s-about h4,
.s-about .display-1, .s-about .subhead {
  color: #ffffff !important;
}
.s-about p {
  color: rgba(255,255,255,0.65) !important;
}
.s-about .section-intro::before {
  color: rgba(201,168,76,0.12) !important;
}
.s-about__section--profile::before {
  display: none !important;
}
.position {
  border-top-color: rgba(255,255,255,0.08) !important;
}
.position__header h6 .position__co {
  color: #c9a84c !important;
}
.position__header h6 .position__pos {
  color: rgba(255,255,255,0.6) !important;
}
.s-about .position p {
  color: rgba(255,255,255,0.55) !important;
}
.s-about .right-vert-line {
  background-color: rgba(201,168,76,0.15) !important;
}

/* ── 1.2 Link hover — gold instead of original purple ── */
a:hover, a:focus, a:active {
  color: #d4b85e !important;
}

/* ── 1.4 Language toggle button sizing ── */
.lang-toggle.btn--small {
  height: 3.6rem !important;
  line-height: 3.2rem !important;
  padding: 0 2rem !important;
  font-size: 1.1rem !important;
}
.s-header .btn--stroke {
  border-color: rgba(255,255,255,0.4) !important;
  color: rgba(255,255,255,0.7) !important;
}
.s-header .btn--stroke:hover {
  background-color: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #fff !important;
}

/* ── 2.1 Fact cards — stronger backdrop for readability ── */
.fact-card {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fact-card__label {
  font-size: 13px !important;
  color: rgba(255,255,255,0.7) !important;
}

/* ── 2.2 Hero overlay — strengthen for text readability ── */
.s-hero::before {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.6) 100%
  ) !important;
  opacity: 1 !important;
}

/* ── 2.4 Song cards — minimum touch target ── */
.song-item {
  min-height: 44px;
}

/* ── 2.6 Modal scrollbar styling ── */
.song-modal__body::-webkit-scrollbar {
  width: 6px;
}
.song-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.song-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
.song-modal__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* ── 3.1 Visual separation between celebrated and complete catalog ── */
.celebrated-grid {
  margin-bottom: 6rem !important;
}

/* ── 3.2 Portfolio bottom padding ── */
.s-portfolio {
  padding-bottom: 10rem !important;
}

/* ── 3.3 Tighter section-intro spacing in catalog ── */
.s-portfolio .section-intro {
  margin-bottom: 6rem !important;
}

/* ── 4.2 Facts grid — single column on very small phones ── */
@media screen and (max-width: 400px) {
  .facts-grid { grid-template-columns: 1fr; }
}

/* ── 4.3 Celebrated items — consistent border-radius ── */
.celebrated-item {
  border-radius: 8px;
}

/* ── 4.4 Modal mobile responsive ── */
@media screen and (max-width: 600px) {
  .song-modal__body {
    padding: 16px 20px;
  }
  .song-modal__header {
    padding: 16px 20px 12px;
  }
  .song-modal__footer {
    padding: 12px 20px;
  }
  .song-modal {
    max-height: 95vh;
    border-radius: 12px;
  }
}

/* ── 5.3 Testimonial quotes — larger, more monumental ── */
.testimonial-slider p {
  font-size: 2.4rem !important;
  line-height: 1.6 !important;
  font-style: italic;
}

/* ── 6.1 Song card focus states for keyboard nav ── */
.song-item:focus,
.celebrated-item:focus {
  outline: 2px solid #c9a84c;
  outline-offset: -2px;
  background: rgba(255,255,255,0.05);
}

/* ── 7.2 Position border — warm tone ── */
.position {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── 8.4 Epitaph bottom padding ── */
.s-cta {
  padding-bottom: 10rem !important;
}


/* ================================================================
   HERO — portrait + content two-column layout
   ================================================================ */

/* Override the Ethos hero background image with a solid dark tone
   and a subtle blurred portrait glow behind the composition */
.s-hero--portrait {
  background-color: #0a0a0f !important;
  background-image: none !important;
  min-height: 100vh;
  padding: 14rem 4rem 8rem;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Subtle gold radial glow behind the name side */
.s-hero--portrait::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translateY(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(201,168,76,0.08) 0%,
    rgba(201,168,76,0) 60%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-portrait-wrap {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 5rem;
  align-items: center;
  width: 100%;
}

.hero-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(201, 168, 76, 0.2),
    0 0 60px rgba(201, 168, 76, 0.12);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.05) saturate(0.95);
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-text h1 {
  font-size: 6rem;
  line-height: 1.05;
  margin: 0 0 2rem;
  color: #ffffff;
}
.hero-eyebrow {
  display: block;
  font-size: 1.3rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}
.hero-tagline {
  font-size: 1.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  font-style: italic;
  margin-bottom: 0.5rem;
}

.hero-attribution {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 3rem;
}

/* Facts grid inside the text column */
.s-hero--portrait .facts-grid {
  margin: 0;
}

/* Hide the old overlay on this variant */
.s-hero--portrait::before {
  display: none !important;
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .s-hero--portrait {
    padding: 12rem 3rem 6rem;
  }
  .hero-portrait-wrap {
    gap: 3.5rem;
    grid-template-columns: minmax(240px, 340px) 1fr;
  }
  .hero-text h1 {
    font-size: 5rem;
  }
}

@media screen and (max-width: 800px) {
  .s-hero--portrait {
    padding: 12rem 2rem 6rem;
    min-height: auto;
  }
  .hero-portrait-wrap {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  .hero-portrait {
    max-width: 280px;
    margin: 0 auto;
  }
  .hero-text h1 {
    font-size: 4rem;
  }
  .hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }
  .s-hero--portrait::after {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
  }
}

@media screen and (max-width: 500px) {
  .hero-text h1 {
    font-size: 3.4rem;
  }
  .hero-eyebrow {
    font-size: 1.1rem;
  }
  .hero-tagline {
    font-size: 1.5rem;
  }
}


/* ================================================================
   FULL CREAM/SEPIA THEME OVERRIDE
   Matches the warm-beige background of the portrait photo.
   ================================================================ */

:root {
  --cream: #e3d5c2;
  --cream-soft: #d9c9b3;   /* slightly darker, for subtle cards */
  --cream-deep: #c8b79f;   /* divider / border */
  --ink: #2a1f14;          /* primary text — warm dark brown */
  --ink-muted: #5c4a38;    /* secondary text */
  --ink-faint: rgba(42,31,20,0.55);
  --gold: #8a6d1a;         /* deeper gold for contrast on cream */
  --gold-accent: #b8903a;  /* brighter for highlights */
}

body,
html {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
}

/* ---- HERO ---- */
.s-hero--portrait {
  background-color: var(--cream) !important;
}
.s-hero--portrait::after {
  background: radial-gradient(
    circle,
    rgba(138,109,26,0.15) 0%,
    rgba(138,109,26,0) 60%
  ) !important;
}
.hero-text h1 {
  color: var(--ink) !important;
}
.hero-eyebrow {
  color: var(--gold) !important;
  opacity: 1 !important;
}
.hero-tagline,
.hero-attribution {
  color: var(--ink-muted) !important;
}
.hero-portrait {
  box-shadow:
    0 30px 80px rgba(42, 31, 20, 0.25),
    0 0 0 1px rgba(138, 109, 26, 0.25),
    0 0 60px rgba(138, 109, 26, 0.15) !important;
}

/* Fact cards on cream */
.fact-card {
  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(138,109,26,0.2) !important;
  backdrop-filter: none !important;
}
.fact-card__number {
  color: var(--gold) !important;
}
.fact-card__label {
  color: var(--ink-muted) !important;
}

/* ---- HEADER ---- */
.s-header .header-logo a {
  color: var(--gold) !important;
}
.header-nav a {
  color: rgba(42,31,20,0.55) !important;
}
.header-nav a:hover,
.header-nav a:focus {
  color: var(--gold) !important;
}
.s-header .btn--stroke,
.s-header .btn--stroke:link,
.s-header .btn--stroke:visited {
  border-color: rgba(42,31,20,0.4) !important;
  color: var(--ink) !important;
  background: transparent !important;
}
.s-header .btn--stroke:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #ffffff !important;
}
.s-header.sticky {
  background-color: var(--cream) !important;
  border-bottom: 1px solid rgba(138,109,26,0.2);
}
.s-header.sticky .header-logo a {
  color: var(--gold) !important;
}
.s-header.sticky .header-nav a {
  color: rgba(42,31,20,0.6) !important;
}
.header-menu-toggle,
.header-menu-toggle:hover,
.header-menu-toggle:focus {
  color: var(--ink) !important;
}
.header-menu-toggle span,
.header-menu-toggle span::before,
.header-menu-toggle span::after {
  background-color: var(--ink) !important;
}

/* ---- BIOGRAPHY ---- */
.s-about,
.s-about__section,
.s-about__section--profile {
  background-color: var(--cream) !important;
}
.s-about h1,
.s-about h3,
.s-about h4,
.s-about .display-1 {
  color: var(--ink) !important;
}
.s-about .subhead {
  color: var(--gold) !important;
}
.s-about p {
  color: var(--ink-muted) !important;
}
.s-about .section-intro::before {
  color: rgba(138,109,26,0.2) !important;
}
.s-about .right-vert-line {
  background-color: rgba(138,109,26,0.25) !important;
}
.position {
  border-top: 1px solid rgba(138,109,26,0.25) !important;
}
.position__header h6 .position__co {
  color: var(--gold) !important;
}
.position__header h6 .position__pos {
  color: var(--ink-muted) !important;
}
.s-about .position p {
  color: var(--ink-muted) !important;
}

/* ---- SERVICES ---- */
.s-services {
  background-color: var(--cream) !important;
}
.s-services::before,
.s-services::after {
  display: none !important;
}
.s-services .subhead {
  color: var(--gold) !important;
}
.s-services .display-1,
.s-services h1,
.s-services h3,
.s-services h4,
.s-services h5 {
  color: var(--ink) !important;
}
.s-services .lead,
.s-services p {
  color: var(--ink-muted) !important;
}
.s-services .section-intro::before {
  color: rgba(138,109,26,0.2) !important;
}
.s-services .vert-line {
  background-color: rgba(138,109,26,0.25) !important;
}
.services-list__item {
  border-bottom: 1px solid rgba(138,109,26,0.2) !important;
}
.services-list__item-header h5 {
  color: var(--ink) !important;
}
.services-list__item-header::after {
  color: var(--gold) !important;
}
.services-list__item.is-active .services-list__item-header h5 {
  color: var(--gold) !important;
}

/* ---- PORTFOLIO / CATALOG ---- */
.s-portfolio {
  background-color: var(--cream) !important;
}
.s-portfolio::before {
  background-color: transparent !important;
}
.s-portfolio h1,
.s-portfolio h3 {
  color: var(--ink) !important;
}
.s-portfolio .display-1 {
  color: var(--ink) !important;
}
.s-portfolio .subhead {
  color: var(--gold) !important;
}
.s-portfolio p {
  color: var(--ink-muted) !important;
}
.s-portfolio .section-intro::before {
  color: rgba(138,109,26,0.2) !important;
}

/* Celebrated and song items on cream */
.celebrated-item,
.song-item {
  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(138,109,26,0.2) !important;
  border-radius: 8px !important;
  padding: 18px 22px !important;
}
/* Drop the left-accent stripe so all catalog cards share the same shape */
.song-item {
  border-left: 1px solid rgba(138,109,26,0.2) !important;
}
.celebrated-item:hover,
.song-item:hover {
  background: rgba(255,255,255,0.55) !important;
}
.celebrated-item__title,
.song-item__title {
  color: var(--gold) !important;
  font-size: 15px !important;
}
.song-item__num {
  color: rgba(42,31,20,0.4) !important;
}

/* Make the two grids visually identical */
.song-grid {
  gap: 14px !important;
}

/* Search — rounded rectangle, not pill, to match card shape */
.song-search {
  background: rgba(255,255,255,0.4) !important;
  border: 1px solid rgba(138,109,26,0.3) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  max-width: 520px !important;
  padding: 14px 22px !important;
}
.song-search::placeholder {
  color: rgba(42,31,20,0.4) !important;
}
.song-search:focus {
  border-color: var(--gold) !important;
}

.song-count {
  color: var(--ink-muted) !important;
}
.song-count strong {
  color: var(--gold) !important;
}
.no-results {
  color: var(--ink-muted) !important;
}
.song-grid__letter-divider {
  color: var(--gold) !important;
  border-bottom-color: rgba(138,109,26,0.25) !important;
}

/* ---- TESTIMONIALS ---- */
.s-testimonials {
  background-color: var(--cream) !important;
}
.testimonial-slider p {
  color: var(--ink) !important;
}
.testimonial-slider__cite strong {
  color: var(--gold) !important;
}
.testimonial-slider__cite span {
  color: var(--ink-muted) !important;
}
.testimonial-slider .slick-dots li button {
  background: rgba(42,31,20,0.25) !important;
}
.testimonial-slider .slick-dots li.slick-active button,
.testimonial-slider .slick-dots li:hover button {
  background: var(--gold) !important;
}

/* ---- CTA / EPITAPH ---- */
.s-cta {
  background-color: var(--cream) !important;
  color: var(--ink-muted) !important;
}
.s-cta h2 {
  color: var(--gold) !important;
}
.s-cta p {
  color: var(--ink-muted) !important;
}
.epitaph-quote {
  color: var(--ink) !important;
}

/* ---- FOOTER ---- */
.s-footer {
  background-color: var(--cream-soft) !important;
}
.s-footer::before {
  display: none !important;
}
.s-footer .subhead {
  color: var(--gold) !important;
}
.s-footer .display-1,
.s-footer h1,
.s-footer h3,
.s-footer h5 {
  color: var(--ink) !important;
}
.s-footer p,
.s-footer a,
.s-footer li {
  color: var(--ink-muted) !important;
}
.s-footer a:hover {
  color: var(--gold) !important;
}
.s-footer .ss-copyright {
  color: var(--ink-muted) !important;
  border-top: 1px solid rgba(138,109,26,0.2) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.s-footer .ss-copyright span::after {
  display: none !important;
}
.s-footer .right-vert-line {
  background-color: rgba(138,109,26,0.25) !important;
}
.ss-go-top a {
  background-color: var(--gold) !important;
}
.ss-go-top a svg {
  fill: #ffffff !important;
}

/* ---- HERO SCROLL ARROW ---- */
.hero-scroll svg {
  fill: var(--gold) !important;
}

/* ---- LINK HOVER ---- */
a,
a:link,
a:visited {
  color: var(--gold);
}
a:hover,
a:focus,
a:active {
  color: var(--gold-accent) !important;
}

/* ---- GOLD ACCENT OVERRIDE ---- */
/* Every place the old gold #c9a84c was used — shift to the deeper
   gold that contrasts against cream */
.text-gradient-gold {
  color: var(--gold) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--gold) !important;
}

/* Modal stays dark for immersive video/spotify playback */
/* (no override needed — the modal already has its own dark bg) */


/* ================================================================
   SECTION PHOTOS — two-column layouts (text + photo)
   ================================================================ */

/* ---- Section 01: Biografía — text left, photo floats vertically centered ---- */
/* The photo is sticky inside its column.  Notes:
   - We avoid AOS on this element because AOS sets transform: translateZ(0)
     after animating, which interferes with sticky in some browsers.
   - We force the column to be tall enough (min-height: 130vh) so sticky
     has scroll room to engage even when the bio text doesn't fill that
     much vertical space on a wide desktop.
   - top: calc(50vh - 180px) places the photo at the viewport's vertical
     centre (photo natural height = 360px = 480px × 3/4). */
.bio-photo-col {
  display: block !important;
  min-height: 130vh;
}
.bio-photo-wrap {
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: calc(50vh - 220px);
  width: 100%;
  max-width: 480px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.bio-photo-wrap.is-visible {
  opacity: 1;
}
.bio-photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 18px 45px rgba(42,31,20,0.18),
    0 0 0 1px rgba(138,109,26,0.18);
  background: #c8b79f;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.bio-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.bio-photo__caption {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 1.6rem auto 0;
  padding: 0 0.4rem;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-muted, #5c4a38);
  opacity: 0.85;
  text-align: left;
}
@media screen and (max-width: 900px) {
  .bio-photo__caption {
    max-width: 100%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 901px) {
  .bio-photo-wrap {
    /* photo width ≈ 40% of viewport → height ≈ 30vw → leave room for caption */
    top: calc(50vh - 18vw);
  }
}

@media screen and (max-width: 900px) {
  .bio-photo-col {
    padding-top: 3rem;
    min-height: 0;
  }
  .bio-photo {
    position: static;
    max-width: 100%;
    top: auto;
  }
}

/* ---- Section 02: Servicios — single photo in the left column,
   cycled by JS when an accordion item is clicked.  Photos are sized
   purely by column width; height adapts to each photo's own aspect
   ratio so nothing is cropped or letterboxed. ---- */
.services-photo {
  margin: 3rem 0 3rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 14px 36px rgba(42,31,20,0.2),
    0 0 0 1px rgba(138,109,26,0.2);
  width: 100%;
  max-width: 520px;
}
.services-photo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: opacity 0.25s ease;
}
.services-photo img.is-fading {
  opacity: 0;
}

/* Caption block under the services photo */
.services-caption {
  max-width: 520px;
  margin: 0 0 3rem;
}
.services-caption__title {
  font-family: var(--font-heading, inherit);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink, #2a1f14);
  margin: 0 0 0.8rem;
  line-height: 1.4;
}
.services-caption__text {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--ink-muted, #5c4a38);
  margin: 0 0 1.4rem;
}
.services-caption__spotify {
  margin-top: 0.5rem;
}
.services-caption__spotify iframe {
  display: block;
  width: 100%;
  height: 80px !important;
  border: 0;
}
.services-caption__footnote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-muted, #5c4a38);
  opacity: 0.7;
  margin: 1.4rem 0 0;
  line-height: 1.5;
}

/* Gallery intro */
.gallery-intro {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink-muted, #5c4a38);
  font-style: italic;
}

@media screen and (max-width: 800px) {
  .services-caption {
    max-width: 100%;
  }
}

@media screen and (max-width: 800px) {
  .services-photo {
    max-width: 100%;
    margin: 2rem 0;
  }
}


/* ================================================================
   GALLERY — masonry-style photo grid + full-screen lightbox
   ================================================================ */

.s-gallery {
  background-color: var(--cream) !important;
  padding-top: 18rem;
  padding-bottom: 12rem;
  position: relative;
}
.s-gallery__header {
  margin-bottom: 6rem;
}
.s-gallery h1,
.s-gallery h3 {
  color: var(--ink) !important;
}
.s-gallery .subhead {
  color: var(--gold) !important;
}
.s-gallery .display-1 {
  color: var(--ink) !important;
}
.s-gallery .section-intro::before {
  color: rgba(138,109,26,0.2) !important;
}

/* Collage-style photo grid — varied tile sizes with dense auto-flow
   so the browser fills gaps automatically. Tiles are large and
   use object-fit: cover for a magazine feel. */
/* Carousel — show one large photo at a time, click to enlarge.
   Aspect ratio is preserved (photo's natural shape; the stage adapts). */
.gallery-grid.gallery-carousel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4rem;
  display: block;
}

.gallery-carousel__stage {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(138,109,26,0.18);
  box-shadow: 0 14px 36px rgba(42,31,20,0.18);
  background: #c8b79f;
  width: 100%;
}

/* The image — preserves its own aspect ratio, fills the stage width.
   The stage's height grows from the image's natural height. */
.gallery-carousel__slide {
  display: block;
  width: 100%;
  /* Override Ethos's main.css `button { height: 5.6rem }` reset */
  height: auto !important;
  min-height: 0 !important;
  line-height: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
.gallery-carousel__slide img {
  display: block;
  margin: 0 auto;
  /* Width fluid up to the photo's natural width; height fluid up to
     78vh so very tall portraits don't dominate the screen. */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 78vh;
  transition: opacity 0.25s ease;
}
.gallery-carousel__slide img.is-fading {
  opacity: 0;
}

/* Prev/next overlay arrows */
.gallery-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(20,15,10,0.55);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-carousel__arrow:hover {
  background: rgba(20,15,10,0.78);
  transform: translateY(-50%) scale(1.05);
}
.gallery-carousel__arrow--prev { left: 16px; }
.gallery-carousel__arrow--next { right: 16px; }

/* Counter + dots */
.gallery-carousel__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.gallery-carousel__counter {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: monospace;
}
.gallery-carousel__dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(138,109,26,0.3);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-carousel__dot:hover { background: rgba(138,109,26,0.5); }
.gallery-carousel__dot.is-active {
  background: var(--gold);
  transform: scale(1.4);
}

/* Tablet */
@media screen and (max-width: 1100px) {
  .gallery-grid.gallery-carousel { padding: 0 2rem; }
  .gallery-carousel__arrow {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

/* Phone */
@media screen and (max-width: 700px) {
  .gallery-grid.gallery-carousel { padding: 0 1rem; }
  .gallery-carousel__arrow {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .gallery-carousel__arrow--prev { left: 8px; }
  .gallery-carousel__arrow--next { right: 8px; }
  .gallery-carousel__stage { max-height: 70vh; }
  .gallery-carousel__slide img { max-height: 70vh; }
}


/* ---- LIGHTBOX ---- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 8, 4, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  padding: 2rem;
}
.gallery-lightbox.is-active {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox__stage {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 0.3s;
}
.gallery-lightbox.is-active .gallery-lightbox__stage {
  transform: scale(1);
}
.gallery-lightbox img {
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.gallery-lightbox__close,
.gallery-lightbox__arrow {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  border-radius: 8px;
  z-index: 2;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__arrow:hover {
  background: rgba(255,255,255,0.18);
}
.gallery-lightbox__close {
  top: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
}
.gallery-lightbox__close:hover {
  transform: scale(1.05);
}
.gallery-lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 28px;
  line-height: 1;
}
.gallery-lightbox__arrow:hover {
  transform: translateY(-50%) scale(1.08);
}
.gallery-lightbox__arrow--prev { left: 2rem; }
.gallery-lightbox__arrow--next { right: 2rem; }

.gallery-lightbox__counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  letter-spacing: .15em;
  font-family: monospace;
}

@media screen and (max-width: 700px) {
  .gallery-lightbox__arrow {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .gallery-lightbox__arrow--prev { left: 0.5rem; }
  .gallery-lightbox__arrow--next { right: 0.5rem; }
  .gallery-lightbox__close { top: 0.5rem; right: 0.5rem; width: 38px; height: 38px; }
}


/* ---- Spotify iframe: pin height (base.css resets iframe to height:auto) ---- */
/* Spotify's modern embed renders a fixed 80px compact mini-player. */
.spotify-carousel__iframe {
  height: 80px !important;
  width: 100% !important;
  display: block;
}

/* ---- MODAL BUTTON SHAPE CONSISTENCY ---- */
/* Close, carousel arrows and "Open in Spotify" link all become
   8px rounded squares/rectangles, matching the catalog cards
   and the search input. */
.song-modal__close {
  border-radius: 8px !important;
}
.spotify-carousel__arrow {
  border-radius: 8px !important;
}
.song-modal__spotify-link {
  border-radius: 8px !important;
}

/* Header social icons (in nav menu) */
.header-nav__social {
  vertical-align: middle;
}
.header-nav__social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: rgba(42,31,20,0.55) !important;
  transition: color 0.2s ease;
  border: 0 !important;
  background: transparent !important;
}
.header-nav__social a:hover,
.header-nav__social a:focus {
  color: var(--gold) !important;
}
.header-nav__social a svg {
  display: block;
}
.s-header.sticky .header-nav__social a {
  color: rgba(42,31,20,0.6) !important;
}

.footer-tribute-author {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

/* Casual copy/save deterrents (trivially bypassable, deters most users) */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}