/* ============================================================================
   CellCog Blog — "The Ledger" design system
   A reference library, not a magazine: one measure, hairline structure,
   mono metadata, numbered spine.

   Layers
     01 tokens          06 answer blocks      11 index ledger
     02 reset/base      07 figures            12 cluster hubs
     03 layout          08 tables (3 tiers)   13 pagination
     04 post header     09 CTA                14 utility / a11y / print
     05 prose           10 related + TOC
   Tokens are inherited from the marketing design system (.aie-landing) and
   re-declared here at higher specificity so the blog renders correctly even
   if the site bundle is absent.
   ========================================================================== */

/* -- 01 tokens ------------------------------------------------------------ */
.aie-landing.blog-root {
  --aie-ink: #1d1d1f;
  --aie-muted: #6e6e73;
  --aie-faint: #8e8e93;
  --aie-hair: #ececec;
  --aie-hair-strong: #dcdcde;
  --aie-bg: #fff;
  --aie-surface: #f7f7f8;
  --aie-elevated: #fff;
  --aie-accent: #2e7e7e;
  --aie-accent-soft: #2e7e7e14;
  --aie-accent-glow: #2e7e7e29;
  --aie-amber: #c98a2b;
  --aie-amber-soft: #c98a2b1f;
  --aie-green: #2e7d5b;
  --aie-cta-bg: #1d1d1f;
  --aie-cta-ink: #fff;
  --aie-cta-bg-hover: #000;

  /* blog-specific */
  --measure: 780px;          /* reading column — widened from 700px (owner
                                 feedback 2026-07-30: 700px read as cramped at
                                 desktop widths once the whole article shares
                                 one column; ~80ch at 19px is the upper bound
                                 of comfortable, and the composition breathes) */
  --wide: 1040px;            /* cap for bleed elements (figures, wide tables) */
  --rail: 232px;             /* TOC gutter */
  --plate: #fbfbfa;          /* figure plate — MUST match generated image bg */
  --step: 8px;               /* vertical rhythm unit */
  --radius: 10px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background: var(--aie-bg);
  color: var(--aie-ink);
}

html[data-theme="dark"] .aie-landing.blog-root,
html.dark .aie-landing.blog-root,
.aie-landing.blog-root.dark {
  --aie-ink: #f2f2f7;
  --aie-muted: #a1a1a6;
  --aie-faint: #8e8e93;
  --aie-hair: #2a2a2c;
  --aie-hair-strong: #333335;
  --aie-bg: #161618;
  --aie-surface: #1f1f21;
  --aie-elevated: #1f1f21;
  --aie-accent: #7dc3c3;
  --aie-accent-soft: #7dc3c317;
  --aie-accent-glow: #7dc3c333;
  --aie-amber: #e0a850;
  --aie-amber-soft: #e0a85024;
  --aie-green: #5cc99a;
  --aie-cta-bg: #fff;
  --aie-cta-ink: #161618;
  --aie-cta-bg-hover: #f2f2f7;
}

/* -- 02 reset / base ----------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { background: #fff; }
html[data-theme="dark"] body, html.dark body { background: #161618; }

.blog-root {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.68;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.blog-root *, .blog-root *::before, .blog-root *::after { box-sizing: border-box; }
.blog-root img { max-width: 100%; height: auto; }
.blog-root a { color: inherit; }
.blog-root ::selection { background: var(--aie-accent-glow); }

/* mono metadata register — used for every date, count, label, eyebrow */
.m {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--aie-muted);
}
.m--ink { color: var(--aie-ink); }
.m--accent { color: var(--aie-accent); }

/* -- 03 layout ----------------------------------------------------------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.wrap--narrow { max-width: 1080px; }

.post-shell { position: relative; padding-bottom: 24px; }
/* Layout revision 2 (owner decision, 2026-07-30): ONE truly centered reading
   column for the whole article. Title, byline, body, FAQ, related and footer
   meta all share the same centered ~700px column (see .post-head and
   .wrap--post rules), so every element sits on one pair of edges regardless
   of viewport width or whether the post has a contents list. The side rails
   are SYMMETRIC — that is what keeps the column dead-center with or without
   a TOC — and the contents list occupies the RIGHT rail. */
.prose {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [content-start] minmax(0, var(--measure)) [content-end]
    minmax(0, 1fr) [full-end];
}
.prose > * { grid-column: content; min-width: 0; }
.prose > .bleed { grid-column: full; width: 100%; max-width: var(--wide); margin-inline: auto; }

@media (min-width: 1240px) {
  .post-shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
    align-items: start;
  }
  .post-shell::before { content: ""; grid-column: 1; grid-row: 1; }
  .post-shell > .prose { grid-column: 2; grid-row: 1; }
  .post-shell > .post-toc { grid-column: 3; grid-row: 1; }
}

/* -- 04 post header ----------------------------------------------------- */
.masthead { border-bottom: 1px solid var(--aie-hair); padding: 34px 0 0; }
.crumbrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 26px;
}
.crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.crumbs a { color: var(--aie-muted); text-decoration: none; }
.crumbs a:hover { color: var(--aie-accent); }
.crumbs span[aria-current] { color: var(--aie-ink); }
.crumbs .sep { color: var(--aie-hair-strong); }
.crumbs .trunc {
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.themebtn {
  display: none; align-items: center; gap: 7px; background: none; cursor: pointer;
  border: 1px solid var(--aie-hair-strong); border-radius: 999px;
  padding: 5px 12px; color: var(--aie-muted); flex: none;
}
.themebtn.on { display: inline-flex; }
.themebtn:hover { color: var(--aie-ink); border-color: var(--aie-muted); }

.post-head { max-width: var(--measure); margin-inline: auto; padding: 8px 0 40px; }
/* Post pages: ONE alignment law (same as the index page) — the breadcrumb row,
   title, byline, body, FAQ, related and footer meta ALL share the centered
   reading column's edges. The index page earns its coherence by putting the
   breadcrumb and H1 on the same container edge; the article page follows the
   identical rule, just with the measure column as its container. */
.wrap--post .crumbrow, .wrap--post .related, .wrap--post .footmeta {
  max-width: var(--measure); margin-inline: auto;
}
.tagrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.ctag {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 1px solid var(--aie-hair-strong); border-radius: 999px; padding: 5px 13px 5px 10px;
}
.ctag:hover { border-color: var(--aie-accent); color: var(--aie-accent); }
.ctag .n { color: var(--aie-accent); }

h1.title {
  font-family: var(--display);
  font-size: clamp(33px, 4.6vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0;
  color: var(--aie-ink);
  text-wrap: balance;
}
.byline {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--aie-hair);
}
.byline .who { color: var(--aie-ink); }
.byline .dot { color: var(--aie-hair-strong); }
.byline .upd { color: var(--aie-accent); }

/* journey / path component */
.path {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding: 11px 15px;
  border: 1px solid var(--aie-hair); border-left: 2px solid var(--aie-accent);
  border-radius: 3px; background: var(--aie-accent-soft);
}
.path .pips { display: inline-flex; gap: 5px; }
.path .pip { width: 16px; height: 3px; border-radius: 2px; background: var(--aie-hair-strong); }
.path .pip.on { background: var(--aie-accent); }
.path .lbl { font-size: 14px; color: var(--aie-muted); letter-spacing: -0.002em; }
.path .lbl b { color: var(--aie-ink); font-weight: 600; }

/* -- 05 prose ----------------------------------------------------------- */
.prose { padding-top: 6px; }
.prose p { margin: 0 0 26px; }
.prose > h2 {
  position: relative;
  font-family: var(--display);
  font-size: clamp(25px, 2.6vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.024em;
  font-weight: 650;
  color: var(--aie-ink);
  margin: 64px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--aie-hair);
  scroll-margin-top: 88px;
  text-wrap: balance;
}
.prose > h2 .spine {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.11em;
  color: var(--aie-faint);
  display: block; margin-bottom: 12px;
}
/* Spine numbers stay inline above headings at every width — the left gutter
   they used to hang in no longer exists (layout revision 2026-07-30). */
.prose > h3 {
  font-family: var(--sans);
  font-size: 20.5px; line-height: 1.35; letter-spacing: -0.014em; font-weight: 600;
  color: var(--aie-ink); margin: 40px 0 14px; scroll-margin-top: 88px;
}
.prose > h4 {
  font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--aie-muted); font-weight: 600; margin: 32px 0 10px;
}
.prose ul, .prose ol { margin: 0 0 26px; padding-left: 26px; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--aie-faint); }
.prose ol li::marker { font-family: var(--mono); font-size: 0.85em; }
.prose strong { font-weight: 600; color: var(--aie-ink); }
.prose em { font-style: italic; }
.prose a:not(.cta):not(.rel) {
  color: var(--aie-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--aie-accent);
  padding-bottom: 1px;
  transition: background .12s ease;
}
.prose a:not(.cta):not(.rel):hover { background: var(--aie-accent-soft); color: var(--aie-accent); }
.prose blockquote {
  margin: 34px 0; padding: 2px 0 2px 24px;
  border-left: 2px solid var(--aie-hair-strong);
  color: var(--aie-muted); font-size: 20px; line-height: 1.6;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--mono); font-size: 0.855em;
  background: var(--aie-surface); border: 1px solid var(--aie-hair);
  border-radius: 4px; padding: 1px 5px;
}
.prose hr { border: 0; border-top: 1px solid var(--aie-hair); margin: 48px 0; }

/* note callout — the only "boxed" prose element */
.note {
  margin: 34px 0; padding: 18px 20px;
  border: 1px solid var(--aie-hair); border-radius: var(--radius);
  background: var(--aie-surface);
}
.note > .m { display: block; margin-bottom: 8px; }
.note p:last-child { margin-bottom: 0; }
.note p { font-size: 17.5px; line-height: 1.62; }

/* -- 06 answer blocks --------------------------------------------------- */
/* One grammar, four structures. No fills, no shadows: hairline + register. */
.ab { margin: 0 0 40px; }
.ab__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid var(--aie-ink);
}
.ab__note { font-size: 12px; color: var(--aie-faint); font-family: var(--mono); }

/* lede — the featured-snippet anchor */
.lede { margin: 0 0 40px; }
.lede p {
  font-size: clamp(20px, 2.2vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--aie-ink);
  margin: 0 0 20px;
}
.lede p:first-child::first-letter { /* subtle, not a drop cap */ font-weight: 600; }
.lede p:last-child { margin-bottom: 0; }
.lede + .ab { margin-top: 4px; }

/* key points — numbered ledger */
.ab--key ol { list-style: none; margin: 0; padding: 0; counter-reset: k; }
/* NOTE: absolute-positioned counter, NOT a grid. Markdown bullets begin with a
   bare text node followed by <strong>, which CSS Grid wraps into separate
   anonymous grid items — that collides the content. Hanging indent is immune. */
.ab--key li {
  position: relative; padding: 12px 0 12px 46px; margin: 0;
  border-bottom: 1px solid var(--aie-hair);
  font-size: 17.5px; line-height: 1.56;
}
.ab--key li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab--key li::before {
  counter-increment: k; content: counter(k, decimal-leading-zero);
  position: absolute; left: 0; top: 17px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--aie-accent);
}

/* at a glance — 2-col definition table */
.ab--glance dl { margin: 0; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
.ab--glance dt, .ab--glance dd {
  margin: 0; padding: 13px 0; border-top: 1px solid var(--aie-hair);
  font-size: 16.5px; line-height: 1.55;
}
.ab--glance dt { font-weight: 600; color: var(--aie-ink); padding-right: 22px; }
.ab--glance dd { color: var(--aie-muted); }
.ab--glance dt:first-of-type, .ab--glance dt:first-of-type + dd { border-top: 0; }
@media (max-width: 640px) {
  .ab--glance dl { grid-template-columns: minmax(0, 1fr); }
  .ab--glance dt { padding-bottom: 2px; }
  .ab--glance dd { border-top: 0; padding-top: 0; padding-bottom: 15px; }
}

/* FAQ — always open in the DOM (schema parity, zero JS) */
.ab--faq { margin-top: 56px; }
.faq-q {
  font-family: var(--sans); font-size: 19px; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.011em; color: var(--aie-ink);
  margin: 0 0 8px; padding-top: 22px; border-top: 1px solid var(--aie-hair);
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
}
.faq-q .q { font-family: var(--mono); font-size: 11.5px; color: var(--aie-accent); padding-top: 5px; }
.faq-a { margin: 0 0 26px; padding-left: 36px; font-size: 17.5px; line-height: 1.62; color: var(--aie-muted); }
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .faq-a { padding-left: 0; } }

/* -- 07 figures --------------------------------------------------------- */
.fig { margin: 40px 0; }
.fig__plate {
  background: var(--plate);
  border: 1px solid var(--aie-hair-strong);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.fig__plate img { width: 100%; display: block; }
/* Dark mode: dim the whole plate (image + surround together) so a light
   diagram never glares and never shows a seam. One asset serves both themes. */
html[data-theme="dark"] .fig__plate,
html.dark .fig__plate,
.blog-root.dark .fig__plate { filter: brightness(0.88) saturate(0.94); }

.fig figcaption {
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 11px; font-size: 14.5px; line-height: 1.5; color: var(--aie-muted);
  letter-spacing: -0.002em;
}
.fig figcaption .lab {
  flex: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--aie-accent); padding-top: 3px;
}
.hero-fig { margin: 0 0 44px; max-width: var(--wide); margin-inline: auto; }
.hero-fig .fig__plate { border-radius: 12px; }

/* typographic fallback plate — used when a post has no hero image yet */
.plate--fb {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 40 / 21; background: var(--aie-surface);
  border: 1px solid var(--aie-hair-strong); border-radius: 12px; overflow: hidden;
}
.plate--fb::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--aie-hair) 1px, transparent 1px),
                    linear-gradient(90deg, var(--aie-hair) 1px, transparent 1px);
  background-size: 34px 34px; opacity: .55;
}
.plate--fb .glyph {
  position: relative; font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 7vw, 76px); letter-spacing: -0.04em; color: var(--aie-hair-strong);
}
.plate--fb .cl { position: relative; margin-top: 6px; }
.plate--fb.sm { aspect-ratio: 16 / 10; border-radius: 8px; }
.plate--fb.sm .glyph { font-size: 26px; }

/* -- 08 tables (three tiers) -------------------------------------------- */
.fig--table { margin: 40px 0; scroll-margin-top: 96px; container-type: inline-size; }
.t-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-root table {
  width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.blog-root thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--aie-muted); text-align: left;
  vertical-align: bottom; padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--aie-ink); white-space: nowrap;
}
.blog-root tbody td, .blog-root tbody th {
  text-align: left; vertical-align: top; padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--aie-hair); color: var(--aie-muted);
  font-weight: 400;
}
.blog-root tbody tr:last-child td, .blog-root tbody tr:last-child th { border-bottom: 0; }
.blog-root tbody td:first-child, .blog-root tbody th:first-child {
  color: var(--aie-ink); font-weight: 600;
}
.blog-root tbody tr:hover td, .blog-root tbody tr:hover th { background: var(--aie-accent-soft); }
.blog-root td:last-child, .blog-root th:last-child { padding-right: 0; }

/* tier B: 4-5 columns — tighter type */
.t--b table { font-size: 15.5px; }
/* tier C: 6-8 columns — dense type, sticky row header, scroll affordance */
/* min-width is pinned to the bleed width (--wide, 1040px) on purpose: the table
   then scrolls at EXACTLY the widths where the container is narrower than the
   bleed — i.e. below 1104px — which is the same threshold that reveals the
   scroll hint. Any other value makes the hint lie in one direction or the
   other (it did at 660px: the columns just compressed, with nothing to scroll). */
.t--c table { font-size: 14.5px; min-width: var(--wide); }
.t--c thead th, .t--c tbody td, .t--c tbody th { padding-right: 12px; }
.t--c tbody td:first-child, .t--c tbody th:first-child,
.t--c thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--aie-bg);
  box-shadow: 1px 0 0 var(--aie-hair);
  padding-right: 14px;
}
.t--c tbody tr:hover td:first-child, .t--c tbody tr:hover th:first-child {
  background: var(--aie-bg);
}
.t-hint {
  display: none; align-items: center; gap: 7px; margin-top: 9px; color: var(--aie-faint);
}
/* The hint must track the CONTAINER, not the viewport: from 1240px up the
   contents rail narrows the bleed column below --wide, so a viewport media
   query would hide the hint on a table that genuinely scrolls. A container
   query asks the only question that matters — is the table wider than the
   space it has? Default is shown; browsers without container queries simply
   keep the hint on Tier C, which is the safe direction to fail. */
.t--c .t-hint { display: flex; }
@container (min-width: 1040px) { .t--c .t-hint { display: none; } }

/* tier C on phones: transpose rows into cards, CSS-only, one DOM.
   ARIA roles are authored in the HTML so semantics survive display:block. */
@media (max-width: 759px) {
  .t--stack .t-scroll { overflow: visible; }
  .t--stack table { display: block; min-width: 0; font-size: 16px; }
  .t--stack thead { display: none; }
  .t--stack tbody { display: block; }
  .t--stack tr {
    display: block; border: 1px solid var(--aie-hair-strong);
    border-radius: var(--radius); padding: 4px 15px 8px; margin-bottom: 14px;
    background: var(--aie-bg);
  }
  .t--stack tr:hover td, .t--stack tr:hover th { background: none; }
  .t--stack td, .t--stack th {
    display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 14px;
    padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--aie-hair);
    font-size: 16px;
  }
  .t--stack td::before, .t--stack th:not(:first-child)::before {
    content: attr(data-col);
    font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--aie-faint); padding-top: 4px;
  }
  .t--stack tbody td:first-child, .t--stack tbody th:first-child {
    display: block; position: static; box-shadow: none; border-top: 0;
    font-family: var(--display); font-size: 18px; font-weight: 650;
    letter-spacing: -0.018em; padding: 12px 0 10px;
  }
  .t--stack tbody td:first-child::before, .t--stack tbody th:first-child::before { content: none; }
  .t--stack .t-hint { display: none; }
}

/* -- 09 CTA ------------------------------------------------------------- */
.next {
  margin: 60px 0 0; padding: 30px 30px 32px;
  border: 1px solid var(--aie-hair-strong); border-radius: 14px;
  background: var(--aie-surface);
}
.next h2 {
  font-family: var(--display); font-size: 26px; line-height: 1.2; letter-spacing: -0.026em;
  font-weight: 700; margin: 12px 0 10px; color: var(--aie-ink); border: 0; padding: 0;
}
.next p { font-size: 17.5px; line-height: 1.6; color: var(--aie-muted); margin: 0 0 22px; max-width: 56ch; }
a.cta {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--aie-cta-bg); color: var(--aie-cta-ink);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.006em;
  padding: 12px 20px; border-radius: 999px; transition: background .14s ease, transform .14s ease;
}
a.cta:hover { background: var(--aie-cta-bg-hover); transform: translateY(-1px); }
a.cta .arw { transition: transform .14s ease; }
a.cta:hover .arw { transform: translateX(3px); }

/* -- 10 related + TOC --------------------------------------------------- */

.related h2 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--aie-muted); font-weight: 500; margin: 0 0 6px;
}
.rel {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 18px;
  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--aie-hair);
  text-decoration: none;
}
.rel:hover .rel__t { color: var(--aie-accent); }
.rel__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.rel__k.next { color: var(--aie-accent); }
.rel__k.also { color: var(--aie-faint); }
.rel__t {
  font-family: var(--display); font-size: 19.5px; line-height: 1.32; letter-spacing: -0.02em;
  font-weight: 600; color: var(--aie-ink);
}
.rel__x { font-size: 15px; color: var(--aie-muted); margin-top: 5px; letter-spacing: -0.002em; }
.rel__m { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; color: var(--aie-faint); white-space: nowrap; }
@media (max-width: 700px) {
  .rel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rel__m { display: none; }
}

.post-toc { display: none; }
@media (min-width: 1240px) {
  .post-toc {
    display: block; position: sticky; top: 88px; align-self: start;
    padding-left: 28px; max-height: calc(100vh - 140px); overflow-y: auto;
  }
  .post-toc h2 {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--aie-faint); font-weight: 500; margin: 0 0 12px;
  }
  .post-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
  .post-toc li { margin: 0; }
  .post-toc a {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px;
    text-decoration: none; padding: 6px 0; font-size: 14px; line-height: 1.4;
    color: var(--aie-muted); letter-spacing: -0.004em;
    border-left: 1px solid transparent; padding-left: 12px; margin-left: -13px;
  }
  .post-toc a::before {
    counter-increment: t; content: counter(t, decimal-leading-zero);
    font-family: var(--mono); font-size: 10px; color: var(--aie-faint); padding-top: 3px;
  }
  .post-toc a:hover { color: var(--aie-ink); }
  .post-toc a[aria-current="true"] {
    color: var(--aie-ink); border-left-color: var(--aie-accent);
  }
  .post-toc a[aria-current="true"]::before { color: var(--aie-accent); }
  .toc-inline { display: none; }
}
.toc-inline {
  margin: 0 0 40px; border: 1px solid var(--aie-hair); border-radius: var(--radius);
  background: var(--aie-surface);
}
.toc-inline > summary {
  cursor: pointer; padding: 13px 16px; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.toc-inline > summary::-webkit-details-marker { display: none; }
.toc-inline ol { margin: 0; padding: 2px 16px 14px 34px; }
.toc-inline li { margin-bottom: 8px; font-size: 16px; }
.toc-inline a { color: var(--aie-muted); text-decoration: none; }
.toc-inline a:hover { color: var(--aie-accent); }

/* section tabs — the top-of-list navigation (real links, one URL per section) */
.tabs {
  display: flex; gap: 4px 26px; flex-wrap: wrap; align-items: baseline;
  border-bottom: 1px solid var(--aie-hair); margin: 0 0 2px;
}
.tabs .tab {
  display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none;
  padding: 0 0 13px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.008em; color: var(--aie-muted);
}
.tabs .tab:hover { color: var(--aie-ink); }
.tabs .tab__n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--aie-faint); font-variant-numeric: tabular-nums;
}
.tabs .tab[aria-current="page"] { color: var(--aie-ink); border-bottom-color: var(--aie-ink); font-weight: 600; }
.tabs .tab[aria-current="page"] .tab__n { color: var(--aie-accent); }
.ledger .tabs + .ledger__head { border-top: 0; margin-top: 26px; }
.row__c b { display: block; font-weight: 400; color: var(--aie-faint); margin-top: 3px; }

/* -- 11 index ledger ---------------------------------------------------- */
.ix-head { border-bottom: 1px solid var(--aie-hair); padding: 46px 0 40px; }
.ix-head .kicker { display: block; margin-bottom: 18px; }
.ix-head h1 {
  font-family: var(--display); font-size: clamp(34px, 5vw, 56px); line-height: 1.04;
  letter-spacing: -0.034em; font-weight: 700; margin: 0 0 18px; color: var(--aie-ink);
  max-width: 22ch;
}
.ix-head p { font-size: 20px; line-height: 1.56; color: var(--aie-muted); margin: 0; max-width: 62ch; }
.ix-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.ix-stats div { display: flex; flex-direction: column; gap: 3px; }
.ix-stats b {
  font-family: var(--display); font-size: 25px; letter-spacing: -0.028em; font-weight: 700;
  color: var(--aie-ink);
}

/* featured — the only card in the system */
.feat {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border: 1px solid var(--aie-hair-strong); border-radius: 14px; overflow: hidden;
  margin: 44px 0 0; text-decoration: none; background: var(--aie-elevated);
  transition: border-color .15s ease;
}
.feat:hover { border-color: var(--aie-muted); }
/* The plate surface belongs to the IMAGE, not the cell: when an article has no
   hero the cell hosts a typographic fallback on --surface instead, and a light
   cell background would show as a seam behind it in dark mode. */
.feat__img {
  line-height: 0; border-right: 1px solid var(--aie-hair);
  display: block; position: relative; overflow: hidden;
}
.feat__img:has(img) { background: var(--plate); }
.feat__img .plate--fb {
  width: 100%; height: 100%; aspect-ratio: auto; min-height: 260px;
  border: 0; border-radius: 0;
}
html[data-theme="dark"] .feat__img img, html.dark .feat__img img { filter: brightness(0.86) saturate(0.92); }
.feat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat__body { padding: 30px 32px 32px; display: flex; flex-direction: column; }
.feat__body h2 {
  font-family: var(--display); font-size: clamp(23px, 2.4vw, 31px); line-height: 1.14;
  letter-spacing: -0.028em; font-weight: 700; color: var(--aie-ink); margin: 16px 0 12px;
  text-wrap: balance;
}
.feat__body p { font-size: 17px; line-height: 1.58; color: var(--aie-muted); margin: 0 0 20px; }
.feat__meta { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) {
  .feat { grid-template-columns: minmax(0, 1fr); }
  .feat__img { border-right: 0; border-bottom: 1px solid var(--aie-hair); aspect-ratio: 40/21; }
  .feat__body { padding: 22px 22px 26px; }
}

/* cluster ledger */
.clusters { margin: 56px 0 0; border-top: 1px solid var(--aie-ink); padding-top: 20px; }
.clusters__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 0 34px;
}
.cl-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--aie-hair);
  text-decoration: none;
}
.cl-row:hover .cl-row__n { color: var(--aie-accent); }
.cl-row__i { font-family: var(--mono); font-size: 10.5px; color: var(--aie-faint); }
.cl-row__n { font-size: 16.5px; font-weight: 500; color: var(--aie-ink); letter-spacing: -0.008em; line-height: 1.35; }
.cl-row__c { font-family: var(--mono); font-size: 11px; color: var(--aie-faint); font-variant-numeric: tabular-nums; }

/* the ledger itself */
.ledger { margin: 56px 0 0; }
.ledger__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--aie-ink); padding-bottom: 10px;
}
.row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 168px 92px 116px;
  gap: 22px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--aie-hair);
  text-decoration: none; position: relative;
}
.row::before {
  content: ""; position: absolute; left: -18px; top: 22px; bottom: 22px; width: 2px;
  background: var(--aie-accent); opacity: 0; transition: opacity .13s ease;
}
.row:hover::before { opacity: 1; }
.row:hover .row__t { color: var(--aie-accent); }
.row__d { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--aie-faint); padding-top: 5px; font-variant-numeric: tabular-nums; }
.row__t {
  font-family: var(--display); font-size: 21px; line-height: 1.26; letter-spacing: -0.022em;
  font-weight: 600; color: var(--aie-ink); margin: 0 0 7px; text-wrap: pretty;
}
.row__x { font-size: 15.5px; line-height: 1.55; color: var(--aie-muted); margin: 0; letter-spacing: -0.002em; }
.row__c { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aie-muted); padding-top: 6px; line-height: 1.5; }
.row__r { font-family: var(--mono); font-size: 11px; color: var(--aie-faint); padding-top: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.row__p { line-height: 0; }
.row__p .fig__plate, .row__p .plate--fb { border-radius: 6px; }
.row__p img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
@media (max-width: 1080px) {
  .row { grid-template-columns: 88px minmax(0, 1fr) 112px; }
  .row__p { display: none; }
  .row__r { display: none; }
}
@media (max-width: 700px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
  .row__d { padding-top: 0; }
  .row__c { padding-top: 2px; }
  .row__t { font-size: 19.5px; }
  .row::before { left: -12px; }
}

/* -- 12 cluster hub ---------------------------------------------------- */
.hub-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 0; }
.hub-nav a {
  text-decoration: none; border: 1px solid var(--aie-hair-strong); border-radius: 999px;
  padding: 6px 13px; font-size: 13.5px; color: var(--aie-muted); letter-spacing: -0.004em;
}
.hub-nav a:hover { border-color: var(--aie-accent); color: var(--aie-accent); }
.hub-nav a[aria-current="page"] { background: var(--aie-ink); border-color: var(--aie-ink); color: var(--aie-bg); }

/* -- 13 pagination ----------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--aie-ink);
}
.pager__pages { display: flex; gap: 6px; align-items: center; }
.pager a, .pager span.cur {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-decoration: none;
  padding: 7px 12px; border-radius: 6px; color: var(--aie-muted); border: 1px solid transparent;
}
.pager a:hover { color: var(--aie-ink); border-color: var(--aie-hair-strong); }
.pager span.cur { color: var(--aie-bg); background: var(--aie-ink); }
.pager .off { opacity: .35; pointer-events: none; }

/* -- 14 utility / a11y / print ----------------------------------------- */
.blog-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--aie-cta-bg, #1d1d1f); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font: 600 14px/1 "Inter", sans-serif; text-decoration: none;
}
.blog-skip:focus { left: 0; }
.blog-root a:focus-visible, .blog-root button:focus-visible, .blog-root summary:focus-visible {
  outline: 2px solid var(--aie-accent); outline-offset: 3px; border-radius: 3px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.specimen {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  border: 1px dashed var(--aie-amber); background: var(--aie-amber-soft);
  color: var(--aie-amber); border-radius: 4px; padding: 5px 11px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.footmeta {
  max-width: var(--wide); margin-inline: auto;
  margin-top: 64px; padding: 18px 0 72px; border-top: 1px solid var(--aie-hair);
  display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center;
}
/* mobile drawer for the snapshotted site header (static pages have no React) */
body.blog-drawer .mkt-header__drawer { display: block !important; }

/* -- 15 site-shell corrections ------------------------------------------- */
/* The snapshotted header/footer are styled with the marketing design system's
   tokens, which are normally scoped to `.aie-landing`. Blog pages mount the
   shell OUTSIDE that scope, so the tokens are re-declared at document level.
   Without this, the shell renders untokenised (black text on a dark footer). */
body {
  --aie-ink: #1d1d1f; --aie-muted: #6e6e73; --aie-faint: #8e8e93;
  --aie-hair: #ececec; --aie-hair-strong: #dcdcde;
  --aie-bg: #fff; --aie-surface: #f7f7f8; --aie-elevated: #fff;
  --aie-accent: #2e7e7e; --aie-accent-soft: #2e7e7e14;
  --aie-cta-bg: #1d1d1f; --aie-cta-ink: #fff; --aie-cta-bg-hover: #000;
}
html[data-theme="dark"] body, html.dark body {
  --aie-ink: #f2f2f7; --aie-muted: #a1a1a6; --aie-faint: #8e8e93;
  --aie-hair: #2a2a2c; --aie-hair-strong: #333335;
  --aie-bg: #161618; --aie-surface: #1f1f21; --aie-elevated: #1f1f21;
  --aie-accent: #7dc3c3; --aie-accent-soft: #7dc3c317;
  --aie-cta-bg: #fff; --aie-cta-ink: #161618; --aie-cta-bg-hover: #f2f2f7;
}
/* The React header starts transparent over a hero and only turns solid on
   scroll. Blog pages have no hero, so it is pinned to its solid state —
   otherwise light-theme nav links render white on white. */
/* The extracted shell CSS carries only mkt-* rules; on the real site the
   nav/button typography inherits from the React app's GLOBAL body styles,
   which do not exist on blog pages — without this, the entire header and
   footer fall back to the browser serif default (Times). */
body > .mkt-header, body > .mkt-footer {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The extractor converts the header's React <button>s (Log in / Sign up) to
   real <a>s for the static page; anchors carry a default underline the
   buttons never had, and unlike buttons they do not vertically center their
   text inside the 38px pill — inline-flex restores the button geometry. */
body > .mkt-header a, body > .mkt-footer a { text-decoration: none; }
body > .mkt-header .mkt-header__login,
body > .mkt-header .mkt-header__signup {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
body > .mkt-header {
  position: relative; background: var(--aie-bg);
  border-bottom: 1px solid var(--aie-hair); backdrop-filter: none;
}
body > .mkt-header .mkt-header__logo { color: var(--aie-ink); }
body > .mkt-header .mkt-header__link,
body > .mkt-header .mkt-header__login,
body > .mkt-header .mkt-header__burger { color: var(--aie-muted); }
body > .mkt-header .mkt-header__link:hover,
body > .mkt-header .mkt-header__login:hover { color: var(--aie-ink); }
body > .mkt-header .mkt-header__signup {
  background: var(--aie-cta-bg); color: var(--aie-cta-ink);
  border: 0; text-decoration: none;
}
/* The footer is ALWAYS dark, exactly like the site — its text colors are
   baked white in the component CSS, so re-theming it with blog tokens made
   it render differently from cellcog.ai (owner flag, 2026-07-30). The site
   paints it transparent over a dark ambient shell; the blog has no shell,
   so a solid near-black (the shell's base color) stands in. */
body > .mkt-footer {
  background: #0a0b0d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* One-row footer, deterministically. The columns block's natural width
   (~1280px) sits right at the 1240px inner limit, so font-metric noise was
   wrapping it below the brand here while the real site rendered one row.
   Zero flex-basis removes the coin flip: the columns always share the row
   and shrink to fit, exactly like the site's rendered state. */
body > .mkt-footer .mkt-footer__top { flex-wrap: nowrap; }
body > .mkt-footer .mkt-footer__cols {
  flex: 1 1 0; min-width: 0; justify-content: space-between;
}
@media (max-width: 860px) {
  body > .mkt-footer .mkt-footer__top { flex-direction: column; }
  body > .mkt-footer .mkt-footer__cols { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-root * { transition: none !important; animation: none !important; }
}
@media print {
  .mkt-header, .mkt-footer, .post-toc, .toc-inline, .themebtn, .related, .next { display: none !important; }
  .blog-root { font-size: 11pt; }
  .prose > h2 { break-after: avoid; }
  .fig, table, .ab { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}