/* 1. Dark Theme & Reset */
:root { --bg: #1a1a1a; --text: #fbfaf8; --border: #333333; --max-w: 740px; --accent: rgba(0, 100, 255, 0.26); }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 2. Core Typography & Selection */
body { background: var(--bg); color: var(--text); font-family: serif; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); }
a { color: inherit; text-underline-offset: 4px; transition: 0.2s; }
a:hover { opacity: 0.7; }
p { margin-bottom: 20px; }

/* 3. Layout Components */
.page-wrapper { max-width: var(--max-w); margin: 0 auto; padding: 60px 32px; }
.header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.header-avatar { border-radius: 50%; border: 1px solid var(--border); background: var(--border); aspect-ratio: 1/1; object-fit: cover; }
.header-name { font-size: 26px; font-weight: 700; transform: translateY(6px); }

/* 4. Expandable Bio */
.read-more-trigger { background: none; border: none; font: inherit; text-decoration: underline; cursor: pointer; opacity: 0.8; color: var(--text); }
.hidden-inline { opacity: 0; display: none; transition: opacity 0.5s; }
.hidden-inline.is-visible { display: inline; opacity: 1; }
.expand-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s; }
.expand-content.is-open { max-height: 1000px; opacity: 1; margin-top: 10px; }

/* 5. Connect & Social Components */
.connect-section { margin-top: 48px; }
.section-label { font: 600 13px sans-serif; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; margin-bottom: 8px; }
.social-row { display: flex; gap: 4px; margin-left: -10px; position: relative; align-items: center; }
.social-btn, .copy-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: none; cursor: pointer; transition: 0.2s; }
.social-btn:hover, .copy-icon-btn:hover { background: var(--border); }

/* 6. Icons */
.icon { display: inline-block; width: 24px; height: 24px; background: var(--text); -webkit-mask: var(--u) center/contain no-repeat; mask: var(--u) center/contain no-repeat; }
.icon-email { --u: url('assets/email.png'); }
.icon-x { --u: url('assets/x-icon.png'); transform: scale(0.8); }
.icon-youtube { --u: url('assets/youtube.png'); }
.icon-linkedin { --u: url('assets/linkedin.png'); transform: scale(0.9); }
.icon-github { --u: url('assets/github.png'); }
.icon-chess { --u: url('assets/chess-pawn.png'); }
.icon-link { --u: url('assets/link.png'); }
.icon-copy { --u: url('assets/copy.png'); }

/* 7. Email Pill & Toast */
.email-reveal { position: absolute; left: 48px; height: 36px; width: 230px; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-8px); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.email-reveal.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1) translateX(0); }
.email-address { font-size: 15px; text-decoration: none; }
.copy-icon-btn { width: 30px; height: 30px; padding: 0; position: relative; outline: none; }
.copy-toast { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font: 600 10px sans-serif; padding: 4px 10px; border-radius: 4px; opacity: 0; transition: 0.2s; pointer-events: none; }
.copy-toast.show { opacity: 1; top: -40px; }

/* 8. Extra Links */
.bullet-list { list-style: none; margin-top: 50px; }
.bullet-list li::before { content: "•"; padding-right: 12px; opacity: 0.4; }
.bold-link { font-weight: 500; }