/* Brands we love — gallery grids. Hub gold / Beats red via --accent. */
.fan-nav{
  position:sticky;
  top:var(--fan-nav-top, 72px);
  z-index:90;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.fan-nav-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px 0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fan-nav-chips::-webkit-scrollbar{ display:none; }
.fan-nav-chips a{
  flex:0 0 auto;
  padding:8px 16px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--surface);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.fan-nav-chips a:hover,
.fan-nav-chips a.is-active{
  color:var(--text);
  border-color:var(--accent);
}
.fan-brand{ scroll-margin-top:var(--fan-section-top, 140px); }
.fan-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:24px;
}
@media (min-width: 800px){
  .fan-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
  }
}
.fan-tile{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:8px;
  border:1px solid var(--border);
  background:#050505;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-align:left;
}
.fan-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.fan-tile-play{
  position:absolute;
  left:50%;
  top:42%;
  width:40px;
  height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:rgba(10,10,10,.62);
  pointer-events:none;
}
.fan-tile-play::after{
  content:"";
  position:absolute;
  left:15px;
  top:12px;
  border-style:solid;
  border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--text);
}
.fan-tile-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:28px 10px 10px;
  background:linear-gradient(transparent, rgba(10,10,10,.92));
  color:var(--text);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:400;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fan-tile.is-playing{
  aspect-ratio:16/9;
  background:#000;
}
.fan-tile.is-playing iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.fan-tile.is-playing .fan-tile-play,
.fan-tile.is-playing img,
.fan-tile.is-playing .fan-tile-label{ display:none; }