@layer components {
    .profile,
    .domain {
        display: flex;
        flex-direction: column;
    }

    .profile {
        gap: 1.2rem;
    }

    .contact {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;

        font-family: var(--mono);
        font-size: var(--text-md);
    }

    .contact a {
        font-size: inherit;
        color: var(--emphasis);
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    .contact button {
        font-size: inherit;
    }

    button.copied::after {
        content: ' +';
    }

    .links {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 1rem;

        font-family: var(--mono);
    }

    .links a {
        color: var(--muted);
    }

    .section-label {
        font-family: var(--mono);
        font-size: var(--text-md);
        font-weight: 400;
        color: var(--action);

        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .domain {
        gap: 0.45rem;
    }

    .domain p {
        color: var(--dim);
    }
}