:root{
  --ink:#1c1512;
  --paper:#efe6d3;
  --paper-dim:#e6dac1;
  --wine:#7a1533;
  --wine-deep:#5c0f26;
  --gold:#c99a3d;
  --coral:#e85d4c;
  --teal:#2c6e68;
  --line: rgba(28,21,18,0.14);
  --radius: 2px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  font-weight:400;
  line-height:1.45;
}
h1,h2,.display{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  letter-spacing:0.2px;
}
a{color:inherit;}

/* Clave rhythm divider — a nod to the 2-3 son clave beat, used as a signature motif */
.clave{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:18px;
  margin:0 auto;
}
.clave span{width:4px;background:var(--wine);border-radius:1px;}
/* pattern: 1 0 0 1 0 0 1 0 -> tall,short,short,tall,short,short,tall,short */
.clave span:nth-child(1){height:18px;}
.clave span:nth-child(2){height:6px;opacity:.25;}
.clave span:nth-child(3){height:6px;opacity:.25;}
.clave span:nth-child(4){height:18px;}
.clave span:nth-child(5){height:6px;opacity:.25;}
.clave span:nth-child(6){height:6px;opacity:.25;}
.clave span:nth-child(7){height:18px;}
.clave span:nth-child(8){height:6px;opacity:.25;}

header{
  padding:64px 24px 40px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:12px;
  color:var(--wine);
  font-weight:600;
}
header .eyebrow{margin-bottom:18px;}
header .back-link{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--wine);
  text-decoration:none;
  margin-bottom:16px;
}
header .back-link:hover{text-decoration:underline;}
header h1{
  font-size:clamp(36px,6vw,64px);
  margin:0 0 12px;
}
header h1 em{color:var(--wine);font-style:italic;}
header p{
  max-width:520px;
  margin:0 auto 28px;
  color:rgba(28,21,18,0.7);
  font-size:16px;
}

main{max-width:960px;margin:0 auto;padding:40px 24px 100px;}

.filters{margin-bottom:32px;}
.near-me{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:16px;
  font-size:13px;
}
.near-me-idle,.near-me-active{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
}
.near-me-or{color:rgba(28,21,18,0.5);}
#use-location-btn{
  background:none;
  border:none;
  color:var(--wine);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  text-decoration:underline;
  padding:0;
  font-family:'Space Grotesk',sans-serif;
}
.address-form{display:flex;gap:6px;}
.address-form input{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  width:180px;
  background:#fff;
  color:var(--ink);
}
.address-form button{
  padding:6px 12px;
  border:1px solid var(--ink);
  background:transparent;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
}
.address-form button:hover{background:var(--ink);color:var(--paper);}
#near-me-label{font-weight:600;}
.near-me-clear{
  background:none;
  border:none;
  color:rgba(28,21,18,0.5);
  font-size:13px;
  cursor:pointer;
  text-decoration:underline;
  padding:0;
  font-family:'Space Grotesk',sans-serif;
}
.near-me-error{
  color:var(--coral);
  font-size:12px;
  margin:0;
  min-height:0;
}
.near-me-error:empty{display:none;}
.filter-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
}
.filter-section{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.filter-label{margin:0;}
.filter-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.filter-select{display:none;}
.chip{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
  transition:all .15s ease;
}
.chip:hover{border-color:var(--wine);}
.chip.active{background:var(--wine);border-color:var(--wine);color:var(--paper);}

.day-nav{
  display:flex;
  overflow-x:auto;
  gap:0;
  border:1px solid var(--line);
  margin-bottom:32px;
}
.day-nav button{
  flex:1;
  min-width:64px;
  padding:12px 4px;
  background:none;
  border:none;
  border-right:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  color:rgba(28,21,18,0.5);
}
.day-nav button:last-child{border-right:none;}
.day-nav button.active{background:var(--ink);color:var(--paper);}

.event-list{display:flex;flex-direction:column;gap:0;}
.event{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:20px;
  padding:22px 4px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.event-time{
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--wine);
  padding-top:3px;
}
.event-name{font-size:20px;margin:0 0 6px;font-family:'Instrument Serif',serif;}
.event-meta{font-size:13px;color:rgba(28,21,18,0.65);margin:0 0 8px;}
.event-tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  font-weight:600;
}
.tag.style-salsa{color:var(--wine);}
.tag.style-bachata{color:var(--coral);}
.tag.style-zouk{color:var(--teal);}
.tag.style-kizomba{color:#8a5a2c;}
.tag.style-tango{color:#4a4470;}
.tag.style-swing{color:#4a7043;}
.tag.style-hiphop{color:#b0405c;}
.tag.style-ballet{color:#c17ba0;}
.tag.style-tap{color:#8a6d1e;}
.tag.style-jazz{color:#3f7a9e;}
.tag.style-musicaltheater{color:#c9622e;}
.tag.style-more{color:#5c6670;}
.event-link{
  align-self:center;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  border:1px solid var(--ink);
  padding:8px 14px;
  text-decoration:none;
  transition:all .15s ease;
}
.event-link:hover{background:var(--ink);color:var(--paper);}

.empty{
  text-align:center;
  padding:60px 20px;
  color:rgba(28,21,18,0.55);
}

footer{
  text-align:center;
  padding:50px 24px 70px;
  border-top:1px solid var(--line);
}
footer p{font-size:14px;color:rgba(28,21,18,0.6);margin-bottom:18px;}
.cta{
  display:inline-block;
  background:var(--wine);
  color:var(--paper);
  padding:14px 28px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.3px;
}
.cta:hover{background:var(--wine-deep);}

@media (max-width:560px){
  .event{grid-template-columns:56px 1fr;}
  .event-link{grid-column:1 / -1;justify-self:start;margin-top:8px;}
}

@media (max-width:600px){
  .address-form{width:100%;max-width:320px;}
  .address-form input{width:auto;flex:1;}
  .filter-panel{padding:20px 16px;gap:20px;}
  #type-filters,#audience-filters{display:none;}
  .filter-select{
    display:block;
    width:100%;
    max-width:320px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    font-family:'Space Grotesk',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  #social-style-filters,#studio-style-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    width:100%;
    padding-bottom:4px;
  }
  #social-style-filters .chip,#studio-style-filters .chip{
    flex:0 0 auto;
    white-space:nowrap;
  }
}