/* ===========================================
 /* === GLOBAL RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: #f3e9d9;
  line-height: 1.6;

  background-color: #070b22;

  background-image:
    /* subtle analogue texture */
    repeating-radial-gradient(
      circle at 30% 40%,
      rgba(200,160,90,0.06) 0px,
      rgba(200,160,90,0.06) 1px,
      transparent 1px,
      transparent 26px
    ),

    /* piano-key vertical rhythm */
    repeating-linear-gradient(
      90deg,
      rgba(200,160,90,0.06),
      rgba(200,160,90,0.06) 1px,
      transparent 1px,
      transparent 26px
    );
}

/* === TYPOGRAPHY === */
h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
}

.section-title {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  color: #caa56b; /* Brill brass */
}

.section-text {
  font-size: 1.1rem;
  opacity: 0.9;
}
.section .container {
  text-align: center;
}

/* === CONTAINERS === */
.container.narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* === HEADER === */
.site-header {
  background: rgba(0,0,0,0.4);
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(6px);
}

/* NEW: make header container flex so we can split logo/nav */
.site-header .container {
  display: flex;
  align-items: center;
}

/* NEW: push navigation to the right */
.main-nav {
  margin-left: auto;
}

.logo {
  font-size: 1.6rem;
  font-weight: 800;
}

.logo span {
  color: #caa56b;
}

.main-nav a {
  margin-left: 1.2rem;
  color: #f3e9d9;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.main-nav a:hover {
  color: #caa56b;
}

/* ============================================
   HERO SPLIT LAYOUT (Option A)
============================================ */

.hero-split {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 4rem 3rem; /* top padding increased */
  gap: 6rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 80vh; /* ensures hero has presence */
  position: relative;
}

/* Offset for fixed header height */
body {
  padding-top: 90px; /* Ensures page content starts below header */
}

/* Poster section */
.hero-image img {
  width: 500px;
  max-width: 45vw;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  margin-top: 0.8rem;
}

/* Text section */
.hero-text {
  max-width: 540px;
  text-align: left;
  margin-top: 0.8rem;
}

.hero-title {
  font-size: 3.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: #f3e9d9;
}

.hero-title span {
  color: #caa56b;
}

.hero-tagline {
  font-size: 1.3rem;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.highlight {
  color: #caa56b;
  font-weight: 600;
}

/* Section CTA button (robust: covers link/visited states) */
a.btn-section,
a.btn-section:link,
a.btn-section:visited {
  display: inline-block;
  font-size: 0.95rem;
  padding: 0.9rem 1.8rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.8px;
  background: #caa56b;
  color: #0b0f2a !important;
  transition: all 0.25s ease;
}

a.btn-section:hover,
a.btn-section:focus {
  background: #e6c891;
  transform: translateY(-1px);
  text-decoration: none !important;
}

a.btn-section:active {
  transform: translateY(0);
}

/* Optional: PDF-specific icon alignment */
.hero-cta a[href$=".pdf"] {
  font-weight: 600;
}


/* MOBILE */
@media (max-width: 900px) {
  .hero-split {
    flex-direction: column;
    padding: 6rem 2rem 4rem;
    text-align: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero-image img {
    width: 75%;
    max-width: 350px;
  }

  .hero-title {
    font-size: 2.6rem;
  }
}
/* ================================
   UNIVERSAL SPLIT SECTION LAYOUT
================================ */

.split-section {
  display: flex;
  align-items: center;          /* ⬅ centre image + text vertically */
  justify-content: center;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 4rem;
}

/* Universal image styling */
.split-section .split-image img {
  width: 500px;
  max-width: 45vw;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 45px rgba(0,0,0,0.45);
  /* no margin-top needed */
}

/* Universal text styling */
.split-section .split-text {
  max-width: 600px;
  text-align: left;
  /* remove extra top padding so we rely on vertical centring */
  padding-top: 0;
}

.split-section .split-text .section-text {
  margin-bottom: 1.2rem;
  opacity: 0.9;
}
.split-section .split-image {
  padding-top: 1.6rem;
}


/* MOBILE */
@media (max-width: 900px) {
  .split-section {
    flex-direction: column;
    text-align: center;
    padding: 4rem 2rem;
  }

  .split-section .split-image img {
    width: 75%;
    max-width: 350px;
  }

  .split-section .split-text {
    text-align: center;
  }
}

/* ================================
   CHARACTERS SECTION
================================ */

#characters .container {
  max-width: 1200px;
  padding: 4rem 2rem;
  margin: 0 auto;              /* center the whole section */
  text-align: center;          /* only headings are centered */
}

/* MAIN CHARACTERS (2 large panels) */
.characters-main {
  display: flex;
  justify-content: center;     /* center the cards horizontally */
  gap: 3rem;
  margin: 4rem 0;
  flex-wrap: wrap;
}

/* SUPPORTING CHARACTERS (3 smaller cards) */
.characters-support {
  display: flex;
  justify-content: center;     /* center supporting cards */
  gap: 2.5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

/* Shared card styles */
.char-card {
  text-align: left;            /* keep paragraphs left aligned */
  margin: 0 auto;              /* ensures centered alignment */
}

.char-card.large {
  width: 380px;
}

.char-card.small {
  width: 300px;
}

.char-image {
  background: rgba(255, 255, 255, 0.04);
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}

.char-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}

.char-name {
  margin-top: 1rem;
  font-size: 1.6rem;
  color: #caa56b;
}

.char-role {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 0.2rem;
}

.char-desc {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  opacity: 0.9;
  line-height: 1.55;
}

/* MOBILE */
@media (max-width: 900px) {

  .characters-main,
  .characters-support {
    flex-direction: column;
    align-items: center;         /* center cards vertically */
  }

  .char-card.large,
  .char-card.small {
    width: 92%;
    text-align: center;          /* headings centered */
  }

  .char-desc,
  .char-role {
    text-align: center;          /* optional – can keep left if you want */
  }
}

/* ================================ 
   MUSIC SECTION
================================ */

#music .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Add breathing room between Music intro and track grid */
#music .section-text {
  margin-bottom: 3rem;
}

/* Increase top spacing for Music section title */
#music .section-title {
  margin-top: 3.5rem !important;
}

#music .music-grid {
  margin-top: 2.5rem;
}

/* GRID LAYOUT */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  justify-items: center;
  margin-top: 2.5rem;
}

/* ================================
   TRACK CARD (REFINED — FIXED)
================================ */

.track-card {
  position: relative;
  background: rgba(7, 11, 34, 0.78);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2rem;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 320px;
  text-align: left;
  overflow: hidden;
}

/* Subtle stave texture */
.track-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(200,160,90,0.06),
      rgba(200,160,90,0.06) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity: 0.35;
  pointer-events: none;
}

/* Text layers above texture */
.track-title,
.track-desc,
.track-card audio {
  position: relative;
  z-index: 1;
}

/* === TRACK TITLES — BRONZE HIGHLIGHT === */
#music .track-title {
  color: #caa56b;        /* same bronze as TAKE 51 title */
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  margin-bottom: 0.6rem;
}

/* === PERFORMER CREDIT (gold italics) === */
#music .track-performer {
  color: #d8b56e;          /* warm gold tone */
  font-style: italic;
  font-size: 0.95rem;
  margin: 0.1rem 0 0.3rem 0; /* tightened spacing above and below */
  letter-spacing: 0.3px;
}



/* ================================
   SONG LIST — FINAL TIGHTENED DESIGN
================================ */

/* === Container === */
#songs .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* === Section headings === */
#songs .section-title,
#songs .section-text {
  text-align: center;
  margin-bottom: 1rem;
}
#songs {
  margin-top: 5rem; /* adjust up/down: try 4–6rem for perfect spacing */
}

/* === ACT headings === */
#songs .act-heading {
  font-size: 1.8rem;
  margin-top: 2rem;     /* smaller top margin so ACT I sits closer to intro */
  margin-bottom: 1rem;  /* keeps small gap before songs */
  color: #caa56b;
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* === Two-column wrapper === */
#songs .song-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  column-gap: 5rem;
  row-gap: 1.6rem;
  margin-bottom: 3.5rem;
  align-items: start;
}

/* === Song list === */
#songs .song-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* === Each song block === */
#songs .song-list li {
  margin-bottom: 0.8rem;      /* reduced space between entries */
  line-height: 1.32;          /* slightly tighter overall */
  text-align: left;
}

/* === Song title === */
#songs .song-title {
  display: inline-block;      /* keeps it in same text flow as desc */
  font-weight: 700;
  color: #caa56b !important;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  margin: 0;                  /* removes all vertical margins */
  padding: 0;
  line-height: 1.2;           /* compact title spacing */
}

/* === Song description === */
#songs .song-desc {
  display: block;
  font-style: italic;
  color: #d8d8d8;
  margin: 0;                  /* eliminate default span spacing */
  padding: 0;
  line-height: 1.25;          /* compact text body */
  max-width: 92%;
}

/* === Optional subtle hover glow === */
#songs .song-list li:hover .song-title {
  text-shadow: 0 0 2px rgba(202,165,107,0.3);
  transition: text-shadow 0.25s ease;
}

/* === Mobile layout === */
@media (max-width: 900px) {
  #songs .song-columns {
    grid-template-columns: 1fr;
    row-gap: 1.2rem;
  }

  #songs .song-title,
  #songs .song-desc {
    text-align: left;
  }

  #songs .song-list li {
    margin-bottom: 0.9rem;
  }
}

/* ==========================================================
   STAGING SECTION — CLEAN + CONSISTENT
   ========================================================== */

/* Correct: padding override for the whole Staging section.
   (No more `#staging.section`, which broke scroll behaviour.) */
#staging {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Each staging “pillar” block (image + text) */
#staging .staging-block {
  margin: 1.5rem 0;              /* reduced vertical spacing */
  padding: 1.2rem 0;
}

/* Split layout spacing inside Staging */
#staging .split-section {
  padding: 2rem 1.5rem;          /* medium spacing */
  gap: 2rem;                     /* smaller gap between image + text */
}

#staging .split-image {
  flex: 1;              /* Prevents the text column from squeezing the image */
  min-height: 300px;    /* Same as staging-image height */
}

/* Staging headings */
#staging h3.section-title {
  font-size: 2rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

/* Paragraph spacing inside Staging */
#staging .section-text {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  max-width: 720px;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force left alignment inside staging split-text only */
#staging .split-text {
  text-align: left !important;
}

/* Left-align title and subtitle */
#staging .staging-title,
#staging .staging-subtitle {
  text-align: left !important;
}

/* Left-align the paragraph inside staging */
#staging .split-text .section-text {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== STAGING SUBTITLE STYLE ===== */
#staging .staging-subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: -0.2rem;     /* pulls closer to title */
  margin-bottom: 0.6rem;   /* separates from paragraph */
  color: #c6c6c6;          /* light grey for contrast */
  text-align: center;
}

/* Reduce space between the last staging block and the producer note */
#staging .staging-block {
  margin-bottom: 1rem;     /* was 1.5rem */
  padding-bottom: 0.8rem;  /* was 1.2rem */
}

/* Reduce vertical padding inside staging rows */
#staging .split-section {
  padding: 1.5rem 1.5rem;  /* was 2rem */
}

/* EXTRA CLEANUP: tighten only the final staging block */
#staging .staging-block:last-of-type {
  margin-bottom: 0.3rem;   /* tight final spacing */
  padding-bottom: 0 !important;
}


/* ==========================================================
   STAGING SECTION — UNIFORM IMAGE SIZING (FINAL FIX)
   ========================================================== */

/* Image container: consistent aspect ratio */
#staging .staging-image {
  width: 100%;
  overflow: hidden;           /* crops images cleanly */
  border-radius: 8px;         /* optional aesthetic */
  margin: 0.5rem 0;
}

/* Image behaviour: fill the frame */
#staging .staging-image img {
  width: 100%;
  height: 100%;
  object-position: center;    /* keeps the focal point centred */
  display: block;             /* removes unexpected bottom gaps */
}


/* Producer Note */
#staging .producer-note {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   CREATIVE TEAM SECTION
================================ */

#team .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  text-align: center;
}

.team-photo img {
  width: 220px;
  border-radius: 4px;
  filter: contrast(1.05) brightness(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}

/* Team Card Style */
.team-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.8rem;
  border-radius: 8px;
  text-align: left;
}

/* Name + Role */
.team-name {
  font-size: 1.4rem;
  color: #caa56b;
  margin-bottom: 0.2rem;
}

.team-role {
  opacity: 0.85;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Bio paragraph — refined typography */
.team-bio {
  font-size: 1.05rem;
  line-height: 1.5;          /* slightly tighter */
  opacity: 0.9;
  max-width: 60ch;           /* controls ideal reading width */
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;         /* modern browsers: reduces orphans */
}


/* Placeholders (for unfilled roles) */
.team-card.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  font-style: italic;
}

.placeholder-label {
  font-size: 1.1rem;
}

/* Improve spacing inside Creative Team section */
#team .team-bio {
  margin-bottom: 1.4rem !important;   /* space under main bio */
}

#team .team-note {
  margin-top: 1.4rem !important;      /* space above the note */
  opacity: 0.85;
}


/* MOBILE */
@media (max-width: 900px) {
  #team .container {
    text-align: center;
  }

  .team-card {
    text-align: center;
  }
}

/* ================================
   CONTACT SECTION
================================ */

#contact .container {
  text-align: center;
  max-width: 700px;
}

/* Email styling */
.contact-email a {
  font-size: 1.3rem;
  font-weight: 600;
  color: #caa56b;
  text-decoration: none;
  display: inline-block;
  margin: 1rem 0 1.5rem;
}

.contact-email a:hover {
  color: #e6c891;
}

/* Script request note */
#contact .script-note {
  opacity: 0.85;
  font-size: 1rem;
  margin-top: 1.5rem;
}

/* Signature line */
#contact .contact-signoff {
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.7;
}

/* Extra space below Contact section before footer */
#contact {
  padding-bottom: 4rem;      /* gives breathing room before footer */
}


/* Add spacing above footer inside Contact */
#contact .container {
  padding-bottom: 4rem !important;
}
/* =========================================
   FIXED-HEADER ANCHOR OFFSET (CLEAN)
   ========================================= */

/* Smooth scrolling only – no padding here */
html {
  scroll-behavior: smooth;
}

/* All sections stop just below the fixed header */
section {
  scroll-margin-top: 90px;   /* adjust to match your header height */
}
/* Improve scroll landing for Music section */
#music {
  scroll-margin-top: 150px;  /* adjust 100–130px depending on your header height */
}

/* Contact: extra bottom padding so the footer is on-screen
   when you jump to #contact */
#contact {
  padding-bottom: 2.5rem;
}

#contact {
  scroll-margin-top: 100px;  /* was 90px — lifts Contact heading higher */
}

/* Footer: more breathing room at the very bottom */

.site-footer {
  margin-top: 1.5rem;
  padding: 1.5rem 0 3rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* ================================
   FOOTER DISCLAIMER
================================ */

.footer-disclaimer {
  max-width: 900px;
  margin: 0.8rem auto 0;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.6;
  text-align: center;
}



/* ==========================================
   IMAGE DESATURATION ON SCROLL — SECTIONS ONLY
   Applies to section and character images
========================================== */

/* Default grayscale for section + character images */
.split-section .split-image img,
.char-image img {
  filter: grayscale(100%) brightness(0.9);
  transition: filter 0.8s ease-in-out;
}

/* When in view, restore full colour */
.split-section .split-image.in-view img,
.char-image.in-view img {
  filter: grayscale(0%) brightness(1);
}
/* ================================
   ACCESS GATE
================================ */

#access-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 60%),
    #070b22;
}

.gate-box {
  max-width: 460px;
  padding: 3rem 2.8rem;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65);
}

.gate-box h2 {
  color: #caa56b;
  margin-bottom: 1rem;
}

.gate-box p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  opacity: 0.9;
}

.gate-small {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 1.4rem;
}

.gate-hero {
  width: 180px;
  max-width: 70%;
  margin: 0 auto 1.6rem;
  display: block;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* Password input (new style) */
.gate-field input {
  width: 100%;
  padding: 0.9rem;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  background: #e7e3b0;
  color: #000;
}

/* Checkbox row */
.gate-show {
  margin-top: 14px;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
}

.gate-show label {
  cursor: pointer;
}

.gate-show input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.05);
}

/* Enter button */
.gate-box button {
  width: 100%;
  padding: 0.85rem;
  margin-top: 18px;
  background: #caa56b;
  color: #0b0f2a;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.gate-box button:hover {
  background: #e6c891;
}

#gate-error {
  display: none;
  color: #ff9b9b;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

/* ================================
   SITEWIDE BASE (MOVED OUT OF MOBILE GATE BLOCK)
================================ */

/* Base container (needed sitewide) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Simple topbar for demos page */
.topbar {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}

.topbar .container {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  color: #f3e9d9;
}

.brand-sub {
  display: block;
  margin-top: 0.15rem;
  opacity: 0.8;
  font-size: 0.95rem;
}

/* Button styling for demos links (You are using btn-section) */
a.btn-section,
a.btn-section:link,
a.btn-section:visited {
  display: inline-block;
  font-size: 0.95rem;
  padding: 0.9rem 1.8rem;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.8px;
  background: #caa56b;
  color: #0b0f2a !important;
  transition: all 0.25s ease;
}

a.btn-section:hover,
a.btn-section:focus {
  background: #e6c891;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.casting-note {
  margin-top: 60px;
  opacity: 0.8;
}

/* ================================
   ACCESS GATE — MOBILE POLISH (ONLY gate stuff lives here)
================================ */

@media (max-width: 600px) {

  #access-gate {
    padding: 1.2rem; /* prevents edge-to-edge crowding */
  }

  .gate-box {
    max-width: 100%;
    padding: 2rem 1.6rem; /* reduced from desktop */
    border-radius: 10px;
  }

  .gate-hero {
    width: 140px;
    margin-bottom: 1.2rem;
  }

  .gate-box h2 {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .gate-box p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .gate-small {
    font-size: 0.8rem;
    margin-bottom: 1.2rem;
  }

  .gate-box input,
  .gate-box button {
    font-size: 1rem;
    padding: 0.8rem; /* better tap comfort */
  }

  #gate-error {
    font-size: 0.85rem;
  }
}

/* =========================================================
   EXTRA MOBILE FIXES (Listen button + Songs layout)
   Add here so you can paste once and forget
========================================================= */

/* Ensure HERO "Listen" button (btn-small) has real button styling everywhere */
a.btn-small,
a.btn-small:link,
a.btn-small:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  padding: 0.85rem 1.4rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.6px;
  background: #caa56b;
  color: #0b0f2a !important;
  transition: all 0.25s ease;
}

a.btn-small:hover,
a.btn-small:focus {
  background: #e6c891;
  transform: translateY(-1px);
}

a.btn-small:active {
  transform: translateY(0);
}

/* Songs layout: reduce min width so it wraps nicely on smaller screens */
#songs .song-columns {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

@media (max-width: 900px) {
  /* Tighten container padding on mobile/tablet */
  .container,
  .container.narrow {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Music cards: single column on smaller screens */
  .music-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .track-card {
    max-width: 520px;
  }

  /* Songs: force single column and prevent overflow */
  #songs .song-columns {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.2rem;
  }

  #songs .song-desc {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  /* Make Listen CTA look intentional on phones */
  a.btn-small {
    width: 100%;
    max-width: 320px;
  }

  .hero-cta {
    display: flex;
    justify-content: center;
  }
}