/* =========================================================
   TeiaSound — tokens
   Negre càlid + accent blanc. Canviant --accent per un
   color, tota la pàgina es reskineja d'un sol cop.
   ========================================================= */
:root{
  --void:   #0B0908;   /* fons                              */
  --bin:    #15100D;   /* panells destacats                 */
  --edge:   #2A211B;   /* filets i vores                    */
  --bone:   #EDE6DA;   /* text principal                    */
  --dust:   #8C8076;   /* text secundari                    */
  --accent: #FFFFFF;   /* accent — canvia-ho aquí i prou    */
  --haze:   #3A2E26;   /* halo càlid de la portada          */

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 5vw, 4rem);
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* film grain over everything */
.grain{
  position:fixed; inset:0; z-index:99; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.mono{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust);
}
.muted{ color:var(--dust); }

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .9rem;
}

/* =========================================================
   Top bar
   ========================================================= */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem var(--gut);
  background:rgba(11,9,8,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.bar__mark{
  display:flex; align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}
.bar__mark img{
  width:auto; height:19px;
  opacity:.92;
  transition:opacity .18s;
}
.bar__mark:hover img{ opacity:1; }
.bar__nav{
  display:flex; align-items:center; gap:clamp(.75rem,2vw,1.6rem);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.bar__nav a{ text-decoration:none; color:var(--dust); transition:color .18s; }
.bar__nav a:hover{ color:var(--bone); }
.bar__cta{
  color:var(--void) !important;
  background:var(--accent);
  padding:.45rem .8rem;
  border-radius:2px;
}
.bar__cta:hover{ background:var(--dust); }

@media (max-width:640px){
  .bar__mark img{ height:17px; }
  .bar__nav a:not(.bar__cta){ display:none; }
  .bar__nav a[href="#mixes"],
  .bar__nav a[href="#dates"]{ display:inline; }
}

/* =========================================================
   Hero — the bin front
   ========================================================= */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(3rem,9vw,6rem) var(--gut) clamp(3rem,7vw,5rem);
  overflow:hidden;
}
.hero__glow{
  position:absolute; top:8%; left:50%;
  width:min(760px,110vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, var(--haze) 0%, transparent 62%);
  opacity:.55;
  filter:blur(24px);
}


.hero__name{ margin:0; width:100%; }
.hero__wordmark{
  width:min(880px, 88vw);
  height:auto;
  margin-inline:auto;
  animation:rise .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}

.hero__line{
  font-size:clamp(1rem,2.4vw,1.2rem);
  color:var(--dust);
  margin:1.6rem 0 0;
  max-width:34ch;
}

/* ---- SIGNATURE: segmented level meter, 72 BPM dub pulse ---- */
.meter{
  display:flex; gap:3px;
  margin:clamp(1.6rem,5vw,2.4rem) 0 clamp(1.6rem,4vw,2rem);
  height:16px;
}
.meter i{
  width:7px; height:100%;
  background:var(--edge);
  border-radius:1px;
  animation:lvl 1.666s steps(1,end) infinite;
}
.meter i:nth-child(-n+14){ --on:#B9B1A6; }
.meter i:nth-child(n+15):nth-child(-n+20){ --on:#EDE6DA; }
.meter i:nth-child(n+21){ --on:#FFFFFF; }
.meter i:nth-child(1){ animation-delay:0s }
.meter i:nth-child(2){ animation-delay:.02s }
.meter i:nth-child(3){ animation-delay:.04s }
.meter i:nth-child(4){ animation-delay:.06s }
.meter i:nth-child(5){ animation-delay:.08s }
.meter i:nth-child(6){ animation-delay:.10s }
.meter i:nth-child(7){ animation-delay:.12s }
.meter i:nth-child(8){ animation-delay:.14s }
.meter i:nth-child(9){ animation-delay:.16s }
.meter i:nth-child(10){ animation-delay:.18s }
.meter i:nth-child(11){ animation-delay:.20s }
.meter i:nth-child(12){ animation-delay:.22s }
.meter i:nth-child(13){ animation-delay:.24s }
.meter i:nth-child(14){ animation-delay:.26s }
.meter i:nth-child(15){ animation-delay:.28s }
.meter i:nth-child(16){ animation-delay:.30s }
.meter i:nth-child(17){ animation-delay:.32s }
.meter i:nth-child(18){ animation-delay:.34s }
.meter i:nth-child(19){ animation-delay:.36s }
.meter i:nth-child(20){ animation-delay:.38s }
.meter i:nth-child(21){ animation-delay:.42s }
.meter i:nth-child(22){ animation-delay:.46s }
.meter i:nth-child(23){ animation-delay:.52s }
.meter i:nth-child(24){ animation-delay:.60s }
@keyframes lvl{
  0%,42%   { background:var(--on); box-shadow:0 0 8px var(--on); }
  43%,100% { background:var(--edge); box-shadow:none; }
}

.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.5rem;
  border:1px solid var(--edge);
  border-radius:2px;
  transition:border-color .18s, color .18s, background .18s;
}
.btn:hover{ border-color:var(--bone); }
.btn--solid{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--void);
  font-weight:700;
}
.btn--solid:hover{ background:var(--dust); border-color:var(--dust); }

/* =========================================================
   Sections
   ========================================================= */
.sec{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(4rem,11vw,7.5rem) var(--gut);
}
.sec--panel{
  max-width:none;
  background:var(--bin);
  border-block:1px solid var(--edge);
}
.sec--panel > *{ max-width:var(--max); margin-inline:auto; }

.sec__label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
}
.sec__head{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem,7vw,4.6rem);
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0 0 clamp(2rem,5vw,3rem);
}

/* ---------- rig ---------- */
.rig{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:start;
}
.rig__copy p{ margin:0 0 1rem; max-width:42ch; }

.spec{ margin:0; border-top:1px solid var(--edge); }
.spec > div{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--edge);
}
.spec dt{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust);
  white-space:nowrap;
}
.spec dd{ margin:0; text-align:right; font-weight:500; }

/* ---------- mixes ---------- */
.mixes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.mix{
  border:1px solid var(--edge);
  border-radius:3px;
  background:#0E0A08;
  min-height:190px;
  overflow:hidden;
}
.mix iframe{ display:block; width:100%; border:0; }
.mix__empty{
  height:100%; min-height:190px;
  display:flex; flex-direction:column; justify-content:center;
  gap:.4rem; padding:1.5rem;
  color:var(--dust);
}
.mix__empty p{ margin:0; }

/* ---------- dates ---------- */
.dates{ list-style:none; margin:0; padding:0; border-top:1px solid var(--edge); }
.date{
  display:grid;
  grid-template-columns:minmax(90px,auto) 1fr auto;
  gap:clamp(.8rem,3vw,2rem);
  align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid var(--edge);
  transition:padding-left .2s;
}
.date:hover{ padding-left:.5rem; }
.date__day{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--accent);
}
.date__where{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem,3.6vw,1.9rem);
  line-height:1.05;
  text-transform:uppercase;
}
.date__city{
  display:block;
  font-family:var(--body);
  font-size:.85rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--dust);
  margin-top:.15rem;
}
.date__status{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  padding:.35rem .7rem;
  border:1px solid var(--edge);
  border-radius:2px;
  color:var(--dust);
}
a.date__status:hover{ color:var(--void); background:var(--accent); border-color:var(--accent); }
.date__status--out{ color:#5D544C; border-color:#332A24; }

.dates__empty{
  padding:1.5rem 0;
  color:var(--dust);
  border-bottom:1px solid var(--edge);
}

/* ---------- feed ---------- */
.feed{ min-height:260px; }
.feed__empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem;
  padding:clamp(2rem,6vw,3.5rem);
  border:1px dashed var(--edge);
  border-radius:3px;
  color:var(--dust);
}
.feed__empty p{ margin:0; max-width:40ch; }

/* ---------- bookings ---------- */
.book{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:start;
}
.book p{ margin:0 0 1rem; max-width:42ch; }
.checklist{ margin:0; padding:0; list-style:none; }
.checklist li{
  padding:.6rem 0 .6rem 1.5rem;
  border-bottom:1px solid var(--edge);
  position:relative;
  color:var(--dust);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:6px; height:6px; background:var(--accent);
}
.mailto{
  display:block;
  padding:clamp(1.5rem,4vw,2.2rem);
  background:var(--bin);
  border:1px solid var(--edge);
  border-radius:3px;
  text-decoration:none;
  transition:border-color .2s, background .2s;
}
.mailto:hover{ border-color:var(--accent); background:#191310; }
.mailto__addr{
  display:block;
  margin-top:.5rem;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.4rem,4vw,2.1rem);
  line-height:1.05;
  color:var(--accent);
  word-break:break-word;
}

/* =========================================================
   Footer
   ========================================================= */
.foot{
  border-top:1px solid var(--edge);
  padding:clamp(2.5rem,6vw,4rem) var(--gut);
  max-width:var(--max);
  margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:1.2rem;
  align-items:center; justify-content:space-between;
}
.foot__name{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
}
.foot__links{
  display:flex; flex-wrap:wrap; gap:1.2rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.foot__links a{ color:var(--dust); text-decoration:none; }
.foot__links a:hover{ color:var(--accent); }
.foot__fine{ margin:0; }

/* =========================================================
   Responsive + motion
   ========================================================= */
@media (max-width:760px){
  .rig, .book{ grid-template-columns:1fr; }
  .date{ grid-template-columns:1fr auto; }
  .date__day{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .meter i{ background:var(--edge); }
  .meter i:nth-child(-n+14){ background:#B9B1A6; }
}