/* ============================================================
   DEAR DAISY: Components
   ============================================================ */

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--primary:hover {
  background: var(--color-accent);
  box-shadow: 0 0 30px var(--color-accent-glow);
}

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 24px;
}

.btn--outline:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--sm {
  padding: 10px 24px;
  font-size: 0.75rem;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.nav.is-scrolled {
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--color-text);
  opacity: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
}

.nav.is-logo-visible .nav__logo {
  opacity: 1;
}

.nav__logo:hover {
  opacity: 0.8;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.3s, opacity 0.3s;
}

.nav__toggle.is-active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav__menu {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nav__link {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.3s;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s;
}

.nav__link:hover,
.nav__link--active {
  color: var(--color-text);
}

.nav__link--merch {
  color: var(--color-accent);
}

.nav__link--merch:hover {
  color: var(--color-text);
}

.nav__link:hover::after,
.nav__link--active::after {
  width: 100%;
}

/* "Support" dropdown: Merch + Patreon under one nav item so the bar
   doesn't gain a second slot for what's really the same kind of link. */
.nav__item--dropdown {
  position: relative;
}

.nav__link--dropdown {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.nav__dropdown {
  /* Flush against the button (no gap): a gap is empty space that
     belongs to neither element, so crossing it while moving from the
     button toward the panel drops out of hover/mouseleave tracking
     entirely, closing the menu before the pointer arrives. */
  position: absolute;
  top: 100%;
  /* JS sets an explicit px value before each open: centered under the
     button when there's room, nudged inward just enough to stay on
     screen when "Support" sits close to the viewport's right edge. */
  left: 0;
  min-width: 100px;
  padding: 6px 0;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav__item--dropdown:focus-within .nav__dropdown,
.nav__dropdown.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.hero__content {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}


.hero__subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 24px;
  background: linear-gradient(
    100deg,
    var(--color-text) 0%,
    var(--color-text) 40%,
    #fff 50%,
    var(--color-text) 60%,
    var(--color-accent) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-title-shimmer 7s ease-in-out infinite;
}

@keyframes hero-title-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.hero__tagline {
  font-family: 'Arial Black', Impact, var(--font-sans), sans-serif;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
  letter-spacing: 0.04em;
  margin: 0 auto 48px;
  position: relative;
  display: block;
  width: fit-content;
  opacity: 0;
  transition: opacity 0.25s ease;

  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.5) 40%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0.5) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-tagline-shimmer 12s ease-in-out infinite;
}

@keyframes hero-tagline-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.hero__tagline.is-typing {
  opacity: 1;
}

.hero__tagline-cursor {
  display: inline-block;
  width: 0.12em;
  height: 1.15em;
  margin-left: 0.08em;
  vertical-align: text-bottom;
  background-color: #ffffff;
  animation: hero-cursor-blink 0.85s steps(1) infinite;
}

.hero__tagline-cursor.is-fading {
  animation: none;
  opacity: 0;
  transition: opacity 8s ease;
}

@keyframes hero-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
}

.hero__scroll span {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  writing-mode: vertical-lr;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--color-accent), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* --- Section Base --- */
.section {
  padding: var(--section-padding) clamp(20px, 4vw, 48px);
  position: relative;
}

.section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
  letter-spacing: 0.06em;
  position: relative;
}

.section__title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 20px auto 0;
}

/* --- Music Section ---
   Tighter top/bottom padding and title gap than the default .section: this
   is the section the nav's "Music" link jumps to, and the roomier default
   spacing pushed the platform-link row below the fold on laptop-height
   viewports. Scoped here so no other section's rhythm changes. */
.section--music {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.4), transparent);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.section--music .section__title {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.music-card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.4s, border-color 0.4s;
}

.music-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
}

.music-card__art {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  overflow: hidden;
}

.music-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.music-card:hover .music-card__art img {
  transform: scale(1.04);
}

.music-card:nth-child(2) .music-card__art {
  background: linear-gradient(135deg, #1a1a2e, #2d1b3d, #1a1a2e);
}

.music-card:nth-child(3) .music-card__art {
  background: linear-gradient(135deg, #0f3460, #1a1a2e, #162447);
}

.music-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, var(--color-accent-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.music-card:hover .music-card__glow {
  opacity: 1;
}

.music-card__label {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
}

.music-card__info {
  padding: 24px;
}

.music-card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.music-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.music-card__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}

.music-card__platforms a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  transition: color 0.3s, border-color 0.3s;
}

.music-card__platforms a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.8;
}

.music-card__platforms a:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.music-card__platforms a:hover svg {
  opacity: 1;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes gallery-fade-in {
  to { opacity: 1; }
}

/* --- Schedule Section --- */
.section--schedule {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.4), transparent);
}

.schedule-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.schedule-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.3s;
}

.schedule-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.schedule-item:hover {
  background: var(--color-surface);
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 -16px;
}

.schedule-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.schedule-item__month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.schedule-item__day {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.schedule-item__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.schedule-item__location {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Past / upcoming states. The classes are applied by main.v7.js from each
   item's data-date, so the schedule ages on its own without anyone
   editing the markup. */

/* Already happened: struck through and dimmed, but still legible. */
.schedule-item--past {
  opacity: 0.45;
}

.schedule-item--past .schedule-item__month,
.schedule-item--past .schedule-item__day,
.schedule-item--past .schedule-item__title,
.schedule-item--past .schedule-item__location {
  text-decoration: line-through;
}

/* Past events shouldn't invite a click the way upcoming ones do. */
.schedule-item--past:hover {
  background: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

/* Coming up within the next few weeks. */
.schedule-item__soon {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-accent);
  animation: soonPulse 2.4s ease-in-out infinite;
}

@keyframes soonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-item__soon { animation: none; }
}

/* --- About Section --- */

/* Intro */
.about-intro {
  max-width: 740px;
  margin: 0 auto 80px;
  text-align: center;
}

.about-intro p {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: var(--color-text-muted);
}

/* Story / Timeline */
.about-story {
  max-width: 700px;
  margin: 0 auto 96px;
}

.about-story__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.04em;
}

.about-story__timeline {
  position: relative;
  padding-left: 32px;
}

.about-story__timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
}

.timeline-item {
  position: relative;
  padding-bottom: 28px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
}

.timeline-item__year {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.timeline-item p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.timeline-item em {
  font-family: var(--font-serif);
  color: var(--color-text);
}

.about-story__closing {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-text);
}

/* Members */
.about-members {
  margin-bottom: 80px;
}

.about-members__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.04em;
}

.members-shimmer-trigger {
  -webkit-appearance: none;
  appearance: none;
  display: inline;
  font: inherit;
  color: var(--color-text);
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    var(--color-text) 0%,
    var(--color-text) 40%,
    #fff 50%,
    var(--color-text) 60%,
    var(--color-text) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hero-title-shimmer 7s ease-in-out infinite;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.members-shimmer-trigger:hover,
.members-shimmer-trigger:focus-visible {
  animation-duration: 3.5s;
}

.members-shimmer-trigger:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .members-shimmer-trigger {
    animation: none;
  }
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.member-card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px;
  transition: border-color 0.3s, transform 0.3s;
}

.member-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.member-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.member-card__photo {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(15%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.member-card:hover .member-card__photo img {
  transform: scale(1.08);
}

/* Robyn: face is centered lower in the portrait */
.member-card:nth-child(1) .member-card__photo img {
  object-position: center 40%;
}

/* Makayla: face is upper-center */
.member-card:nth-child(4) .member-card__photo img {
  object-position: center 15%;
}

/* Paola: face is compact with pigtails above */
.member-card:nth-child(6) .member-card__photo img {
  object-position: center 35%;
}


.member-card__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.member-card__role {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.member-card__bio {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Social Icons */
/* --- Socials --- */
.section--socials {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.4), transparent);
}

/* One panel around the whole section, borrowed from .member-card so it reads
   as part of the same family: barely-there fill, hairline border. */
.socials-panel {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 56px 32px 64px;
  transition: border-color 0.3s;
}

.socials-panel:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* The title sits inside the panel now, so it does not need the section's
   usual gap above it. */
.socials-panel .section__title {
  margin-top: 0;
}

.socials__lead {
  text-align: center;
  max-width: 460px;
  margin: 0 auto 48px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.socials-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 30px;
}

/* Just the glyph. The name is absolutely placed underneath so revealing it
   cannot shift the row, and the padding doubles as the tap target. */
.social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-link__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-link__glyph svg {
  width: 42px;
  height: 42px;
}

/* Rises and fades in, the same gesture the sections use as they scroll
   into view, on the easing used throughout the site. */
/* Only opacity and transform move. letter-spacing was animated here and it
   is a layout property: the line re-flowed every frame, so glyphs quantised
   to pixel positions at slightly different moments and the text appeared to
   settle into place at the end rather than glide. Both properties below are
   composited, so nothing re-flows. */
.social-link__name {
  position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  transform: translate(-50%, 10px);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-link:hover,
.social-link:focus-visible,
.social-link.is-revealed {
  color: var(--brand, var(--color-text));
  transform: translateY(-4px);
  outline: none;
}

.social-link:hover .social-link__name,
.social-link:focus-visible .social-link__name,
.social-link.is-revealed .social-link__name {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Each platform tints its own glyph, kept muted enough to sit in the
   site's palette rather than shout over it. */
.social-link[data-platform="youtube"]   { --brand: #ff5c5c; }
.social-link[data-platform="instagram"] { --brand: #e17bb0; }
.social-link[data-platform="x"]         { --brand: #e8e4ec; }
.social-link[data-platform="tiktok"]    { --brand: #5fd6d6; }
.social-link[data-platform="facebook"]  { --brand: #6ea8fe; }

@media (prefers-reduced-motion: reduce) {
  .social-link,
  .social-link__name { transition: opacity 0.2s linear; }
  .social-link:hover,
  .social-link:focus-visible,
  .social-link.is-revealed { transform: none; }
  .social-link:hover .social-link__name,
  .social-link:focus-visible .social-link__name,
  .social-link.is-revealed .social-link__name { transform: translate(-50%, 0); }
}

/* --- Contact Section --- */
.section--contact {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, 0.4), transparent);
}

.contact-accordion {
  max-width: 700px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.accordion-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 24px 0;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s;
  text-align: left;
}

.accordion-trigger:hover,
.accordion-trigger.is-open {
  color: var(--color-text);
}

.accordion-trigger__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accordion-trigger.is-open .accordion-trigger__icon {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.accordion-body.is-open {
  max-height: 700px;
}

.accordion-body__inner {
  padding-bottom: 32px;
}

.contact-fan__text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.fan-signup {
  margin-top: 16px;
}


.fan-signup__form,
.fan-signup__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fan-signup__field {
  display: flex;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.3s;
}

.fan-signup__field:focus-within {
  border-color: var(--color-accent);
}

.fan-signup__field input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  padding: 11px 14px;
  outline: none;
}

.fan-signup__field input::placeholder {
  color: rgba(240, 236, 228, 0.3);
}

.fan-signup__submit {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text-muted);
  padding: 0 14px;
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
  display: flex;
  align-items: center;
}

.fan-signup__submit svg {
  width: 16px;
  height: 16px;
}

.fan-signup__submit:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
}

.fan-signup__note {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.fan-signup__success {
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  color: var(--color-accent);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.fan-signup__success svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.fan-signup__success { display: none; }
.fan-signup__success.is-visible { display: flex; }


.booking-success {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 16px 0;
}

.booking-success svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.booking-success.is-visible { display: flex; }

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

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(240, 236, 228, 0.25);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-accent);
}

.contact-form__field select option {
  background: #1a1a2e;
  color: var(--color-text);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 130px;
}

@media (max-width: 768px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }
}

/* --- Footer --- */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 20px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer__credit {
  font-size: 0.75rem;
  /* opacity: 0.6 lived here and was the reason this failed contrast at
     2.65:1. The dimming is done with the colour's own alpha now, so the
     value is visible in the declaration rather than hidden in a multiply. */
  color: rgba(240, 236, 228, 0.78);
}

.footer__credit a {
  color: rgba(240, 236, 228, 0.86);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

.footer__credit a:hover {
  color: var(--color-accent);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .nav__toggle {
    display: flex;
  }

  /* Logo + toggle sit above the full-screen overlay */
  .nav__logo  { position: relative; z-index: 1; }
  .nav__toggle { position: relative; z-index: 1; }

  /* Remove nav backdrop-filter when menu opens so position:fixed children
     remain viewport-relative, not nav-relative */
  .nav.menu-open {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Full-screen blurred overlay */
  .nav__menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    background: rgba(10, 10, 12, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.35s ease;
  }

  .nav__menu.is-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
  }

  .nav__link {
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: rgba(240, 236, 228, 0.85);
  }

  .nav__link--merch { color: var(--color-accent); }

  .schedule-item {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }

  .schedule-item .btn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
  }

  /* Present only when main.v7.js moves a Soon! badge next to the Details
     button on mobile; takes over the grid placement from .schedule-item
     .btn above since the button is no longer a direct grid child. */
  .schedule-item__actions {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .schedule-item__actions .btn {
    margin-top: 0;
  }

  .schedule-item__actions .schedule-item__soon {
    margin-left: 0;
  }

  /* Socials: the desktop pattern (centered glyph, name hidden until
     hover/tap) needs a pointer to discover. On a phone there's no hover
     and no room to wrap a grid, so switch to a plain stacked list with
     the name always visible next to its glyph. */
  .socials-row {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .social-link {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 18px;
    padding: 14px 12px;
  }

  .social-link__name {
    position: static;
    opacity: 1;
    font-size: 1rem;
    transform: none;
    pointer-events: auto;
  }

  /* The desktop reveal-on-hover rule re-centers the name with
     translate(-50%, 0), sized for when the name was absolutely
     positioned under the glyph. Now that it's static and always
     visible, that same transform instead drags it left by half its
     own width, sliding it under the glyph whenever a tap sets
     is-revealed (or a keyboard/VoiceOver focus lands on the link).
     Same selector list, same specificity, later in the cascade: wins. */
  .social-link:hover .social-link__name,
  .social-link:focus-visible .social-link__name,
  .social-link.is-revealed .social-link__name {
    transform: none;
  }
}

@media (max-width: 480px) {
  .music-grid {
    grid-template-columns: 1fr;
  }

  .about-social {
    gap: 24px;
  }

  .members-grid {
    grid-template-columns: 1fr;
  }

  .about-story__timeline {
    padding-left: 24px;
  }
}


/* --- Accessibility --- */

/* Lets a keyboard or switch user jump the nav on every page load. Sits off
   screen until it takes focus. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-text);
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

main:focus { outline: none; }

/* Several inputs and links set outline: none, which leaves a keyboard user
   with nothing to follow. :focus-visible only shows for keyboard use, so
   this does not put a ring around anything clicked with a mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.fan-signup__field input:focus-visible,
.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Anyone who has asked their system to reduce motion gets the site without
   the movement. Transitions collapse to near zero rather than to none, so
   state changes still settle rather than jumping. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The looping background film is the largest motion on the page. */
  .video-bg__player { display: none; }
  .video-bg { background: var(--color-bg); }
}

/* --- Members Gallery Modal --- */
.members-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  animation: gallery-modal-in 0.25s ease forwards;
}

.members-gallery-modal[hidden] {
  display: none;
}

@keyframes gallery-modal-in {
  to { opacity: 1; }
}

.members-gallery-modal__stage {
  max-width: min(90vw, 1100px);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.members-gallery-modal__image {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.members-gallery-modal__image.is-visible {
  opacity: 1;
}

.members-gallery-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s;
}

.members-gallery-modal__close:hover,
.members-gallery-modal__close:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.members-gallery-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}

.members-gallery-modal__nav:hover,
.members-gallery-modal__nav:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.members-gallery-modal__nav--prev {
  left: 20px;
}

.members-gallery-modal__nav--next {
  right: 20px;
}

.members-gallery-modal__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Touch devices swipe through photos instead of tapping arrows */
@media (hover: none) and (pointer: coarse) {
  .members-gallery-modal__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .members-gallery-modal__nav {
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
  }

  .members-gallery-modal__nav--prev {
    left: 10px;
  }

  .members-gallery-modal__nav--next {
    right: 10px;
  }

  .members-gallery-modal__close {
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
  }
}