/* ============================================================
   BLOG (added 2026-11-05) - the listing (blog/index.html, `bl-`)
   and the article template (blog/<slug>/index.html, `bp-`).
   Loaded after site.css on blog pages only.

   The listing is Editorial and the article is Report with the Sidebar
   design's key takeaways and Related box (both picked by James
   2026-11-05; the other designs and the labs are deleted).
   ============================================================ */

/* ---------- shared pieces ---------- */
#site .bl-sample { padding: 2px 8px; border-radius: 4px; background: #FFF1D6; color: #7A5200; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

/* brand-block cover art: a faint grid on navy with four blocks stepping
   like the logo, in the topic's colour (--ac); a1-a4 place them differently */
#site .bl-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 1200 / 630; background: var(--nvy); }
/* a post's rendered cover (tools/blog-covers, 1200 x 630 - the same file as its share image) */
#site .bl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
#site .bl-card:hover .bl-cover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { #site .bl-cover img { transition: none; } #site .bl-card:hover .bl-cover img { transform: none; } }
#site .bl-art { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px; }
#site .bl-cover { container-type: size; }
/* blocks are sized and stepped from the cover's height (cqh), so the staircase keeps its shape at any width */
#site .bl-art i { position: absolute; width: 22cqh; height: 22cqh; border-radius: 3px; background: var(--ac);
  left: calc(var(--ox) + var(--c) * 24cqh); top: calc(var(--oy) + var(--r) * 24cqh); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
#site .bl-art i:nth-child(2) { opacity: .74; }
#site .bl-art i:nth-child(3) { opacity: .5; }
#site .bl-art i:nth-child(4) { opacity: .32; }
#site .bl-art.a1 { --ox: 46%; --oy: 20%; }
#site .bl-art.a1 i:nth-child(1) { --c: 0; --r: 0; } #site .bl-art.a1 i:nth-child(2) { --c: 1; --r: 0; } #site .bl-art.a1 i:nth-child(3) { --c: 1; --r: 1; } #site .bl-art.a1 i:nth-child(4) { --c: 2; --r: 1; }
#site .bl-art.a2 { --ox: 12%; --oy: 26%; }
#site .bl-art.a2 i:nth-child(1) { --c: 0; --r: 1; } #site .bl-art.a2 i:nth-child(2) { --c: 1; --r: 1; } #site .bl-art.a2 i:nth-child(3) { --c: 1; --r: 0; } #site .bl-art.a2 i:nth-child(4) { --c: 2; --r: 0; }
#site .bl-art.a3 { --ox: 60%; --oy: 14%; }
#site .bl-art.a3 i:nth-child(1) { --c: 0; --r: 0; } #site .bl-art.a3 i:nth-child(2) { --c: 0; --r: 1; } #site .bl-art.a3 i:nth-child(3) { --c: 1; --r: 1; } #site .bl-art.a3 i:nth-child(4) { --c: 1; --r: 2; }
#site .bl-art.a4 { --ox: 16%; --oy: 22%; }
#site .bl-art.a4 i:nth-child(1) { --c: 0; --r: 0; } #site .bl-art.a4 i:nth-child(2) { --c: 1; --r: 0; } #site .bl-art.a4 i:nth-child(3) { --c: 2; --r: 0; } #site .bl-art.a4 i:nth-child(4) { --c: 2; --r: 1; }
#site .bl-card:hover .bl-art i { transform: translateY(-4px); }
#site .bl-card:hover .bl-art i:nth-child(2) { transition-delay: .03s; }
#site .bl-card:hover .bl-art i:nth-child(3) { transition-delay: .06s; }
#site .bl-card:hover .bl-art i:nth-child(4) { transition-delay: .09s; }
@media (prefers-reduced-motion: reduce) { #site .bl-art i { transition: none; } #site .bl-card:hover .bl-art i { transform: none; } }

/* ============================================================
   LISTING - Editorial: topic chips, the newest post as a
   wide feature, then a three-column grid of cards
   ============================================================ */
#site .bl { padding: clamp(36px, 4.5vw, 64px) 0 clamp(36px, 4vw, 56px); }
#site .bl-topics { display: flex; align-items: center; gap: 12px 16px; margin-bottom: clamp(24px, 3vw, 34px); }
#site .bl-th { flex: none; margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .bl-tl { display: flex; flex-wrap: wrap; gap: 8px; }
#site .bl-tl button { appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--k-line); border-radius: 100px;
  background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--k-ink); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
#site .bl-tl button span { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--k-mu); }
#site .bl-tl button:hover { border-color: rgba(11,27,51,.3); }
#site .bl-tl button[aria-pressed="true"] { background: var(--nvy); border-color: var(--nvy); color: #fff; }
#site .bl-tl button[aria-pressed="true"] span { color: #A9B8D0; }
#site .bl-tl button:focus-visible { outline: 2px solid var(--cb); outline-offset: 2px; }

#site .bl-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#site .bl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bl-card[hidden] { display: none; }
#site .bl-txt { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
#site .bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 13.5px; color: var(--k-mu); }
#site .bl-topic { font-weight: 600; color: var(--cb); }
#site .bl-card h3 { margin: 10px 0 0; font-size: 1.22rem; line-height: 1.25; letter-spacing: -.025em; text-wrap: pretty; }
#site .bl-card h3 a, #site .bl-card h3 span { color: var(--k-ink); text-decoration: none; }
/* the title link covers the whole card */
#site .bl-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#site .bl-card h3 a:hover { color: var(--cb); }
#site .bl-card h3 a:focus-visible { outline: none; }
#site .bl-card:has(h3 a:focus-visible) { outline: 2px solid var(--cb); outline-offset: 3px; }
#site .bl-ex { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--k-mu); }
#site .bl-go { display: none; align-self: flex-start; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--cb); text-decoration: none; }
#site .bl-go .arr { margin-left: 4px; vertical-align: -2px; }

/* the newest post: a wide feature across the grid */
#site .bl-feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
#site .bl-feat .bl-cover { aspect-ratio: auto; min-height: 340px; }
#site .bl-feat .bl-txt { justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
#site .bl-feat h3 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.035em; }
#site .bl-feat .bl-ex { font-size: 16px; }
#site .bl-feat .bl-go { display: inline-block; }

@media (max-width: 1000px) {
  #site .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #site .bl-feat { grid-template-columns: minmax(0, 1fr); }
  #site .bl-feat .bl-cover { min-height: 0; aspect-ratio: 1200 / 630; }
}
@media (max-width: 680px) {
  #site .bl-topics { display: block; }
  #site .bl-th { margin-bottom: 10px; }
  #site .bl-list { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ARTICLE
   ============================================================ */
/* reading progress, a thin cobalt line along the top of the window */
#site .bp-prog { position: fixed; left: 0; right: 0; top: 0; z-index: 140; height: 3px; pointer-events: none; }
#site .bp-prog i { display: block; height: 100%; background: var(--cb); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* the header: a navy panel (Report, picked by James 2026-11-05) with the
   facts in ruled cells and the brand grid fading in on the right */
#site .bp-head { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 3.4vw, 44px); }
#site .bp-hin { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 56px); border-radius: 14px; background: var(--nvy); }
#site .bp-hin::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
#site .bp-hin > * { position: relative; }
#site .bp-crumb { margin-bottom: 22px; }
#site .bp-crumb, #site .bp-crumb > span:last-child { color: #fff; }
#site .bp-crumb a { color: #A9B8D0; }
#site .bp-crumb a:hover { color: #fff; }
#site .bp-crumb span[aria-hidden] { color: #5C6E8E; }
#site .bp-head h1 { max-width: 20ch; font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; color: #fff; }
#site .bp-dek { margin: 20px 0 0; max-width: 62ch; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: #DCE5F3; }   /* lighter for reading (James 2026-11-06), 14:1 on navy */
#site .bp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
#site .bp-by { display: flex; align-items: center; gap: 12px; }
#site .bp-av { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--cb); color: #fff; font-size: 17px; font-weight: 600; }
#site .bp-by b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
#site .bp-by b + span { display: block; font-size: 13.5px; color: #A9B8D0; }
#site .bp-facts { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0; }
#site .bp-facts > div { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.14); }
#site .bp-facts dt { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #8FA3C4; }
#site .bp-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; color: #fff; }

/* the body: the article, then one sticky column - the call-out, "On this
   page" and Related move together (James 2026-11-05). It scrolls on its own
   if a short window cannot fit all three. No overscroll-behavior: contain on
   it - that stopped the wheel scrolling the page while the mouse was over the
   column, even when the column had nothing to scroll (James 2026-11-05).
   Under 900px the column dissolves: contents above the article, call-out and
   related links after it. */
#site .bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(36px, 4.5vw, 64px); align-items: start; padding-bottom: clamp(56px, 6vw, 96px);
  overflow-x: clip; }   /* the hidden citation tooltips near the right edge made a narrow desktop window scroll sideways; clip is not a scroll container, so the sticky column still works */
#site .bp-main { min-width: 0; max-width: 760px; }
#site .bp-side { position: sticky; top: calc(var(--navh, 77px) + 24px); display: grid; gap: 14px;
  max-height: calc(100vh - var(--navh, 77px) - 40px); overflow-y: auto; scrollbar-width: none; }
#site .bp-side::-webkit-scrollbar { display: none; }
#site .bp-toc { padding: 18px 20px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bp-toch { margin: 0 0 12px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .bp-toc ol { margin: 0; padding: 0; list-style: none; }
#site .bp-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--k-line); font-size: 14px; line-height: 1.4; color: var(--k-mu); text-decoration: none; transition: color .18s, border-color .18s; }
#site .bp-toc a:hover { color: var(--k-ink); }
#site .bp-toc a.on { border-left-color: var(--cb); color: var(--k-ink); font-weight: 600; }

/* key takeaways: the answer up front, for readers and for AI answers */
#site .bp-tldr { padding: 22px 26px 24px; border: 1px solid var(--k-line); border-left: 3px solid var(--cb); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bp-tldr h2 { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--cb); }
#site .bp-tldr ul { margin: 12px 0 0; padding: 0; list-style: none; }
#site .bp-tldr li { position: relative; margin-top: 10px; padding-left: 22px; font-size: 15.5px; line-height: 1.6; color: #3D4E68; }
#site .bp-tldr li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--cb); }
#site .bp-tldr b { color: var(--k-ink); font-weight: 600; }

#site .bp-prose { max-width: none; margin-top: clamp(36px, 4vw, 48px); }
#site .bp-main h2[id] { scroll-margin-top: calc(var(--navh, 77px) + 24px); }
#site .bp-answer { font-size: 1.1rem; }
#site .bp-prose em { font-style: italic; }
#site .bp-prose q { font-style: italic; color: var(--k-ink); }

/* numbered citations, linked to the Sources list */
#site .bp-cite { margin-left: 2px; font-size: 12.5px; line-height: 0; vertical-align: super; }
#site .bp-cite a { padding: 1px 5px; border-radius: 4px; background: #EEF2F9; color: var(--cb); font-weight: 600; text-decoration: none; transition: background .18s, color .18s; }
#site .bp-cite a:hover { background: var(--cb); color: #fff; }

#site .bp-tablewrap { overflow-x: auto; margin: 6px 0 24px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bp-table { width: 100%; min-width: 560px; border-collapse: collapse; }
#site .bp-table th, #site .bp-table td { padding: 14px 18px; border-bottom: 1px solid var(--k-line); font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top; }
#site .bp-table thead th { background: #F4F6FA; font-weight: 600; color: var(--k-ink); }
#site .bp-table thead th:last-child { color: var(--cb); }
#site .bp-table tbody th { width: 26%; font-weight: 600; color: var(--k-ink); }
#site .bp-table td { color: #3D4E68; }
#site .bp-table td:last-child { color: var(--k-ink); }
#site .bp-table tbody tr:last-child > * { border-bottom: 0; }
/* .bp-plain: a reference table with no highlighted last column (that is for comparisons like GEO vs SEO) */
#site .bp-table.bp-plain thead th:last-child { color: var(--k-ink); }
#site .bp-table.bp-plain td:last-child { color: #3D4E68; }
/* phones: each row becomes a small card - the row heading on top, then every
   cell with its column heading beside it (blog.js copies the headings into
   data-label and adds .bp-cards) - instead of a table scrolling sideways
   (James 2026-11-05). Without the script the table keeps its sideways scroll. */
@media (max-width: 640px) {
  #site .bp-tablewrap:has(.bp-cards) { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #site .bp-table.bp-cards { min-width: 0; }
  #site .bp-table.bp-cards thead { display: none; }
  #site .bp-table.bp-cards, #site .bp-table.bp-cards tbody, #site .bp-table.bp-cards tr { display: block; }
  #site .bp-table.bp-cards tr { margin: 0 0 12px; padding: 14px 16px 8px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
  #site .bp-table.bp-cards tbody th { display: block; width: auto; padding: 0 0 8px; border: 0; font-size: 16px; }
  #site .bp-table.bp-cards td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border: 0; border-top: 1px solid var(--k-line); }
  #site .bp-table.bp-cards td::before { content: attr(data-label); font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--k-mu); }
  #site .bp-table.bp-cards tbody tr:last-child > * { border-bottom: 0; }
}

#site .bp-quote { margin: 26px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--nvy); }
#site .bp-quote blockquote { margin: 0; }
#site .bp-quote blockquote p { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--k-ink); }
#site .bp-quote figcaption { margin-top: 12px; font-size: 14px; color: var(--k-mu); }
#site .bp-quote cite { font-style: italic; }

#site .bp-note { margin: 26px 0; padding: 20px 22px; border-radius: 10px; background: var(--nvy); }
#site .bp-note .bp-nk { margin: 0 0 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #9FE870; }
#site .bp-note p { margin: 0; font-size: 1rem; line-height: 1.6; color: #E4EBF7; }

#site .bp-steps { margin: 0 0 17px; padding: 0; list-style: none; counter-reset: bps; }
#site .bp-steps li { position: relative; margin-bottom: 14px; padding-left: 44px; counter-increment: bps; }
#site .bp-steps li::before { content: counter(bps); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  background: #EEF2F9; color: var(--cb); font-size: 14px; font-weight: 700; }
#site .bp-steps b { color: var(--k-ink); font-weight: 600; }

#site .bp-faq, #site .bp-sources { margin-top: clamp(40px, 4.5vw, 56px); }
#site .bp-faq h2 { margin: 0 0 8px; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.14; }
/* padding, not margin, under the answer: the accordion animates its height,
   and a margin only lands at the end - that was the jump (James 2026-11-05) */
#site .bp-faq .qi p { margin: 0; padding: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: #3D4E68; }

/* sources: a compact numbered list in small type (James 2026-11-05: the
   boxed rows took too much space) - number, linked title, then publisher
   and date on the same line */
#site .bp-sources { padding-top: 0; }
#site .bp-sources h2 { margin: 0 0 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .bp-sources ol { margin: 0; padding: 0; list-style: none; }
#site .bp-sources li { display: flex; gap: 10px; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; font-size: 14px; line-height: 1.5; color: var(--k-mu); scroll-margin-top: calc(var(--navh, 77px) + 24px); transition: background .4s; }
#site .bp-sources li:target { background: #EEF2F9; }
#site .bp-sn { flex: none; width: 18px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--cb); }
#site .bp-sources a { font-weight: 600; color: var(--k-ink); text-decoration: none; overflow-wrap: anywhere; }
#site .bp-sources a:hover { color: var(--cb); text-decoration: underline; text-underline-offset: 3px; }
#site .bp-sm { margin-left: 6px; }
#site .bp-sm::before { content: "- "; }

/* the claim or quote a source supports links straight to it - the whole
   passage, not a word or two (James 2026-11-05: descriptive link text), as
   well as its numbered marker linking to the Sources list */
#site .bp-prose a.bp-src { color: var(--k-ink); text-decoration: underline; text-decoration-color: rgba(44,95,216,.35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .18s, text-decoration-color .18s; }
#site .bp-prose a.bp-src:hover { color: var(--cb); text-decoration-color: currentColor; }
#site .bp-prose a.bp-src q, #site .bp-prose a.bp-src em { color: inherit; }

/* a citation number shows its source on hover or focus (blog.js copies the
   title and publisher from the Sources list into data-tip; inside tables it
   uses a plain title instead). The tooltip is display: none until hovered, so
   a hidden one never takes up space - hidden ones near an edge made tables
   and narrow windows scroll sideways (James 2026-11-05). @starting-style
   keeps the fade where the browser supports it. */
#site .bp-cite a { position: relative; }
#site .bp-cite a[data-tip]::after { display: none; content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; width: max-content; max-width: 280px;
  padding: 9px 12px; border-radius: 8px; background: var(--nvy); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
  box-shadow: var(--card-sh); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s, transform .15s; }
#site .bp-cite a[data-tip]:hover::after, #site .bp-cite a[data-tip]:focus-visible::after { display: block; opacity: 1; transform: translate(-50%, 0); }
@starting-style { #site .bp-cite a[data-tip]:hover::after, #site .bp-cite a[data-tip]:focus-visible::after { opacity: 0; transform: translate(-50%, 4px); } }
@media (hover: none) { #site .bp-cite a[data-tip]::after { display: none; } }

#site .bp-author { display: flex; gap: 18px; margin-top: clamp(36px, 4vw, 48px); padding: 24px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bp-author .bp-av { width: 52px; height: 52px; font-size: 20px; background: var(--nvy); }
#site .bp-an { margin: 0; font-size: 16px; font-weight: 600; color: var(--k-ink); }
#site .bp-author p:not(.bp-an) { margin: 6px 0 12px; font-size: 15px; line-height: 1.6; color: var(--k-mu); }
#site .bp-al { font-size: 15px; font-weight: 600; color: var(--cb); text-decoration: none; }
#site .bp-al .arr, #site .bp-rl .arr { margin-left: 4px; vertical-align: -2px; }

#site .bp-rk { margin: 0 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .bp-rc { padding: 20px; border-radius: 10px; background: var(--nvy); color: #C3D0E6; }
#site .bp-rc .bp-rk { color: #9FE870; }
#site .bp-rc .bp-rt { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
#site .bp-rc p:not(.bp-rk):not(.bp-rt) { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
#site .bp-rc .btn { width: 100%; justify-content: center; padding: 12px 14px; font-size: 14.5px; text-align: center; }
#site .bp-rl { padding: 18px 20px; border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
#site .bp-rl a { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--k-ink); text-decoration: none; }
#site .bp-rl a:hover { color: var(--cb); }

@media (max-width: 900px) {
  /* stretch, not the grid's start: a wide table must scroll inside its box, not widen the column past the screen */
  #site .bp-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  #site .bp-main { order: 0; max-width: none; }
  #site .bp-side { display: contents; }
  #site .bp-toc { order: -1; }
  #site .bp-rc { order: 1; }
  #site .bp-rl { order: 2; }
}
@media (max-width: 620px) {
  #site .bp-meta { display: block; }
  #site .bp-facts { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; }
  #site .bp-facts > div { padding: 0; border-left: 0; }
  #site .bp-tldr { padding: 20px; }
  #site .bp-author { padding: 20px; }
}

/* ============================================================
   ARTICLE FIGURES (2026-11-05) - drawn in code, not images, so the words
   stay readable to search engines and AI. Each has a mono kicker in its
   caption (Simplified / Illustrative). blog.js adds .bp-anim to every
   [data-bp-in] figure still below the fold and .in once it scrolls into
   view; with no script, or under reduced motion, the finished state shows.
   ============================================================ */
#site .bp-fig { margin: 30px 0 34px; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--k-line); border-radius: 10px; background: #fff; box-shadow: var(--card-sh); }
/* reset the prose paragraph style inside figures; :where() keeps this at the
   lowest weight so each figure part's own spacing and type still apply */
#site .bp-prose .bp-fig :where(p) { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
#site .bp-fig figcaption { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--k-line); font-size: 14px; line-height: 1.55; color: var(--k-mu); }
#site .bp-figk { margin-right: 10px; padding: 2px 8px; border-radius: 4px; background: #EEF2F9; color: var(--cb); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }

/* ---- the flowchart: five steps joined by drawn lines, then two brackets
   marking the steps SEO and GEO each help with ---- */
#site .bp-flow { --k-person: #46802A; --k-ai: #2C5FD8; --k-data: #157A6E; --k-you: #0A1730; }   /* each passes 4.5:1 with the white step number (James 2026-11-06: contrast rule; were #5E9C37 / #1F9A8A at 3.3-3.5:1) */
#site .bp-prose .bpf-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
#site .bp-prose .bpf-steps li { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: var(--k-mu); }
#site .bpf-steps .k-person { --kc: var(--k-person); } #site .bpf-steps .k-ai { --kc: var(--k-ai); }
#site .bpf-steps .k-data { --kc: var(--k-data); } #site .bpf-steps .k-you { --kc: var(--k-you); }
#site .bpf-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: var(--kc); color: #fff; font: 600 13px/1 'JetBrains Mono', monospace; }
#site .bpf-steps b { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--k-ink); }
#site .bpf-steps b + span { margin-top: 5px; font-size: 13.5px; }
/* the line to the next step, from the square's right edge across the gap */
#site .bpf-steps li:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: -12px; top: 16px; height: 2px; border-radius: 1px; background: #C5CEDC; transform-origin: left; }
#site .bpf-steps li:not(:last-child)::before { content: ""; position: absolute; right: -14px; top: 12px; width: 7px; height: 7px; border-top: 2px solid #C5CEDC; border-right: 2px solid #C5CEDC; transform: rotate(45deg); }
#site .bpf-steps .k-you .bpf-n { box-shadow: 0 0 0 4px rgba(44,95,216,.18); }
/* the brackets sit under steps 2-3 and 4-5 */
#site .bpf-brs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; margin-top: 22px; }
#site .bp-prose .bpf-br { position: relative; padding-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--k-ink); text-align: center; }
#site .bpf-br::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border: 2px solid var(--bc); border-top: 0; border-radius: 0 0 4px 4px; transform-origin: center; }
#site .bpf-br i { display: none; font-style: normal; }
#site .bpf-br.seo { grid-column: 2 / span 2; --bc: #8C99AD; }
#site .bp-prose .bpf-br.geo { grid-column: 4 / span 2; --bc: var(--cb); color: var(--cb); }
/* motion: steps rise in turn, each line draws after its step, brackets last */
#site .bp-flow.bp-anim .bpf-steps li { opacity: 0; transform: translateY(8px); }
#site .bp-flow.bp-anim .bpf-steps li::after { transform: scaleX(0); }
#site .bp-flow.bp-anim .bpf-steps li::before { opacity: 0; }
#site .bp-flow.bp-anim .bpf-br { opacity: 0; }
#site .bp-flow.bp-anim .bpf-br::before { transform: scaleX(0); }
#site .bp-flow.bp-anim.in .bpf-steps li { opacity: 1; transform: none; transition: opacity .45s ease calc(var(--i) * .32s), transform .45s ease calc(var(--i) * .32s); }
#site .bp-flow.bp-anim.in .bpf-steps li::after { transform: none; transition: transform .35s ease calc(var(--i) * .32s + .3s); }
#site .bp-flow.bp-anim.in .bpf-steps li::before { opacity: 1; transition: opacity .2s ease calc(var(--i) * .32s + .55s); }
#site .bp-flow.bp-anim.in .bpf-br { opacity: 1; transition: opacity .4s ease 1.9s; }
#site .bp-flow.bp-anim.in .bpf-br.geo { transition-delay: 2.2s; }
#site .bp-flow.bp-anim.in .bpf-br::before { transform: none; transition: transform .45s ease 1.9s; }
#site .bp-flow.bp-anim.in .bpf-br.geo::before { transition-delay: 2.2s; }
/* narrow: one step per row, the line runs down the left */
@media (max-width: 640px) {
  #site .bp-prose .bpf-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #site .bp-prose .bpf-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
  #site .bpf-n { grid-row: 1 / span 2; }
  #site .bpf-steps b { margin-top: 2px; }
  #site .bpf-steps li:not(:last-child)::after { left: 16px; right: auto; top: 40px; bottom: 4px; width: 2px; height: auto; transform-origin: top; }
  #site .bp-flow.bp-anim .bpf-steps li::after { transform: scaleY(0); }
  #site .bpf-steps li:not(:last-child)::before { display: none; }
  #site .bpf-brs { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
  #site .bpf-br.seo, #site .bp-prose .bpf-br.geo { grid-column: 1; }
  #site .bp-prose .bpf-br { padding: 0 0 0 14px; text-align: left; }
  #site .bpf-br::before { top: 2px; bottom: 2px; width: 6px; height: auto; right: auto; border: 2px solid var(--bc); border-right: 0; border-radius: 4px 0 0 4px; }
  #site .bpf-br i { display: inline; margin-right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: var(--k-mu); }
}

/* ---- before and after: the same page with the answer buried, then first ---- */
#site .bpba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#site .bp-prose .bpba-tag { margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-mu); }
#site .bp-prose .bpba-after .bpba-tag { color: var(--cb); }
#site .bpba-page { padding: 0 16px 16px; border: 1px solid var(--k-line); border-radius: 8px; background: #FBFCFE; }
#site .bp-prose .bpba-bar { display: flex; align-items: center; gap: 5px; margin: 0 -16px 14px; padding: 8px 12px; border-bottom: 1px solid var(--k-line); font-size: 12.5px; color: var(--k-mu); }
#site .bpba-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D5DCE7; }
#site .bpba-bar span { margin-left: 8px; }
#site .bp-prose .bpba-t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--k-ink); }
#site .bp-prose .bpba-l { display: grid; gap: 6px; margin-top: 10px; }
#site .bpba-l i { display: block; height: 7px; border-radius: 2px; background: #E3E8F0; }
#site .bpba-l i.m { width: 78%; } #site .bpba-l i.s { width: 54%; }
#site .bp-prose .bpba-ans { margin-top: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; line-height: 1.45; color: #607086; }
#site .bp-prose .bpba-after .bpba-ans { border-color: rgba(44,95,216,.35); background: #EEF2F9; color: var(--k-ink); font-weight: 500; }
#site .bpba-ans sup { margin-left: 2px; padding: 0 4px; border-radius: 3px; background: var(--cb); color: #fff; font-size: 11px; line-height: 1.3; vertical-align: 2px; }
#site .bp-prose .bpba-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font-size: 13px; color: var(--k-mu); }
#site .bpba-res { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 13px; font-weight: 600; }
#site .bpba-res.no { background: #F1F3F7; color: #607086; }
#site .bpba-res.yes { background: var(--cb); color: #fff; }
#site .bpba-res svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* motion: the answer box lights up, then the result chips arrive */
#site .bp-prose .bp-ba.bp-anim .bpba-after .bpba-ans { border-color: transparent; background: transparent; color: #607086; }
#site .bp-ba.bp-anim .bpba-res { opacity: 0; transform: translateY(6px) scale(.96); }
#site .bp-prose .bp-ba.bp-anim.in .bpba-after .bpba-ans { border-color: rgba(44,95,216,.35); background: #EEF2F9; color: var(--k-ink); transition: background .5s ease .5s, border-color .5s ease .5s, color .5s ease .5s; }
#site .bp-ba.bp-anim.in .bpba-res { opacity: 1; transform: none; transition: opacity .4s ease .3s, transform .4s cubic-bezier(.2,.7,.2,1) .3s; }
#site .bp-ba.bp-anim.in .bpba-res.yes { transition-delay: 1.15s; }
@media (max-width: 640px) { #site .bpba-grid { grid-template-columns: minmax(0, 1fr); } }