:root {
    --bg: #0b0b0c;
    --card: #131316;
    --text: #f4f4f4;
    --muted: #a9a9ac;
    --accent: #d4af37; /* subtle gold */
  }
  
  * { 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(212,175,55,.35), transparent 60%),
                radial-gradient(1000px 400px at 100% 0, rgba(212,175,55,.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(212,175,55,.4); 
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,175,55,.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;
  }