/* sulykhan.com — article / blog post stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { --bg:#e8e8e8; --text:#1a1a1a; --muted:#8a8a8a; --faint:#bbbbbb; --terracotta:#C0614A; --font:'Geist',-apple-system,sans-serif; }
    html { font-size:14px; -webkit-font-smoothing:antialiased; }
    body { background:var(--bg); color:var(--text); font-family:var(--font); font-weight:400; line-height:1.65; }
    a { color:inherit; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:2px; transition:text-decoration-color .15s; }
    a:hover { text-decoration-color:var(--terracotta); }
    .article-layout { display:grid; grid-template-columns:200px minmax(0,660px); min-height:100vh; max-width:860px; margin:0 auto; }
    .article-sidebar { padding:48px 24px 48px 48px; position:sticky; top:0; height:100vh; overflow-y:auto; }
    .back { display:inline-flex; align-items:center; gap:4px; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:40px; transition:color .15s; }
    .back:hover { color:var(--text); }
    .toc-label { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
    .toc { list-style:none; }
    .toc li { padding:3px 0 3px 10px; border-left:1px solid var(--faint); transition:border-color .15s; }
    .toc li.active { border-left-color:var(--text); }
    .toc a { font-size:12.5px; color:var(--muted); text-decoration:none; display:block; line-height:1.5; transition:color .15s; }
    .toc li.active a, .toc a:hover { color:var(--text); }
    .article-main { padding:48px 40px 96px; }
    .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
    .eyebrow-avatar { width:22px; height:22px; border-radius:50%; overflow:hidden; flex-shrink:0; }
    .eyebrow-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 8%; }
    .eyebrow-name { font-size:13px; color:var(--muted); text-decoration:none; }
    .eyebrow-sep { font-size:13px; color:var(--faint); }
    .eyebrow-date { font-size:13px; color:var(--muted); }
    .article-title { font-size:clamp(20px,3vw,26px); font-weight:400; line-height:1.25; margin-bottom:28px; position:relative; padding-bottom:18px; }
    .tldr { margin-bottom:36px; padding:16px 20px; border-left:2px solid var(--faint); }
    .tldr-label { display:block; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .tldr ul { list-style:none; padding:0; margin:0; }
    .tldr li { font-size:13px; line-height:1.65; color:var(--text); padding:3px 0 3px 14px; position:relative; }
    .tldr li::before { content:'—'; position:absolute; left:0; color:var(--faint); }
    .content { font-size:14px; line-height:1.75; }
    .content h1 { font-size:15px; font-weight:500; margin:44px 0 12px; padding-top:4px; }
    .content h2 { font-size:13px; font-weight:500; color:var(--muted); margin:28px 0 8px; }
    .content p { margin-bottom:16px; }
    .content p:last-child { margin-bottom:0; }
    .content ul, .content ol { padding-left:18px; margin-bottom:16px; }
    .content li { margin-bottom:6px; }
    .content hr { border:none; border-top:1px solid var(--faint); margin:36px 0; }
    .content strong { font-weight:500; }
    .content em { font-style:italic; }
    .content a { color:var(--text); }
    .source-note { margin-top:48px; padding-top:20px; border-top:1px solid var(--faint); font-size:12px; color:var(--faint); }
    .mobile-back { display:none; align-items:center; gap:4px; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:28px; }
    @media(max-width:840px) {
      .article-layout { display:block; }
      .article-sidebar { display:none; }
      .article-main { padding:36px 24px 72px; }
      .mobile-back { display:flex; }
    }

    /* ── BRUSH STROKE ── */
    @keyframes brush-sweep {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 -2% 0 0); }
    }