/* ==========================================================================
   ds-blog.css — /blog and the 35 posts under it.

   Requires ds.css (tokens), ds-components.css, ds-site.css. Scoped under .ds.

   WHY THIS FILE EXISTS
   --------------------
   Every post carried its own inline <style> block: 185 distinct selectors
   across 35 files, 5-14 KB each, describing the same article layout 35 times
   with small drifts. Twenty of them also loaded tokens.css + home.css, which
   is the purple palette. This is that vocabulary, once, in the green system.

   The class names are the ones the posts already use — including the one-off
   card names (.chase-card, .paypal-card, .robinhood-card …) that are the same
   component renamed per article. They are grouped rather than renamed, because
   renaming them means editing prose HTML and prose HTML is where mistakes hide.

   COMPOSITION
   -----------
   A post is one measured column. Long-form reading wants a column, not a grid,
   so the only structural devices are rules and space. Green appears on links,
   on the accent rule of a called-out block, and nowhere else. Figures that came
   out of a statement keep the mono face, the same as the rest of the site.
   ========================================================================== */

/* ==========================================================================
   SHELL
   ========================================================================== */

/* The posts say `.container` where the rest of the site says `.wrap`. Inside
   an article it is the reading measure, and every block — hero, body, TOC,
   FAQ, CTA, related — already sits in one, so setting it here is what keeps
   them all on a single left edge. */
.ds .container {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}
.ds main .container { max-width: 900px; }

.ds .article-hero,
.ds .article-header {
  padding: clamp(32px, 5vw, 60px) 0 clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--c-line);
}

.ds .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: 12.5px; color: var(--c-ink-3); margin-bottom: var(--s-5);
}
.ds .breadcrumb a { color: var(--c-ink-3); }
.ds .breadcrumb a:hover { color: var(--c-green-text); }
.ds .breadcrumb span { color: var(--c-ink-faint); }

/* The category is a field label, so it is set like every other one on the
   site: mono, lettered, ruled — not a coloured pill. */
.ds .article-badge,
.ds .article-category {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-green-text); margin-bottom: var(--s-4);
  background: none; padding: 0; border-radius: 0;
}
.ds .article-badge::before,
.ds .article-category::before {
  content: ""; width: 22px; height: 1px; background: var(--c-green); flex: none;
}
.ds .article-badge i, .ds .article-category i { display: none; }

/* Article titles are long — 36 posts, median 60 characters, longest 95 — so the
   site-wide 56px display size put 28 of them on three lines and one on four
   inside the 900px reading column. 46px puts 29 on two lines and none above
   three, with the same column. The 22ch cap went with it: at 46px it would
   have been 607px inside an 822px column, re-creating the wrap it was there to
   prevent. The column, not a character count, is the measure here. */
.ds .article-hero h1,
.ds .article-header h1 {
  font-size: clamp(32px, 4vw, 46px); font-weight: var(--fw-strong);
  letter-spacing: var(--tr-display); line-height: var(--lh-head);
  margin: 0 0 var(--s-5); max-width: 100%; text-wrap: balance; color: var(--c-ink);
}

.ds .article-meta,
.ds .read-time {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--c-ink-3);
  letter-spacing: .02em;
}
.ds .article-meta i { color: var(--c-ink-faint); margin-right: 5px; }

.ds .featured-image { margin: clamp(24px, 4vw, 40px) 0 0; }
.ds .featured-image img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
}

/* ==========================================================================
   THE COLUMN
   ========================================================================== */

.ds .article-body,
.ds .article-content {
  padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
  font-size: 17px; line-height: 1.72; color: var(--c-ink-2);
}
.ds .article-intro {
  margin: clamp(24px, 4vw, 40px) 0 0;
  font-size: 19px; line-height: 1.6; color: var(--c-ink);
  font-weight: var(--fw-regular);
}
/* The intro sits above .article-body, which supplies its own top padding. */
.ds .article-intro + .article-body,
.ds .article-intro + .article-content { padding-top: var(--s-6); }

.ds .article-body h2,
.ds .article-content h2 {
  font-size: clamp(24px, 3vw, 30px); font-weight: var(--fw-strong);
  letter-spacing: var(--tr-head); line-height: var(--lh-head); color: var(--c-ink);
  margin: var(--s-8) 0 var(--s-4); padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: 90px; text-wrap: balance;
}
.ds .article-body > h2:first-child,
.ds .article-content > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.ds .article-body h3,
.ds .article-content h3 {
  font-size: 19px; font-weight: var(--fw-semi); letter-spacing: -.015em;
  color: var(--c-ink); margin: var(--s-7) 0 var(--s-3); scroll-margin-top: 90px;
}
.ds .article-body h4,
.ds .article-content h4 {
  font-size: 16px; font-weight: var(--fw-semi); color: var(--c-ink);
  margin: var(--s-6) 0 var(--s-3);
}
.ds .article-body p,
.ds .article-content p { margin: 0 0 var(--s-5); }
.ds .article-body strong,
.ds .article-content strong { color: var(--c-ink); font-weight: var(--fw-semi); }

.ds .article-body a,
.ds .article-content a,
.ds .article-intro a {
  color: var(--c-green-text); font-weight: var(--fw-medium);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: var(--c-green-line);
}
.ds .article-body a:hover,
.ds .article-content a:hover { text-decoration-color: var(--c-green); }

/* Lists are ruled, the same as every other list on the site. */
.ds .article-body ul, .ds .article-body ol,
.ds .article-content ul, .ds .article-content ol {
  list-style: none; margin: 0 0 var(--s-5); padding: 0; counter-reset: bl;
}
.ds .article-body li, .ds .article-content li {
  position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--c-line);
}
.ds .article-body li:last-child, .ds .article-content li:last-child { border-bottom: 0; }
.ds .article-body ul > li::before, .ds .article-content ul > li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 12px; height: 1px; background: var(--c-line-strong);
}
.ds .article-body ol > li::before, .ds .article-content ol > li::before {
  counter-increment: bl; content: counter(bl, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s-3);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--c-green-text);
}

.ds .article-body img, .ds .article-content img {
  display: block; width: 100%; height: auto; margin: var(--s-6) 0;
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
}

/* Code blocks were the last thing pushing a post sideways on a phone: <pre>
   defaults to overflow:visible, so a long line widened the document rather
   than scrolling inside its own box. Three of the twelve posts measured did
   this even after the tables were wrapped. */
.ds .article-body pre, .ds .article-content pre {
  max-width: 100%; overflow-x: auto;
  margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--c-ink); color: #e2e8f0;
  border-radius: var(--r-card);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
.ds .article-body pre code, .ds .article-content pre code {
  background: none; padding: 0; color: inherit; font-size: inherit;
}

.ds .article-body code, .ds .article-content code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--c-bg-sunk); padding: 1px 5px; border-radius: 5px; color: var(--c-ink);
}

/* ==========================================================================
   TABLES — ruled, mono figures, horizontally scrollable on their own
   ========================================================================== */

.ds .table-wrap { overflow-x: auto; margin: 0 0 var(--s-6); }

.ds .article-body table, .ds .article-content table,
.ds .comparison-table, .ds .results-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--s-6);
  font-size: 14.5px; background: none; box-shadow: none; border-radius: 0;
}
.ds .article-body th, .ds .article-content th,
.ds .comparison-table th, .ds .results-table th {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1.5px solid var(--c-line-strong);
  background: var(--c-bg-soft);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint);
}
.ds .article-body td, .ds .article-content td,
.ds .comparison-table td, .ds .results-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2); vertical-align: top;
}
.ds .article-body tr:nth-child(even) td,
.ds .article-content tr:nth-child(even) td,
.ds .comparison-table tr:nth-child(even) td,
.ds .comparison-table tr:nth-child(even),
.ds .results-table tr:nth-child(even) td { background: var(--c-surface-2); }
.ds .article-body td strong { color: var(--c-ink); }
.ds .winner { color: var(--c-green-text); font-weight: var(--fw-semi); }
.ds .success { color: var(--c-green-text); }
.ds .fail    { color: var(--c-danger); }

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */

.ds .table-of-contents {
  margin: 0 0 var(--s-7);
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  background: var(--c-bg-soft); padding: var(--s-5);
}
.ds .table-of-contents h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint);
  margin: 0 0 var(--s-3);
}
.ds .table-of-contents ul { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ds .table-of-contents li { padding: 0; border: 0; }
.ds .table-of-contents li::before { content: none; }
.ds .table-of-contents a {
  display: flex; gap: var(--s-3); padding: 5px 0;
  font-size: 14px; color: var(--c-ink-2); text-decoration: none;
}
.ds .table-of-contents a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-faint); flex: none;
}
.ds .table-of-contents a:hover,
.ds .table-of-contents a:hover::before { color: var(--c-green-text); }

/* ==========================================================================
   CALLED-OUT BLOCKS — a left rule, never a tinted card
   ========================================================================== */

.ds .highlight-box,
.ds .key-takeaway,
.ds .pro-tip,
.ds .warning-box,
.ds .statement-example,
.ds .diagram {
  margin: 0 0 var(--s-6); padding: var(--s-5);
  border-left: 2px solid var(--c-green);
  background: var(--c-bg-soft);
  border-radius: 0 var(--r-control) var(--r-control) 0;
}
.ds .warning-box { border-left-color: var(--c-warn); background: var(--c-warn-soft); }

.ds .highlight-box p, .ds .key-takeaway p, .ds .pro-tip p,
.ds .warning-box p, .ds .diagram p { margin: 0; color: var(--c-ink-2); }
.ds .highlight-box h4, .ds .key-takeaway h4, .ds .pro-tip h4, .ds .warning-box h4 {
  margin: 0 0 var(--s-2); font-size: 15px; font-weight: var(--fw-semi); color: var(--c-ink);
}
.ds .statement-example, .ds .diagram {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto; white-space: pre-wrap;
  background: var(--c-bg-soft); color: var(--c-ink-2);
}

/* Do / don't pair. Green and red here carry meaning, so they stay. */
.ds .do-dont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: 0 0 var(--s-6); }
.ds .do-box, .ds .dont-box {
  padding: var(--s-5); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); background: var(--c-surface);
}
.ds .do-box   { border-top: 2px solid var(--c-green); }
.ds .dont-box { border-top: 2px solid var(--c-danger); }
.ds .do-box h4   { margin: 0 0 var(--s-3); color: var(--c-green-text); font-size: 14px; }
.ds .dont-box h4 { margin: 0 0 var(--s-3); color: var(--c-danger); font-size: 14px; }
.ds .do-box ul, .ds .dont-box ul { margin: 0; }
@media (max-width: 640px) { .ds .do-dont { grid-template-columns: 1fr; } }

.ds .checklist {
  margin: 0 0 var(--s-6); padding: var(--s-5);
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
}
.ds .checklist h4 { margin: 0 0 var(--s-3); font-size: 15px; color: var(--c-ink); }
.ds .checklist ul { margin: 0; }
.ds .checklist .check { color: var(--c-green); margin-right: var(--s-2); }

/* ==========================================================================
   FIGURES — anything presented as a number keeps the mono face
   ========================================================================== */

.ds .stats-highlight {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4); margin: 0 0 var(--s-6);
}
.ds .stat-card {
  padding: var(--s-5); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); background: var(--c-surface);
}
.ds .stat-number {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--c-green-text);
}
.ds .stat-label {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint);
}
.ds .stat-desc { display: block; margin-top: var(--s-2); font-size: 13px; color: var(--c-ink-2); }

/* ==========================================================================
   THE ONE-OFF CARDS

   Fourteen names for one component: a bordered panel with a heading and a
   ruled list. Grouped rather than renamed — renaming means editing prose HTML,
   and prose HTML is where mistakes hide.
   ========================================================================== */

.ds .bank-card, .ds .method-card, .ds .stats-card, .ds .comparison-card,
.ds .productivity-card, .ds .guide-card, .ds .chase-card, .ds .military-card,
.ds .paypal-card, .ds .robinhood-card, .ds .tech-card, .ds .format-card,
.ds .security-card, .ds .checklist-card, .ds .step-box, .ds .tool-embed,
.ds .pain-point-section {
  padding: var(--s-5); margin: 0 0 var(--s-5);
  border: 1px solid var(--c-line-2); border-radius: var(--r-card);
  background: var(--c-surface);
}
.ds .bank-card h4, .ds .bank-card h5, .ds .method-card h4, .ds .stats-card h4,
.ds .comparison-card h4, .ds .productivity-card h4, .ds .guide-card h4,
.ds .chase-card h4, .ds .military-card h4, .ds .paypal-card h4,
.ds .robinhood-card h4, .ds .tech-card h4, .ds .format-card h4,
.ds .security-card h4, .ds .checklist-card h4, .ds .step-box h4,
.ds .pain-point-section h3 {
  margin: 0 0 var(--s-3); font-size: 15.5px; font-weight: var(--fw-semi); color: var(--c-ink);
}
.ds .bank-card ul, .ds .method-card ul, .ds .stats-card ul, .ds .comparison-card ul,
.ds .productivity-card ul, .ds .guide-card ul, .ds .chase-card ul,
.ds .military-card ul, .ds .paypal-card ul, .ds .robinhood-card ul,
.ds .tech-card ul, .ds .format-card ul, .ds .security-card ul,
.ds .checklist-card ul, .ds .step-box ul { margin: 0; }

.ds .bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-6); }

.ds .method-header { display: flex; align-items: baseline; gap: var(--s-3); }
.ds .method-header h3 { margin: 0; }
.ds .method-number, .ds .step-number {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--c-green-text); flex: none;
}
.ds .method-rating span { color: var(--c-green-mid); }
.ds .steps-list ol { margin: 0; }
.ds .programmatic-seo { margin: 0 0 var(--s-6); }
.ds .programmatic-seo h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.ds .programmatic-seo .lead { font-size: 18px; color: var(--c-ink); }

/* ==========================================================================
   FAQ, CTA AND RELATED — the tail of every post
   ========================================================================== */

.ds .faq-section { margin: 0 0 var(--s-7); }
.ds .faq-section h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-strong); letter-spacing: var(--tr-head);
  margin: 0 0 var(--s-5); color: var(--c-ink);
}
.ds .faq-item {
  padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line);
  background: none; border-radius: 0;
}
.ds .faq-item:last-child { border-bottom: 0; }
.ds .faq-item h3 { margin: 0 0 var(--s-2); font-size: 16.5px; font-weight: var(--fw-semi); color: var(--c-ink); }
.ds .faq-item p { margin: 0; color: var(--c-ink-2); line-height: var(--lh-body); }

/* The closing call to action. Ink band, the same one the homepage closes on. */
.ds .cta-box {
  margin: 0 0 var(--s-7); padding: clamp(28px, 4vw, 44px);
  background: var(--c-ink); color: #fff;
  border-radius: var(--r-panel); border: 0;
}
.ds .cta-box h3 {
  margin: 0 0 var(--s-3); font-size: clamp(21px, 2.6vw, 27px);
  font-weight: var(--fw-strong); letter-spacing: var(--tr-head); color: #fff;
}
.ds .cta-box p { margin: 0 0 var(--s-5); color: rgba(255, 255, 255, .74); font-size: 15.5px; }
.ds .cta-box a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 46px; padding: 0 var(--s-6);
  background: var(--c-green); color: #fff; text-decoration: none;
  border-radius: var(--r-button); font-weight: var(--fw-semi); font-size: 15px;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.ds .cta-box a:hover { background: var(--c-green-hover); transform: translateY(-1px); }

.ds .related-articles { margin: 0 0 var(--s-7); }
.ds .related-articles h3 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-faint);
  margin: 0 0 var(--s-3);
}
.ds .related-articles h3::before { content: none; }
.ds .related-articles ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line-2); }
.ds .related-articles li { padding: 0; border-bottom: 1px solid var(--c-line); }
.ds .related-articles li:last-child { border-bottom: 0; }
.ds .related-articles a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; font-size: 15.5px; font-weight: var(--fw-medium);
  color: var(--c-ink); text-decoration: none;
  transition: color var(--t-fast) var(--ease-inout);
}
.ds .related-articles a::before { content: none; }
.ds .related-articles a::after { content: "\2192"; color: var(--c-ink-faint); flex: none; }
.ds .related-articles a:hover { color: var(--c-green-text); }
.ds .related-articles a:hover::after { color: var(--c-green-text); }

/* ==========================================================================
   /blog — the index
   ========================================================================== */

.ds .blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-5);
}
.ds .blog-card {
  background: var(--c-surface); border: 1px solid var(--c-line-2);
  border-radius: var(--r-card); overflow: hidden;
  transition: transform var(--t-normal) var(--ease-out),
              box-shadow var(--t-normal) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.ds .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-float);
  border-color: var(--c-green-line);
}
.ds .blog-card-image {
  height: 168px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--c-bg-sunk); border-bottom: 1px solid var(--c-line);
}
.ds .blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The eight gradient tiles (green/blue/purple/orange/teal/indigo/amber/red)
   are gone: a post's colour said nothing about the post. What is left is the
   mint well with a green glyph, which reads as "no image yet" honestly. */
.ds .blog-card-image i { font-size: 30px; color: var(--c-green-mid); opacity: .9; }

/* A card carrying a scene shows the top of it, clipped, with the card's own
   ground behind. The scene is real markup, so it is set smaller here rather
   than scaled — scaling would blur the rules and mis-round the type. */
.ds .blog-card-image.has-scene {
  display: block; height: 168px; padding: var(--s-4) var(--s-4) 0;
  background: var(--c-surface); position: relative;
}
.ds .blog-card-image.has-scene .post-hero { margin: 0; }
.ds .blog-card-image.has-scene .sc {
  font-size: 11px; box-shadow: none;
  border-color: var(--c-line);
}
.ds .blog-card-image.has-scene .sc-pane { padding: var(--s-3) var(--s-4); }
.ds .blog-card-image.has-scene .sc-head { margin-bottom: var(--s-2); }
.ds .blog-card-image.has-scene .sc-tr { padding: 5px 0; }
/* A card is about a third of the width these scenes were drawn for, so the
   last money column is dropped inside one: date, description and a single
   figure are what make the picture read as a statement, and keeping all four
   wrapped the header onto a second line. */
.ds .blog-card-image.has-scene .sc-tr,
.ds .blog-card-image.has-scene .sc-th,
.ds .blog-card-image.has-scene .sc-tr4,
.ds .blog-card-image.has-scene .sc-th4 {
  grid-template-columns: 42px minmax(0, 1fr) 62px;
}
.ds .blog-card-image.has-scene .sc-tr4 > :nth-child(4),
.ds .blog-card-image.has-scene .sc-th4 > :nth-child(4) { display: none; }
/* `convert` splits the card in two, so its right-hand pane is narrower still.
   There the description goes as well: the date and the amount carry it. */
.ds .blog-card-image.has-scene .sc-convert .sc-tr,
.ds .blog-card-image.has-scene .sc-convert .sc-th { grid-template-columns: 42px minmax(0, 1fr); }
.ds .blog-card-image.has-scene .sc-convert .sc-desc,
.ds .blog-card-image.has-scene .sc-convert .sc-th > :nth-child(2) { display: none; }
.ds .blog-card-image.has-scene .sc-step,
.ds .blog-card-image.has-scene .sc-fact,
.ds .blog-card-image.has-scene .sc-check { padding: 9px 0; }
.ds .blog-card-image.has-scene .sc-steps,
.ds .blog-card-image.has-scene .sc-facts,
.ds .blog-card-image.has-scene .sc-checks { padding-inline: var(--s-4); }
/* Fade the clip rather than cutting a row in half. */
.ds .blog-card-image.has-scene::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  background: linear-gradient(to bottom, transparent, var(--c-surface));
  pointer-events: none;
}

.ds .blog-card-content { padding: var(--s-5); }
.ds .blog-card-category {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-green-text);
  margin-bottom: var(--s-3); background: none; padding: 0; border-radius: 0;
}
.ds .blog-card-category::before { content: ""; width: 16px; height: 1px; background: var(--c-green); flex: none; }
.ds .blog-card h2 {
  font-size: 18px; font-weight: var(--fw-semi); letter-spacing: -.015em;
  line-height: 1.35; margin: 0 0 var(--s-3); text-wrap: balance;
}
.ds .blog-card h2 a { color: var(--c-ink); text-decoration: none; }
.ds .blog-card:hover h2 a { color: var(--c-green-text); }
.ds .blog-card p { color: var(--c-ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 var(--s-4); }
.ds .blog-card-meta {
  display: flex; gap: var(--s-4);
  font-family: var(--font-mono); font-size: 11px; color: var(--c-ink-3);
  padding-top: var(--s-3); border-top: 1px solid var(--c-line);
}
.ds .blog-card-meta i { margin-right: 5px; color: var(--c-ink-faint); }

.ds .blog-empty {
  margin: 0; padding: var(--s-9) 0; text-align: center;
  font-size: 15px; color: var(--c-ink-3);
}
.ds .blog-empty a { color: var(--c-green-text); font-weight: var(--fw-medium); }

.ds .blog-pagination {
  display: flex; justify-content: center; gap: var(--s-2);
  flex-wrap: wrap; margin-top: var(--s-8);
}
.ds .blog-pagination .page-link {
  min-width: 40px; height: 40px; padding: 0 var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line-2); border-radius: var(--r-control);
  color: var(--c-ink); text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  background: var(--c-surface);
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ds .blog-pagination .page-link:hover { border-color: var(--c-green); color: var(--c-green-text); }
.ds .blog-pagination .is-current {
  background: var(--c-green); border-color: var(--c-green); color: var(--c-on-green);
}
.ds .blog-pagination .is-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 700px) {
  .ds .blog-grid { grid-template-columns: 1fr; }
  .ds .article-body, .ds .article-content { font-size: 16.5px; }
}

/* ==========================================================================
   SCENES — the blog's visuals, as markup instead of PNG.

   Every blog image used to be a rendered file: 49 PNGs built on the old purple
   brand, none of which survived the green redesign, produced by a tool that is
   not in the repository. Scenes remove that problem rather than re-solving it.
   They are built from these tokens, so a palette change updates every visual;
   they are sharp at any DPI; they cost no image bytes; and their text is real
   text, so it can be selected, searched and read aloud.

   Emitted by blog_scenes.py. Never write one-off visual markup in an article.
   ========================================================================== */

.ds .sc {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
  font-size: 12.5px;
}

/* ---- Panels ------------------------------------------------------------ */

.ds .sc-pane { padding: var(--s-4) var(--s-5); min-width: 0; }
.ds .sc-pane.out { background: var(--c-bg-soft); }
.ds .sc-stack .sc-pane + .sc-pane { border-top: 1.5px solid var(--c-line-strong); }

.ds .sc-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.ds .sc-head b { font-size: 13px; font-weight: var(--fw-semi); color: var(--c-ink); }
.ds .sc-head span {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-faint);
}
.ds .sc-pane.out .sc-head span { color: var(--c-green-text); }

/* The unstructured source: text as bars, because the words are not the point. */
.ds .sc-lines { display: grid; gap: 7px; padding: var(--s-2) 0; }
.ds .sc-lines i { display: block; height: 5px; border-radius: 3px; background: var(--c-line-2); }

.ds .sc-raw {
  margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: var(--c-ink-3); overflow-wrap: anywhere;
}

/* ---- Rows -------------------------------------------------------------- */

.ds .sc-tr {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 68px;
  gap: var(--s-3); padding: 7px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.ds .sc-tr4, .ds .sc-th4 { grid-template-columns: 46px minmax(0, 1fr) 62px 68px; }
.ds .sc-tr:last-child { border-bottom: 0; }
.ds .sc-th, .ds .sc-th4 {
  border-bottom: 1px solid var(--c-line-strong); padding-top: 0;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-faint);
}
.ds .sc-desc { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .sc-r { text-align: right; }
.ds .sc-r.dr { color: var(--c-danger); }
.ds .sc-r.cr { color: var(--c-green-text); }
.ds .sc-bal { color: var(--c-ink-2); }
.ds .sc-total { border-top: 1px solid var(--c-line-strong); font-weight: 500; }

.ds .sc-foot {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans); font-size: 12px; color: var(--c-ink-2);
}
.ds .sc-ok { color: var(--c-green); font-weight: 700; flex: none; }

/* ---- convert: two panes with an arrow between them --------------------- */

.ds .sc-convert {
  display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.25fr);
  align-items: stretch;
}
.ds .sc-convert .sc-pane:first-child { border-right: 1px solid var(--c-line); }
.ds .sc-arrow {
  display: grid; place-items: center;
  color: var(--c-green); font-size: 15px;
  background: var(--c-bg-soft); border-right: 1px solid var(--c-line);
}
@media (max-width: 620px) {
  .ds .sc-convert { grid-template-columns: 1fr; }
  .ds .sc-convert .sc-pane:first-child { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .ds .sc-arrow { border-right: 0; padding: 4px 0; transform: rotate(90deg); }
}

/* ---- steps ------------------------------------------------------------- */

.ds .sc-steps { padding: var(--s-3) var(--s-5); }
.ds .sc-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); align-items: baseline;
}
.ds .sc-step:last-child { border-bottom: 0; }
.ds .sc-n { font-family: var(--font-mono); font-size: 11px; color: var(--c-green-text); }
.ds .sc-step b { display: block; font-size: 13.5px; font-weight: var(--fw-semi); color: var(--c-ink); }
.ds .sc-step i { display: block; font-style: normal; font-size: 12.5px; color: var(--c-ink-2); margin-top: 2px; }

/* ---- compare ----------------------------------------------------------- */

.ds .sc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds .sc-col { padding: var(--s-4) var(--s-5); }
.ds .sc-col + .sc-col { border-left: 1px solid var(--c-line); }
.ds .sc-col.yes { background: var(--c-bg-soft); }
.ds .sc-col-h {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.ds .sc-col.no  .sc-col-h { color: var(--c-danger); }
.ds .sc-col.yes .sc-col-h { color: var(--c-green-text); }
.ds .sc-col ul { list-style: none; margin: 0; padding: 0; }
.ds .sc-col li {
  position: relative; padding: 6px 0 6px var(--s-5);
  border-bottom: 1px solid var(--c-line);
  font-size: 12.5px; color: var(--c-ink-2); line-height: 1.5;
}
.ds .sc-col li:last-child { border-bottom: 0; }
.ds .sc-col li::before { position: absolute; left: 0; top: 6px; font-weight: 700; }
.ds .sc-col.no  li::before { content: "\00d7"; color: var(--c-danger); }
.ds .sc-col.yes li::before { content: "\2713"; color: var(--c-green); }
@media (max-width: 620px) {
  .ds .sc-compare { grid-template-columns: 1fr; }
  .ds .sc-col + .sc-col { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* ---- facts and checks -------------------------------------------------- */

.ds .sc-facts { padding: var(--s-2) var(--s-5); }
.ds .sc-fact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); align-items: baseline;
}
.ds .sc-fact:last-child { border-bottom: 0; }
.ds .sc-fact span { font-size: 13px; color: var(--c-ink-2); }
.ds .sc-fact b {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--c-ink); text-align: right;
}

.ds .sc-checks { padding: var(--s-2) var(--s-5); }
.ds .sc-check {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); align-items: baseline;
}
.ds .sc-check:last-child { border-bottom: 0; }
.ds .sc-check span:last-child { font-size: 13px; color: var(--c-ink-2); line-height: 1.5; }

/* ---- figure and hero wrappers ------------------------------------------ */

.ds .post-hero { margin: clamp(24px, 4vw, 40px) 0 0; }
/* A rendered hero (gen_hero_image.py) rather than a live scene. It brings its
   own dark ground, so it needs a frame to sit in, not a border to fight. */
.ds .post-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-card); border: 1px solid var(--c-line-2);
}
.ds .post-fig  { margin: 0 0 var(--s-6); }
/* A rendered step figure (gen_blog_figures.py). It carries its own mint ground
   and window chrome, so the frame here is a hairline, not a second card. */
.ds .post-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 3;
  border-radius: var(--r-card); border: 1px solid var(--c-line-2);
}
.ds .post-fig figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-3); font-size: 12.5px; color: var(--c-ink-3); line-height: 1.5;
}
.ds .post-fig-step {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-green-text);
  flex: none;
}