/* Humajum Lighthouse — buttons. Every link shares one glass style; no per-brand colours. */
.rounded-avatar{border-radius:50%}

.button-entrance{width:100%;margin:0 0 10px}
.button{position:relative;display:flex!important;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0;
  padding:14px 18px;text-decoration:none;color:var(--ink)!important;text-align:left;
  background:var(--glass)!important;border:1px solid var(--rule)!important;border-radius:3px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;
  font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s}
/* LinkStack counts clicks by the clicked element's id — keep children from becoming the event target */
.button>*{pointer-events:none}
.button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--nv);transform:scaleY(0);transition:transform .2s}
.button::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(147,226,108,.12),transparent);transform:translateX(-100%)}
.button:hover,.button:focus-visible{border-color:rgba(147,226,108,.45)!important;background:rgba(10,20,14,.7)!important;outline:none}
.button:hover::before,.button:focus-visible::before{transform:scaleY(1)}
.button:hover::after,.button:focus-visible::after{animation:sweep .7s ease-out}
@keyframes sweep{to{transform:translateX(100%)}}

.button .icon,.icon{width:18px;height:18px;flex:none;margin:0!important;padding:0;object-fit:contain;
  filter:brightness(0) invert(.82);opacity:.75}
/* icons drawn as a knockout on a coloured shape keep their cut-out as a darker inner glyph */
.button-reddit .icon,.button-youtube .icon,.button-youtube-music .icon,.button-pinterest .icon,.button-snapchat .icon,.button-patreon .icon,.button-tiktok .icon{filter:grayscale(1) invert(.85)}
.button i.icon{filter:none;font-size:17px;line-height:18px;color:var(--dim)!important;text-align:center}
.button .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.button .d{flex:none;margin-left:auto;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--dim);white-space:nowrap}
.button:hover .d,.button:focus-visible .d{color:var(--nv)}
.button:hover .icon,.button:focus-visible .icon{opacity:1}

@media (max-width:400px){ .button .d{display:none} }
@media (prefers-reduced-motion:reduce){ .button::after{animation:none!important} }