/* ==========================================================================
   blog.css — the blog reading page (/blog/<slug>/).
   One 720px column, Fraunces for the title and section heads, Inter for the body at 17px. Loads AFTER feature-v2.css,
   which is where --font-serif, --v2-body, --v2-card and --v2-line are defined. Sibling of legal.css: same reading
   posture, different content — this one renders Ghost's stored HTML, so it also has to style the Koenig card classes
   (.kg-*) that come with it. No blob, no reveals, no colour field.
   ========================================================================== */

.bl { padding: 40px 0 clamp(72px, 8vw, 120px); }
.bl-col { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 24px; }

/* ---------- article navigation ----------
   H2-only by design. A post earns this navigation at four sections; shorter articles keep the single-column reading
   posture. The wide-screen rail is separate from the 720px column, so adding it never narrows or shifts the prose. */
.bl-toc { display: none; }
.bl-toc-mobile { margin-top: 24px; border-block: 1px solid var(--v2-line); color: var(--v2-body); }
.bl-toc-mobile summary { display: flex; align-items: center; gap: 12px; padding: 15px 0; cursor: pointer; list-style: none; font: 600 14.5px/1.4 var(--font-display); color: var(--ink); }
.bl-toc-mobile summary::-webkit-details-marker { display: none; }
.bl-toc-mobile summary::after { content: '⌄'; margin-left: 2px; color: #6b7088; transform: translateY(-2px); }
.bl-toc-mobile[open] summary::after { transform: rotate(180deg) translateY(1px); }
.bl-toc-count { margin-left: auto; font-weight: 400; color: #6b7088; }
.bl-toc-mobile nav { padding: 2px 0 18px; }
.bl-toc-label, .bl-ai-label { margin: 0; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.bl-toc-list { margin: 13px 0 0; padding: 0; list-style: none; }
.bl-toc-list li + li { margin-top: 9px; }
.bl-toc-list a { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 9px; font: 400 14px/1.45 var(--font-body); color: #6b7088; text-decoration: none; }
.bl-toc-list a::before { content: ''; width: 5px; height: 5px; margin-top: .56em; border-radius: 50%; background: transparent; }
.bl-toc-list a:hover { color: var(--ink); }
.bl-toc-list a[aria-current='location'] { font-weight: 600; color: var(--ink); }
.bl-toc-list a[aria-current='location']::before { background: var(--blue); }
.bl-ai { margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--v2-line); }
.bl-ai a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; font: 400 13.5px/1.4 var(--font-body); color: #6b7088; text-decoration: none; }
.bl-ai a:hover { color: var(--ink); }
.bl-ai a span { font-size: 12px; }
.bl-toc-mobile > .bl-ai { margin: 0; padding: 16px 0 18px; }

@media (min-width: 1200px) {
  .bl { position: relative; }
  .bl-toc { position: absolute; inset: 40px auto 72px max(24px, calc(50% - 600px)); display: block; width: 200px; }
  .bl-toc-inner { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 48px); }
  .bl-toc-nav { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
  .bl-toc-list { min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .bl-toc-list:hover { scrollbar-color: #c4c7d3 transparent; }
  .bl-toc-mobile { display: none; }
  /* A 940px or 1180px Ghost figure breaks out into the rail at this width. Keep the compact control until the
     viewport can hold both pieces with breathing room. */
  .bl:has(.kg-width-wide, .kg-width-full) > .bl-toc { display: none; }
  .bl:has(.kg-width-wide, .kg-width-full) .bl-toc-mobile { display: block; }
}

@media (min-width: 1440px) {
  .bl:has(.kg-width-wide):not(:has(.kg-width-full)) > .bl-toc { display: block; left: max(24px, calc(50% - 694px)); }
  .bl:has(.kg-width-wide):not(:has(.kg-width-full)) .bl-toc-mobile { display: none; }
}

@media (min-width: 1680px) {
  .bl:has(.kg-width-full) > .bl-toc { display: block; left: max(24px, calc(50% - 814px)); }
  .bl:has(.kg-width-full) .bl-toc-mobile { display: none; }
}

/* ---------- head ---------- */
.bl-head { padding-bottom: 26px; border-bottom: 1px solid var(--v2-line); }
.bl-kicker { margin: 0 0 14px; font: 500 13.5px/1.4 var(--font-display); color: #6b7088; }
.bl-kicker a { color: #6b7088; text-decoration: underline; text-decoration-color: rgba(107, 112, 136, .35); text-underline-offset: 3px; }
.bl-kicker a:hover { color: var(--ink); text-decoration-color: currentColor; }
.bl-title { margin: 0; font: 500 clamp(30px, 4vw, 44px)/1.12 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
.bl-deck { max-width: 60ch; margin: 16px 0 0; font: 400 clamp(17px, 1.7vw, 19px)/1.5 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.bl-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; font: 400 14.5px/1.5 var(--font-body); color: #6b7088; }
.bl-by-name { font-weight: 600; color: var(--ink); }
.bl-by-sep { color: #a4a8bd; }

/* ---------- feature image ---------- */
.bl-feature { margin: 32px 0 0; }
.bl-feature img { width: 100%; border-radius: 16px; background: var(--v2-card); }
.bl-feature figcaption { margin-top: 10px; font: 400 14px/1.5 var(--font-body); color: #6b7088; text-align: center; }

/* ---------- prose ---------- */
.bl-prose { padding-top: 32px; font: 400 17px/1.7 var(--font-body); color: #343949; text-wrap: pretty; }
.bl-prose > * + * { margin-top: 20px; }
.bl-prose h2 { margin-top: 52px; font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 16px); }
.bl-prose h3 { margin-top: 36px; font: 600 18px/1.4 var(--font-display); color: var(--ink); scroll-margin-top: calc(var(--header-h) + 16px); }
.bl-prose h4 { margin-top: 30px; font: 600 16px/1.4 var(--font-display); color: var(--ink); }
.bl-prose h2 + *, .bl-prose h3 + *, .bl-prose h4 + * { margin-top: 14px; }
.bl-prose strong { font-weight: 600; color: var(--ink); }
.bl-prose a { overflow-wrap: anywhere; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 61, 255, .35); text-underline-offset: 3px; }
.bl-prose a:hover { text-decoration-color: currentColor; }
.bl-prose ul, .bl-prose ol { padding-left: 1.4em; }
.bl-prose ul { list-style: disc; }
.bl-prose ol { list-style: decimal; }
.bl-prose li + li { margin-top: 8px; }
.bl-prose li > ul, .bl-prose li > ol { margin-top: 8px; }
.bl-prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--v2-line); }
.bl-prose mark { background: #fff2a8; color: inherit; padding: 0 .15em; border-radius: 3px; }
.bl-prose code { padding: .1em .35em; border-radius: 5px; background: var(--v2-card); font: 400 .9em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.bl-prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.bl-prose pre code { padding: 0; background: none; }

.bl-prose blockquote { margin-inline: 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--blue); font: 400 19px/1.6 var(--font-body); color: var(--ink); }
.bl-prose blockquote p + p { margin-top: 14px; }

/* Ghost figures. .kg-width-wide and .kg-width-full break the measure the way they do on the live blog. */
.bl-prose figure { margin: 36px 0; }
.bl-prose figure img { width: 100%; border-radius: 12px; background: var(--v2-card); }
.bl-prose figcaption { margin-top: 10px; font: 400 14px/1.5 var(--font-body); color: #6b7088; text-align: center; }
.bl-prose figcaption a { color: #6b7088; }
.bl-prose .kg-width-wide { width: min(100vw - 48px, 940px); margin-inline: calc(50% - min(50vw - 24px, 470px)); }
.bl-prose .kg-width-full { width: min(100vw - 48px, 1180px); margin-inline: calc(50% - min(50vw - 24px, 590px)); }
.bl-prose .kg-gallery-row { display: flex; gap: 12px; }
.bl-prose .kg-gallery-image { flex: 1 1 0; min-width: 0; }

/* Embeds (YouTube, Twitter, TikTok cards Ghost stored as raw HTML) never overflow the column. */
.bl-prose .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.bl-prose iframe { max-width: 100%; border: 0; border-radius: 12px; }
.bl-prose .kg-embed-card iframe[src*="youtube"], .bl-prose .kg-embed-card iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.bl-prose .kg-bookmark-card { margin: 32px 0; }
.bl-prose .kg-bookmark-container { display: flex; gap: 20px; align-items: stretch; padding: 20px; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); color: inherit; text-decoration: none; }
.bl-prose .kg-bookmark-content { flex: 1 1 auto; min-width: 0; }
.bl-prose .kg-bookmark-title { font: 600 16px/1.4 var(--font-display); color: var(--ink); }
.bl-prose .kg-bookmark-description { margin-top: 6px; font-size: 14.5px; color: var(--v2-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-prose .kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: #6b7088; }
.bl-prose .kg-bookmark-icon { width: 20px; height: 20px; border-radius: 4px; }
.bl-prose .kg-bookmark-thumbnail { flex: 0 0 30%; }
.bl-prose .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* Tables scroll inside their own box; the page body never scrolls sideways. Ghost stores bare <table>, so the
   scroll container is the table itself rather than a wrapper. */
.bl-prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bl-prose th, .bl-prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--v2-line); }
.bl-prose thead th { background: var(--v2-card); font: 600 13px/1.4 var(--font-display); color: var(--ink); white-space: nowrap; }
.bl-prose tr:last-child > * { border-bottom: 0; }

/* ---------- author card ----------
   Who wrote it, at the end of the post. Same round-image-plus-bio shape as the author archive header (.ba-author),
   restated here rather than shared because the post column is 720px and the archive column is 1080px. */
.bl-author { display: flex; align-items: flex-start; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--v2-line); }
.bl-author-img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--v2-card); }
.bl-author-text { min-width: 0; }
.bl-author-name { margin: 0; font: 600 16px/1.4 var(--font-display); color: var(--ink); }
.bl-author-name a { color: inherit; text-decoration: underline; text-decoration-color: rgba(15, 13, 25, .25); text-underline-offset: 3px; }
.bl-author-name a:hover { text-decoration-color: currentColor; }
.bl-author-bio { max-width: 60ch; margin: 6px 0 0; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.bl-author + .bl-foot { margin-top: 32px; }

/* ---------- foot ---------- */
.bl-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--v2-line); }
.bl-foot-label { margin: 0 0 12px; font: 400 14px/1.4 var(--font-body); color: #6b7088; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bl-tags a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 13.5px/1.3 var(--font-display); color: var(--v2-body); transition: background-color .2s, color .2s; }
.bl-tags a:hover { background: #eef1ff; color: var(--ink); }

@media (max-width: 767px) {
  .bl { padding-top: 24px; }
  .bl-prose { font-size: 16.5px; }
  .bl-prose h2 { margin-top: 40px; }
  .bl-prose .kg-width-wide, .bl-prose .kg-width-full { width: 100%; margin-inline: 0; }
  .bl-prose .kg-gallery-row { flex-direction: column; }
}

/* ==========================================================================
   Archives — /blog/, /blog/page/N/, /blog/tag/<slug>/, /blog/author/<slug>/ and their pagination.
   Added 2026-09-05 with the full build-out. Same reading system as the post page above: 1080px column, Fraunces for
   headings, Inter for body, cards on --v2-card with an inset line. Four families, one layout, one set of rules.
   ========================================================================== */

.ba { width: 100%; max-width: 1080px; margin-inline: auto; padding: 40px 24px clamp(72px, 8vw, 120px); }

/* ---------- archive header ---------- */
.ba-head { padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--v2-line); }
.ba-crumb, .bl-crumb { margin: 0 0 14px; font: 500 13.5px/1.4 var(--font-display); }
.ba-crumb a, .bl-crumb a { color: #6b7088; text-decoration: underline; text-decoration-color: rgba(107, 112, 136, .35); text-underline-offset: 3px; }
.ba-crumb a:hover, .bl-crumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.ba-title { margin: 0; font: 500 clamp(32px, 3.8vw, 48px)/1.1 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; font-optical-sizing: auto; }
.ba-lead { max-width: 56ch; margin: 14px 0 0; font: 400 clamp(16.5px, 1.6vw, 18.5px)/1.55 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

/* ---------- author block ---------- */
.ba-author { display: flex; align-items: flex-start; gap: 16px; margin-top: 22px; }
.ba-author-img { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--v2-card); }
.ba-author-text { min-width: 0; }
.ba-author-bio { max-width: 60ch; margin: 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.ba-author-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font: 400 14.5px/1.5 var(--font-body); color: #6b7088; }
.ba-author-meta a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0, 61, 255, .35); text-underline-offset: 3px; }
.ba-sep, .bc-sep { color: #a4a8bd; }

/* ---------- card grid ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 30px); margin-top: clamp(32px, 4vw, 48px); }

.bc { display: flex; flex-direction: column; min-width: 0; }
.bc-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.bc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease-out; }
.bc:hover .bc-media img { transform: scale(1.02); }
.bc-body { padding-top: 16px; }
.bc-tag { margin: 0 0 8px; font: 500 12.5px/1.3 var(--font-display); }
.bc-tag a { color: var(--blue); text-decoration: none; }
.bc-tag a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bc-title { margin: 0; font: 500 clamp(19px, 1.6vw, 21px)/1.3 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.bc-title a { color: inherit; text-decoration: none; }
.bc-title a:hover { text-decoration: underline; text-decoration-color: rgba(15, 13, 25, .3); text-underline-offset: 3px; }
.bc-excerpt { margin: 10px 0 0; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 0; font: 400 13.5px/1.5 var(--font-body); color: #6b7088; }
.bc-author { font-weight: 600; color: var(--ink); }

/* ---------- pager ---------- */
.bp { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(44px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--v2-line); }
.bp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 14px/1.3 var(--font-display); color: var(--ink); text-decoration: none; transition: background-color .2s; }
.bp-btn:hover { background: #eef1ff; }
.bp-btn.is-off { visibility: hidden; }
.bp-count { margin: 0; font: 400 14px/1.4 var(--font-body); color: #6b7088; }

/* ---------- topic list (page 1 of /blog/ only) ---------- */
.ba-topics { margin-top: clamp(56px, 6vw, 88px); padding-top: 30px; border-top: 1px solid var(--v2-line); }
.ba-topics-h { margin: 0 0 16px; font: 500 22px/1.3 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.ba-topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ba-topic-list a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 13.5px/1.3 var(--font-display); color: var(--v2-body); text-decoration: none; transition: background-color .2s, color .2s; }
.ba-topic-list a:hover { background: #eef1ff; color: var(--ink); }
.ba-topic-n { font-size: 12px; color: #6b7088; }

@media (max-width: 1023px) {
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ba { padding-top: 24px; }
  .ba-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bp { flex-wrap: wrap; justify-content: center; }
  .bp-count { order: 3; width: 100%; text-align: center; }
  .bp-btn.is-off { display: none; }
  .ba-author-img { width: 52px; height: 52px; }
}