/* ============ TOKENS — monochrome editorial ============ */
:root{
  --black:       #f7f5f0;
  --near-black:  #ece8e0;
  --panel:       #efece4;
  --line:        #ddd7c9;
  --off-white:   #14120e;
  --grey:        #6b665a;
  --grey-dim:    #47433a;
  --accent:      #c1401d; /* single restrained accent — used sparingly */

  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  --container: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-0.015em;
  margin:0;
  text-transform:uppercase;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 40px;
}

.section{ padding:140px 0; border-bottom:1px solid var(--line); }
.section h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); }
.section-lede{
  color:var(--grey);
  max-width:52ch;
  font-size:1rem;
  margin-top:1.1em;
  margin-bottom:3.2em;
  text-transform:none;
  letter-spacing:normal;
}

.kicker{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.72rem;
  color:var(--grey);
  margin:0 0 1.4em;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--off-white);
  outline-offset:3px;
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  background:rgba(247,245,240,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:24px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:padding .25s;
}
.site-header.is-scrolled .header-inner{ padding:15px 40px; }

.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.02em;
  font-size:0.92rem;
  text-transform:uppercase;
}
.brand-mark{ width:22px; height:22px; }

.main-nav{ display:flex; gap:36px; }
.main-nav a{
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  transition:color .15s;
}
.main-nav a:hover{ color:var(--off-white); }

.header-actions{ display:flex; align-items:center; gap:22px; }

.lang-toggle{
  background:none; border:1px solid var(--line);
  padding:6px 13px; color:var(--grey); cursor:pointer;
  font-size:0.7rem; font-weight:700; letter-spacing:0.06em;
  display:flex; align-items:center; gap:6px;
}
.lang-opt{ opacity:0.5; }
.lang-opt.is-active{ opacity:1; color:var(--off-white); }
.lang-sep{ opacity:0.3; }

.nav-burger{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-burger span{ width:22px; height:1px; background:var(--off-white); display:block; }

/* ============ HERO — editorial poster ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('assets/events/hero-bg.jpg');
  background-size:cover;
  background-position:70% 30%;
  filter:contrast(1.08) saturate(1.15) brightness(0.92);
}
@media (min-width:900px){ .hero-bg{ background-position:65% 25%; } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.5) 38%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0.35) 100%);
}
.hero-grain{
  position:absolute; inset:0;
  opacity:0.04;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-content{
  position:relative; z-index:2;
  max-width:var(--container);
  margin:0 auto;
  padding:0 40px 8vh;
  width:100%;
  color:#f1efe9;
}
.hero-badge{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#f1efe9;
  margin-bottom:1.6em;
}
.hero-badge::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.hero h1{
  font-size:clamp(2.8rem, 8vw, 6.6rem);
  max-width:18ch;
  color:#f1efe9;
}
.accent-text{ color:#a8a49a; }
.hero-sub{
  color:#c9c5ba;
  font-size:1.05rem;
  max-width:44ch;
  margin:1.6em 0 2.6em;
  text-transform:none;
  letter-spacing:normal;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-cta .btn-ghost{ border-color:#f1efe9; color:#f1efe9; }
.hero-cta .btn-ghost:hover{ background:#f1efe9; color:#14120e; }
.hero-scroll-cue{ display:none; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  padding:15px 30px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.76rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:opacity .15s, background .15s, color .15s;
  border-radius:0;
}
.btn-primary{
  background:var(--off-white);
  color:var(--black);
}
.btn-primary:hover{ opacity:0.8; }
.btn-ghost{
  border:1px solid var(--off-white);
  color:var(--off-white);
}
.btn-ghost:hover{ background:var(--off-white); color:var(--black); }

/* ============ ABOUT ============ */
.about-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:100px;
  align-items:start;
}
.about-copy p{ color:var(--grey); font-size:1.05rem; line-height:1.7; text-transform:none; letter-spacing:normal; margin:0 0 1.3em; max-width:56ch; }
.about-mark{ border:1px solid var(--line); position:relative; overflow:hidden; }
.about-mark img{ width:100%; display:block; }
.about-mark .mark-base{ filter:grayscale(1); }
.about-mark .mark-color{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .5s ease;
}
.about-mark:hover .mark-color{ opacity:1; }

.stat-row{ display:flex; flex-direction:column; gap:0; margin-top:2.6em; }
.stat{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line);
  padding:16px 0;
}
.stat-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  text-transform:uppercase;
}
.stat-label{ color:var(--grey); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; }

/* ============ ARTISTS ============ */
.spectrum-bar{
  display:flex;
  height:5px;
  margin-bottom:32px;
  overflow:hidden;
}
.spectrum-bar span{ flex:1; }
.spectrum-bar .c-violet{ background:#8B5CF6; }
.spectrum-bar .c-magenta{ background:#D946EF; }
.spectrum-bar .c-pink{ background:#EC4899; }
.spectrum-bar .c-red{ background:#F43F5E; }
.spectrum-bar .c-orange{ background:#F97316; }
.spectrum-bar .c-gold{ background:#EAB308; }
.spectrum-bar .c-green{ background:#22C55E; }
.spectrum-bar .c-teal{ background:#14B8A6; }
.spectrum-bar .c-blue{ background:#3B82F6; }

.artist-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:3em;
}
.artist-card{
  position:relative;
  background:var(--near-black);
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:6px;
}
.artist-card img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) brightness(0.94);
  transition:filter .4s, transform .6s cubic-bezier(.2,.7,.2,1);
}
.artist-card:hover img{ filter:brightness(1.05); transform:scale(1.045); }
.artist-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px;
  background:linear-gradient(0deg, rgba(10,10,10,0.95) 0%, transparent 100%);
  color:#f1efe9;
}
.artist-info h3{ font-size:0.95rem; font-weight:700; color:#f1efe9; }
.artist-tag{
  display:block;
  font-size:0.66rem;
  color:#c9c5ba;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.artist-card.founder .artist-tag{ color:var(--accent); }

/* Each artist, a color — signature accent per roster member */
.c-violet{ --card-c:#8B5CF6; }
.c-magenta{ --card-c:#D946EF; }
.c-pink{ --card-c:#EC4899; }
.c-red{ --card-c:#F43F5E; }
.c-orange{ --card-c:#F97316; }
.c-gold{ --card-c:#EAB308; }
.c-green{ --card-c:#22C55E; }
.c-teal{ --card-c:#14B8A6; }
.c-blue{ --card-c:#3B82F6; }

.artist-card[class*="c-"]{ box-shadow:inset 0 3px 8px -3px var(--card-c), inset 0 2px 0 0 var(--card-c); transition:box-shadow .25s; }
.artist-card[class*="c-"]:hover{ box-shadow:inset 0 4px 14px -2px var(--card-c), inset 0 2px 0 0 var(--card-c); }
.artist-card[class*="c-"]:hover img{ filter:brightness(1.08) saturate(1.15); }
.artist-card[class*="c-"]:hover h3{ color:var(--card-c); }
.artist-card h3{ transition:color .2s; }
a.artist-card::after{
  content:'↗';
  position:absolute; top:16px; right:16px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem;
  color:#f1efe9;
  background:rgba(10,10,10,0.55);
  border-radius:50%;
  opacity:0;
  transition:opacity .2s;
}
a.artist-card:hover::after{ opacity:1; }

.artist-card.placeholder{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.placeholder-mark svg{ width:64px; height:38px; fill:var(--grey-dim); opacity:0.6; }
.artist-card.placeholder .artist-info{ position:static; background:none; text-align:center; padding-top:16px; }

/* ============ MUSIC / TRACKS / RADIO ============ */
.track-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.track-embed{ overflow:hidden; }
.track-embed iframe{ display:block; }
.track-embed-wide{ grid-column:1 / -1; }
@media (max-width:700px){
  .track-grid{ grid-template-columns:1fr; }
}
.player-frame{ border:1px solid var(--line); background:var(--panel); }
.text-link{
  display:inline-block;
  margin-top:26px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid var(--off-white);
  padding-bottom:2px;
}
.text-link:hover{ color:var(--grey); border-color:var(--grey); }
.form-note{ color:var(--grey-dim); font-size:0.78rem; margin-top:16px; text-transform:none; letter-spacing:normal; }

/* ============ EVENTS ============ */
.event-feature{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:0;
  align-items:stretch;
  border:1px solid var(--line);
  background:var(--panel);
  margin-bottom:80px;
}
.event-feature img{ width:100%; height:100%; object-fit:cover; }
.event-tag{
  display:inline-block;
  color:var(--accent);
  font-weight:700;
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.event-feature-info{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.event-feature-info h3{ font-size:1.7rem; margin-bottom:0.5em; text-transform:uppercase; line-height:1.15; }
.event-meta{ color:var(--grey); margin:0 0 0.9em; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.04em; }

.event-feature-stacked{ grid-template-columns:1fr; }
.event-feature-stacked img{ width:100%; height:auto; display:block; }
.event-feature-stacked .event-feature-info{ padding:32px 40px 40px; }
.event-lineup{ color:var(--off-white); font-weight:600; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.04em; }

.lineup-strip{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:1.4em;
}
.lineup-item{ display:flex; flex-direction:column; align-items:center; width:64px; }
.lineup-item img{
  width:56px; height:56px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
}
.lineup-item span{
  margin-top:8px;
  font-size:0.62rem;
  text-align:center;
  color:var(--grey);
  letter-spacing:0.02em;
  line-height:1.2;
}

.event-blocks{ display:flex; flex-direction:column; gap:80px; }
.event-block h3{ font-size:1.1rem; margin-bottom:1.2em; }
.event-desc{ color:var(--grey); text-transform:none; letter-spacing:normal; }

.gallery-grid{
  display:flex;
  gap:1px;
  background:var(--line);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--grey-dim) transparent;
}
.gallery-grid::-webkit-scrollbar{ height:5px; }
.gallery-grid::-webkit-scrollbar-thumb{ background:var(--grey-dim); }
.gallery-grid::-webkit-scrollbar-track{ background:var(--near-black); }
.gallery-grid img{
  flex:0 0 auto;
  width:230px;
  height:230px;
  scroll-snap-align:start;
  object-fit:cover;
  cursor:pointer;
  transition:opacity .3s;
}
.gallery-grid img:hover{ opacity:0.85; }

.event-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.2em;
}
.event-block-head h3{ margin-bottom:0; }
.gallery-nav{ display:flex; gap:8px; }
.gallery-nav button{
  width:34px; height:34px;
  border:1px solid var(--line);
  background:none;
  color:var(--off-white);
  cursor:pointer;
  font-size:1rem;
  transition:border-color .2s;
}
.gallery-nav button:hover{ border-color:var(--off-white); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,6,6,0.97);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:84vh; }
.lightbox-close{
  position:absolute; top:28px; right:32px;
  background:none; border:none; color:#f1efe9;
  font-size:2rem; cursor:pointer; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#f1efe9;
  font-size:2.6rem; cursor:pointer; padding:10px 18px;
  opacity:0.55; font-weight:300;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }

/* ============ ACADEMY ============ */
.academy{ background:var(--panel); }
.academy-bars{ display:none; }
.academy-grid p{ color:var(--grey); max-width:58ch; font-size:1.05rem; margin:1.4em 0 2.2em; text-transform:none; letter-spacing:normal; }

/* ============ DEMO FORM ============ */
.demo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}
.demo-copy p{ color:var(--grey); text-transform:none; letter-spacing:normal; }
.demo-rules{
  list-style:none;
  padding:0; margin:2em 0 0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
}
.demo-rules li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--grey);
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.demo-form{ display:flex; flex-direction:column; gap:4px; }
.demo-form label{
  font-size:0.7rem;
  color:var(--grey);
  margin-top:22px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.demo-form input, .demo-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--off-white);
  padding:12px 2px;
  font-family:var(--font-body);
  font-size:1rem;
  resize:vertical;
  border-radius:0;
}
.demo-form input:focus, .demo-form textarea:focus{ border-color:var(--off-white); outline:none; }
.demo-form .btn{ margin-top:32px; align-self:flex-start; border:1px solid var(--off-white); cursor:pointer; }
.hp-field{ position:absolute; left:-9999px; }

/* ============ CONNECT ============ */
.connect{
  padding:110px 0;
  position:relative;
  border-top:1px solid var(--line);
}
.connect-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:36px;
}
.connect-copy .kicker{ margin-bottom:0.9em; }
.connect-copy h2{ margin-bottom:0; }
.connect-links{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  width:100%;
  border:1px solid var(--line);
}
.connect-btn{
  flex:1 1 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 20px;
  border-right:1px solid var(--line);
  font-weight:700;
  font-size:0.76rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:background .2s, color .2s;
}
.connect-btn:last-child{ border-right:none; }
.connect-btn svg{ width:16px; height:16px; }
.connect-btn:hover{ background:var(--off-white); color:var(--black); }

/* ============ FOOTER ============ */
.site-footer{ padding:90px 0 32px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid var(--line);
}
.footer-mark{ width:28px; margin-bottom:20px; }
.footer-brand p{ color:var(--grey); max-width:34ch; text-transform:none; letter-spacing:normal; }
.footer-col h4{
  font-family:var(--font-body);
  font-size:0.7rem;
  color:var(--grey);
  margin-bottom:16px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.footer-col a{
  display:block;
  color:var(--off-white);
  margin-bottom:10px;
  font-size:0.95rem;
}
.footer-col a:hover{ color:var(--grey); }
.footer-bottom{
  padding-top:24px;
  color:var(--grey-dim);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .header-inner{ padding:18px 24px; }
  .container{ padding:0 24px; }
  .main-nav{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--black);
    flex-direction:column;
    padding:32px 24px;
    gap:26px;
    transform:translateY(-120%);
    transition:transform .3s;
  }
  .main-nav.is-open{ transform:translateY(0); }
  .main-nav a{ font-size:1.1rem; }
  .nav-burger{ display:flex; }

  .about-grid, .demo-grid{ grid-template-columns:1fr; gap:50px; }
  .about-mark{ order:-1; }

  .artist-grid{ grid-template-columns:repeat(2, 1fr); }

  .event-feature{ grid-template-columns:1fr; }
  .event-feature img{ width:100%; height:auto; aspect-ratio:16/10; }
  .event-feature-info{ padding:28px; }

  .gallery-grid img{ width:160px; height:160px; }

  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .connect-links{ flex-direction:column; width:100%; }
  .connect-btn{ border-right:none; border-bottom:1px solid var(--line); justify-content:center; }
  .connect-btn:last-child{ border-bottom:none; }

  .section{ padding:90px 0; }
}