/* =========================================================
   THADDEUS A — link hub
   Same palette, type 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, nothing hidden behind a scroll-jack or an
   accordion. Format follows wav.id SoundPage.
   ========================================================= */

:root{
  --ink:    #0A0908;
  --ink-2:  #121010;
  --ink-3:  #1B1817;
  --bone:   #F0ECE7;
  --red:    #D42A2A;
  --red-hi: #FF4A4A;
  --grey:   #8B8380;

  --soft:  rgba(240,236,231,.70);
  --faint: rgba(240,236,231,.44);
  --rule:  rgba(240,236,231,.13);
  --rule-2:rgba(240,236,231,.24);

  --display:'Archivo', system-ui, sans-serif;
  --body:   'Archivo', system-ui, sans-serif;
  --mono:   'DM Mono', ui-monospace, monospace;
  --wide: 125;

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

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); 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(212,42,42,.22);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }

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

/* ---------- HUD (matches the main site) ---------- */
.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:16px; padding:0 clamp(12px,4vw,22px);
  background:rgba(10,9,8,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
}
.hud__l,.hud__r{ display:flex; align-items:center; gap:12px; min-width:0; }
.rec{ width:8px; height:8px; border-radius:50%; background:var(--red-hi); flex:none; animation:blink 1.6s steps(1,end) infinite; }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }
.hud__rec{ color:var(--red-hi); }
.hud__mark{
  font-family:var(--display); font-variation-settings:'wdth' 112;
  font-weight:700; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; text-decoration:none;
}
.hud__tc{ color:var(--bone); font-variant-numeric:tabular-nums; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:8px 14px; border:1px solid var(--rule-2); border-radius:1px;
  color:var(--bone); white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--go{ background:var(--red); border-color:var(--red); color:#fff; }

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

/* ---------- identity block ---------- */
.id{ text-align:center; margin-bottom:clamp(26px,5vw,40px); }
/* height:auto is REQUIRED — the width/height attributes on the <img> become
   presentational hints, and a used `height` makes the browser ignore
   aspect-ratio, stretching the avatar into an ellipse. Same trap as the
   video thumbnails on the main site. */
.id__pic{
  width:clamp(116px,30vw,150px); height:auto; aspect-ratio:1; border-radius:50%;
  object-fit:cover; object-position:61% 30%;
  margin:0 auto clamp(14px,2.6vw,20px);
  border:2px solid var(--rule-2);
  filter:saturate(.92) contrast(1.05);
}
.id__name{
  font-family:var(--display); font-variation-settings:'wdth' var(--wide);
  font-weight:800; font-size:clamp(1.9rem,8vw,2.9rem); line-height:1;
  letter-spacing:-.03em; text-transform:uppercase; margin:0 0 10px;
}
.id__tag{ margin:0 0 4px; color:var(--soft); font-size:.98rem; }
.id__sub{
  margin:0; color:var(--faint);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- icon row ---------- */
.icons{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:clamp(16px,3vw,22px); }
.icons a{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--rule-2); background:var(--ink-2);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.icons svg{ width:20px; height:20px; fill:var(--bone); }
.icons a:hover{ border-color:var(--red); background:var(--ink-3); transform:translateY(-2px); }

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

/* ---------- the link rows: the whole point of the page ---------- */
.lk{
  display:flex; align-items:center; gap:14px;
  width:100%; min-height:64px; padding:14px 16px;
  margin-bottom:10px;
  background:var(--ink-2); border:1px solid var(--rule-2); border-radius:2px;
  text-decoration:none; color:var(--bone);
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.lk:hover{ background:var(--ink-3); border-color:var(--red); transform:translateY(-2px); }
.lk__body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.lk__t{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.lk__s{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  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(--red-hi); }

/* featured row — bigger, with art */
.lk--hero{ min-height:84px; border-color:var(--red); }
.lk__art{ width:60px; height:60px; object-fit:cover; border:1px solid var(--rule-2); flex:none; }
.lk--hero .lk__t{ font-size:1.12rem; }

/* the money row */
.lk--accent{ background:var(--red); border-color:var(--red); color:#fff; }
.lk--accent .lk__s{ color:rgba(255,255,255,.82); }
.lk--accent .lk__go{ color:#fff; }
.lk--accent:hover{ background:var(--red-hi); border-color:var(--red-hi); }

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

/* ---------- touch: no sticky hover ---------- */
@media (hover:none){
  .lk:hover{ background:var(--ink-2); border-color:var(--rule-2); transform:none; }
  .lk--accent:hover{ background:var(--red); border-color:var(--red); }
  .lk--hero:hover{ border-color:var(--red); }
  .icons a:hover{ transform:none; border-color:var(--rule-2); background:var(--ink-2); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rec{ animation:none; }
}