/* Link in bio - a centred, mobile-first profile column; soft / bold / outline buttons. */
.lb { display: grid; gap: 16px; max-width: 460px; margin: 0 auto; }
.lb-head { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px 16px 18px; border-radius: calc(var(--e-radius) + 2px); background: var(--e-hero); border: 1px solid color-mix(in srgb, var(--e-accent) 12%, transparent); }
.lb-avatar { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--e-bg); border: 3px solid var(--e-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--e-accent) 55%, transparent), 0 8px 22px rgba(16, 22, 43, .14); margin-bottom: 4px; }
.lb-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; color: #fff; background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); }
html.e-custom-accent .lb-initials { background: var(--e-accent); color: var(--e-accent-ink); }
.lb-name { margin: 0; font-size: 1.32em; line-height: 1.2; font-weight: 780; letter-spacing: -.018em; color: var(--e-ink); overflow-wrap: anywhere; }
.lb-bio { margin: 0; max-width: 34ch; font-size: .94em; color: var(--e-ink-2); overflow-wrap: anywhere; }

.lb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lb-link {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px 10px 18px; text-decoration: none;
    border-radius: 16px; color: var(--e-ink); background: var(--e-surface); border: 1px solid var(--e-line);
    transition: transform .15s var(--e-ease), box-shadow .15s var(--e-ease), background-color .15s var(--e-ease), border-color .15s var(--e-ease);
}
.lb-link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 22, 43, .1); border-color: color-mix(in srgb, var(--e-accent) 40%, var(--e-line)); }
.lb-text { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: center; }
.lb-title { font-weight: 700; font-size: .98em; line-height: 1.3; overflow-wrap: anywhere; }
.lb-sub { font-size: .82em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.lb-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lb-go { flex: none; color: var(--e-ink-3); }
.lb-featured { min-height: 64px; padding-top: 18px; background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); color: var(--e-accent-ink); border-color: transparent; box-shadow: 0 8px 22px color-mix(in srgb, var(--e-accent) 28%, transparent); }
html.e-custom-accent .lb-featured { background: var(--e-accent); }
.lb-featured .lb-sub, .lb-featured .lb-go { color: inherit; opacity: .88; }
.lb-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .7em; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; background: var(--e-bg); color: var(--e-accent-fg); border: 1px solid color-mix(in srgb, var(--e-accent) 35%, var(--e-line)); white-space: nowrap; }
.lb-star { width: 12px; height: 12px; fill: currentColor; stroke-width: 1.2; }

/* bold: every link filled with the ink colour; the featured one keeps the accent */
.lb-bold .lb-link { background: var(--e-ink); color: var(--e-bg); border-color: transparent; }
.lb-bold .lb-sub, .lb-bold .lb-go { color: inherit; opacity: .8; }
.lb-bold .lb-featured { background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); color: var(--e-accent-ink); }
html.e-custom-accent .lb-bold .lb-featured { background: var(--e-accent); }

/* outline: transparent pills with a strong border */
.lb-outline .lb-link { background: transparent; border: 2px solid var(--e-ink); border-radius: 999px; }
.lb-outline .lb-link:hover { background: var(--e-ink); color: var(--e-bg); box-shadow: none; }
.lb-outline .lb-link:hover .lb-sub, .lb-outline .lb-link:hover .lb-go { color: inherit; }
.lb-outline .lb-featured, .lb-outline .lb-featured:hover { background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); color: var(--e-accent-ink); border-color: transparent; }
html.e-custom-accent .lb-outline .lb-featured { background: var(--e-accent); }

.lb-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lb-social a { display: block; text-decoration: none; color: var(--e-ink); border-radius: 50%; }
.lb-glyph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--e-surface); border: 1px solid var(--e-line-strong); transition: background-color .15s var(--e-ease), color .15s var(--e-ease); }
.lb-glyph b { font-size: .82em; font-weight: 800; letter-spacing: -.03em; }
.lb-social a:hover .lb-glyph { background: var(--e-accent); border-color: var(--e-accent); color: var(--e-accent-ink); }
.lb-empty { text-align: center; }
.lb-issues { margin: 0; padding-left: 28px; }
html[data-compact="1"] .lb { gap: 12px; }
html[data-compact="1"] .lb-head { padding: 16px 12px 14px; }