/* Long-form article chrome, shared by every post in blog/.
   Extracted from blog/sow-a-sponsor-will-sign.html, which carried
   this inline. Ten more posts were about to duplicate it, and a
   copy per article is a palette waiting to drift. Loaded after
   site.css; uses its tokens only, defines no new colours. */

.shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem);padding-block:clamp(2.25rem,5vh,3.5rem)}
@media(max-width:1100px){.shell{grid-template-columns:1fr;max-width:680px;margin-inline:auto}}

/* left rail: contents */
.toc{position:sticky;top:5.5rem;align-self:start;font-size:.82rem}
.toc h2{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3-lo);margin-bottom:.85rem}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;border-left:1px solid var(--line)}
.toc a{display:block;padding:.42rem 0 .42rem .85rem;color:var(--ink-3-lo);transition:all var(--fast);line-height:1.4}
.toc a::before{content:counter(t,decimal-leading-zero) "  ";color:var(--line);font-weight:700}
.toc a:hover,.toc li.on > a{color:var(--ink)}
.toc li.on{border-left-color:var(--lime);box-shadow:-1px 0 0 var(--lime)}
@media(max-width:1100px){.toc{display:none}}

/* right rail */
.rail{position:sticky;top:5.5rem;align-self:start}
.rail .box{border:1px solid var(--line);padding:1.35rem 1.3rem 1.5rem}
.rail .box b{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-ink-sm);display:block;margin-bottom:.7rem}
.rail .box h4{font-size:1.02rem;margin-bottom:.5rem}
.rail .box p{font-size:.84rem;color:var(--ink-2);line-height:1.5;margin-bottom:1.1rem}
.rail .share{margin-top:1.5rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3-lo)}
.rail .share ul{list-style:none;display:flex;gap:.4rem;margin-top:.6rem}
.rail .share a,.rail .share button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);
  background:var(--white);font-size:.72rem;font-weight:700;font-family:inherit;letter-spacing:normal;
  text-transform:none;color:inherit;cursor:pointer;transition:all var(--fast)}
.rail .share a:hover,.rail .share button:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}
.rail .share .share-status{margin-top:.6rem;font-size:.72rem;letter-spacing:normal;text-transform:none;
  color:var(--lime-ink-sm);min-height:1em}
@media(max-width:1100px){.rail{display:none}}

/* article body */
.body{font-family:var(--serif);font-size:1.11rem;line-height:1.68;color:#22323D}
.body > p{margin-bottom:1.35rem}
.body h2{font-family:var(--font);font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.025em;
  margin:2.75rem 0 .9rem;max-width:26ch;color:var(--ink)}
.body h3{font-family:var(--font);font-size:1.12rem;margin:2rem 0 .6rem;color:var(--ink)}
.body strong{font-weight:600;color:var(--ink)}
.body a{color:var(--lime-ink-sm);text-decoration:underline;text-underline-offset:3px}
.body ul,.body ol{margin:0 0 1.35rem 0;padding-left:1.3rem}
.body li{margin-bottom:.5rem}
.body blockquote{border-left:3px solid var(--lime);padding:.3rem 0 .3rem 1.35rem;margin:1.9rem 0;
  font-style:italic;color:var(--ink)}
.body blockquote cite{display:block;font-family:var(--font);font-style:normal;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3-lo);margin-top:.8rem}
.body .callout{font-family:var(--font);background:var(--grey);padding:1.35rem 1.4rem;margin:1.9rem 0;
  font-size:.94rem;line-height:1.6;color:var(--ink-2);border-left:3px solid var(--ink)}
.body .callout b{color:var(--ink)}
.body table{width:100%;border-collapse:collapse;font-family:var(--font);font-size:.88rem;margin:1.7rem 0}
.body th{text-align:left;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3-lo);border-bottom:2px solid var(--ink);padding:0 .8rem .55rem 0}
.body td{border-bottom:1px solid var(--line);padding:.65rem .8rem .65rem 0;color:var(--ink-2);vertical-align:top}
.body td:first-child{color:var(--ink);font-weight:600}
.body figure{margin:2rem 0}
.body figure img{border:1px solid var(--line)}
.body figcaption{font-family:var(--font);font-size:.78rem;color:var(--ink-3-lo);margin-top:.7rem}

.byline{display:flex;gap:1.1rem;align-items:center;padding-block:1.35rem;
  border-block:1px solid var(--line);margin-bottom:2.25rem}
.byline .av{width:42px;height:42px;background:var(--sage);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%)}
.byline b{font-size:.92rem;display:block}
.byline span{font-size:.78rem;color:var(--ink-3-lo)}
.byline .when{margin-left:auto;font-size:.78rem;color:var(--ink-3-lo);text-align:right}

.next{border-top:1px solid var(--line);margin-top:3rem;padding-top:2rem}
.next h3{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3-lo);margin-bottom:1.1rem}
.next .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem}
.next a{border:1px solid var(--line);padding:1.2rem 1.25rem 1.35rem;transition:border-color var(--fast)}
.next a:hover{border-color:var(--ink)}
.next .tag{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime-ink-sm);display:block;margin-bottom:.55rem}
.next h4{font-size:.98rem;font-weight:700;letter-spacing:-.018em;line-height:1.32}

/* ── Article hero image ───────────────────────────────────────
   Sits between the byline and the opening paragraph. width and
   height are set on the element as well as in CSS so the browser
   reserves the space before the image loads and the text below it
   does not jump (cumulative layout shift).

   No caption: these are editorial tone-setters rather than
   evidence, and a caption would imply they document something. */
.hero-img{margin:0 0 1.7rem}
.hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}