/* The blog: the list of posts and the page one post is read on. Loaded only by
   those pages, after site.css, whose colours, sizes and timings it uses by name.
   The list's grid, its topic chips and page numbers, the contents that fold,
   the comparison tables and the guide cards are adapted from MIT-licensed
   components, Copyright (c) 2026 Elia Kuratli. The licence is in THIRD-PARTY-NOTICES.md. */

/* ---------- the list of posts ---------- */

.bl-index .wrap { display: grid; gap: var(--space-8); }
.bl-list { display: grid; gap: var(--space-12); min-width: 0; }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
.bl-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bl-card, .bl-featured { display: grid; align-content: start; gap: var(--space-4); border-radius: 22px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.bl-featured { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--space-10); }
.bl-card[hidden], .bl-featured[hidden] { display: none; }
/* a cover is drawn 1200 by 630, and is shown whole */
.bl-card-art { position: relative; overflow: hidden; aspect-ratio: 1200 / 630; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.bl-featured .bl-card-art { border-radius: var(--radius-panel); }
.bl-card-art > svg, .bl-card-art > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-considered) var(--ease-standard); }
.bl-card-body { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.bl-featured .bl-card-body { gap: var(--space-3); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.bl-meta span:first-child { color: var(--ink); font-weight: 500; }
.bl-card-title { margin: 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.3; text-wrap: balance; transition: color var(--duration-fast) var(--ease-standard); }
.bl-featured-title { margin: 0; font-size: clamp(var(--text-2xl), 1rem + 2vw, var(--text-3xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; }
.bl-excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.bl-featured .bl-excerpt { font-size: var(--text-base); -webkit-line-clamp: 4; line-clamp: 4; }
.bl-by { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: 500; }
.bl-by .mark { flex: none; }
.bl-card:active .bl-card-art, .bl-featured:active .bl-card-art { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .bl-card:hover .bl-card-art > *, .bl-featured:hover .bl-card-art > * { transform: scale(1.03); }
  .bl-card:hover .bl-card-title, .bl-featured:hover .bl-featured-title { color: var(--text-secondary); }
}

.bl-also { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.bl-also a { color: var(--indigo); text-decoration: underline 1px; text-underline-offset: 3px; }
.bl-none { margin: 0; padding: var(--space-12) 0; color: var(--text-secondary); text-align: center; }
.bl-none-all { border: 0; padding: 0; background: none; color: var(--indigo); font: inherit; text-decoration: underline 1px; text-underline-offset: 3px; cursor: pointer; }

/* Topics: each a pressed or unpressed button. The one chosen is tinted and
   gains a tick, never told by colour alone. Shown only where the script runs. */
.bl-chips { display: none; flex-wrap: wrap; gap: var(--space-2); }
.js .bl-chips { display: flex; }
.bl-chip { position: relative; display: inline-flex; flex: none; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
.bl-chip-in { position: relative; isolation: isolate; display: inline-flex; min-width: 0; height: var(--control-sm); align-items: center; padding: 0 14px; transition: scale var(--duration-spring) var(--ease-spring); }
.bl-chip:active .bl-chip-in { scale: .97; transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
.bl-chip-in::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.bl-chip-check { position: absolute; top: calc(50% - 7px); left: 12px; display: grid; width: 14px; height: 14px; place-items: center; color: var(--indigo); opacity: 0; transform: scale(0); transform-origin: 0 50%; transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
.bl-chip-check .ico { display: block; stroke-width: 2.2; }
.bl-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-chip[aria-pressed="true"] { color: var(--ink); }
.bl-chip[aria-pressed="true"] .bl-chip-label { margin-left: 18px; }
.bl-chip[aria-pressed="true"] .bl-chip-check { opacity: 1; transform: scale(1); }
.bl-chip[aria-pressed="true"] .bl-chip-in::before { border-color: var(--border-strong); background: var(--surface-muted); border-color: color-mix(in oklab, var(--indigo) 42%, var(--border)); background: color-mix(in oklab, var(--indigo) 9%, var(--surface)); }
@media (hover: hover) and (pointer: fine) {
  .bl-chip:hover { color: var(--ink); }
  .bl-chip:hover .bl-chip-in::before { border-color: var(--border-strong); }
}

/* Page numbers: one mark that travels to the page being shown. Before it has
   found its place, the number draws its own. */
.bl-pager { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.bl-pager[hidden] { display: none; }
.bl-pager-nums { position: relative; display: flex; gap: var(--space-1); }
.bl-pager button { position: relative; display: inline-flex; height: var(--control-sm); min-width: var(--control-sm); align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-3); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.bl-pager-nums button { z-index: 1; padding: 0; }
.bl-pager button[aria-current="page"] { color: var(--ink); }
.bl-pager-mark { position: absolute; top: 0; left: 0; width: var(--control-sm); height: var(--control-sm); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-resting); opacity: 0; pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring); }
.bl-pager[data-ready] .bl-pager-mark { opacity: 1; }
.bl-pager:not([data-ready]) button[aria-current="page"] { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-resting); }
.bl-pager-step:active:not(:disabled) { transform: scale(.96); transition-duration: 100ms; transition-timing-function: ease-out; }
.bl-pager button:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .bl-pager button:hover:not(:disabled) { color: var(--ink); }
  .bl-pager-step:hover:not(:disabled) { background: var(--wash); }
}

@media (max-width: 1023px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-featured { gap: var(--space-6); }
}
@media (max-width: 719px) {
  .bl-featured { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .bl-featured .bl-card-art { border-radius: 20px; }
  .bl-list { gap: var(--space-10); }
  .bl-grid { gap: var(--space-10) var(--space-4); }
  /* the topics become one row that slides under the thumb */
  .js .bl-chips { flex-wrap: nowrap; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut); }
  .bl-chips::-webkit-scrollbar { display: none; }
  .bl-chip { scroll-snap-align: start; }
  .bl-chip-in { height: var(--control-md); padding: 0 16px; }
  .bl-chip-check { left: 14px; }
}
@media (max-width: 599px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-pager-step span { display: none; }
  .bl-pager-step { padding: 0; }
  .bl-pager button { height: var(--control-md); min-width: var(--control-md); }
  .bl-pager-mark { width: var(--control-md); height: var(--control-md); }
}

/* ---------- one post ---------- */

.bl-post { --bl-rail: 56px; --bl-side: 232px; --bl-gap: clamp(32px, 4vw, 64px); --bl-measure: 720px; }

/* How far down the post the reader is: a hairline under the header that grows
   as the post is read. Where the browser can tie it to the scroll itself, the
   script leaves it alone. (For someone who asked for less motion the site
   stops every animation, this one too, so there the script sets it: it only
   ever follows the reader's own scrolling.) */
.bl-progress { position: fixed; z-index: 40; top: var(--head); right: 0; left: 0; height: 3px; pointer-events: none; }
.bl-progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--bl-read, 0)); transform-origin: 0 50%; }
@keyframes bl-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bl-main { view-timeline: --bl-read block; }
    .bl-progress i { animation: bl-read linear both; animation-timeline: --bl-read; animation-range: contain 0% contain 100%; }
  }
}

.bl-head { padding: clamp(28px, 5vw, 64px) 0 var(--space-8); }
.bl-head .wrap, .bl-layout { display: grid; grid-template-columns: var(--bl-rail) minmax(0, var(--bl-measure)) var(--bl-side); column-gap: var(--bl-gap); justify-content: center; }
.bl-head .wrap > * { grid-column: 2 / -1; }
.bl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.bl-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); white-space: nowrap; }
.bl-crumbs li > .ico { flex: none; color: var(--border-strong); }
.bl-crumbs a { border-radius: 7px; padding: 4px 2px; color: var(--text-secondary); text-decoration: underline 1px; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
.bl-crumbs li > span { padding: 4px 2px; color: var(--ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .bl-crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; } }
.bl-title { max-width: 22ch; margin: 0; color: var(--ink); font-size: clamp(30px, 4.2vw, 52px); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.08; text-wrap: balance; }
.bl-summary { max-width: 62ch; margin: var(--space-5) 0 0; color: var(--text-secondary); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; text-wrap: pretty; }
.bl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); }
.bl-byline .bl-by { margin: 0; }
.bl-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.bl-cover { margin: 0 0 var(--space-10); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-muted); }
.bl-cover > svg, .bl-cover > img { display: block; width: 100%; height: auto; }

.bl-layout { align-items: start; padding-bottom: var(--space-16); }
.bl-main { min-width: 0; }

/* Passing the post on: a rail that stays beside the words on a wide screen,
   and a row at the foot of the post on a narrow one. */
.bl-share { position: sticky; top: calc(var(--head) + var(--space-8)); display: grid; justify-items: center; gap: var(--space-2); }
.bl-share-btn { position: relative; display: inline-grid; grid-auto-flow: column; width: var(--control-md); height: var(--control-md); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0; background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.bl-share-btn:active { transform: scale(.97); }
.bl-share-btn > .ico, .bl-share-btn > img { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.bl-share-btn[data-copy] > .ico:nth-of-type(2) { color: var(--ok); opacity: 0; transform: scale(.6); }
.bl-share-btn[data-done] > .ico:nth-of-type(1) { opacity: 0; transform: scale(.6); }
.bl-share-btn[data-done] > .ico:nth-of-type(2) { opacity: 1; transform: none; }
html:not(.js) .bl-share-btn[data-copy] { display: none; }
.bl-share-btn[hidden] { display: none; }
.bl-tip { position: absolute; top: 50%; left: calc(100% + 10px); border-radius: var(--radius-pill); padding: 5px 10px; background: var(--ink); color: var(--surface); font-size: var(--text-xs); line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-4px, -50%); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.bl-share-btn:focus-visible .bl-tip { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) and (pointer: fine) {
  .bl-share-btn:hover { border-color: var(--border-strong); color: var(--ink); }
  .bl-share-btn:hover .bl-tip { opacity: 1; transform: translate(0, -50%); transition-delay: 120ms; }
}
.bl-pass { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.bl-pass p { margin: 0; color: var(--ink); font-size: var(--text-base); font-weight: 500; }
.bl-pass-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bl-pass .bl-share-btn { width: auto; gap: var(--space-2); padding: 0 var(--space-4) 0 var(--space-3); }
.bl-pass .bl-share-btn > .ico, .bl-pass .bl-share-btn > img { grid-area: 1 / 1; }
.bl-pass .bl-share-btn > span { grid-area: 1 / 2; }

/* What is on the page, beside the words: it stays in view, and a mark
   travels to the part being read. */
.bl-toc { position: sticky; top: calc(var(--head) + var(--space-8)); max-height: calc(100vh - var(--head) - var(--space-16)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bl-toc-title { margin: 0 0 var(--space-3); color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.bl-toc-rail { position: relative; border-left: 1px solid var(--border); }
.bl-toc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bl-toc-list a { display: block; padding: 6px 0 6px var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.4; text-decoration: none; text-wrap: pretty; transition: color var(--duration-fast) var(--ease-standard); }
.bl-toc-list a[aria-current] { color: var(--ink); }
.bl-toc-mark { position: absolute; top: 0; left: -1px; width: 2px; height: 20px; border-radius: 2px; background: var(--indigo); opacity: 0; transform: translateY(var(--y, 0)); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
.bl-toc-rail[data-ready] .bl-toc-mark { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .bl-toc-list a:hover { color: var(--ink); } }

/* The same list, folded, where there is no room beside the words. It opens
   without the script; with it, by its height. */
.bl-fold { display: none; margin-bottom: var(--space-8); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); interpolate-size: allow-keywords; }
.bl-fold::details-content, .bl-dated::details-content { height: 0; overflow: clip; transition: height 400ms var(--ease-standard), content-visibility 400ms allow-discrete; }
.bl-fold[open]::details-content, .bl-dated[open]::details-content { height: auto; }
.bl-fold summary { display: flex; min-height: var(--control-lg); align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-2) 0; color: var(--ink); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bl-fold summary::-webkit-details-marker { display: none; }
.bl-fold summary .ico { flex: none; color: var(--text-muted); transform: rotate(90deg); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
.bl-fold[open] summary .ico { color: var(--ink); transform: rotate(-90deg); }
.bl-fold nav { overflow: hidden; }
.bl-fold .bl-toc-list { padding: 0 0 var(--space-4); }
.bl-fold .bl-toc-list a { padding: 10px 0; font-size: var(--text-base); }

/* The words. A long read: a measure near 66 characters, room between the
   lines, headings that say where you are. */
.bl-prose { color: var(--text); font-size: 1.125rem; line-height: 1.7; letter-spacing: var(--tracking-body); overflow-wrap: break-word; }
.bl-prose > :first-child { margin-top: 0; }
.bl-prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.bl-prose > p:first-of-type { color: var(--ink); font-size: 1.25rem; line-height: 1.55; }
.bl-prose h2 { margin: 2.4em 0 .7em; color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.18; text-wrap: balance; }
.bl-prose h3 { margin: 2em 0 .6em; color: var(--ink); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.bl-prose h2 + h3 { margin-top: 1em; }
.bl-prose strong { color: var(--ink); font-weight: 500; }
.bl-prose a { color: var(--indigo); text-decoration: underline 1px; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .bl-prose a:hover, .bl-sources a:hover { text-decoration-color: currentColor; } }
.bl-prose code { border-radius: 6px; padding: .1em .35em; background: var(--wash); font-family: var(--mono); font-size: .88em; }
.bl-prose kbd { border: 1px solid var(--border-strong); border-radius: 6px; padding: .05em .4em; background: var(--surface); font-family: var(--sans); font-size: .85em; }
.bl-prose ul, .bl-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.bl-prose li { margin: .45em 0; padding-left: .2em; }
.bl-prose li::marker { color: var(--text-muted); }
.bl-prose li > p:last-child, .bl-prose li > div > p:last-child { margin-bottom: 0; }
/* numbered steps: each number in a disc of its own */
.bl-prose .bl-steps { padding: 0; list-style: none; counter-reset: bl-step; }
.bl-prose .bl-steps > li { position: relative; margin: 0 0 var(--space-4); padding-left: 44px; counter-increment: bl-step; }
.bl-prose .bl-steps > li::before { content: counter(bl-step); position: absolute; top: .18em; left: 0; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--indigo); color: var(--surface); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }

.bl-note { margin: 1.6em 0; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4) var(--space-5); background: var(--surface); font-size: 1rem; line-height: 1.6; }
.bl-note > b { display: block; margin-bottom: 2px; color: var(--indigo); font-size: var(--text-sm); font-weight: 500; }
.bl-note.warning > b { color: var(--wait); }
.bl-note p { margin: 0 0 .6em; }
.bl-note > :last-child { margin-bottom: 0; }

/* pictures */
.bl-fig { margin: 2.2em 0; }
.bl-fig figcaption { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; text-wrap: pretty; }
.bl-fig-art > svg { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface-muted); }
.bl-fig-art.tall > svg { max-width: 520px; margin-inline: auto; }
.bl-fig-art.tall figcaption { max-width: 520px; margin-inline: auto; }
.bl-fig-photo > img { display: block; width: 100%; height: auto; border-radius: var(--radius-panel); }
/* a real screen sits in one of the site's drawn frames: the lid, the phone, or a plain window */
.bl-fig-shot img { display: block; height: auto; }
.bl-fig-shot .laptop { border-radius: 22px; padding: 8px; }
.bl-fig-shot .laptop-screen { border-radius: 14px; }
.bl-fig-shot.tall .phone { max-width: 280px; margin-inline: auto; }
.bl-fig-shot.tall figcaption { max-width: 420px; margin-inline: auto; text-align: center; }

/* Tables: rows parted by hairlines, the first column the thing being compared,
   Orzoni's own column on a quiet band. On a narrow screen a table slides
   inside its card and the first column stays put. */
.bl-table { margin: 2em 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bl-table table { width: 100%; min-width: calc(var(--cols, 3) * 116px); border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.bl-table th, .bl-table td { padding: 14px var(--space-4); text-align: left; vertical-align: top; }
.bl-table th { border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.bl-table td { border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); transition: background-color var(--duration-fast) var(--ease-standard); }
.bl-table tbody tr:last-child td { border-bottom: 0; }
.bl-table td:first-child { color: var(--ink); font-weight: 500; }
.bl-table th:first-child, .bl-table td:first-child { padding-left: var(--space-5); }
/* a table of five columns or more is set a size smaller, so the whole of it is in view on a wide page */
.bl-table.wide table { font-size: var(--text-sm); }
.bl-table.wide th, .bl-table.wide td { padding: 12px 10px; }
.bl-table.wide th:first-child, .bl-table.wide td:first-child { min-width: 112px; padding-left: var(--space-4); }
.bl-table.wide th:last-child, .bl-table.wide td:last-child { padding-right: var(--space-4); }
.bl-table [data-own] { background: var(--surface-muted); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.bl-table th[data-own], .bl-table td[data-own] { color: var(--ink); }
.bl-table td[data-own] { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .bl-table tbody tr:hover td:not([data-own]) { background: var(--wash); }
  .bl-table tbody tr:hover td[data-own] { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); }
}

/* Facts and sources: every price and rule the post leans on, with where it
   was read and when. */
.bl-sources { margin-top: var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: clamp(20px, 3vw, 32px); background: var(--surface); }
.bl-sources h2 { margin: 0 0 var(--space-4); color: var(--ink); font-size: var(--text-xl); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
/* a comparison's sources sit behind the day its prices were read: a grey card that opens */
.bl-dated { interpolate-size: allow-keywords; }
.bl-dated summary { display: flex; min-height: var(--control-lg); align-items: center; gap: var(--space-3); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--paper-2); color: var(--ink); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bl-dated summary::-webkit-details-marker { display: none; }
.bl-dated summary > .ico:first-child { flex: none; color: var(--text-secondary); }
.bl-dated summary > span { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.bl-dated summary b { font-size: var(--text-base); font-weight: 500; }
.bl-dated summary small { color: var(--text-secondary); font-size: var(--text-sm); }
.bl-dated summary > .ico:last-child { flex: none; color: var(--text-muted); transform: rotate(90deg); transition: transform var(--duration-spring) var(--ease-spring); }
.bl-dated[open] summary > .ico:last-child { transform: rotate(-90deg); }
.bl-dated .bl-sources-in { padding-top: var(--space-5); }
.bl-sources-in { color: var(--text-secondary); font-size: .9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.bl-sources-in p { margin: 0 0 .8em; }
.bl-sources-in ul, .bl-sources-in ol { margin: 0; padding-left: 1.2em; }
.bl-sources-in li { margin: .55em 0; }
.bl-sources-in > :last-child { margin-bottom: 0; }
.bl-sources-in h3 { margin: 1.4em 0 .4em; color: var(--ink); font-size: var(--text-base); font-weight: 500; }
.bl-sources a { color: var(--indigo); text-decoration: underline 1px; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.bl-sources strong { color: var(--ink); font-weight: 500; }
.bl-sources .bl-table { font-size: var(--text-sm); }

/* the guides a post leans on, and what to read next */
.bl-leans, .bl-next { padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.bl-next { padding-bottom: var(--space-16); }
.bl-next .wrap { display: grid; gap: var(--space-6); }
.bl-h { margin: 0 0 var(--space-6); color: var(--ink); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.bl-next .bl-h { margin: 0; }
.bl-leans-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--space-4); }
.bl-lean { position: relative; display: grid; align-content: start; gap: var(--space-2); min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-panel); padding: var(--space-5); background: var(--surface); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.bl-lean:active { transform: scale(.985); }
.bl-lean b { font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.3; text-wrap: balance; }
.bl-lean p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.bl-lean-go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); color: var(--indigo); font-size: var(--text-sm); font-weight: 500; }
.bl-lean-go .ico { transition: transform var(--duration-spring) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .bl-lean:hover { border-color: var(--border-strong); }
  .bl-lean:hover .bl-lean-go .ico { transform: translateX(3px); }
}

/* On a phone: a pill that says which part is being read, and opens the list
   of parts as a sheet. It is there only while the post is on screen. */
.bl-pill { position: fixed; z-index: 30; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); left: var(--gut); display: none; max-width: min(64vw, 320px); height: var(--control-md); align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 var(--space-4) 0 var(--space-3); background: var(--surface); box-shadow: var(--shadow-floating); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--duration-exit) var(--ease-exit), transform var(--duration-exit) var(--ease-exit); -webkit-tap-highlight-color: transparent; }
.bl-pill .ico { flex: none; color: var(--text-secondary); }
.bl-pill-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-pill.is-on { opacity: 1; pointer-events: auto; transform: none; transition: opacity var(--duration-standard) var(--ease-enter), transform var(--duration-considered) var(--ease-enter); }
.bl-pill:active { transform: scale(.97); }
.bl-sheet-list { display: grid; margin: 0; padding: 0 0 var(--space-4); list-style: none; }
.bl-sheet-list a { display: flex; min-height: var(--control-lg); align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border-subtle); padding: var(--space-2) 0; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.35; text-decoration: none; }
.bl-sheet-list li:last-child a { border-bottom: 0; }
.bl-sheet-list a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.bl-sheet-list a[aria-current] { color: var(--ink); font-weight: 500; }
.bl-sheet-list a[aria-current]::before { background: var(--indigo); }

@media (max-width: 1099px) {
  .bl-leans-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  /* no room for the rail of ways to share: they move to the foot of the post */
  .bl-post { --bl-rail: 0px; }
  .bl-head .wrap, .bl-layout { grid-template-columns: minmax(0, var(--bl-measure)) var(--bl-side); }
  .bl-head .wrap > * { grid-column: 1 / -1; }
  .bl-share { display: none; }
  .bl-pass { display: flex; }
}
@media (max-width: 899px) {
  /* one column: the list of parts folds above the words */
  .bl-head .wrap, .bl-layout { grid-template-columns: minmax(0, var(--bl-measure)); }
  .bl-toc { display: none; }
  .bl-fold { display: block; }
  .js .bl-pill:not([hidden]) { display: inline-flex; }
}
@media (max-width: 719px) {
  .bl-prose { font-size: 1.0625rem; line-height: 1.68; }
  .bl-prose > p:first-of-type { font-size: 1.1875rem; }
  .bl-cover { margin-bottom: var(--space-8); border-radius: 20px; }
  .bl-fig-art > svg, .bl-fig-photo > img { border-radius: 18px; }
  .bl-fig-shot .laptop { border-radius: 14px; padding: 5px; }
  .bl-fig-shot .laptop-screen { border-radius: 9px; }
  /* a table reaches the edges of the screen, and its first column stays while the rest slides */
  .bl-table { margin-inline: calc(var(--gut) * -1); border-right: 0; border-left: 0; border-radius: 0; }
  .bl-table th:first-child, .bl-table td:first-child { position: sticky; z-index: 1; left: 0; max-width: 42vw; padding-left: var(--gut); background: var(--surface); box-shadow: 1px 0 0 var(--border-subtle); }
  .bl-table th { white-space: normal; }
  .bl-sources { margin-inline: calc(var(--gut) * -1 + 4px); border-radius: 20px; }
  /* a table of sources is read downwards on a phone: each row a block, the fact first and where it was read under it */
  .bl-sources .bl-table { margin-inline: 0; overflow: visible; border: 0; border-radius: 0; background: none; }
  .bl-sources .bl-table table, .bl-sources .bl-table tbody, .bl-sources .bl-table tr, .bl-sources .bl-table td { display: block; min-width: 0; }
  .bl-sources .bl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bl-sources .bl-table tr { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
  .bl-sources .bl-table td, .bl-sources .bl-table td:first-child { position: static; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
  .bl-sources .bl-table td + td { margin-top: 6px; }
  /* the guides become a row to swipe, with the edge of the next card showing */
  .bl-leans-row { grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); grid-template-columns: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .bl-leans-row::-webkit-scrollbar { display: none; }
  .bl-lean { scroll-snap-align: start; }
  .bl-pass { display: grid; justify-content: stretch; }
  .bl-pass .bl-share-btn { height: var(--control-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .bl-card-art, .bl-card-art > *, .bl-chip, .bl-chip-in, .bl-chip-in::before, .bl-chip-check, .bl-pager button, .bl-pager-mark, .bl-share-btn, .bl-share-btn > *, .bl-tip, .bl-toc-mark, .bl-fold summary .ico, .bl-dated summary .ico, .bl-lean, .bl-lean-go .ico, .bl-pill, .bl-table td { transition: none; }
  .bl-fold::details-content, .bl-dated::details-content { transition: none; }
  .bl-card:hover .bl-card-art > *, .bl-featured:hover .bl-card-art > *, .bl-card:active .bl-card-art, .bl-featured:active .bl-card-art, .bl-share-btn:active, .bl-lean:active, .bl-pill:active { transform: none; }
  .bl-chip:active .bl-chip-in { scale: none; }
}