/* =====================================================================
   Winter Ball Updates · blog.css · Daily Update › Blog (page-blog.js) and its Today card
   Builds on study.css (.sd-art, .sd-fig paper/night, .sd-photo, .sd-sources, .sd-slot): the Blog keeps the study's look.
   Only what the Markdown body adds lives here (design/blog/EDITOR.md "The text format"): headings (h3 / h4 / h5), lists,
   numbered lists, quotes, links, underline / strike, rules, tables (scroll sideways inside the post on a phone) and
   inline images (a figure, caption below); plus the scroll offset for #daily/blog/<slug>.
   ===================================================================== */
.bl-list .bl-post { overflow-wrap: anywhere; } /* the jump to #daily/blog/<slug> clears the sticky bar via the root scroll-padding-top */
.bl-post .bl-k { margin-bottom: 2px; }
.bl-body { min-width: 0; }
.bl-body > :first-child { margin-top: 0; }
.bl-body .bl-h { max-width: 68ch; margin: 20px 0 8px; font: var(--fdw, 760) clamp(18px, 1.8vw, 22px)/1.2 var(--fd, var(--vt-serif, Georgia, serif)); text-wrap: balance; }
.bl-body h4.bl-h { font-size: clamp(16px, 1.5vw, 18px); }
/* the small heading: a newspaper's run-in kicker, small caps in the ink */
.bl-body h5.bl-h { margin: 18px 0 6px; font: 700 13px/1.3 var(--vt-serif, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; }
.bl-body ul, .bl-body ol { max-width: 68ch; margin: 0 0 14px; padding-left: 22px; font: 400 17px/1.55 var(--vt-serif, Georgia, serif); }
.bl-body ol { padding-left: 26px; }
.bl-body ol li::marker { font-variant-numeric: tabular-nums; }
.bl-body u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-body s { text-decoration-thickness: 1px; }
/* the rule: a thin double line, as between a paper's stories */
.bl-body .bl-hr { max-width: 68ch; height: 3px; margin: 22px 0; border: 0; border-top: 1px solid var(--rule, rgb(15 35 64 / .14)); border-bottom: 1px solid var(--rule, rgb(15 35 64 / .14)); background: none; }
/* tables: the box-score look (ink rule under the header, hairlines between rows); on a narrow screen the table scrolls
   sideways inside its own box, never the page */
.bl-body .bl-table { max-width: 100%; margin: 4px 0 18px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bl-body .bl-table:focus-visible { outline: 2px solid var(--vt-red, #9B1C1F); outline-offset: 2px; }
.bl-body .bl-table table { border-collapse: collapse; font: 400 15px/1.4 var(--vt-serif, Georgia, serif); font-variant-numeric: tabular-nums; }
.bl-body .bl-table th, .bl-body .bl-table td { padding: 6px 14px 6px 0; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.bl-body .bl-table th:last-child, .bl-body .bl-table td:last-child { padding-right: 0; }
.bl-body .bl-table th { font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-bottom: 1.5px solid var(--ink); }
.bl-body .bl-table td { border-bottom: 1px solid var(--rule, rgb(15 35 64 / .14)); min-width: 3ch; }
.bl-body .bl-table tbody tr:last-child td { border-bottom: 1.5px solid var(--ink); }
/* an image in the text: the chart figure's frame, the caption below in the photo caption's voice */
.bl-body .bl-img { max-width: 600px; margin: 6px 0 18px; }
.bl-body .bl-img img { display: block; max-width: 100%; height: auto; border-radius: 3px; outline: 1px solid var(--rule, rgb(15 35 64 / .14)); }
.bl-body .bl-img figcaption { margin-top: 6px; font: italic 400 14px/1.45 var(--vt-serif, Georgia, serif); color: var(--ink-2); }
.bl-body li { margin: 0 0 4px; }
.bl-body blockquote { max-width: 64ch; margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--vt-red, #9B1C1F); }
.bl-body blockquote p { font-style: italic; margin-bottom: 8px; }
.bl-body blockquote > :last-child { margin-bottom: 0; }
.bl-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--vt-red, #9B1C1F); text-underline-offset: 2px; }
.bl-body strong { font-weight: 700; }
:root[data-theme="dark"] .bl-body blockquote { border-left-color: #E8615F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-body blockquote { border-left-color: #E8615F; } }
:root[data-theme="dark"] .bl-body .bl-table:focus-visible { outline-color: #E8615F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-body .bl-table:focus-visible { outline-color: #E8615F; } }
.bl-post .bl-photo { margin-top: 12px; }
.bl-post .bl-foot { margin-top: 14px; }
/* Today */
#slot-blog:empty { display: none; }
.bl-slot .bl-sd { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
/* Today: the newest three posts across the row (operator 2026-10-26); two on tablets, a compact stack on phones */
.bl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap, 12px); margin-bottom: 16px; }
.bl-row.bl-n1 { grid-template-columns: minmax(0, 1fr); }
.bl-row.bl-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* theme.css spaces a .card after a .card (12px on top); in the row the grid gap spaces them, so every card starts level (operator 2026-10-26) */
.bl-row > .bl-card + .bl-card { margin-top: 0; }
.bl-card { display: flex; flex-direction: column; padding: 0; margin: 0; height: 100%; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; }
.bl-card .bl-cv { display: block; aspect-ratio: 2.6 / 1; overflow: hidden; margin: 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--card-2, transparent); }
.bl-card .bl-cv img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bl-card .bl-cb { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; flex: 1; }
.bl-card .bl-ct { font: 700 18px/1.28 var(--vt-serif, Georgia, serif); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .bl-sd { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .sd-go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; }
.bl-card .sd-k { font: 700 11.5px/1.3 var(--vt-serif, Georgia, serif); letter-spacing: .11em; text-transform: uppercase; color: var(--vt-red, #9B1C1F); }
.bl-card:hover .bl-ct { text-decoration: underline; text-decoration-color: var(--vt-red, #9B1C1F); }
:root[data-theme="dark"] .bl-card .sd-k { color: #E8615F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-card .sd-k { color: #E8615F; } }
@media (min-width: 600px) and (max-width: 1099px) { .bl-row, .bl-row.bl-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-row.bl-n3 .bl-card:nth-child(3) { display: none; } }
@media (max-width: 599px) {
  .bl-row, .bl-row.bl-n2, .bl-row.bl-n3 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bl-card .bl-cv { display: none; }
  .bl-card .bl-cb { padding: 11px 14px 12px; }
  .bl-card .bl-ct { font-size: 17px; }
  .bl-card .bl-sd { -webkit-line-clamp: 1; }
}
@media (max-width: 599px) { .bl-body ul, .bl-body ol { font-size: 16px; } .bl-body .bl-table table { font-size: 14px; } }

/* The Blog's side column (operator 2026-10-27): his photo and two-line bio, then the archive by month. Sticky beside the
   posts on wide screens, aligned under the page title; below 1180 px a compact strip above the posts and the archive
   after them. */
.bl-wrap { display: grid; grid-template-columns: 250px minmax(0, 860px); column-gap: 24px; justify-content: start; align-items: start; }
.bl-wrap > .bl-list { margin-top: 0; }
.bl-wrap .bl-list .sd-in-report { margin-left: 0; margin-right: 0; }
.bl-side { position: sticky; top: calc(var(--tbh, 64px) + 12px); display: grid; gap: 14px; max-height: calc(100vh - var(--tbh, 64px) - 24px); overflow: auto; }
.bl-sk { font: 700 11.5px/1.3 var(--vt-serif, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; color: var(--vt-red, #9B1C1F); margin-bottom: 8px; border-bottom: 2px solid currentColor; padding-bottom: 6px; }
:root[data-theme="dark"] .bl-sk { color: #E8615F; }
.bl-me, .bl-arch { background: var(--card, transparent); border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; padding: 14px 16px 16px; }
.bl-me { display: block; text-decoration: none; color: inherit; text-align: center; }
.bl-me-ph img { display: block; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.bl-me .bl-me-ph img { width: 100%; max-width: 200px; margin: 2px auto 12px; }
.bl-me p { margin: 0; font-family: var(--vt-serif, Georgia, serif); line-height: 1.35; }
.bl-me p { font-weight: 400; font-size: 17px; font-style: italic; color: var(--ink-2); }
.bl-me p:first-of-type { font-weight: 700; font-size: 20px; font-style: normal; color: var(--ink); margin-bottom: 4px; }
.bl-arch details { border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
.bl-arch details:first-of-type { border-top: 0; }
.bl-arch summary { display: flex; align-items: center; gap: 6px; padding: 8px 0; cursor: pointer; font: 600 15px/1.3 var(--font, system-ui, sans-serif); list-style: none; }
.bl-arch summary::-webkit-details-marker { display: none; }
.bl-arch summary::before { content: "▸"; color: var(--ink-2); }
.bl-arch details[open] summary::before { content: "▾"; }
.bl-arch .bl-m { flex: 1; }
.bl-n { min-width: 24px; text-align: center; font: 700 12px/20px var(--font, system-ui, sans-serif); border-radius: 10px; background: var(--fill, rgba(0,0,0,.06)); color: var(--ink-2); }
.bl-arch ul { margin: 0 0 10px; padding: 0 0 0 18px; }
.bl-arch li { margin: 0 0 6px; font: 400 14px/1.4 var(--vt-serif, Georgia, serif); }
.bl-me-strip, .bl-arch-foot { display: none; }
@media (max-width: 1179px) {
  .bl-wrap { grid-template-columns: minmax(0, 860px); justify-content: center; }
  .bl-side { display: none; }
  .bl-me-strip { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; padding: 10px 12px; text-decoration: none; color: inherit; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; background: var(--card, transparent); }
  .bl-me-strip .bl-me-ph img { width: 56px; height: 56px; border-radius: 50%; }
  .bl-me-t { display: grid; gap: 2px; min-width: 0; }
  .bl-me-t span { font: italic 400 15px/1.3 var(--vt-serif, Georgia, serif); color: var(--ink-2); }
  .bl-me-t span:first-child { font: 700 17px/1.3 var(--vt-serif, Georgia, serif); color: var(--ink); }
  .bl-arch-foot { display: block; margin-top: 4px; }
}
/* a post opened by its own link (2026-10-27): a way back to all posts above and below it; the archive marks the post */
.bl-back { margin: 0 0 12px; font: 600 15px/1.4 var(--font, system-ui, sans-serif); }
.bl-one .bl-post + .bl-back { margin: 4px 0 0; }
.bl-gone { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 8px; font: 400 15px/1.45 var(--vt-serif, Georgia, serif); color: var(--ink-2); }
.bl-arch a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration: none; }
/* the right column (2026-10-27 design): links, HR leaders, standings. ≥1500 px a third column; narrower, after the posts */
.bl-rail { display: grid; gap: 14px; align-content: start; min-width: 0; }
.bl-rail:empty { display: none; }
.bl-rb { background: var(--card, transparent); border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 10px; padding: 14px 16px 12px; min-width: 0; }
.bl-rh { margin: 12px 0 6px; font: 700 13px/1.3 var(--font, system-ui, sans-serif); letter-spacing: .04em; color: var(--ink); }
.bl-rb .bl-sk + .bl-rh, .bl-rb .bl-sk + .bl-tabs { margin-top: 4px; }
.bl-rl ul { list-style: none; margin: 0 0 4px; padding: 0; }
.bl-rl li { padding: 6px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); font: 600 14.5px/1.35 var(--vt-serif, Georgia, serif); }
.bl-rl li:first-child { border-top: 0; }
.bl-rd { display: block; font: 400 13px/1.4 var(--font, system-ui, sans-serif); color: var(--ink-2); margin-top: 2px; }
.bl-lang { font: 700 10px/1 var(--font, system-ui, sans-serif); letter-spacing: .06em; padding: 2px 4px; border-radius: 4px; background: var(--fill, rgba(0,0,0,.06)); color: var(--ink-2); vertical-align: 2px; }
.bl-hr { list-style: none; margin: 0; padding: 0; }
.bl-hr li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 24px; gap: 6px; align-items: center; padding: 4px 0; font: 400 14px/1.3 var(--font, system-ui, sans-serif); }
.bl-hr a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-rk { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bl-tm { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-2); }
.bl-tm .logo-badge { width: 18px; height: 18px; }
.bl-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-rmore, .bl-rnone, .bl-rnote { margin: 2px 0 4px; font: 400 12.5px/1.4 var(--font, system-ui, sans-serif); color: var(--ink-2); }
.bl-rnone { font-style: italic; }
.bl-rgo { margin: 10px 0 2px; font: 600 14px/1.3 var(--font, system-ui, sans-serif); }
/* one row for any tab count (= the registry's public leagues; 4 today, 5 with SNB): equal columns, no fixed count.
   A 5-letter code ("LBPRC") must fit a 5-tab row in the narrowest rail (1180–1499 px band, about 45 px a button) */
.bl-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 4px 0 8px; }
.bl-tabs button { font: 700 11px/1 var(--font, system-ui, sans-serif); letter-spacing: .02em; white-space: nowrap; overflow: hidden; min-width: 0; padding: 7px 1px; border-radius: 6px; border: 1px solid var(--line, rgba(0,0,0,.15)); background: transparent; color: var(--ink-2); cursor: pointer; }
.bl-tabs button[aria-selected="true"] { background: var(--ink, #0F2340); border-color: var(--ink, #0F2340); color: var(--paper, #fff); }
:root[data-theme="dark"] .bl-tabs button[aria-selected="true"] { background: #E8615F; border-color: #E8615F; color: #0B1220; }
.bl-st { width: 100%; border-collapse: collapse; font: 400 13.5px/1.3 var(--font, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.bl-st th { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); text-align: right; padding: 4px 3px; border-bottom: 1px solid var(--line, rgba(0,0,0,.12)); }
.bl-st td { text-align: right; padding: 5px 3px; border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); }
.bl-st .bl-tl { text-align: left; }
.bl-st caption { caption-side: top; text-align: left; margin: 10px 0 4px; }
.bl-st + .bl-st { margin-top: 6px; }
.bl-st td.bl-tl a { display: inline-flex; gap: 6px; align-items: center; color: inherit; text-decoration: none; }
.bl-st td.bl-tl .logo-badge { width: 18px; height: 18px; }
@media (min-width: 1500px) { .bl-wrap { grid-template-columns: 250px minmax(0, 860px) 300px; } }
@media (min-width: 1180px) and (max-width: 1499px) {
  .bl-wrap .bl-side { grid-row: 1 / span 2; }
  .bl-rail { grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 1179px) { .bl-rail { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 14px; } }
/* a post fills its card (operator 2026-10-27: "see the contents inside the middle column? that space on the right needs to
   not be there"): no reading-width caps inside a Blog post; charts and images scale to the card (SVG stays sharp) */
.bl-post .bl-body p, .bl-post .bl-body ul, .bl-post .bl-body ol, .bl-post .bl-body .bl-h, .bl-post .bl-body .bl-hr, .bl-post .bl-body blockquote { max-width: none; }
.bl-post .bl-body .sd-fig, .bl-post .bl-body .bl-img { max-width: none; }
.bl-post .bl-body .sd-fig img, .bl-post .bl-body .bl-img img { width: 100%; height: auto; }
/* TV graphics (operator 2026-10-28: "think of how tv does it… pick a nice background baseball related from our photos,
   and overlay the data over it. blur the background a bit"; design/blog/TV_GRAPHICS.md). A chart block with a `bg`:
   the credited site photo fills the figure, lightly blurred (--tv-blur), barely dimmed (--tv-dim) and under a vignette
   (--tv-g0 at the centre → --tv-g1 at the edges), so it reads as a ballpark (2026-10-28: the first samples read as navy);
   the chart (a transparent SVG with its own translucent panel) sits on it at its design size, never scaled up: 820 px
   on desktop (the card's text column is 764-814, so at most 7% smaller), the 360-px phone re-layout under 720 px.
   The credit sits bottom-left on its ink plate (.wb-credit) in the room under the chart (--tv-cr), never over the data.
   One look in both themes. engine/test/v6.blog.tv.test.js reads --tv-dim / --tv-g0 for its contrast check. */
.bl-tv { --tv-dim: .9; --tv-blur: 3.5px; --tv-g0: 0; --tv-g1: .4; --tv-cr: 26px;
  position: relative; isolation: isolate; overflow: hidden; margin: 6px 0 18px; padding: 0 0 var(--tv-cr); border-radius: 4px; background: #0B1622; }
.bl-tv-plain { --tv-cr: 0px; }
.bl-tv-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.bl-post .bl-body .bl-tv-bg img, .bl-tv-bg img { position: absolute; top: calc(var(--tv-blur) * -3); left: calc(var(--tv-blur) * -3); width: calc(100% + var(--tv-blur) * 6); height: calc(100% + var(--tv-blur) * 6); max-width: none; object-fit: cover; object-position: var(--tv-x, 50%) var(--tv-y, 50%); filter: blur(var(--tv-blur)) brightness(var(--tv-dim)); outline: 0; border-radius: 0; }
/* a vignette, clear at the centre (--tv-g0) and darkest at the edges and under the credit (--tv-g1) */
.bl-tv-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 45%, rgb(4 8 12 / var(--tv-g0)) 55%, rgb(4 8 12 / var(--tv-g1)) 100%); }
.bl-tv .bl-tv-g { display: block; }
.bl-post .bl-body .bl-tv .bl-tv-c, .bl-tv .bl-tv-c { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; outline: 0; border-radius: 0; }
@media (max-width: 719px) {
  .bl-tv { --tv-cr: 30px; }
  .bl-tv-plain { --tv-cr: 0px; }
  .bl-post .bl-body .bl-tv-m .bl-tv-c, .bl-tv-m .bl-tv-c { max-width: 360px; }
}
/* a breath between a post's headline and the line under it (operator 2026-10-28: "needs a space after the headline") */
.bl-post .sd-h2 + .sd-dek { margin-top: 10px; }
/* the CMS preview banner */
.bl-pv { border-color: var(--vt-red, #9B1C1F); font-weight: 600; }
/* the slim bar on a CMS preview: fixed on top, the page and what sticks moved down by its height; gone with the bar on any other route */
.bl-pvbar { --pvh: 34px; position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--pvh); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #FFFEFB; color: #14213D; border-bottom: 1px solid #ECE7DB; font: 400 13px/1 -apple-system, "Inter", system-ui, sans-serif; }
.bl-pvbar b { font-weight: 600; color: #14213D; }
.bl-pvn { color: #6B7280; }
.bl-pvbar a { color: inherit; text-decoration: none; font-weight: 600; }
.bl-pvbar a:hover { text-decoration: underline; }
.bl-pvbar a:focus-visible { outline: 2px solid #B84A08; outline-offset: 2px; }
.bl-pvl { display: inline-flex; margin-left: auto; border: 1px solid #DDD6C7; border-radius: 99px; overflow: hidden; }
.bl-pvl a { padding: 4px 9px; color: #6B7280; font-size: 12px; }
.bl-pvl a:hover { text-decoration: none; color: #14213D; }
.bl-pvl a[aria-current], .bl-pvl a[aria-current]:hover { background: #14213D; color: #FFFFFF; }
body:has(.bl-pvbar) { padding-top: 34px; }
body:has(.bl-pvbar) .bl-side { top: calc(var(--tbh, 64px) + 46px); }
@media (min-width: 821px) { body:has(.bl-pvbar) .sb-bar { top: calc(var(--sb-stuck) - var(--sb-bar) + 34px); } }
@media (max-width: 599px) { .bl-pvn { display: none; } .bl-pvbar { gap: 8px; padding: 0 12px; } }

/* Hashtags (operator 2026-11-06: "Each blog post needs hashtags about what it is about and a share link"; page-blog.js
   tagsOf): a row of small rounded tags under the dek, the # in the kicker's red; each opens the Blog filtered to it.
   They wrap, never scroll; a phone gets a taller tap target. */
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; padding: 0; list-style: none; }
.bl-tags li { margin: 0; min-width: 0; }
.bl-tag { display: inline-flex; align-items: baseline; max-width: 100%; padding: 5px 10px 5px 9px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 99px; background: var(--card-2, transparent);
  font: 600 13px/1.2 var(--fb, system-ui, sans-serif); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.bl-tag > span { margin-right: 1px; color: var(--vt-red, #9B1C1F); font-weight: 700; }
.bl-tag:hover { border-color: var(--vt-red, #9B1C1F); }
.bl-tag[aria-current] { border-color: var(--vt-red, #9B1C1F); box-shadow: inset 0 0 0 1px var(--vt-red, #9B1C1F); }
.bl-tag:focus-visible, .bl-sh:focus-visible { outline: 2px solid var(--vt-red, #9B1C1F); outline-offset: 2px; }
:root[data-theme="dark"] .bl-tag > span, :root[data-theme="dark"] .bl-tagw > span { color: #E8615F; }
:root[data-theme="dark"] .bl-tag:hover { border-color: #E8615F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-tag > span, :root:not([data-theme="light"]) .bl-tagw > span { color: #E8615F; } :root:not([data-theme="light"]) .bl-tag:hover { border-color: #E8615F; } :root:not([data-theme="light"]) .bl-tag[aria-current] { border-color: #E8615F; box-shadow: inset 0 0 0 1px #E8615F; } }
:root[data-theme="dark"] .bl-tag[aria-current] { border-color: #E8615F; box-shadow: inset 0 0 0 1px #E8615F; }
/* Share, at the end of each post: the phone's share sheet (where the browser has one), copy the link, Bluesky. A thin
   rule above, the kicker's small caps for the word. "Link copied" shows on the button itself for a few seconds. */
.bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule, rgb(15 35 64 / .14)); }
.bl-share-k { margin-right: 4px; font: 700 11.5px/1.3 var(--vt-serif, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; color: var(--vt-red, #9B1C1F); }
:root[data-theme="dark"] .bl-share-k { color: #E8615F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-share-k { color: #E8615F; } }
.bl-sh { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px 6px 11px; border: 1px solid var(--line, rgba(0,0,0,.15)); border-radius: 99px; background: transparent;
  font: 600 14px/1 var(--fb, system-ui, sans-serif); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.bl-sh svg { flex: none; }
.bl-sh:hover { border-color: var(--ink); }
.bl-sh.is-done, .bl-sh.is-done:hover { background: var(--ink, #0B1B33); border-color: var(--ink, #0B1B33); color: var(--card, #fff); }
.bl-sh.is-done svg { display: none; }
.bl-sh.is-done span::before { content: "✓ "; }
:root[data-theme="dark"] .bl-sh.is-done { background: #E8615F; border-color: #E8615F; color: #0B1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bl-sh.is-done { background: #E8615F; border-color: #E8615F; color: #0B1220; } }
/* the live region says "Link copied" to a screen reader; it shows only when there is no clipboard (the address, to copy by hand) */
.bl-share .sd-copied:not(.bl-url) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bl-share .sd-copied.bl-url { flex-basis: 100%; font: 400 13px/1.4 var(--fb, system-ui, sans-serif); user-select: all; overflow-wrap: anywhere; }
/* a phone: the share sheet first, the width of the post (it reaches every app on the phone), then copy and Bluesky side by side */
@media (max-width: 599px) {
  .bl-tag { padding: 7px 11px 7px 10px; font-size: 13.5px; }
  .bl-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bl-share-k, .bl-share [data-bl-share], .bl-share .sd-copied.bl-url { grid-column: 1 / -1; }
  .bl-share-k { margin: 0; }
  .bl-sh { justify-content: center; min-height: 42px; padding: 8px 10px; min-width: 0; }
  .bl-sh span { overflow: hidden; text-overflow: ellipsis; }
}
/* the Blog filtered to one hashtag (#daily/blog/tag/<key>): the hashtag on top, then each post in a short card */
.bl-tagh { padding: 16px 18px 14px; }
.bl-tagh .bl-sk { display: inline-block; margin-bottom: 6px; }
.bl-tagw { margin: 2px 0 8px; font: var(--fdw, 760) clamp(26px, 3vw, 36px)/1.05 var(--fd, var(--vt-serif, Georgia, serif)); overflow-wrap: anywhere; }
.bl-tagw > span { color: var(--vt-red, #9B1C1F); }
.bl-tagm { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 400 14.5px/1.4 var(--fb, system-ui, sans-serif); color: var(--ink-2); }
.bl-tagm a { font-weight: 600; }
.bl-tli { padding: 14px 18px 14px; }
.bl-tli .bl-k { margin-bottom: 4px; }
.bl-tlt { margin: 0 0 4px; font: 700 clamp(18px, 1.8vw, 21px)/1.25 var(--vt-serif, Georgia, serif); text-wrap: balance; }
.bl-tlt a { color: inherit; text-decoration: none; }
.bl-tlt a:hover { text-decoration: underline; text-decoration-color: var(--vt-red, #9B1C1F); text-underline-offset: 3px; }
.bl-tld { margin: 0; font: 400 15.5px/1.45 var(--vt-serif, Georgia, serif); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-tli .bl-tags { margin-top: 10px; }
.bl-tagged .bl-back:last-child { margin-top: 12px; }