/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   BLOG v2 — index + category (15 Sep 2026, Plan/DESIGN.md). Loads AFTER forum-v2.css, which supplies the shared
   head, chips (.pt-fm-pill), links and pagination; this sheet only adds the sort control, the card grid and the
   card itself. Tokens only. The old blog-styles.css still loads for the classes the archive script keys on
   (.pt-blog-card, .pt-blog-card-title) — every visual it set on them is overridden here.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.pt-bl .pt-fm-head { flex-wrap: wrap; align-items: flex-end; }
.pt-bl .pt-fm-sub { max-width: 60ch; }

/* Sort — one select, styled like every other PT select */
.pt-bl .pt-bl-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pt-ink-2); margin: 0; }
.pt-bl .pt-bl-sort select.pt-archive-sort-select {
    font: inherit; font-size: 13px; line-height: 1.2; color: var(--pt-ink); min-width: 150px; margin: 0;
    padding: 8px 30px 8px 10px; border: 1px solid var(--pt-border-strong); border-radius: 0; box-shadow: none;
    background: var(--pt-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5A54' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none; appearance: none;
}

/* Chips = the filter checkboxes */
.pt-bl .pt-bl-chips { margin: 16px 0 0; }
.pt-bl .pt-bl-chip { font-weight: 500; }
.pt-bl .pt-bl-chip--child { font-weight: 400; }
.pt-bl #pt-archive-clear-filter { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pt-ink-3); white-space: nowrap; margin-left: 4px; }
.pt-bl #pt-archive-clear-filter.pt-gcf-visible { display: inline-flex; }
.pt-bl .pt-bl-count { margin: 6px 0 12px; font-size: 12.5px; color: var(--pt-ink-3); }

/* Grid + card */
.pt-bl .pt-bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; transition: opacity .15s; }
.pt-bl .pt-bl-grid.is-loading { opacity: .5; }
.pt-bl .pt-blog-card, .pt-bl .pt-blog-card:hover {
    background: var(--pt-surface); border: 1px solid var(--pt-border-strong); border-radius: 0; box-shadow: none; transform: none;
    display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.pt-bl .pt-blog-card:hover .pt-blog-card-title a { text-decoration: underline; }
.pt-bl .pt-blog-card__media { display: block; aspect-ratio: 16 / 10; background: var(--pt-fill-control); overflow: hidden; border-bottom: 1px solid var(--pt-border); }
.pt-bl .pt-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-bl .pt-blog-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.pt-bl .pt-blog-card__cat { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--pt-ink-2); text-decoration: none; }
.pt-bl .pt-blog-card__cat:hover { color: var(--pt-ink); }
.pt-bl .pt-blog-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.pt-bl .pt-blog-card-title a { color: var(--pt-ink); text-decoration: none; }
.pt-bl .pt-blog-card-title a::after { content: none; }
.pt-bl .pt-blog-card-excerpt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pt-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-bl .pt-blog-card__meta { margin: auto 0 0; padding-top: 6px; font-size: 12px; color: var(--pt-ink-3); display: flex; gap: 6px; align-items: center; }
.pt-bl .pt-blog-no-results { grid-column: 1 / -1; margin: 0; padding: 28px 14px; text-align: center; font-size: 13px; color: var(--pt-ink-2); background: var(--pt-surface); border: 1px solid var(--pt-border-strong); }

@media (max-width: 900px) {
    .pt-bl .pt-container { padding: 14px 16px 90px; }
    .pt-bl .pt-fm-h1 { font-size: 20px; }
    .pt-bl .pt-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
    .pt-bl .pt-fm-head { align-items: flex-start; }
    .pt-bl .pt-bl-grid { grid-template-columns: minmax(0, 1fr); }
}
.pt-bl .pt-bl-chip__p { color: var(--pt-ink-3); font-weight: 400; }
.pt-bl .pt-bl-chip.is-on .pt-bl-chip__p { color: rgba(255,255,255,.7); }

/* ── Single post ──────────────────────────────────────────────────────────────────────────────────────────── */
.pt-bl-post .pt-bl-post__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; margin-top: 4px; }
.pt-bl-post .pt-bl-post__h1 { font-size: 30px; line-height: 1.15; }
.pt-bl-post .pt-bl-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 12.5px; color: var(--pt-ink-3); }
.pt-bl-post .pt-bl-post__author { display: inline-flex; align-items: center; gap: 8px; color: var(--pt-ink); font-weight: 500; text-decoration: none; font-size: 13.5px; }
.pt-bl-post .pt-bl-post__author:hover { text-decoration: underline; }
.pt-bl-post .pt-bl-post__avatar { width: 28px; height: 28px; object-fit: cover; display: block; }
.pt-bl-post .pt-bl-post__fig { margin: 18px 0 0; }
.pt-bl-post .pt-bl-post__fig img { display: block; width: 100%; height: auto; border: 1px solid var(--pt-border-strong); }

/* Body copy — the one place on the site where reading, not scanning, is the job */
.pt-bl-post .pt-bl-post__body { margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--pt-ink); max-width: 72ch; }
.pt-bl-post .pt-bl-post__body > * + * { margin-top: 1em; }
.pt-bl-post .pt-bl-post__body h2 { font-size: 22px; font-weight: 600; line-height: 1.25; margin-top: 1.6em; letter-spacing: -.01em; text-transform: none; }
.pt-bl-post .pt-bl-post__body h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-top: 1.4em; text-transform: none; }
.pt-bl-post .pt-bl-post__body h4 { font-size: 16px; font-weight: 600; margin-top: 1.2em; text-transform: none; }
.pt-bl-post .pt-bl-post__body a { color: var(--pt-accent); }
.pt-bl-post .pt-bl-post__body img, .pt-bl-post .pt-bl-post__body figure, .pt-bl-post .pt-bl-post__body iframe, .pt-bl-post .pt-bl-post__body video { max-width: 100%; height: auto; }
.pt-bl-post .pt-bl-post__body figure { margin-left: 0; margin-right: 0; }
.pt-bl-post .pt-bl-post__body figcaption { font-size: 12.5px; color: var(--pt-ink-3); margin-top: 6px; }
.pt-bl-post .pt-bl-post__body ul, .pt-bl-post .pt-bl-post__body ol { padding-left: 1.4em; }
.pt-bl-post .pt-bl-post__body li + li { margin-top: .35em; }
.pt-bl-post .pt-bl-post__body blockquote { margin: 1.2em 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--pt-border-strong); color: var(--pt-ink-2); font-style: normal; }
.pt-bl-post .pt-bl-post__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pt-bl-post .pt-bl-post__body th, .pt-bl-post .pt-bl-post__body td { border: 1px solid var(--pt-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.pt-bl-post .pt-bl-post__body th { background: var(--pt-surface-dim); font-weight: 600; }
.pt-bl-post .pt-bl-post__body pre { background: var(--pt-surface-dim); border: 1px solid var(--pt-border); padding: 12px 14px; overflow-x: auto; font-size: 13px; }

/* Table of contents — injected before the first h2 by the template */
.pt-bl-post .pt-single-toc { background: var(--pt-surface); border: 1px solid var(--pt-border-strong); border-radius: 0; padding: 12px 16px 14px; margin: 1.4em 0; box-shadow: none; }
.pt-bl-post .pt-single-toc-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pt-ink-2); }
.pt-bl-post .pt-single-toc-list { margin: 0; padding: 0; list-style: none; }
.pt-bl-post .pt-single-toc-list li { margin: 0; padding: 6px 0; border-top: 1px solid var(--pt-border); font-size: 14px; }
.pt-bl-post .pt-single-toc-list li:first-child { border-top: 0; }
.pt-bl-post .pt-single-toc-list a { color: var(--pt-ink); text-decoration: none; display: flex; gap: 10px; }
.pt-bl-post .pt-single-toc-list a:hover { text-decoration: underline; }
.pt-bl-post .pt-single-toc-num { font-family: var(--pt-mono); color: var(--pt-ink-3); flex: 0 0 auto; }

/* Sidebar cards */
.pt-bl-post .pt-bl-post__side { min-width: 0; }
.pt-bl-post .pt-bl-post__who { display: flex; align-items: center; gap: 12px; color: var(--pt-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.pt-bl-post .pt-bl-post__who img { width: 44px; height: 44px; object-fit: cover; display: block; flex: 0 0 auto; }
.pt-bl-post .pt-bl-post__who:hover span { text-decoration: underline; }
.pt-bl-post .pt-bl-post__bio { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--pt-ink-2); }
.pt-bl-post .pt-bl-post__rows { padding: 4px 16px; }
.pt-bl-post .pt-bl-post__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--pt-border); font-size: 13.5px; color: var(--pt-ink-2); text-decoration: none; }
.pt-bl-post .pt-bl-post__row:first-child { border-top: 0; }
.pt-bl-post .pt-bl-post__row:hover { color: var(--pt-ink); }
.pt-bl-post .pt-bl-post__row.is-active { color: var(--pt-ink); font-weight: 600; }
.pt-bl-post .pt-bl-post__row .pt-mono { font-size: 12px; color: var(--pt-ink-3); flex: 0 0 auto; }
.pt-bl-post .pt-bl-post__row--rel { justify-content: flex-start; align-items: flex-start; color: var(--pt-ink); }
.pt-bl-post .pt-bl-post__thumb { width: 56px; height: 42px; flex: 0 0 auto; background: var(--pt-fill-control); overflow: hidden; display: block; }
.pt-bl-post .pt-bl-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-bl-post .pt-bl-post__reltxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-bl-post .pt-bl-post__reltitle { font-weight: 500; line-height: 1.3; }
.pt-bl-post .pt-bl-post__row--rel:hover .pt-bl-post__reltitle { text-decoration: underline; }

/* The floating like/share tube + scroll-top: square, one hairline, no shadow */
body.single-post #pt-post-actions { border-radius: 0; border: 1px solid var(--pt-border-strong); box-shadow: none; }
body.single-post #pt-scroll-top { border-radius: 0; box-shadow: none; }

@media (max-width: 900px) {
    .pt-bl-post .pt-bl-post__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pt-bl-post .pt-bl-post__h1 { font-size: 22px; }
    .pt-bl-post .pt-bl-post__body { font-size: 15.5px; }
}

/* Full viewport width (Leon 16 Sep 04:30) — the 1180px cap forum-v2 sets on .pt-container is lifted for the blog. */
.pt-bl .pt-container { max-width: none; }
.pt-bl-post .pt-bl-post__cols { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 900px) { .pt-bl-post .pt-bl-post__cols { grid-template-columns: minmax(0, 1fr); } }

/* Leon 16 Sep 04:33: bigger avatar on top, bigger sidebar, Categories + Related stick while the article scrolls. */
.pt-bl-post .pt-bl-post__avatar { width: 40px; height: 40px; }
.pt-bl-post .pt-bl-post__author { font-size: 14.5px; gap: 10px; }
.pt-bl-post .pt-bl-post__meta { font-size: 13px; }
.pt-bl-post .pt-bl-post__cols { grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; }
.pt-bl-post .pt-bl-post__side .pt-fm-card__h h2 { font-size: 15.5px; }
.pt-bl-post .pt-bl-post__who { font-size: 15px; }
.pt-bl-post .pt-bl-post__who img { width: 52px; height: 52px; }
.pt-bl-post .pt-bl-post__bio { font-size: 14px; }
.pt-bl-post .pt-bl-post__row { font-size: 14.5px; padding: 11px 0; }
.pt-bl-post .pt-bl-post__row .pt-mono { font-size: 12.5px; }
.pt-bl-post .pt-bl-post__thumb { width: 64px; height: 48px; }
.pt-bl-post .pt-bl-post__stick { position: sticky; top: calc(var(--pt-header-h, 80px) + 16px); }
.pt-bl-post .pt-bl-post__stick .pt-fm-card:first-child { margin-top: 14px; }
@media (max-width: 900px) {
    .pt-bl-post .pt-bl-post__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pt-bl-post .pt-bl-post__stick { position: static; }
}

/* Leon 16 Sep 04:37: article copy runs the full column, same width as the featured image. */
.pt-bl-post .pt-bl-post__body { max-width: none; }

/* Sticky needs a tall parent: the grid aligns items to the top, so the aside was only as tall as its cards and the
   sticky block had nowhere to travel. Stretch the aside to the row height; the sticky block then follows the article. */
.pt-bl-post .pt-bl-post__side { align-self: stretch; }
.pt-bl-post .pt-bl-post__cols, .pt-bl .pt-container, .pt-bl { overflow: visible; }

/* Leon 16 Sep 04:43 — phones: bigger reading text, bigger like/share tube. */
@media (max-width: 900px) {
    .pt-bl-post .pt-bl-post__body { font-size: 17.5px; line-height: 1.7; }
    .pt-bl-post .pt-bl-post__body h2 { font-size: 24px; }
    .pt-bl-post .pt-bl-post__body h3 { font-size: 20px; }
    .pt-bl-post .pt-bl-post__body li, .pt-bl-post .pt-bl-post__body blockquote { font-size: 17.5px; }
    .pt-bl-post .pt-bl-post__meta { font-size: 13.5px; }
    .pt-bl-post .pt-single-toc-list li { font-size: 15.5px; padding: 9px 0; }
    body.single-post #pt-post-actions { width: 52px; }
    body.single-post #pt-post-actions .pt-pa-btn { width: 52px; height: 52px; font-size: 0.8rem; }
    body.single-post #pt-post-actions .pt-pa-btn svg { width: 22px; height: 22px; }
    body.single-post #pt-post-actions .pt-pa-divider { width: 32px; }
}

/* Leon 16 Sep 04:48 — table of contents text matches the article text. */
.pt-bl-post .pt-single-toc-list li { font-size: inherit; padding: 8px 0; }
.pt-bl-post .pt-single-toc-title { font-size: 13px; }
@media (max-width: 900px) { .pt-bl-post .pt-single-toc-list li { font-size: inherit; } }

/* Leon 16 Sep 05:48 — table of contents AND tables inside posts use the paragraph size, desktop and phone.
   blog-single.css sets the TOC size on the <a> (not the <li>), which is why the earlier li rule lost. */
.pt-bl-post .pt-bl-post__body .pt-single-toc .pt-single-toc-list li,
.pt-bl-post .pt-bl-post__body .pt-single-toc .pt-single-toc-list li a,
.pt-bl-post .pt-bl-post__body .pt-single-toc .pt-single-toc-num { font-size: inherit; line-height: 1.5; }
.pt-bl-post .pt-bl-post__body table,
.pt-bl-post .pt-bl-post__body th,
.pt-bl-post .pt-bl-post__body td { font-size: inherit; line-height: 1.5; }

/* Leon 16 Sep 05:56 — like/share tube back down a notch on phones; TOC + tables pinned to the phone paragraph size explicitly. */
@media (max-width: 900px) {
    body.single-post #pt-post-actions { width: 46px; }
    body.single-post #pt-post-actions .pt-pa-btn { width: 46px; height: 46px; font-size: 0.72rem; }
    body.single-post #pt-post-actions .pt-pa-btn svg { width: 19px; height: 19px; }
    body.single-post #pt-post-actions .pt-pa-divider { width: 28px; }
    .pt-bl-post .pt-bl-post__body .pt-single-toc .pt-single-toc-list li a,
    .pt-bl-post .pt-bl-post__body .pt-single-toc .pt-single-toc-num,
    .pt-bl-post .pt-bl-post__body table,
    .pt-bl-post .pt-bl-post__body th,
    .pt-bl-post .pt-bl-post__body td { font-size: 17.5px; }
    .pt-bl-post .pt-bl-post__body .pt-single-toc-title { font-size: 14px; }
}

/* ── Email capture (mockup pt-blog-email-capture.html, 16 Sep) — one component, three placements, shared states ── */
.pt-bl .pt-nl { background: var(--pt-surface); border: 1px solid var(--pt-ink); padding: 18px 20px; font-size: 14px; line-height: 1.45; color: var(--pt-ink); }
.pt-bl .pt-nl__k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pt-ink-3); }
.pt-bl .pt-nl__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin-top: 6px; }
.pt-bl .pt-nl__s { font-size: 13px; color: var(--pt-ink-2); line-height: 1.5; margin-top: 6px; }
.pt-bl .pt-nl__s a { color: var(--pt-accent); text-decoration: none; }
.pt-bl .pt-nl__f { display: flex; gap: 0; margin: 12px 0 0; }
.pt-bl .pt-nl__f input[type="email"] { font: inherit; font-size: 14px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 11px 12px; border: 1px solid var(--pt-border-strong) !important; border-right: 0 !important; border-radius: 0 !important; background: var(--pt-surface) !important; color: var(--pt-ink); box-shadow: none !important; }
.pt-bl .pt-nl__f input::placeholder { color: var(--pt-ink-3); }
.pt-bl .pt-nl__f input.is-bad { border-color: var(--pt-amber-deep) !important; }
.pt-bl .pt-nl__f input:disabled { color: var(--pt-ink-3); }
.pt-bl .pt-nl__f button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 16px; border: 1px solid var(--pt-ink); background: var(--pt-ink); color: var(--pt-surface-dim); cursor: pointer; white-space: nowrap; border-radius: 0; margin: 0; }
.pt-bl .pt-nl__f button:hover { background: #1f1f1f; }
.pt-bl .pt-nl__f button:disabled { opacity: .6; cursor: default; }
.pt-bl .pt-nl__fine { font-size: 11.5px; color: var(--pt-ink-3); margin-top: 8px; line-height: 1.45; }
.pt-bl .pt-nl__fine a { color: var(--pt-accent); text-decoration: none; }
.pt-bl .pt-nl__err { font-size: 12.5px; color: var(--pt-amber-deep); margin-top: 6px; }
.pt-bl .pt-nl__err::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--pt-amber-dot); margin-right: 6px; }
.pt-bl .pt-nl.is-ok { border-color: var(--pt-green-text); }
.pt-bl .pt-nl.is-ok .pt-nl__t { color: var(--pt-green-text); }
.pt-bl .pt-nl__row { display: flex; gap: 12px; align-items: center; }
.pt-bl .pt-nl__av { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; display: block; }
.pt-bl .pt-nl__list { font-size: 13px; line-height: 1.6; color: var(--pt-ink-2); margin: 8px 0 0; padding-left: 16px; }
.pt-bl .pt-nl--inline { margin: 22px 0; border-left: 3px solid var(--pt-ink); }
.pt-bl .pt-nl--end { margin-top: 28px; }
.pt-bl .pt-nl--end .pt-nl__s { margin-top: 10px; }
.pt-bl .pt-nl--end .pt-nl__f input[type="email"] { font-size: 15px; padding: 13px 14px; }
.pt-bl .pt-nl--end .pt-nl__f button { padding: 13px 20px; }
.pt-bl .pt-nl--sidebar { margin-top: 14px; }
.pt-bl .pt-nl--sidebar .pt-nl__f { flex-direction: column; gap: 8px; }
.pt-bl .pt-nl--sidebar .pt-nl__f input[type="email"] { border-right: 1px solid var(--pt-border-strong) !important; }
@media (max-width: 560px) {
    .pt-bl .pt-nl__f { flex-direction: column; gap: 8px; }
    .pt-bl .pt-nl__f input[type="email"] { border-right: 1px solid var(--pt-border-strong) !important; }
}

/* Only the newsletter card sticks (Leon 16 Sep 06:41). */
.pt-bl-post .pt-bl-post__stick .pt-fm-card:first-child { margin-top: 0; }
.pt-bl-post .pt-bl-post__stick .pt-nl--sidebar { margin-top: 14px; }

/* Leon 16 Sep 09:25: on phones the sidebar stacks under the article, so the sidebar opt-in would sit right under the
   end-of-post one — two asks in a row. One is enough: hide the sticky (newsletter) block ≤900px. */
@media (max-width: 900px) { .pt-bl-post .pt-bl-post__stick { display: none; } }

/* Chip row now the global component (16 Sep): the old pill + count line stay in the DOM for blog-archive.js, hidden. */
.pt-bl #pt-archive-clear-filter, .pt-bl .pt-bl-count { display: none !important; }
.pt-bl .pt-chips-select { margin-top: 16px; }
.pt-bl .pt-chips-line { margin-bottom: 12px; }

/* ── Two-axis filters (mockup pt-blog-filters (1).html, 16 Sep): Vehicle row, Topic row, one count line ── */
.pt-bl .pt-bl-axis { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pt-bl .pt-bl-axis__k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pt-ink-3); width: 56px; flex: 0 0 auto; }
.pt-bl .pt-bl-axis .pt-chips { margin: 0; min-width: 0; flex: 1 1 auto; }
.pt-bl .pt-bl-axis .pt-chip[hidden] { display: none; }
.pt-bl .pt-bl-line { margin: 14px 0 0; font-size: 12.5px; color: var(--pt-ink-2); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pt-bl .pt-bl-line__clear { font: inherit; font-family: inherit; font-size: 12.5px; color: var(--pt-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.pt-bl .pt-bl-line__clear:hover { text-decoration: underline; }
.pt-bl .pt-bl-slugs { display: none; }
@media (max-width: 639px) {
    .pt-bl .pt-bl-axis { flex-direction: column; align-items: stretch; gap: 6px; }
    .pt-bl .pt-bl-axis__k { width: auto; }
    .pt-bl .pt-bl-axis .pt-chips-select { margin: 0; }
    .pt-bl .pt-bl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pt-bl .pt-blog-card, .pt-bl .pt-blog-card:hover { flex-direction: row; gap: 0; }
    .pt-bl .pt-blog-card__media { width: 110px; aspect-ratio: 1 / 1; flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--pt-border); }
    .pt-bl .pt-blog-card-excerpt { display: none; }
    .pt-bl .pt-blog-card-title { font-size: 14px; }
}

/* Blog index sidebar (Leon 16 Sep): list + newsletter card; the card sticks on desktop, sits under the list on phones. */
.pt-bl .pt-bl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.pt-bl .pt-bl-main { min-width: 0; }
.pt-bl .pt-bl-side { position: sticky; top: calc(var(--pt-header-h, 80px) + 16px); }
.pt-bl .pt-bl-side .pt-nl--sidebar { margin-top: 28px; }
@media (max-width: 900px) {
    .pt-bl .pt-bl-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pt-bl .pt-bl-side { position: static; }
    .pt-bl .pt-bl-side .pt-nl--sidebar { margin-top: 8px; }
}

/* Full viewport width on the blog index + category pages (Leon 16 Sep 10:12): the same release from the theme's
   .grid-container that blog-single.css gives a post. Body classes are `blog` / `category` here. */
.blog .grid-container, .blog .inside-site-container, .blog .site-content, .blog .content-area,
.category .grid-container, .category .inside-site-container, .category .site-content, .category .content-area {
    max-width: 100% !important; width: 100%; padding-left: 0 !important; padding-right: 0 !important;
}

/* Four per row now the page is full width (Leon 16 Sep 10:32); three on narrower desktops, two on tablets, one on phones. */
.pt-bl .pt-bl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .pt-bl .pt-bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .pt-bl .pt-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .pt-bl .pt-bl-grid { grid-template-columns: minmax(0, 1fr); } }

/* Phone text on /blog/ (Leon 16 Sep 10:35): match the post page's phone sizes — 17.5px body scale. */
@media (max-width: 639px) {
    .pt-bl .pt-fm-h1 { font-size: 24px; }
    .pt-bl .pt-fm-sub { font-size: 15px; }
    .pt-bl .pt-bl-axis__k { font-size: 12.5px; }
    .pt-bl .pt-chips .pt-chip { font-size: 14px; padding: 9px 13px; }
    .pt-bl .pt-chips-select { font-size: 15.5px; padding: 13px 14px; }
    .pt-bl .pt-bl-line { font-size: 14px; }
    .pt-bl .pt-bl-sort select.pt-archive-sort-select { font-size: 15px; padding: 10px 32px 10px 12px; }
    .pt-bl .pt-blog-card__cat { font-size: 12.5px; }
    .pt-bl .pt-blog-card-title { font-size: 17.5px; line-height: 1.3; }
    .pt-bl .pt-blog-card__meta { font-size: 13.5px; }
    .pt-bl .pt-blog-card__media { width: 120px; }
    .pt-bl .pt-blog-card-body { padding: 12px 14px; gap: 5px; }
}