* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --bg: #292929;
  --text: rgb(147, 147, 148);
  --muted: #6b7280;
  --primary: #9a9a94;
  --surface: #f3f4f6;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  background-image: url("../assets/images/Site_background.jpg");
  background-size: cover;
  background-position: 40% 10%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.container { max-width: 1080px; margin: 0 auto; padding: 0 1rem; }
.section { padding: 1rem 0; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

 
 

.site-header {
  margin-bottom: 0;       /* remove any margin below header */
  padding-bottom: 0.25rem;/* nudge if the header has big padding */
}



.banner {
  text-align: center;     /* Centers the image because it's inline-block */
  padding: 1rem 0;        /* Optional spacing */
}

.banner img {
  width: 90%;             /* Exactly what you want: 90% of the window width */
  max-width: 900px;       /* Optional: prevents it from getting too huge on large screens */
  height: auto;           /* Maintain full aspect ratio */
  display: inline-block;  /* Required for text-align centering */
}




/* Off‑white for the special link(s) */
.highlight-link {
  color: #f2f2f2;               /* off‑white */
  text-decoration-color: rgba(255,255,255,0.7);  /* optional: soften underline */
}

/* Optional: tweak hover/focus for better contrast */
.highlight-link:hover,
.highlight-link:focus-visible {
  color: #ffffff;               /* pure white on hover/focus */
  text-decoration-color: #fff;
}



/* === Clean, text-only navigation (no bar) === */
.site-nav {
  display: flex;
  flex-wrap: wrap;           /* wraps on small screens if needed */
  gap: 1.25rem;              /* space between links */
  align-items: center;
  justify-content: center;   /* centered under the banner */
  padding: .75rem 0;         /* breathing room */
  background: transparent;   /* no colored bar */
  border: 0;                 /* no borders */
  position: static;          /* not sticky */
}

/* Base link style: off-white text “buttons” */
.site-nav a {
  color: #d7d6d5;            /* off-white */
  text-decoration: none;     /* no underline by default */
  font-weight: 600;
  letter-spacing: .2px;
  padding: .25rem .125rem;   /* small hit area */
  border-radius: 2px;
  transition: color .15s ease, opacity .15s ease, text-decoration .15s ease;
}

/* Hover/focus: a clean underline */
.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .22em;
}

/* Current page: stronger underline */
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 2px;
  opacity: 1;
}

/* Slightly soften non-current links */
.site-nav a:not([aria-current="page"]) {
  opacity: .9;
}

/* Visible keyboard focus */
.site-nav a:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

/* Small screens: tighten spacing if it wraps */
@media (max-width: 480px) {
  .site-nav { gap: 1rem; }
}



/* Mobile nav */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu { 
    position: absolute; right: 1rem; top: 64px; 
    background: var(--bg); border: 1px solid #e5e7eb; border-radius: .5rem;
    padding: .5rem; display: none; flex-direction: column; gap: .25rem;
  }
  .nav-menu.open { display: flex; }
}




/* 3‑video responsive grid:
   - 1 column on phones
   - 3 columns from 768px and up */
.videos-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


.video {
  position: relative;
  aspect-ratio: 16 / 9;  /* <-- hard-lock the shape */
  background: #000;      /* nice while the player loads */
  border-radius: .5rem;  /* optional rounding on the card */
  overflow: hidden;      /* clip the iframe corners to the rounding */
}

/* The iframe stretches to fill that 16:9 box exactly */
.video iframe {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}





/* ==== Spotify ==== */
.spotify-embed iframe {
  width: 100%;
  min-height: 152px;       /* small player height; taller if you embed playlists/albums */
  border: 0;
  border-radius: .75rem;
}


/* Layout for the list (if you don’t already have this) */

.socials {
  text-align: center;
 display: flex;
  justify-content: center;   /* centers the icons horizontally */
  align-items: center;
  gap: 0.75rem;               /* space between icons */
  list-style: none;           /* remove bullets */
  padding: 0;                 /* remove default UL padding */
  margin: 0 auto;             /* centers the whole row */
  flex-wrap: wrap;            /* optional: allows wrapping on small screens */
}
 
.socials li {
  margin: 0;
  padding: 0;
}

.socials img {
  width: 35px;    /* choose whatever size you like */
  height: 35px;
  display: block; /* removes stray inline spacing */
}


#socials .socials {
  display: flex;
  flex-wrap: wrap;        /* allows wrapping on narrow screens (optional) */
  gap: 0.5rem;            /* ↓ smaller = tighter */
  list-style: none;
  align-items: center;
}


/* Make the link act like a small icon button (no background) */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;       /* optional fixed tap target; remove if you prefer tight */
  height: 32px;
  text-decoration: none;
}

/* Recolor the external SVG file via filter (monochrome look on dark bg) */
.icon-link img {
  width: 20px;
  height: 20px;
  display: block;

  /* Off-white on charcoal; tweak to taste */
  filter: invert(92%) sepia(3%) saturate(0%) hue-rotate(190deg) brightness(98%) contrast(94%);
  transition: filter .15s ease, transform .15s ease;
}

/* Hover: make them slightly darker (or lighter) + tiny lift */
.icon-link:hover img,
.icon-link:focus-visible img {
  filter: invert(70%) brightness(85%) contrast(110%);
  transform: translateY(-1px);
}

/* Keyboard focus on the link itself (accessibility) */
.icon-link:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 6px; /* optional */
}




.btn {
  display: inline-block;
  font-weight: 600;
  padding: .6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover,
.btn:focus-visible {
  background: rgba(0,0,0,0.75);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}



/* Make the Spotify iframe responsive and tidy */
.spotify-embed iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* Optional: shrink height on smaller screens */
@media (max-width: 600px) {
  .spotify-embed iframe {
    height: 280px; /* tweak to taste */
  }
}



/* ============ Homepage background rotation ============ */

.home-bg-rotator {
  position: fixed;    /* stay put while content scrolls */
  inset: 0;           /* fill entire viewport */
  z-index: -1;        /* sit behind all content */
  pointer-events: none;
}

/* Decorative images (square-friendly) */
.home-bg-rotator > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;        /* fill screen without distortion */
  object-position: center;  /* adjust per-image if needed */

  opacity: 0;
  animation: homebg-fade 24s infinite;
  transition: opacity 1s ease;
}

/* 4-slide rotation (6s each) */
.home-bg-rotator > img:nth-of-type(1) { animation-delay: 0s; }
.home-bg-rotator > img:nth-of-type(2) { animation-delay: 6s; }
.home-bg-rotator > img:nth-of-type(3) { animation-delay: 12s; }
.home-bg-rotator > img:nth-of-type(4) { animation-delay: 18s; }

/* Fade animation */
@keyframes homebg-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Optional: dark overlay for text contrast */
.home-bg-rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

/* Accessibility: reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .home-bg-rotator > img {
    animation: none;
    opacity: 1;
  }
  .home-bg-rotator > img:not(:first-child) {
    display: none;
  }
}

/* Fallback background while first image loads */
body.homepage {
  background: #000;
}



/* ===== Album promo ===== */
.album-promo {
  text-align: center;
  margin: 2rem auto;
  max-width: 750px;     /* controls the largest width of the promo */
  padding: 0 1rem;       /* side padding inside your container */
}

.album-promo picture,
.album-promo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;   /* optional: soften corners */
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); /* optional: lift off bg */
}

/* Link around the image (removes default link underline/blue tint) */
.album-promo__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Text under the image */
.album-promo__text {
  margin-top: 0.75rem;
}

.album-promo__title {
  font-size: clamp(1.1rem, 1.5vw + 0.9rem, 1.5rem);
  margin: 0.25rem 0;
}

.album-promo__subtitle {
  margin: 0.25rem 0 0.75rem;
  opacity: 0.9;
}




/* ===== Merch section (cleaned) ===== */
#merch {
  margin: 3rem auto;
  max-width: 1200px;
  padding: 0 1rem;
  /* Optional: If your header is sticky and you anchor-jump here: */
  /* scroll-margin-top: 6rem; */
}

.merch-title {
  text-align: center;
  font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.2rem);
  margin: 0 0 .5rem;
}

.merch-subtitle {
  text-align: center;
  margin: 0 0 1.25rem;
  opacity: .9;
}

/* Responsive grid: 3 → 2 → 1 */
.merch-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-items: center;   /* center each card in its grid cell */
  justify-content: center;   /* center the 3-column track set when not full */
}
@media (max-width: 900px) {
  .merch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .merch-grid {
    grid-template-columns: 1fr;
  }
}

/* Card: center contents (image + button) */

/* Center everything inside the card */
.merch-card {
  max-width: 420px; 
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* centers inline text like the <p> around the button */
}

/* Make the clickable image not full-width of the card */
.merch-link {
  display: inline-block;      /* key: not block 100% width */
  max-width: 360px;           /* adjust to taste */
  width: 100%;                /* allow it to shrink on smaller screens */
}

/* Keep the image within the link’s bounds */
.merch-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional: space above the button */
.merch-card p { margin-top: 1rem; }



/* Optional text elements if you add them later */
.merch-name {
  font-size: 1rem;
  margin: .25rem 0 .125rem;
}
.merch-price {
  margin: 0 0 .5rem;
  opacity: .9;
}



/* Optional: center the "View all" line */
.merch-cta {
  text-align: center;
  margin-top: 1rem;
}

html {
  scroll-behavior: smooth;
}


.contact-title {
  text-align: center;
  font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.2rem);
  margin: 0 0 .5rem;
}

.contact-cta {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 1.5rem;   /* ~2× normal body text */

}