/* linktree.css — Standalone linktree page (own HTML, no layout.php) */

@layer reset, tokens, base, typography, layout, components, utilities;

@layer components {
  .linktree {
    max-inline-size: 24rem;
    padding-inline: 1.5rem;
    margin-inline: auto;
    margin-block-start: 2.5rem;
  }

  .linktree-avatar {
    margin-inline: auto;
    border-radius: 50%;
    overflow: hidden;
    block-size: 180px;
    inline-size: 180px;
    margin-block-end: 2rem;
  }

  .linktree-title {
    margin-block-end: 3rem;
    text-align: center;
  }

  .linktree-links {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .linktree-link {
    display: flex;
    align-items: center;
    block-size: 3rem;
    border: 1px solid var(--color-black);
    border-radius: 9999px;
    transition: var(--transition-colors);

    &:hover {
      background-color: var(--color-black);
      color: var(--color-white);
    }
  }

  .linktree-link__icon {
    flex-shrink: 0;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-inline: 2.5rem;
  }
}