:root {
  --bg: #0b0b0b;
  --ink: #fff;
  --muted: rgba(255,255,255,0.6);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
.gg-header {
  position: fixed; inset: 0 0 auto 0; height: 60px; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 16px; background: rgba(11,11,11,0.7); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gg-logo { font-weight: 700; letter-spacing: .02em; opacity: .9; white-space: nowrap; }
.gg-left { display: flex; align-items: center; gap: 12px; }

.gg-right { display: flex; justify-content: flex-end; }
.gg-chip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.gg-chip.square { border-radius: 8px; }

.gg-names { display: flex; gap: 10px; overflow-x: auto; padding: 6px 8px; -webkit-overflow-scrolling: touch; }
.gg-names::-webkit-scrollbar{ display: none; }
.gg-names button { background: transparent; color: var(--muted); border: none; padding: 4px 2px; cursor: pointer; white-space: nowrap; line-height: 0.45; }
.gg-names button:hover, .gg-names button.active { color: var(--ink); }

/* Left sticky alphabetical name list */
.gg-name-list { position: fixed; top: 72px; left: 12px; bottom: 20px; width: 220px; overflow: auto; z-index: 9; padding-right: 8px; }
.gg-name-list::-webkit-scrollbar{ width: 6px; }
.gg-name-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 3px; }
.gg-name-list .name { display: block; color: var(--muted); font-size: 13px; padding: 4px 2px; cursor: pointer; line-height: 1.05; }
.gg-name-list .name .title { display: block; color: var(--muted); font-weight: 600; }
.gg-name-list .name .label { display: block; color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 400; margin-top: 2px; }
.gg-name-list .name:hover, .gg-name-list .name.active { color: var(--ink); }

@media (max-width: 1024px){ .gg-name-list { display: none; } }

.gg-main { position: relative; padding-top: 60px; height: 100vh; }
.gg-container { position: relative; width: 100%; height: calc(100vh - 60px); overflow: hidden; touch-action: none; }
.gg-canvas { position: absolute; top: 0; left: 0; will-change: transform; width: 100%; height: 100%; }
.gg-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 16px; background: rgba(0,0,0,0.92); will-change: transform; }
.gg-grid.hidden { display: none; }
.gg-grid-item { position: relative; width: 160px; height: 160px; background-size: cover; background-position: center; border: none; }
.gg-grid-item .grid-meta{ position:absolute; left:8px; right:8px; bottom:6px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.6); }
.gg-grid-item .grid-meta .title{ font-size:12px; font-weight:700; margin:0; letter-spacing:.02em; }
.gg-grid-item .grid-meta .sub{ font-size:11px; opacity:.8; margin-top:1px; letter-spacing:.02em; }
.gg-vignette { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.55) 100%); mix-blend-mode: multiply; }
.gg-noise { pointer-events: none; position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>'); background-size: 140px 140px; mix-blend-mode: overlay; }
.gg-coords { position: absolute; left: 12px; bottom: 8px; color: rgba(255,255,255,0.8); font-size: 12px; letter-spacing: .02em; }
.gg-hint { display: none !important; }
.gg-hint span { display: none; }

/* Centered viewport-anchored logo */
.gg-center-logo { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 10; }
.center-logo-frame {
  /* Bigger internal viewport to avoid cropping, then scale down visually */
  width: 256px; height: 256px; /* expand to prevent any cropping */
  border: 0; background: transparent;
  transform: scale(0.55);
  transform-origin: center center;
  opacity: 0.95;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}

.gg-reset-chip { position: fixed; right: 14px; bottom: 18px; z-index: 12; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; }

/* Floating contact block */
.gg-contact-float{ position:fixed; right:24px; top:20%; z-index:12; color:#fff; text-align:right; pointer-events:auto; }
.gg-contact-float .label{ font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; }
.gg-contact-float a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.4); font-size:14px; }

.gg-item { position: absolute; width: var(--w, 320px); height: var(--h, 220px); border-radius: 0; overflow: hidden; cursor: pointer; box-shadow: none; will-change: transform, left, top; transform: translateZ(0); }
.gg-item, .gg-item * { pointer-events: auto; }
.gg-item .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .25s ease; }
.gg-item:hover .img { transform: scale(1.04); }
.gg-item .meta { position: absolute; left: 12px; bottom: 10px; right: 12px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.75); }
.gg-item .meta .title { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; margin: 0; }
.gg-item .meta .sub { font-size: 11px; opacity: 0.8; margin-top: 2px; letter-spacing: 0.02em; font-weight: 400; text-transform: none; }
/* Dimmed non-matching state */
.gg-item.dimmed { opacity: 0.25; filter: grayscale(60%); transition: opacity .25s ease, filter .25s ease; }

/* Editorial overlay blocks */
.gg-overlays { position: absolute; inset: 0; pointer-events: none; }
.gg-block { position: absolute; color: #fff; font-weight: 700; line-height: 1.2; }
.gg-block h4 { margin: 0 0 8px; font-size: 14px; opacity: .9; }
.gg-block p { margin: 2px 0; font-size: 12px; font-weight: 600; }


/* Modal – investor layout, dark theme to match site */
.artist-modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); backdrop-filter:blur(10px); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .3s ease; }
.artist-modal.show{ opacity:1; visibility:visible; }
.artist-modal .modal-content{ background:#111; color:#fff; max-width:1200px; width:90%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.4); transform:scale(0.96) translateY(12px); opacity:0; transition:all .3s cubic-bezier(0.22,1,0.36,1); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:0; }
.artist-modal.show .modal-content{ transform:scale(1) translateY(0); opacity:1; }
.modal-close{ position:absolute; top:16px; right:16px; width:40px; height:40px; background:#fff; color:#000; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.5rem; z-index:10; border-radius:8px; }
.modal-close:hover{ opacity:.85; }
.modal-artist-header{ display:grid; grid-template-columns:400px 1fr; gap:4rem; padding:4rem; }
.modal-artist-image{ width:400px; height:400px; overflow:hidden; border-radius:8px; }
.modal-artist-image img{ width:100%; height:100%; object-fit:cover; filter:saturate(80%) contrast(1.05); }
.modal-artist-info h2{ font-size:2rem; margin-bottom:.5rem; color:#fff; }
.modal-artist-role{ font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.25rem; }
.artist-bio{ font-size:1rem; line-height:1.6; margin-bottom:1.25rem; color:#fff; opacity:.9; }
.modal-artist-bio{ padding: 0 4rem; }
.social-links{ display:flex; gap:1rem; margin-top:1rem; margin-bottom:.5rem; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:2px solid rgba(255,255,255,0.7); border-radius:8px; color:#fff; text-decoration:none; transition:all .2s ease; }
.social-link { line-height: 0; position: relative; overflow: hidden; }
.social-link::before{
  content: "";
  position:absolute; top:50%; left:50%;
  width:20px; height:20px;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  background-repeat:no-repeat; background-position:center; background-size:18px 18px;
}
.social-link.social-ig::before{ background-image:url('https://storage.googleapis.com/allmyfriends-assets-2025/ICONS/instagram-svgrepo-com.svg'); }
.social-link.social-tt::before{ background-image:url('https://storage.googleapis.com/allmyfriends-assets-2025/ICONS/tiktok-svgrepo-com.svg'); }
.social-link.social-sp::before{ background-image:url('https://storage.googleapis.com/allmyfriends-assets-2025/ICONS/spotify-svgrepo-com.svg'); }
.social-link:hover{ background:#fff; color:#000; text-decoration:none; }
.modal-music-section{ background:#0b0b0b; padding:3rem 4rem; border-top:1px solid rgba(255,255,255,0.08); }
@media(max-width:768px){
  .artist-modal .modal-content{ width:100%; max-width:100%; height:90vh; border-radius:1.25rem 1.25rem 0 0; overflow-x:hidden; }
  /* Compact, optimized header: image left, text right */
  .modal-artist-header{ grid-template-columns: 128px 1fr; padding: 1rem; gap: 1rem; align-items: start; }
  .modal-artist-image{ width:128px; height:128px; border-radius:0.75rem; }
  .modal-artist-image img{ object-fit: cover; width:100%; height:100%; }
  .modal-artist-info h2{ font-size:1.15rem; line-height:1.15; margin:0 0 .15rem; }
  .modal-artist-role{ font-size:.72rem; line-height:1.2; margin:0 0 .3rem; letter-spacing:.08em; }
  .modal-artist-label{ font-size:.72rem; color:var(--muted); margin:0 0 .5rem; }
  .modal-artist-bio{ padding: 0 1.5rem; }
  .artist-bio{ font-size:.8rem; line-height:1.08; margin:0 0 .6rem; display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; }
  /* Wider, fuller-width embed with tighter padding */
  .modal-music-section{ padding: 1rem; margin-top: .5rem; }
  .modal-section-title{ font-size:1rem; margin:.25rem 0 .5rem; }
  .modal-music-section iframe{ width:100% !important; height:520px !important; }
}

@media (max-width: 768px) {
  .gg-header { grid-template-columns: auto 1fr auto; height: 52px; padding: 0 10px; }
  .gg-main { padding-top: 52px; }
  .gg-logo { font-size: 14px; }
  .center-logo-frame { transform: scale(0.65625); /* 25% larger than 0.525 */ }
  .gg-names { gap: 6px; }

  /* Mobile: Filters as vertical overlay under header */
  .gg-filters { position: fixed; top: 56px; left: 12px; right: auto; bottom: auto; z-index: 12; display: flex; flex-direction: column; gap: 4px; background: transparent; padding: 0; border: none; }
  .gg-filters button { text-align: left; padding: 3px 2px; font-size: 13px; line-height: .475; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
  .gg-filters button:hover, .gg-filters button.active { color: var(--ink); }

  /* Mobile: Keep logo centered */
  .gg-center-logo { transform: none; }

  /* Mobile: Names list anchored bottom-left (replaces coords) rising upward */
  .gg-coords { display: none; }
  .gg-name-list {
    position: absolute;
    left: 12px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    top: auto;
    transform: none;
    width: auto;
    max-height: 40vh;
    text-align: left;
    pointer-events: all;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .gg-name-list .name { display: block; padding: 1px 2px; font-size: 12px; margin: 0; line-height: 1.05; }
}