/*
 * "Profile" (personal page): you at the centre. A white profile card floating on soft violet, links as
 * rounded buttons, offers as white cards with soft shadows, a violet closing panel.
 */
:root { --sx-heading-weight: 700; --sx-heading-tracking: -.025em; }

body[data-pf-site] .sx-profile-card {
    padding: clamp(32px, 4vw, 52px) clamp(22px, 4vw, 48px);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 80px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

body[data-pf-site] .sx-profile-photo { box-shadow: 0 0 0 6px #ffffff, 0 0 0 8px color-mix(in srgb, var(--primary-color) 30%, transparent); }
body[data-pf-site] .sx-profile-links a { border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--primary-color) 5%, #ffffff) !important; font-weight: 600; }
body[data-pf-site] .sx-profile-links li:first-child a { border-color: var(--primary-color) !important; background: var(--primary-color) !important; color: #ffffff !important; }
body[data-pf-site] .sx-profile-links li:first-child a * { color: #ffffff !important; }

body[data-pf-site] .sx-work { padding: 10px 10px 16px; border-radius: calc(var(--pf-radius) + 8px); background: #ffffff; box-shadow: 0 14px 40px rgba(27, 21, 48, .06); }
body[data-pf-site] .sx-work-caption { padding: 14px 8px 0 !important; }
body[data-pf-site] .sx-work-caption strong { font-size: 17px; font-weight: 700; }

body[data-pf-site] .sx-btn { border-radius: 999px !important; }
body[data-pf-site] .sx-contact .sx-wrap { border-radius: 28px !important; background: var(--primary-color) !important; }
body[data-pf-site] .sx-contact-way { border-color: rgba(255, 255, 255, .35) !important; border-radius: 16px !important; }

/* The small label on the closing panel stays readable on its colour. */
body[data-pf-site] .sx-contact .sx-kicker { color: rgba(255, 255, 255, .72) !important; }