/* =====================================================================
   /blog/ — site look for the vendored sosw-blog-kit (blog/kit/, HQ-1289).
   Loaded AFTER /css/styles.css and /blog/kit/blog-kit.css: it maps the
   kit's --bk-* custom properties onto the site tokens (--sans/--serif,
   --ink/--ink-soft, --signal*, --mist, --line, --header-h …) and styles the
   kit's bk-* markup. Used by /blog/ and by every generated post/tag page
   (blog/template.html). Never edit blog/kit/ — override here.
   ===================================================================== */

:root {
  --bk-accent: var(--signal-deep);
  --bk-text: var(--ink);
  --bk-muted: var(--ink-soft);
  --bk-tag-bg: var(--signal-tint);
  --bk-tag-text: var(--signal-deep);
  --bk-radius: 8px;
  --bk-gap: 0;
  --bk-media-radius: 8px;
  --bk-rating-fill: var(--signal);
  --bk-rating-track: var(--mist);
}

/* The shared header is fixed and assumes the dark hero behind it; on the
   blog it gets the solid "scrolled" look permanently, and the body clears
   its height. */
body { padding-top: var(--header-h); }
.site-head { background: var(--night); border-bottom-color: var(--line-light); }

/* The blog column is narrower than the site's default .container (980px). */
main.container { max-width: 720px; }

a { color: var(--signal-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--signal); }

.intro { padding: 2.5rem 0 1.5rem; }
.intro h1 { margin: 0 0 0.75rem; font-family: var(--serif); font-size: 2.25rem; font-weight: 500; line-height: 1.15; }
.lede { margin: 0; color: var(--ink-soft); font-size: 1.1rem; }
.muted { color: var(--ink-soft); }

/* Topics (tag cloud) above the list on /blog/. */
.blog-topics { padding: 0 0 1.5rem; }
.blog-topics-title { margin: 0 0 0.5rem; color: var(--ink-soft); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bk-cloud-tag { color: var(--signal-deep); }
.bk-cloud-tag:hover { color: var(--signal); }

/* Post list (/blog/) and single post (generated pages). */
.posts { padding-bottom: 3rem; }
.bk-post { border-top: 1px solid var(--line); padding: 2rem 0; }
.bk-post-header { display: flex; flex-direction: column-reverse; margin: 0 0 1rem; }
.bk-post-date { color: var(--ink-soft); font-size: 0.9rem; }
.bk-post-title { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.bk-post-header .bk-post-date { margin: 0 0 0.35rem; }
.bk-post-link { color: var(--ink); text-decoration: none; }
.bk-post-link:hover { color: var(--signal-deep); }
.bk-media { margin: 0 0 1rem; }
.bk-media img { width: 100%; background: var(--mist); }
.bk-media video { width: 100%; }
.bk-media figcaption { margin: 6px 2px 0; color: inherit; font-size: 0.8em; text-align: right; opacity: 0.65; }
.bk-yt-preview { background: var(--night) radial-gradient(circle at 50% 50%, var(--night-soft), var(--night) 70%); }
.bk-media .bk-yt-preview img { background: none; }
.bk-yt-preview:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.bk-yt-frame { background: var(--night); }
.bk-post-body p { margin: 0 0 0.9rem; line-height: inherit; }
.bk-post-body p:last-child { margin-bottom: 0; }
.bk-post-body a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.bk-tags { gap: 0.5rem; margin: 0.9rem 0 0; }
.bk-tag:hover { color: var(--signal-deep); }
.bk-pagination { justify-content: space-between; margin: 0 0 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.bk-filter { margin: 0 0 1rem; }

/* Generated post page: the article is the page's h1; neighbour navigation under it. */
.blog-page { padding-top: 2.5rem; padding-bottom: 3rem; }
.bk-post-page { border-top: 0; padding-top: 0; }
.bk-post-page .bk-post-title { margin: 0 0 0.5rem; font-size: 2.25rem; line-height: 1.15; }
.bk-post-page > .bk-post-date { display: block; margin: 0 0 1.25rem; }
.bk-post-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.bk-post-nav-all { font-weight: 600; }

/* Generated tag page. */
.blog-page > h1 { margin: 0 0 1.5rem; font-family: var(--serif); font-size: 2.25rem; font-weight: 500; line-height: 1.15; }
.bk-tag-list { margin: 0 0 2rem; padding: 0; list-style: none; }
.bk-tag-list li { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.bk-tag-list li > a { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.bk-tag-list li > a:hover { color: var(--signal-deep); }
.bk-tag-list .bk-post-date { display: block; margin-top: 0.25rem; }
.bk-tag-excerpt { margin: 0.4rem 0 0; }

@media (min-width: 720px) {
  .intro h1, .bk-post-page .bk-post-title, .blog-page > h1 { font-size: 2.75rem; }
}

/* Like/boo reactions (kit reactions-widget.js, on when site-config.js sets
   BLOG_REACTIONS_API_BASE): rating bar + % on one side, the two votes on the
   other, wrapping on narrow screens. Shown at the foot of every post, on the
   post page and on /blog/. The kit shows the derived rating only, never counts. */
.bk-reactions-slot:empty { display: none; }
.bk-reactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; }
.bk-reactions-rating { margin: 0; }
.bk-rating-bar { flex: 0 0 8rem; }
.bk-rating-text { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bk-reactions-buttons { flex-wrap: wrap; }
.bk-vote { min-height: 2.5rem; padding: 0.4rem 1.1rem; border-color: var(--signal-deep); border-radius: 999px; color: var(--signal-deep); font-family: var(--sans); font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.bk-vote:hover:not(:disabled) { background: var(--signal-deep); color: var(--white, #fff); }
.bk-vote:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.bk-reactions-note { flex: 1 0 100%; margin: 0; color: var(--ink-soft); font-size: 0.85rem; }

/* Share bar (HQ-1536, kit render.js renderShareBar + share.js): a row of round buttons under the
   post, before the reactions — Facebook, X, WhatsApp links (work without JS), then Instagram,
   Copy link and the native "Share…" sheet once share.js runs. Labels visible on wider screens,
   icons only (accessible names stay) on narrow ones. /blog/ shows the compact, icon-only bar. */
:root {
  --bk-share-size: 2.5rem;
  --bk-share-fg: var(--signal-deep);
  --bk-share-bg: var(--white);
  --bk-share-border: var(--line);
  --bk-share-hover-fg: var(--white);
  --bk-share-hover-bg: var(--signal-deep);
  --bk-share-focus: var(--blue);
  --bk-toast-bg: var(--night);
  --bk-toast-fg: var(--white);
}
.bk-share { gap: 0.5rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.bk-share-label { flex: 1 0 100%; margin: 0 0 0.15rem; color: var(--ink-soft); font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.bk-share-btn { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.bk-share-btn:hover, .bk-share-btn:focus-visible { border-color: var(--signal-deep); text-decoration: none; }
.bk-share-compact { margin: 1rem 0 0; padding-top: 0; border-top: 0; }
.bk-share-toast { font-family: var(--sans); font-weight: 600; box-shadow: 0 8px 24px rgba(15, 19, 18, 0.25); }
@media (max-width: 560px) {
  .bk-share-btn { width: var(--bk-share-size); padding: 0; }
  .bk-share-btn .bk-share-text { display: none; }
}