:root {
    --bg: #0b0b0c;
    --card: #131316;
    --text: #f4f4f4;
    --muted: #a9a9ac;
    --accent: #746ddf; /* user's primary color */
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

.container { max-width: 880px; margin: 2rem auto; padding: 0 1rem; }

.hero {
    background: radial-gradient(1200px 500px at 20% -10%, rgba(116, 109, 223, .35), transparent 60%),
                radial-gradient(1000px 400px at 100% 0, rgba(116, 109, 223, .15), transparent 70%),
                #0b0b0c;
    border-bottom: 1px solid #222;
}
.hero-inner { display: flex; gap: 1rem; align-items: center; padding: 2.25rem 1rem; max-width: 880px; margin: 0 auto; }
.avatar { 
    width: 84px; 
    height: 84px; 
    border-radius: 999px; 
    border: 2px solid rgba(116, 109, 223, .4); 
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(116, 109, 223, .05);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
.avatar canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px;
}
.avatar svg {
    width: 100%;
    height: 100%;
    padding: 8px;
}
.title { margin: 0; font-size: 1.875rem; letter-spacing: .25px; }
.subtitle { margin: .25rem 0 0; color: var(--muted); }

.bio p { margin: 1.2rem 0 2rem; color: #dadade; }

.articles h2 { margin: 1rem 0 1rem; font-size: 1.25rem; color: var(--accent); }
.article {
    background: var(--card);
    border: 1px solid #1f1f22;
    border-radius: 14px;
    padding: 1rem;
    margin: .75rem 0;
    transition: transform .12s ease;
}
.article:hover { transform: translateY(-1px); }

.article h3 { margin: 0 0 .5rem; font-size: 1rem; }
.article-toggle {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
}
.article-toggle::after {
    content: "▾";
    font-size: .9rem;
    transform: translateY(-1px);
    opacity: .7;
}
.article[data-state="expanded"] .article-toggle::after { content: "▴"; }

.content { margin: .25rem 0 0; color: #e8e8ea; }

/* 2-line clamp until expanded */
.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.footer { border-top: 1px solid #222; margin-top: 3rem; padding: 1rem; text-align: center; color: var(--muted); }

/* helper for screen-reader-only headings */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}