/* ============================================================
     blog.css — shared stylesheet for all unhardcoded blog pages.
     Built ONLY on the design tokens defined in /site.css
     (dark, cyan, IBM Plex). Load AFTER site.css.
     Two surfaces:
       1. The article reading layout (/blog/<slug>)
       2. The blog index (/blog)
     ============================================================ */

  /* ============================ READING SHELL ============================ */
  /* The article is a centered ~720px reading column with breathing room
     below the sticky 66px nav. */
  .article {
    width: 100%;
    max-width: 744px;
    margin: 0 auto;
    padding: 56px 36px 0;
  }
  @media (max-width: 600px) { .article { padding: 36px 20px 0; } }

  /* Desktop (≥1024px): two columns — a wide content column plus a sticky TOC
     rail that puts the horizontal space to work. The title spans the full
     width; the TOC pins beside the body and releases at the end of the prose.
     Below 1024px this all collapses back to one column with the inline TOC. */
  @media (min-width: 1024px) {
    .article {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      column-gap: 60px;
      max-width: 1080px;
      padding-top: 64px;
      align-items: start;
    }
    .article-head { grid-column: 1 / -1; }
    .article-body,
    .article-faq,
    .related,
    .article-cta,
    .article-foot { grid-column: 1; min-width: 0; }
    .toc {
      grid-column: 2;
      grid-row: 2 / span 50;
      position: sticky;
      top: 96px;
      align-self: start;
      margin: 0;
      max-height: calc(100vh - 132px);
      overflow-y: auto;
    }
  }

  /* ---- Article header block ---- */
  .article-head { margin-bottom: 30px; }

  /* mono violet kicker — post type / topic, matches the site .eyebrow register */
  .article-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--violet-2);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .article-eyebrow::before {
    content: "";
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--violet);
    box-shadow: 0 0 9px 1px var(--violet-glow);
    flex-shrink: 0;
  }

  .article-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 18px 0 0;
    text-wrap: balance;
  }
  .article-title .accent { color: var(--violet-2); }

  /* byline + date + reading time */
  .article-meta {
    margin-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 13.5px;
    color: var(--ink-dim);
    line-height: 1.5;
  }
  .article-meta time,
  .article-meta > span { display: inline-flex; align-items: center; }
  .article-meta a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); transition: color 0.2s, border-color 0.2s; }
  .article-meta a:hover { color: var(--violet-2); border-color: rgba(8,183,247,0.5); }

  .byline { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-dim); }
  /* small round avatar dot */
  .byline-av {
    width: 24px; height: 24px; border-radius: 50%;
    flex-shrink: 0;
    background:
      radial-gradient(circle at 32% 30%, var(--violet-2), var(--violet-deep) 78%);
    border: 1px solid rgba(8,183,247,0.5);
    box-shadow: 0 0 0 1px rgba(8,183,247,0.18) inset, 0 0 14px -4px var(--violet-glow);
  }

  /* ============================ TABLE OF CONTENTS ============================ */
  .toc {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    padding: 18px 22px;
    margin: 0 0 40px;
    box-shadow: var(--shadow-card);
  }
  .toc-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-weight: 500;
    margin: 0 0 12px;
    text-transform: none;
  }
  .toc ol, .toc ul { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
  .toc li { margin: 0; }
  .toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 7px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.45;
    transition: color 0.18s var(--ease), background 0.18s var(--ease);
  }
  .toc a::before {
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .toc a:hover { color: var(--violet-2); background: var(--violet-soft); }
  .toc a:hover::before { color: var(--violet-2); }
  /* active section (set by scroll-spy) — violet text + a left marker */
  .toc a.active { color: var(--violet-2); background: var(--violet-soft); }
  .toc a.active::before { color: var(--violet-2); }
  .toc a.active::after {
    content: "";
    position: absolute; left: -8px; top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px;
    background: var(--violet-2);
    box-shadow: 0 0 8px -1px var(--violet-glow);
  }
  .toc a { position: relative; }

  /* ============================ ARTICLE BODY TYPOGRAPHY ============================ */
  /* One unified reading column (~672px ≈ 72ch at 18px): prose, headings, and
     code all share the same left and right edges so the article reads as a
     single deliberate measure, not a narrow block floating in a wider shell. */
  .article-body {
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.75;
  }
  .article-body > * + * { margin-top: 27px; }

  .article-body p { margin: 0; }
  .article-body strong, .article-body b { color: var(--ink); font-weight: 600; }
  .article-body em { font-style: italic; }

  /* lead paragraph — the answer-first opening reads slightly larger */
  .article-body > p:first-of-type { font-size: 19.5px; color: var(--ink); line-height: 1.62; }

  /* H2 sections — scroll-margin clears the 66px sticky nav on anchor jumps */
  .article-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.12;
    color: var(--ink);
    scroll-margin-top: 84px;
    margin-top: 64px;
  }
  .article-h2 .accent { color: var(--violet-2); }

  .article-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
    scroll-margin-top: 84px;
    margin-top: 44px;
  }

  /* prose links — violet, underline appears on hover */
  .article-body a {
    color: var(--violet-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(8,183,247,0.32);
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .article-body a:hover { color: var(--violet); border-bottom-color: var(--violet-2); }

  /* lists */
  .article-body ul, .article-body ol { margin: 0; padding: 0 0 0 4px; display: grid; gap: 13px; }
  .article-body ul li, .article-body ol li {
    position: relative;
    padding-left: 28px;
    color: var(--ink-soft);
    line-height: 1.68;
  }
  .article-body ul li::before {
    content: "";
    position: absolute; left: 6px; top: 0.62em;
    width: 7px; height: 7px; border-radius: 2px;
    background: var(--violet);
    box-shadow: 0 0 8px -1px var(--violet-glow);
  }
  .article-body ol { counter-reset: olc; }
  .article-body ol li { counter-increment: olc; }
  .article-body ol li::before {
    content: counter(olc);
    position: absolute; left: 0; top: 0.05em;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    color: var(--violet-2);
    width: 20px; text-align: right;
  }
  .article-body li > ul, .article-body li > ol { margin-top: 11px; }
  .article-body li strong { color: var(--ink); }

  /* callout blockquote — left violet border, panel bg */
  .article-body blockquote.callout,
  .article-body .callout {
    margin: 0;
    border: 1px solid var(--line);
    border-left: 3px solid var(--violet);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(180deg, var(--violet-soft), rgba(8,183,247,0.03));
    padding: 20px 24px;
    color: var(--ink-soft);
    font-size: 16.5px;
    line-height: 1.7;
  }
  .article-body blockquote.callout > * + *,
  .article-body .callout > * + * { margin-top: 12px; }
  .article-body blockquote.callout p,
  .article-body .callout p { margin: 0; }
  .article-body blockquote.callout strong,
  .article-body .callout strong { color: var(--ink); }
  .article-body blockquote.callout code,
  .article-body .callout code { background: rgba(8,183,247,0.16); }

  /* inline code */
  .article-body :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--violet-2);
    background: var(--violet-soft);
    border: 1px solid rgba(8,183,247,0.18);
    padding: 1px 6px;
    border-radius: 5px;
    overflow-wrap: anywhere;
  }

  /* code blocks — mono, --bg-2, bordered, horizontally scrollable */
  .article-code,
  .article-body pre {
    margin: 0;
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 18px 20px;
    overflow-x: auto;
    box-shadow: var(--shadow-card);
    -webkit-overflow-scrolling: touch;
  }
  .article-code code,
  .article-body pre code {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.78;
    color: var(--ink-soft);
    background: none;
    border: 0;
    padding: 0;
    white-space: pre;
    overflow-wrap: normal;
  }
  /* optional syntax-token classes for hand-marked code (mirrors the site .code palette) */
  .article-body pre .kw, .article-code .kw { color: #C792F0; }
  .article-body pre .fn, .article-code .fn { color: #79C0FF; }
  .article-body pre .str, .article-code .str { color: var(--green); }
  .article-body pre .num, .article-code .num { color: var(--amber); }
  .article-body pre .cm, .article-code .cm { color: var(--ink-faint); }
  .article-body pre .op, .article-code .op { color: var(--violet-2); }
  .article-body pre .pn, .article-code .pn { color: var(--ink-dim); }
  .article-body pre .old, .article-code .old { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(225,106,106,0.5); }

  /* figures / images inside prose */
  .article-body img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    width: 100%;
    height: auto;
  }
  .article-body figure { margin: 0; }
  .article-body figcaption {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-faint);
    text-align: center;
  }

  /* horizontal rule between movements */
  .article-body hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 56px 0;
  }

  /* tables in prose */
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .article-body table th, .article-body table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
  }
  .article-body table thead th {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
    color: var(--ink-dim); font-weight: 500; background: rgba(255,255,255,0.014);
  }
  .article-body table tbody td { color: var(--ink-soft); }
  .article-body table tr:last-child td { border-bottom: 0; }

  /* keep wide prose blocks from forcing the page to scroll sideways on mobile */
  .article-body { overflow-wrap: break-word; }
  .article-wrap-scroll { overflow-x: auto; }

  /* ============================ ARTICLE FAQ ============================ */
  /* Reuses the site .faq look but scoped/sized for the reading column. */
  .article-faq { margin-top: 56px; }
  .article-faq .faq { max-width: 100%; }
  .article-faq h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.12;
    color: var(--ink);
    scroll-margin-top: 84px;
    margin: 0 0 24px;
  }
  .article-faq .faq summary { font-size: 15px; padding: 18px 20px; }
  .article-faq .faq .ans { padding: 0 20px 18px; }
  .article-faq .faq .ans a {
    color: var(--violet-2);
    border-bottom: 1px solid rgba(8,183,247,0.32);
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .article-faq .faq .ans a:hover { color: var(--violet); border-bottom-color: var(--violet-2); }

  /* ============================ RELATED / KEEP READING ============================ */
  .related { margin-top: 56px; }
  .related-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    font-weight: 500;
    margin: 0 0 18px;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    padding: 18px 20px;
    transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
  }
  .related-card:hover { border-color: rgba(8,183,247,0.4); transform: translateY(-3px); }
  .related-card .rc-type {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--violet-2);
  }
  .related-card h3 {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.28;
    color: var(--ink);
  }
  .related-card .rc-arrow {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, gap 0.2s var(--ease);
  }
  .related-card:hover .rc-arrow { color: var(--violet-2); gap: 9px; }
  @media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

  /* ============================ ARTICLE CTA ============================ */
  /* gradient request-access card that closes every post */
  .article-cta {
    margin: 64px 0 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(ellipse 80% 140% at 50% -10%, rgba(8,183,247,0.16), transparent 55%),
      linear-gradient(180deg, var(--panel-2), var(--panel));
    padding: 44px 34px;
    box-shadow: var(--shadow-float);
  }
  .article-cta::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(8,183,247,0.12), transparent 60%);
  }
  .article-cta-inner { position: relative; z-index: 1; }
  .article-cta .eyebrow,
  .article-cta .cta-eyebrow {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--violet-2);
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: center;
  }
  .article-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--ink);
    margin: 14px 0 0;
  }
  .article-cta h2 .accent, .article-cta h2 .glow { color: var(--violet-2); }
  .article-cta p {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.56;
    max-width: 50ch;
    margin: 14px auto 0;
  }
  .article-cta .article-cta-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ---- article footer spacing before the global footer ---- */
  .article-foot { height: 80px; }

  /* ============================ BLOG INDEX: HERO ============================ */
  .blog-hero {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 64px 32px 30px;
    text-align: center;
    position: relative;
  }
  @media (max-width: 600px) { .blog-hero { padding: 44px 18px 24px; } }
  .blog-hero .article-eyebrow,
  .blog-hero .eyebrow { justify-content: center; }
  .blog-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    margin: 18px auto 0;
    max-width: 18ch;
    text-wrap: balance;
  }
  .blog-hero h1 .accent { color: var(--violet-2); }
  .blog-hero p {
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.58;
    max-width: 56ch;
    margin: 20px auto 0;
  }
  .blog-hero-note {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-faint);
    max-width: 52ch;
    margin: 16px auto 0;
    line-height: 1.5;
  }

  /* ============================ BLOG INDEX: POST GRID ============================ */
  .post-grid {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 30px 32px 96px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  @media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
  @media (max-width: 600px) { .post-grid { padding: 24px 18px 72px; } }

  /* reading-path group headings inside the post grid (Start here / Go deeper / Compare) */
  .post-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
  .post-group:first-child { border-top: 0; padding-top: 0; }
  .post-group h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
  .post-group span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }

  .post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    padding: 28px 26px;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    min-width: 0;
  }
  .post-card:hover {
    border-color: rgba(8,183,247,0.4);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
  }
  /* a featured pillar card spanning both columns */
  .post-card.featured { grid-column: 1 / -1; background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(8,183,247,0.1), transparent 58%), linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: rgba(8,183,247,0.28); }
  @media (max-width: 760px) { .post-card.featured { grid-column: auto; } }

  .post-card-type {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--violet-2);
    border: 1px solid rgba(8,183,247,0.32);
    background: rgba(8,183,247,0.08);
    border-radius: 100px;
    padding: 4px 11px;
  }
  .post-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.16;
    color: var(--ink);
    margin-top: 16px;
  }
  .post-card.featured h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
  .post-card a.post-card-link { color: inherit; }
  .post-card a.post-card-link:hover { color: var(--ink); }
  .post-card-desc {
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1.56;
    margin-top: 11px;
    max-width: 60ch;
  }
  .post-card-meta {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-faint);
  }
  .post-card-meta .sep { color: var(--line-strong); }
  .post-card-meta .arrow {
    margin-left: auto;
    color: var(--ink-dim);
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.2s, gap 0.2s var(--ease);
  }
  .post-card:hover .post-card-meta .arrow { color: var(--violet-2); gap: 9px; }

  /* make the whole card clickable while keeping a real anchor for the title */
  .post-card-link::after {
    content: "";
    position: absolute; inset: 0;
  }
  .post-card { position: relative; }

  /* ============================ MOTION GUARDS ============================ */
  @media (prefers-reduced-motion: reduce) {
    .related-card, .post-card,
    .related-card .rc-arrow, .post-card-meta .arrow {
      transition: none !important;
    }
    .related-card:hover, .post-card:hover { transform: none; }
  }