/* ============================================================
   FiloSofía — Salsa Band Website
   Art direction: warm Latin-Balkan salsa, cinematic, brass-gold
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8.5rem);

  /* Spacing (4px system) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;  --radius-full: 9999px;

  --transition: 260ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1280px;

  --font-display: 'Clash Display', 'Georgia', serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;
}

/* ---------- Light theme (warm cream / brass) ---------- */
:root, [data-theme="light"] {
  --color-bg: #f6f1e7;
  --color-surface: #fbf7ee;
  --color-surface-2: #fffdf7;
  --color-surface-offset: #efe7d6;
  --color-border: #ded2ba;
  --color-divider: #e7ddc9;

  --color-text: #241a12;
  --color-text-muted: #6b5c48;
  --color-text-faint: #a99a82;
  --color-text-inverse: #fbf7ee;

  --color-primary: #c8471f;        /* burnt salsa red-orange */
  --color-primary-hover: #a5361a;
  --color-primary-active: #83280f;

  --color-gold: #c98a12;           /* brass gold */
  --color-gold-hover: #a97210;

  --color-accent-2: #146b5c;       /* deep teal (Cuban) */

  --hero-overlay: linear-gradient(180deg, rgba(10,6,3,.20) 0%, rgba(10,6,3,.55) 55%, rgba(18,13,9,.98) 100%);
  --grain-opacity: 0.04;

  --shadow-sm: 0 1px 3px rgba(60,36,10,.08);
  --shadow-md: 0 8px 28px rgba(60,36,10,.12);
  --shadow-lg: 0 20px 56px rgba(60,36,10,.20);
}

/* ---------- Dark theme (midnight club) ---------- */
[data-theme="dark"] {
  --color-bg: #120d09;
  --color-surface: #1a130d;
  --color-surface-2: #221812;
  --color-surface-offset: #241a12;
  --color-border: #3a2a1d;
  --color-divider: #2a1f16;

  --color-text: #f0e6d6;
  --color-text-muted: #b09c82;
  --color-text-faint: #7a6a56;
  --color-text-inverse: #120d09;

  --color-primary: #f0642f;
  --color-primary-hover: #ff7d4a;
  --color-primary-active: #ff946a;

  --color-gold: #e8ad3c;
  --color-gold-hover: #ffc659;

  --color-accent-2: #3fb39c;

  --hero-overlay: linear-gradient(180deg, rgba(10,6,3,.20) 0%, rgba(10,6,3,.55) 55%, rgba(18,13,9,.98) 100%);
  --grain-opacity: 0.06;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 8px 28px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #120d09; --color-surface: #1a130d; --color-surface-2: #221812;
    --color-surface-offset: #241a12; --color-border: #3a2a1d; --color-divider: #2a1f16;
    --color-text: #f0e6d6; --color-text-muted: #b09c82; --color-text-faint: #7a6a56;
    --color-text-inverse: #120d09; --color-primary: #f0642f; --color-primary-hover: #ff7d4a;
    --color-gold: #e8ad3c; --color-accent-2: #3fb39c;
    --hero-overlay: linear-gradient(180deg, rgba(10,6,3,.20) 0%, rgba(10,6,3,.55) 55%, rgba(18,13,9,.98) 100%);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
p { text-wrap: pretty; }

::selection { background: var(--color-primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

a { color: inherit; text-decoration: none; }

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

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2.5rem, var(--content-wide)); margin-inline: auto; }

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--color-primary); border-radius: 2px;
}

.section-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
.section-lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.5;
}
.section-lead a { color: var(--color-primary); }
.section-lead a:hover { text-decoration: underline; }

/* ---------- Film grain overlay ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 6px 20px -6px var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid var(--color-border); color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.75rem;
}
.brand { display: flex; align-items: center; gap: var(--space-3); z-index: 2; }
.brand svg { height: 34px; width: auto; color: var(--color-text); }
.brand-logo { height: 40px; width: auto; }
.brand-logo.on-light { display: none; }
[data-theme="light"] .brand-logo.on-dark { display: none; }
[data-theme="light"] .brand-logo.on-light { display: block; }

/* On the homepage, the header logo stays invisible until the header gains a
   scrolled background — then it fades in (mirrors the sticky-nav reveal). */
body.has-hero .header:not(.scrolled) .brand { opacity: 0; pointer-events: none; }
.header .brand { transition: opacity var(--transition); }
.brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: -0.02em; display: none;
}
.brand-name b { color: var(--color-primary); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  position: relative; transition: color var(--transition);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--color-primary); transition: width var(--transition); border-radius: 2px;
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); z-index: 2; }

.lang-switch { display: flex; gap: 2px; background: color-mix(in srgb, var(--color-surface-offset) 70%, transparent); padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--color-border); }
.lang-switch button {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  color: var(--color-text-muted); transition: all var(--transition);
}
.lang-switch button.active { background: var(--color-primary); color: #fff; }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  color: var(--color-text); background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  transition: all var(--transition);
}
.icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(var(--space-16), 12vh, var(--space-32));
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 40%;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: var(--hero-overlay);
}
/* The mark is fixed rather than absolute because it has to fly out of the hero
   and land inside the fixed header. JS drives `transform`; everything else here
   just defines where it rests. transform-origin at 0 0 makes the scroll maths a
   plain rect-to-rect mapping. */
.hero-logo {
  --fs-logo: clamp(120px, 22vh, 220px);
  position: fixed; top: clamp(6rem, 15vh, 9rem); left: 50%;
  width: var(--fs-logo); height: var(--fs-logo);
  margin-left: calc(var(--fs-logo) / -2);
  z-index: 101;
  transform-origin: 0 0;
  will-change: transform;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.5));
  color: #fff;
  border-radius: 50%;
  /* Never a click target: the header's own <a class="brand"> sits underneath
     and stays the link, and this must not swallow taps in the hero either. */
  pointer-events: none;
  transition: color 240ms linear, background-color 240ms linear, box-shadow 240ms linear, filter 240ms linear;
}
/* Docked, the mark is half the hero size — taller than the header — so it needs
   its own disc to sit on. Solid --color-bg rather than the header's 82% mix:
   stacked above the header the two translucencies would double up and read
   darker than the bar itself. box-shadow widens the disc a few px so the ring's
   outer edge doesn't fray against whatever scrolls underneath. */
.hero-logo.is-docked {
  background-color: var(--color-bg);
  box-shadow: 0 0 0 4px var(--color-bg);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.18));
}
/* On a cream disc, white would disappear — take the brand ink instead. */
[data-theme="light"] .hero-logo.is-docked { color: #281810; }

/* Wherever the mark is live it *is* the header logo, so the static one stays
   invisible while keeping its box (nav spacing) and its click target. The class
   is set by JS, so without scripting the static logo still shows. */
body.has-mark .header .brand-logo { opacity: 0; }

/* Sub-pages ship the mark pre-docked but JS still places it, so keep it out of
   sight until then — without scripting it would otherwise hang mid-screen while
   the static header logo carries on below it. The homepage needs no such guard:
   its resting place is the hero, which is where it belongs unscripted too. */
body:not(.has-hero) .hero-logo { visibility: hidden; }
body.has-mark .hero-logo { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  /* Homepage only: no flight, so park the mark in the hero and let the real
     header logo take over. Sub-pages keep the docked mark — it doesn't move. */
  body.has-hero .hero-logo { position: absolute; transform: none !important; }
}

/* ============================================================
   HERO LOGO — animated variants
   The mark is inlined as <svg> so its parts can be addressed:
   .fs-ring .fs-mic .fs-arm .fs-dot(.fs-dot-l/.fs-dot-r) .fs-word
   ============================================================ */
.hero-logo path { fill: currentColor; transform-box: fill-box; transform-origin: center; }
/* Stroked twin of the ring, used only to line-draw it during the entrance. */
.hero-logo .fs-draw { fill: none; stroke: currentColor; stroke-width: 10; opacity: 0; }

/* ---------- Entrance · "signal check" (one-shot, ~1.6s) ---------- */
.anim-both .fs-draw {
  opacity: 1; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: fsDraw 700ms cubic-bezier(0.65, 0, 0.35, 1) forwards,
             fsVanish 1ms linear 730ms forwards;
}
.anim-both .fs-ring { animation: fsFade 260ms linear 700ms both; }
.anim-both .fs-mic  { animation: fsRise 440ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both; }
.anim-both .fs-arm  { animation: fsRise 440ms cubic-bezier(0.16, 1, 0.3, 1) 660ms both; }
.anim-both .fs-word { animation: fsFade 440ms ease-out 1220ms both; }

/* ---------- Idle · "clave pulse" (loop, 5.2s ≈ 92 BPM) ----------
   Son clave, 3-2. The left column takes the three-side one dot at a time;
   the right column answers the two-side in unison. The entrance pop runs first
   and settles on scale(1), so the loop picks up from the same value.
   Dots pop bottom-to-top, so --n (0 = top) is inverted in the pop delay. */
.anim-both .fs-dot-l {
  animation: fsPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(950ms + (2 - var(--n)) * 90ms) both,
             fsClave3 5200ms linear calc(1700ms + var(--n) * 975ms) infinite;
}
.anim-both .fs-dot-r {
  animation: fsPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(950ms + (2 - var(--n)) * 90ms) both,
             fsClave2 5200ms linear 1700ms infinite;
}

@keyframes fsDraw   { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes fsVanish { to { opacity: 0; } }
@keyframes fsFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fsRise   { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fsPop    { from { opacity: 0; transform: scale(0); } 40% { opacity: 1; } 60% { transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes fsClave3 { 0% { transform: scale(1); } 2% { transform: scale(1.55); } 11% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes fsClave2 {
  0%, 60.5% { transform: scale(1); }
  62.5%     { transform: scale(1.55); }
  71.5%, 73% { transform: scale(1); }
  75%       { transform: scale(1.55); }
  84%, 100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* The global reduce rule collapses durations; make sure that lands on the
     finished mark rather than a half-drawn one. */
  .hero-logo .fs-draw { display: none; }
  .hero-logo path { animation: none !important; opacity: 1 !important; transform: none !important; }
}
.hero-content { position: relative; }
.hero-tagline {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.hero-tagline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform: scale(1); opacity:1;} 50%{ transform: scale(1.8); opacity:.4;} }

.hero h1 {
  font-size: var(--text-hero);
  color: #fff;
  line-height: 0.92;
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.hero h1 .accent { color: var(--color-gold); font-style: italic; }
.hero-sub {
  font-size: var(--text-lg); color: rgba(255,255,255,.88);
  max-width: 54ch; margin-bottom: var(--space-8); line-height: 1.55;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.hero .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.14); }

.hero-scroll {
  position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  z-index: 2;
}
.hero-scroll .line { width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: scrolldown 2s ease-in-out infinite; }
@keyframes scrolldown { 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }

/* Marquee band strip */
.marquee {
  background: var(--color-primary); color: #fff; overflow: hidden;
  padding-block: var(--space-3); white-space: nowrap;
}
.marquee-track { display: inline-flex; gap: var(--space-8); animation: marquee 28s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-8); }
.marquee-track span::after { content: "✦"; color: var(--color-gold); font-size: 0.7em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: center;
}
.about-img { position: relative; }
.about-img img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.about-img .badge {
  position: absolute; bottom: -20px; right: -12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md); text-align: center;
}
.about-img .badge b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); display: block; }
.about-img .badge span { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.about-text p { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-4); max-width: 60ch; }
.about-text p strong { color: var(--color-text); font-weight: 600; }

.stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
.stat b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); display: block; line-height: 1; }
.stat span { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Fun facts */
.facts { margin-top: var(--space-16); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.fact {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform var(--transition), border-color var(--transition);
}
.fact:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.fact .fact-icon { font-size: 1.5rem; margin-bottom: var(--space-3); }
.fact h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-2); }
.fact p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ============================================================
   MEMBERS
   ============================================================ */
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.member-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface);
  transition: transform var(--transition), box-shadow var(--transition);
}
.member-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.member-avatar {
  aspect-ratio: 1; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-gold));
  font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; color: #fff;
  position: relative; overflow: hidden;
}
.member-avatar span { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
/* The portrait sits on top of the gradient+initials, so a missing photo
   degrades back to the monogram instead of a broken-image box. */
.member-avatar img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.member-card:hover .member-avatar img { transform: scale(1.04); }
.member-body { padding: var(--space-5); }
.member-body h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.member-role { font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); }
.member-body p { font-size: var(--text-sm); color: var(--color-text-muted); }

.members-more { margin-top: var(--space-12); }
.members-more h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-5); }
.member-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  display: flex; flex-direction: column; padding: var(--space-3) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: all var(--transition);
}
.chip:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.chip b { font-weight: 600; font-size: var(--text-sm); }
.chip span { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ============================================================
   MUSIC / DISCOGRAPHY
   ============================================================ */
.music { background: var(--color-surface-offset); }
.albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); }
.album {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.album-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.album-head h3 { font-family: var(--font-display); font-size: var(--text-xl); }
.album-year { font-size: var(--text-sm); color: var(--color-gold); font-weight: 700; }
.album-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.album iframe { border-radius: var(--radius-md); border: none; width: 100%; }

.single-highlight {
  margin-top: var(--space-8); background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface));
  border: 1px solid var(--color-primary); border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center;
}
.single-highlight .badge-new { display: inline-block; background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-4); }
.single-highlight h3 { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.single-highlight p { color: var(--color-text-muted); font-size: var(--text-base); margin-bottom: var(--space-4); }
.single-highlight .quote { font-style: italic; color: var(--color-text); border-left: 3px solid var(--color-gold); padding-left: var(--space-4); }

.platforms { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); justify-content: center; }
.platforms a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 500;
  transition: all var(--transition); background: var(--color-surface);
}
.platforms a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* ============================================================
   VIDEOS
   ============================================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.video-card {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border);
  background: var(--color-surface); transition: transform var(--transition), box-shadow var(--transition);
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.video-frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-info { padding: var(--space-4) var(--space-5); }
.video-info h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-1); }
.video-info span { font-size: var(--text-xs); color: var(--color-text-muted); }
.video-featured { grid-column: 1 / -1; }
@media (min-width: 860px) { .video-featured { grid-column: span 2; } }

/* ============================================================
   SHOWS
   ============================================================ */
.shows { background: var(--color-surface-offset); }
.show-list { margin-top: var(--space-12); border-top: 1px solid var(--color-divider); }
.show-row {
  display: grid; grid-template-columns: 140px 1fr auto; gap: var(--space-6); align-items: center;
  padding: var(--space-5) var(--space-2); border-bottom: 1px solid var(--color-divider);
  transition: background var(--transition), padding-left var(--transition);
}
.show-row:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); padding-left: var(--space-5); }
.show-date { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-primary); font-weight: 600; }
.show-venue b { display: block; font-weight: 600; font-size: var(--text-base); }
.show-venue span { font-size: var(--text-sm); color: var(--color-text-muted); }
.show-tag { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--color-border); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); white-space: nowrap; }
.shows-note { margin-top: var(--space-8); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
.shows-note b { color: var(--color-text); }

/* ============================================================
   MEDIA / PRESS
   ============================================================ */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-12); }
.press-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform var(--transition), border-color var(--transition);
}
.press-card:hover { transform: translateY(-4px); border-color: var(--color-gold); }
.press-card .quote { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; margin-bottom: var(--space-4); }
.press-card .source { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; }
.press-card .source span { color: var(--color-text-muted); font-weight: 400; }

/* ============================================================
   CONTACT / BOOKING
   ============================================================ */
.contact { position: relative; overflow: hidden; }
.contact-info h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.contact-info p { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 46ch; }
.socials { display: flex; gap: var(--space-3); margin-top: var(--space-8); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text); transition: all var(--transition); }
.socials a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--color-surface-offset); border-top: 1px solid var(--color-divider); padding-block: var(--space-16) var(--space-8); }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-brand { max-width: 32ch; }
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer-nav { display: flex; gap: clamp(var(--space-8), 6vw, var(--space-20)); flex-wrap: wrap; }
.footer-col h5 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.footer-col a { display: block; font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-2); transition: color var(--transition); }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-faint); }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .about-grid, .single-highlight { grid-template-columns: 1fr; }
  .single-highlight { text-align: left; }
  .about-img { order: -1; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .show-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .show-tag { justify-self: start; }

  /* The switch stays reachable on phones — it just gets tighter, since this is
     a trilingual site and most of the audience arrives on mobile. */
  .nav-actions { gap: var(--space-2); }
  .lang-switch button { padding: var(--space-1) var(--space-2); font-size: 0.68rem; }
  .brand-logo { height: 34px; }

  .nav-links.open {
    display: flex; position: absolute; top: 4.75rem; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: var(--space-4);
    background: var(--color-surface); padding: var(--space-6);
    border-bottom: 1px solid var(--color-divider); box-shadow: var(--shadow-lg);
  }
}

/* ============================================================
   SUB-PAGE HEADER
   ============================================================ */
.page-hero {
  position: relative; padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(var(--space-12), 8vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider); overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%),
              radial-gradient(80% 80% at 0% 100%, color-mix(in srgb, var(--color-gold) 12%, transparent), transparent 55%);
}
.page-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.page-hero p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 56ch; line-height: 1.5; }
.crumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.crumbs a { color: var(--color-primary); }
.crumbs a:hover { text-decoration: underline; }

/* ============================================================
   DISCOGRAPHY DETAIL
   ============================================================ */
.disc-album {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(var(--space-6), 4vw, var(--space-12));
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)); align-items: start;
}
.disc-album + .disc-album { border-top: 1px solid var(--color-divider); }
.disc-cover { position: sticky; top: 6rem; }
.disc-cover img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.disc-cover .disc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.disc-cover .disc-actions a { flex: 1; min-width: 120px; justify-content: center; }
.disc-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.disc-head h2 { font-size: var(--text-2xl); }
.disc-head .yr { font-size: var(--text-lg); color: var(--color-gold); font-weight: 700; }
.disc-desc { color: var(--color-text-muted); margin-bottom: var(--space-6); max-width: 62ch; }
.disc-spotify { margin-bottom: var(--space-8); }
.disc-spotify iframe { border-radius: var(--radius-md); border: none; width: 100%; }
.tracklist { border-top: 1px solid var(--color-divider); }
.track {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--space-4); align-items: start;
  padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--color-divider);
}
.track .num { font-family: var(--font-display); color: var(--color-text-faint); font-size: var(--text-base); }
.track .t-title { font-weight: 600; font-size: var(--text-base); }
.track .t-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.track .t-genre { font-size: var(--text-xs); color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-note {
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-surface));
  border: 1px dashed var(--color-gold); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-12);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.gallery-note b { color: var(--color-text); }
.masonry { columns: 3 260px; column-gap: var(--space-5); }
.masonry .tile { break-inside: avoid; margin-bottom: var(--space-5); position: relative; border-radius: var(--radius-lg); overflow: hidden; display: block; border: 1px solid var(--color-border); }

/* Featured tile: breaks out of the column flow to run the full gallery width.
   Cropped to a banner ratio so a 3:2 photo doesn't tower over everything below. */
.masonry .tile-wide { column-span: all; }
.masonry .tile-wide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 38%; }
.masonry .tile-wide .cap { opacity: 1; transform: none; font-size: var(--text-base); padding: var(--space-5) var(--space-6); }
@media (max-width: 620px) { .masonry .tile-wide img { aspect-ratio: 4 / 3; } }
.masonry .tile img { width: 100%; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.masonry .tile:hover img { transform: scale(1.05); }
.masonry .tile .cap {
  position: absolute; inset: auto 0 0 0; padding: var(--space-4);
  background: linear-gradient(transparent, rgba(10,6,3,.85)); color: #fff;
  font-size: var(--text-sm); font-weight: 600; opacity: 0; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}
.masonry .tile:hover .cap { opacity: 1; transform: none; }
.masonry .tile .play-badge {
  position: absolute; top: var(--space-3); right: var(--space-3); width: 34px; height: 34px;
  border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; backdrop-filter: blur(4px);
}

/* ============================================================
   EPK / PRESS PAGE
   ============================================================ */
.epk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.epk-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: transform var(--transition), border-color var(--transition);
}
.epk-card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.epk-card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.epk-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.epk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.epk-fact { padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.epk-fact b { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.epk-fact span { font-size: var(--text-base); font-weight: 500; }
.logo-downloads { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-8); }
.logo-swatch { width: 220px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
/* The box fills the card so the light swatch reads as a real background sample,
   whatever the width of the download links underneath. */
.logo-swatch .box { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.logo-swatch .box.dark { background: #120d09; }
.logo-swatch .box.light { background: #f6f1e7; }
.logo-swatch .box img { width: 62%; }
.logo-swatch .meta { padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.logo-swatch .meta a { color: var(--color-primary); font-weight: 600; }
.logo-swatch .meta a:hover { text-decoration: underline; }
.logo-swatch .meta .dl { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* ============================================================
   CONTACT (simplified — no form)
   ============================================================ */
.contact-simple { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.contact-cards { display: grid; gap: var(--space-4); }
.contact-card {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: transform var(--transition), border-color var(--transition);
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--color-primary); }
.contact-card .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); flex-shrink: 0; }
.contact-card b { display: block; font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-card .val { font-size: var(--text-lg); font-weight: 600; }

@media (max-width: 860px) {
  .disc-album { grid-template-columns: 1fr; }
  .disc-cover { position: static; max-width: 320px; }
  .contact-simple { grid-template-columns: 1fr; }
  .masonry { columns: 2 160px; }
}
@media (max-width: 520px) { .masonry { columns: 1; } }

/* ---------- Powered by ---------- */
.powered { color: var(--color-text-faint); }
.powered a { color: var(--color-primary); font-weight: 600; }
.powered a:hover { text-decoration: underline; }