/* Blog (J-56). Loaded after style.css on /blog/ pages only, so style.css and
   STYLE_VERSION stay as they are. Reading width, one type scale, DESIGN.md's
   small headers. */
.blog-wrap{ padding:40px 0 72px; }
.blog-post{ max-width:720px; }
.blog-h1{ font-family:var(--font-display); font-weight:400; font-size:44px; line-height:1.05; letter-spacing:-0.5px; margin:14px 0 10px; }
.blog-dates{ margin:0 0 24px; }
.blog-hero{ margin:0 0 28px; }
.blog-hero img, .blog-body figure img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line); }
.blog-body{ font-size:17px; line-height:1.7; }
.blog-body p, .blog-body ul, .blog-body ol, .blog-body blockquote, .blog-body pre, .blog-body figure{ margin:0 0 18px; }
.blog-body h2{ font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1.15; margin:36px 0 12px; }
.blog-body h3{ font-size:20px; font-weight:600; margin:28px 0 8px; }
.blog-body h4{ font-size:17px; font-weight:600; margin:24px 0 6px; }
.blog-body a:not(.btn){ text-decoration:underline; text-underline-offset:3px; }
.blog-body ul, .blog-body ol{ padding-left:22px; }
.blog-body li{ margin:0 0 6px; }
.blog-body blockquote{ border-left:3px solid var(--acc-deep, var(--ink)); padding:2px 0 2px 16px; color:var(--mute); }
.blog-body code{ font-family:var(--font-mono); font-size:14px; background:var(--cream); padding:1px 5px; border-radius:6px; }
.blog-body pre{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:14px; overflow-x:auto; }
.blog-body pre code{ background:none; padding:0; }
.blog-body figcaption{ font-size:14px; color:var(--mute); margin-top:8px; }
.blog-get{ margin:28px 0; }
/* "In this post": the contents list a post shows from 3 H2 sections. */
.blog-toc{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 20px; margin:0 0 28px; }
.blog-toc .cap{ margin:0; }
.blog-toc ol{ margin:8px 0 0; padding-left:20px; }
.blog-toc li{ margin:4px 0; }
.blog-toc a{ text-decoration:underline; text-underline-offset:3px; }
/* Callouts (J-59, Blog Hub style): a shaded box, a dark left border, the bold
   label leading the text. "Scrap tip" is the opinion box, "Related reading"
   the link to another post. */
.blog-body blockquote.blog-callout{ background:var(--cream); border-left:4px solid var(--ink); border-radius:0 12px 12px 0; padding:16px 20px; color:var(--ink); margin:24px 0; }
.blog-callout p{ margin:0; }
.blog-callout strong{ font-weight:700; }
.blog-callout-related{ border-left-color:var(--mute); }
/* Tables: header row, short cells, scroll sideways on a phone instead of
   squeezing. */
.blog-table{ margin:24px 0; overflow-x:auto; }
.blog-table table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; }
.blog-table th, .blog-table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.blog-table thead th{ background:var(--cream); font-weight:600; border-bottom:2px solid var(--ink); }
.blog-related{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.blog-related h2{ font-size:18px; font-weight:600; margin:0 0 8px; }
.blog-related a{ text-decoration:underline; text-underline-offset:3px; }
/* Category links under the lede: small, one row, the current one marked. */
.blog-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.blog-cats a{ font-size:14px; font-weight:600; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-pill); }
.blog-cats a[aria-current="page"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.blog-list{ display:grid; gap:16px; margin-top:28px; max-width:760px; }
.blog-card{ display:block; padding:22px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.blog-card h2{ font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.15; margin:8px 0; }
.blog-card p{ margin:0 0 12px; color:var(--mute); }
.blog-card:hover{ border-color:var(--ink); }
/* J-78: the hero as a thumbnail, beside the text (16:9 box held before it loads). */
.blog-card:has(> .blog-thumb){ display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:stretch; }
.blog-thumb{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:var(--cream); margin:0 0 12px; }
/* Desktop: the photo fills the card's full height (Andre, 10-04: "needs to taller"); the text sets that height, so nothing shifts. */
.blog-card:has(> .blog-thumb) .blog-thumb{ margin:0; height:100%; min-height:200px; aspect-ratio:auto; }
.blog-card-text{ display:block; min-width:0; }
@media (max-width:760px){ .blog-card:has(> .blog-thumb){ grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:start; } .blog-card:has(> .blog-thumb) .blog-thumb{ height:auto; min-height:0; aspect-ratio:16/9; } }
.blog-pages{ display:flex; justify-content:space-between; gap:16px; margin-top:24px; max-width:760px; }
.blog-pages a{ padding:11px 0; font-weight:600; }
@media (max-width:680px){
  .blog-h1{ font-size:34px; }
  .blog-body{ font-size:16px; }
  .blog-body h2{ font-size:26px; }
}