/* The Blog: stories behind single pieces. It reads like the Lab (style.css + lab.css: the article, figures, kinds,
   quotes, lessons, the "what's real" box); this file adds only what those lack. */

/* numbers in a story: a small table that stays inside the text column, and scrolls sideways on a phone */
.prose .table-wrap{margin-block:var(--lab-space);overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.45;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose td.num,.prose th.num{text-align:right;white-space:nowrap}
.prose tr.now td{font-weight:600}
@media(max-width:480px){.prose table{font-size:.8125rem}.prose th,.prose td{padding-right:8px}.prose th{font-size:11px;letter-spacing:.04em}}
.prose caption{caption-side:bottom;padding-top:10px;text-align:left;font-size:var(--lab-small);color:var(--muted)}

/* the ideas we weighed: a compact two-column list */
.prose .ideas{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-block:20px;padding:0;list-style:none}
.prose .ideas li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;margin:0;padding:14px 16px;border-radius:var(--r-tile);background:var(--misty)}
.prose .ideas li b{display:block}
@media(min-width:720px){.prose .ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the full version list, folded away at the end */
.versions{max-width:var(--measure);margin-block:var(--lab-space)}
.versions summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600}
.versions[open] summary{margin-bottom:8px}

/* a call to the shop at the end of a story */
.to-shop{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;max-width:var(--measure);margin-block:var(--lab-space);padding:20px 24px;border-radius:var(--r-tile);background:var(--peach)}
.to-shop p{margin:0;flex:1 1 18rem}

/* the front page: one line under the title, as wide as the Lab's lede */
.blog-hero .lab-lede .lead{max-width:30em}
/* the written story runs the full width, picture beside the words; the ones coming sit three to a row below it */
.episodes.feature{grid-template-columns:minmax(0,1fr)}
.episodes.coming{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
@media(min-width:900px){
  .episodes.feature .episode{grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);column-gap:24px;align-items:center}
  .episodes.feature .ep-pic{grid-column:1;grid-row:1/span 3}
  .episodes.feature .n{grid-column:2;grid-row:1/span 3;align-self:start}
  .episodes.feature h3,.episodes.feature .hook,.episodes.feature .when{grid-column:3}
  .episodes.feature h3{align-self:end}
}
@media(max-width:899px){.episodes.coming{grid-template-columns:minmax(0,1fr)}}
.prose .ideas .idea-icon{box-sizing:content-box;width:26px;height:26px;padding:9px;margin:0;border-radius:50%;background:var(--paper)}
/* every picture in a story is the same width (Denis, 2026-10-02: widths were all over the place), side-by-side pairs too */
.article .pair{width:min(50rem,100%)}

/* a short explainer inside a story (What's TRIZ?): a white card with labelled lines, like the Lab's "what's real" box */
.prose .explainer{margin-block:var(--lab-space);padding:clamp(18px,2.2vw,26px);border:1.5px solid var(--line);border-radius:var(--r-tile);background:#fff}
.prose .explainer h3{margin:0 0 8px;font-size:clamp(20px,1.6vw,23px);line-height:1.25}
.prose .explainer p{margin:0}
.prose .explainer dl{display:grid;gap:14px;margin:18px 0 0}
.prose .explainer dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prose .explainer dd{margin:2px 0 0}
.prose .explainer dl>div{position:relative;min-height:44px;padding-left:58px}
.prose .explainer dt .idea-icon{position:absolute;left:0;top:0;box-sizing:content-box;width:26px;height:26px;padding:9px;border-radius:50%;background:var(--misty)}