:root { color-scheme: dark; --red: #94090D; --wine: #450003; --ink: #141415; --text: #faf8f5; --muted: #bcb7bb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #45000355, transparent 55%), var(--ink); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #e2bdc0; outline-offset: 5px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bio { width: min(100% - 40px, 480px); margin: 0 auto; padding: 44px 0 26px; }
.profile { text-align: center; margin-bottom: 26px; }
.profile-logo { display: flex; width: 108px; height: 108px; align-items: center; justify-content: center; margin: 0 auto 20px; border: 1px solid #ffffff1c; border-radius: 24px; background: #171719; }
.profile-logo img { display: block; width: 88px; height: 88px; object-fit: contain; }
h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.7px; margin: 0; }
h1 span { display: block; font-size: 11px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; margin: 10px 0 0 5px; }
.experience { font-size: 12px; color: #d9c7cb; margin: 20px 0 8px; }
.location { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.bio-links { display: grid; gap: 11px; }
.link-card { display: flex; align-items: center; gap: 16px; min-height: 74px; padding: 17px 19px; background: #202022; border: 1px solid #ffffff16; border-radius: 12px; transition: background .18s, border-color .18s, transform .18s; }
.link-card > svg:first-child { color: #e2bdc0; }
.link-card span { flex: 1; min-width: 0; }
.link-card strong { display: block; font-size: 14px; line-height: 1.4; }
.link-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 3px; }
.link-card .arrow { width: 18px; height: 18px; color: #aaa5ab; }
.primary { background: var(--red); border-color: #b13237; }
.primary > svg:first-child, .primary .arrow { color: white; }
.primary small { color: #f2dadd; }
.bio-footer { margin-top: 25px; text-align: center; font-size: 11px; }
.bio-footer > a { display: inline-block; padding: 8px; color: #d9c7cb; }
.bio-footer p { margin: 13px 0 0; color: #999399; font-size: 9px; }
@media (hover: hover) { .link-card:hover { background: #2a2528; border-color: #a3707a; transform: translateY(-2px); } .primary:hover { background: #79080b; } }
@media (max-width: 360px) { .bio { width: calc(100% - 28px); padding-top: 30px; } .link-card { padding: 15px; gap: 12px; } .link-card strong { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } .link-card:hover { transform: none; } }