/* ============================================================
   Lab Studios — public Artists grid + profile
   ============================================================ */
:root {
  --bg:#050505; --bg-2:#0c0c0c; --bg-3:#111; --panel:#141414;
  --fg:#f4f1ea; --fg-dim:rgba(244,241,234,0.55); --fg-faint:rgba(244,241,234,0.12);
  --accent:#C8FF00; --hair:rgba(244,241,234,0.12);
  --pad:clamp(20px,4vw,56px);
}
* { box-sizing:border-box; }
html { overflow-x:clip; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); }
body {
  font-family:"elza","Inter","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* grid backdrop */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
}
.page { position:relative; z-index:1; }

/* ---------- NAV ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(5,5,5,0.82); border-bottom:1px solid var(--hair);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad); gap:24px;
}
.nav .logo img { height:clamp(38px,5vh,52px); width:auto; }
.nav .back {
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim); transition:color 120ms;
}
.nav .back:hover { color:var(--accent); }

/* ---------- HERO ---------- */
.hero { padding:clamp(48px,9vh,110px) var(--pad) clamp(32px,5vh,64px); border-bottom:1px solid var(--hair); }
.hero .kicker {
  display:inline-flex; align-items:center; gap:14px;
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:22px;
}
.hero .kicker .tag { border:1px solid var(--accent); color:var(--accent); padding:3px 8px; }
.hero h1 {
  font-weight:700; font-size:clamp(44px,9vw,110px); line-height:0.9;
  letter-spacing:-0.04em; margin:0 0 18px;
}
.hero h1 .it { font-weight:300; font-style:italic; color:var(--accent); }
.hero .sub { font-size:16px; line-height:1.6; color:var(--fg-dim); max-width:56ch; }

/* ---------- SECTION LABEL ---------- */
.section-head {
  display:flex; align-items:baseline; gap:16px;
  padding:clamp(36px,5vh,60px) var(--pad) 20px;
}
.section-head .lbl {
  font-family:"Public Pixel",monospace; font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
}
.section-head .count {
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.14em;
  color:var(--fg-dim);
}

/* ---------- GRID ---------- */
.grid {
  display:grid; gap:2px; padding:0 var(--pad) clamp(48px,8vh,96px);
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}
.grid.featured { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; padding-bottom:clamp(24px,4vh,48px); }

/* ---------- CARD ---------- */
.card {
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  background:var(--bg-3); border:1px solid var(--hair);
  transition:border-color 150ms, transform 150ms;
}
.card:hover { border-color:var(--accent); }
.card-photo {
  position:absolute; inset:0; background-size:cover; background-position:center 20%;
  background-repeat:no-repeat; transition:transform 400ms ease;
  background-color:var(--panel);
}
.card:hover .card-photo { transform:scale(1.04); }
.card-photo.placeholder {
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px), var(--panel);
}
.card-photo.placeholder span {
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.14em;
  color:var(--fg-faint); text-transform:uppercase;
}
.card-grad {
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,5,5,0.55) 68%, rgba(5,5,5,0.94) 100%);
}
.card-info { position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px; }
.card-info .name {
  font-weight:700; font-size:clamp(18px,2.4vw,24px); line-height:1.02;
  letter-spacing:-0.02em; text-transform:uppercase; margin:0 0 6px;
}
.card-info .studio {
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:10px;
}
.card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.card-tags span {
  font-family:"Public Pixel",monospace; font-size:7px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent); border:1px solid rgba(200,255,0,0.4);
  padding:3px 6px;
}
.card-booth {
  position:absolute; top:12px; right:12px;
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.1em;
  color:#000; background:var(--accent); padding:4px 8px;
}
.card-featured {
  position:absolute; top:12px; left:12px;
  font-family:"Public Pixel",monospace; font-size:7px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:4px 7px; background:rgba(5,5,5,0.5);
}

/* ---------- EMPTY / LOADING ---------- */
.state {
  padding:80px var(--pad); text-align:center;
  font-family:"Public Pixel",monospace; font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim);
}

/* ---------- PROFILE PAGE ---------- */
.profile { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - 80px); }

/* Left column: profile photo fallback (no gallery) */
.profile-left {
  display:flex; flex-direction:column; overflow:hidden;
}
.profile-photo {
  flex:1; min-height:55vh;
  background-size:cover; background-position:center 18%; background-repeat:no-repeat;
  background-color:var(--panel);
}
.profile-photo.placeholder {
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 16px), var(--panel);
}
.profile-photo.placeholder span { font-family:"Public Pixel",monospace; font-size:10px; letter-spacing:0.16em; color:var(--fg-faint); }

/* ---------- SCROLL-DRIVEN GALLERY ---------- */
.profile-scene { position:relative; }

.profile.profile-has-gallery {
  position:sticky; top:0;
  height:100vh; min-height:0;
  overflow:hidden;
}

.profile-gallery-viewport {
  position:relative;
  overflow:hidden;
  height:100%;
}

.profile-gallery-track {
  display:flex; flex-direction:row;
  height:100%;
  will-change:transform;
}

.profile-gallery-track .gs-item {
  flex-shrink:0;
  width:100%; height:100%;
  overflow:hidden;
  background:var(--panel);
}

.profile-gallery-track .gs-photo {
  width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

.gallery-counter {
  position:absolute; bottom:16px; left:16px;
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.2em;
  color:rgba(255,255,255,0.5); pointer-events:none;
}
.gallery-scroll-hint {
  position:absolute; left:0; top:0; bottom:0; width:28px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
  pointer-events:none; white-space:nowrap;
}
.profile-body { padding:clamp(32px,6vw,80px) var(--pad); display:flex; flex-direction:column; justify-content:center; }
.profile-kicker {
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--fg-dim);
}
.profile-kicker .booth { border:1px solid var(--accent); color:var(--accent); padding:3px 8px; }
.profile-body h1 {
  font-weight:700; font-size:clamp(40px,6vw,80px); line-height:0.92;
  letter-spacing:-0.03em; text-transform:uppercase; margin:0 0 10px;
}
.profile-handle {
  font-family:"Public Pixel",monospace; font-size:11px; letter-spacing:0.12em;
  color:var(--fg-dim); margin-bottom:26px;
}
.profile-meta { display:flex; flex-wrap:wrap; gap:28px; margin-bottom:26px; }
.profile-meta .m .k {
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:6px;
}
.profile-meta .m .v { font-size:18px; font-weight:600; }
.profile-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.profile-tags span {
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:8px 12px;
}
.profile-bio { font-size:16px; line-height:1.7; color:var(--fg-dim); max-width:52ch; margin-bottom:32px; }
.profile-links { display:flex; flex-wrap:wrap; gap:12px; }
.profile-links a {
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Public Pixel",monospace; font-size:9px; letter-spacing:0.12em;
  text-transform:uppercase; border:1px solid var(--hair); padding:14px 20px;
  transition:border-color 120ms, color 120ms;
}
.profile-links a:hover { border-color:var(--accent); color:var(--accent); }
.profile-links a.primary { background:var(--accent); color:#000; border-color:var(--accent); }
.profile-links a.primary:hover { background:var(--fg); border-color:var(--fg); }

/* ---------- PROFILE GALLERY ---------- */
.gallery-wrap { border-top:1px solid var(--hair); }
.gallery {
  display:grid; gap:2px; padding:0 var(--pad) clamp(40px,7vh,80px);
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
}
.g-item { display:block; aspect-ratio:1/1; overflow:hidden; background:var(--panel); border:1px solid var(--hair); }
.g-photo {
  width:100%; height:100%; background-size:cover; background-position:center;
  background-repeat:no-repeat; transition:transform 400ms ease;
}
.g-item:hover .g-photo { transform:scale(1.05); }

/* ---------- FOOTER ---------- */
.footer {
  padding:32px var(--pad); border-top:1px solid var(--hair); background:#000;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.footer .copy {
  font-family:"Public Pixel",monospace; font-size:8px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px) {
  .profile { grid-template-columns:1fr; }
  .profile-photo { min-height:50vh; }

  /* Gallery: native horizontal swipe on mobile */
  .profile.profile-has-gallery {
    position:static; height:auto; overflow:visible;
    grid-template-columns:1fr;
  }
  .profile-gallery-viewport {
    overflow-x:scroll; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    height:75vw; max-height:520px;
    scrollbar-width:none;
  }
  .profile-gallery-viewport::-webkit-scrollbar { display:none; }
  .profile-gallery-track {
    transform:none !important;
    height:100%;
  }
  .profile-gallery-track .gs-item {
    width:88vw;
    scroll-snap-align:start;
    border-right:1px solid var(--hair);
  }
  .gallery-counter { bottom:12px; left:12px; }
}