/* =========================================================
   TRAPHOUSEPUNK — link hub
   Same palette, type, rating box and HUD as the main site,
   laid out as a proper link-in-bio page: one centred column,
   every destination a full-width tap target with a label AND
   a subtitle. Format follows wav.id SoundPage.

   Motion safety: no strobe. The only movement is the slow
   REC pulse and hover transitions, all killed by
   prefers-reduced-motion.
   ========================================================= */

:root{
  --void:   #06060C;
  --void-2: #0C0C18;
  --void-3: #14142A;
  --bone:   #F2F0EA;
  --blue:   #1436E8;
  --mag:    #FF2BD1;
  --acid:   #8CFF35;
  --warn:   #FFE500;

  --soft:  rgba(242,240,234,.72);
  --faint: rgba(242,240,234,.42);
  --rule:  rgba(242,240,234,.14);
  --rule2: rgba(242,240,234,.26);

  --display:'Anton', Impact, sans-serif;
  --body:   'Space Grotesk', system-ui, sans-serif;
  --mono:   'Space Mono', ui-monospace, monospace;

  --hud-h: 44px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--void); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--body); font-size:16px; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(255,43,209,.25);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--mag); color:#000; }
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--mag); color:#000; padding:12px 18px;
  font-family:var(--mono); font-size:12px;
}
.skip:focus{ left:0; }

/* ---------- HUD ---------- */
.hud{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hud-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:0 clamp(10px,4vw,20px);
  background:rgba(6,6,12,.95); border-bottom:2px solid var(--mag);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
}
.hud__l,.hud__r{ display:flex; align-items:center; gap:12px; min-width:0; }
.rec{ width:9px; height:9px; background:var(--mag); flex:none; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.hud__rec{ color:var(--mag); font-weight:700; }
.hud__mark{ font-family:var(--display); font-size:15px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.hud__tc{ color:var(--acid); font-variant-numeric:tabular-nums; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:7px 14px; border:2px solid var(--rule2); color:var(--bone); white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--go{ background:var(--mag); border-color:var(--mag); color:#000; }

/* ---------- column ---------- */
.hub{
  width:min(100% - 2rem, 620px); margin-inline:auto;
  padding:calc(var(--hud-h) + clamp(26px,7vh,56px)) 0 clamp(40px,8vh,78px);
}

/* ---------- identity ---------- */
.id{ text-align:center; margin-bottom:clamp(24px,5vw,38px); }
/* height:auto is REQUIRED — the width/height attributes on the <img> are
   presentational hints, and a used `height` makes the browser ignore
   aspect-ratio, which stretches the avatar into an ellipse. */
.id__pic{
  width:clamp(116px,30vw,150px); height:auto; aspect-ratio:1; border-radius:50%;
  object-fit:cover; object-position:50% 42%;
  margin:0 auto clamp(14px,2.6vw,20px);
  border:2px solid var(--mag);
  filter:contrast(1.12) saturate(1.2);
}
.id__name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,7.4vw,2.7rem); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; margin:0 0 10px;
  position:relative; overflow-wrap:anywhere;
}
/* channel split, same device as the main site */
.id__name::before,.id__name::after{
  content:attr(data-t); position:absolute; left:0; right:0; top:0; pointer-events:none;
}
.id__name::before{ color:var(--mag); transform:translate3d(-3px,0,0); opacity:.9; }
.id__name::after{ color:var(--blue); transform:translate3d(3px,0,0); opacity:.9; }
.id__name > i{ position:relative; z-index:2; font-style:normal; }
.id__tag{ margin:0 0 14px; color:var(--soft); font-size:.96rem; }
.id__marks{ display:flex; justify-content:center; }

.rating{ display:inline-flex; align-items:stretch; border:2px solid var(--bone); background:#000; font-family:var(--mono); text-transform:uppercase; }
.rating__m{ display:grid; place-items:center; padding:5px 11px; font-family:var(--display); font-size:22px; line-height:1; border-right:2px solid var(--bone); }
.rating__t{ padding:5px 9px; font-size:8.5px; letter-spacing:.06em; line-height:1.3; align-self:center; max-width:200px; text-align:left; }

/* ---------- icon row ---------- */
.icons{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-top:clamp(16px,3vw,22px); }
.icons a{
  width:46px; height:46px; display:grid; place-items:center;
  border:2px solid var(--rule2); background:var(--void-2);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.icons svg{ width:19px; height:19px; fill:var(--bone); }
.icons a:hover{ border-color:var(--mag); background:var(--void-3); transform:translate(-2px,-2px); }

/* ---------- group labels ---------- */
.grp{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; font-weight:700;
  text-transform:uppercase; color:var(--faint);
  margin:clamp(22px,4vw,30px) 0 10px; padding-left:2px;
}
.grp:first-child{ margin-top:0; }

/* ---------- link rows ---------- */
.lk{
  display:flex; align-items:center; gap:13px;
  width:100%; min-height:64px; padding:13px 15px; margin-bottom:10px;
  background:var(--void-2); border:2px solid var(--rule2);
  text-decoration:none; color:var(--bone);
  transition:background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), box-shadow .12s var(--ease);
}
.lk:hover{ background:var(--void-3); border-color:var(--mag); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--mag); }
.lk__body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.lk__t{ font-weight:700; font-size:1rem; }
.lk__s{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--faint); overflow-wrap:anywhere; }
.lk__go{ font-family:var(--mono); font-size:15px; color:var(--faint); flex:none; }
.lk:hover .lk__go{ color:var(--acid); }

.lk__art{ width:58px; height:58px; object-fit:cover; border:2px solid var(--rule2); flex:none; }
.lk--hero{ min-height:84px; border-color:var(--mag); }
.lk--hero .lk__t{ font-size:1.15rem; }

.lk--accent{ background:var(--mag); border-color:var(--mag); color:#000; }
.lk--accent .lk__s{ color:rgba(0,0,0,.7); }
.lk--accent .lk__go{ color:#000; }
.lk--accent:hover{ background:var(--acid); border-color:var(--acid); box-shadow:4px 4px 0 var(--mag); }

/* ---------- crew ---------- */
.crewlist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.crewlist a{
  display:block; padding:12px 13px; text-decoration:none; color:var(--bone);
  background:var(--void-2); border:2px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:border-color .16s var(--ease);
}
.crewlist a:hover{ border-color:var(--mag); }
@media (max-width:420px){ .crewlist{ grid-template-columns:1fr; } }

.fine{
  margin:clamp(28px,5vw,40px) 0 0; text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}

@media (hover:none){
  .lk:hover{ background:var(--void-2); border-color:var(--rule2); transform:none; box-shadow:none; }
  .lk--accent:hover{ background:var(--mag); border-color:var(--mag); box-shadow:none; }
  .lk--hero:hover{ border-color:var(--mag); }
  .icons a:hover{ transform:none; border-color:var(--rule2); background:var(--void-2); }
  .crewlist a:hover{ border-color:var(--rule); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rec{ animation:none; }
  .id__name::before,.id__name::after{ display:none; }
}