Blog/Featured
\n \n${esc(f.excerpt)}
\n ${draftTag(f)?''+draftTag(f)+\"
\":\"\"}\n${fmtDate(p.date)}\\xb7${minutes(p.read)} min read
\n ${draftTag(p)}\n${esc(p.review)}
${esc(p.excerpt)}
\n${esc(p.pull)}
A note from ${esc(first)}
\n${esc(p.endText)}
\nOriginally published on ${esc(p.sourceLabel)} ↗
`:\"\";return`\n ${src}\n \n `;}/* C-RAIL \"The work behind this post.\" from the post's Related work (comma separated case study slugs), as\n pages/_post/gen.py + site/components.py write it */export function relatedList(related){return String(related||\"\").split(/[,\\s]+/).map(s=>s.trim().toLowerCase()).filter(Boolean);}export function railHTML(related,slug){const rel=relatedList(related);if(!rel.length)return\"\";const work=__u.CMS&&__u.CMS.work||[];const n=rel.map(s=>(work.find(w=>w.slug===s)||{}).client).filter(Boolean);const names=n.length<=1?n[0]||\"\":n.slice(0,-1).join(\", \")+\" and \"+n[n.length-1];const word=rel.length===1?\"project\":\"projects\";const text=rel.length>=3?`${names}: the ${word} this post draws on, written up in full.`:`Starting with ${names}, the ${word} this post draws on, written up in full.`;const cfg={spacer:\"m\",frame:\"Related work\",title:[\"The work behind\",\"this post.\"],text,service:\"\",order:rel,only:rel.length>=3,limit:0,aria:\"Work this post draws on\",uid:\"c-rail-1\",id:\"c-rail-1\",page:\"blog-\"+slug,titleLines:[{t:\"The work behind\",d:\"\"},{t:\"this post.\",d:\"d1\"}],cta:{label:\"See all work\",href:\"/work\"}};return wrapPage(`${esc(p.excerpt)}
\n ${p.status!==\"published\"?'Draft for Jonny\\'s review':\"\"}`).join(\"\");if(!others.length)kr.closest(\".band\").hidden=true;}/* reveals (one per section, each with its own technique in post.css) *//* (Framer, C20 \"end note empty until refresh\") arriving from a link (a /blog row, the nav's Blog panel, Keep reading: warm\n cache) Framer can hydrate BlogPostArticle AFTER BlogPostTalk has started this script. The sandbox's querySelectorAll only\n sees sections that have mounted, so the pull quote and end note were never observed and stayed at opacity 0.\n watchSecs() also picks up sections that mount later (ublog:mount + the timers below); revealDue() is a scroll fallback. */const SECS=\".bl-ph,.bl-pq,.bl-en,.bl-kr\";const io=reduce||!(\"IntersectionObserver\"in window1)?null:new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add(\"in\");io.unobserve(e.target);}}),{threshold:.16,rootMargin:\"0px 0px -8% 0px\"});const seen=new WeakSet,pend=[];function watchSecs(){document1.querySelectorAll(SECS).forEach(s=>{if(seen.has(s))return;seen.add(s);if(!io||s.getBoundingClientRect().bottom<=0)s.classList.add(\"in\")// (Framer) already scrolled past: reveal at once\n;else{io.observe(s);pend.push(s);}});}function revealDue(){for(let i=pend.length-1;i>=0;i--){const s=pend[i];if(!s.isConnected||s.classList.contains(\"in\")){pend.splice(i,1);continue;}/* same rule as the observer (16% of the section inside the viewport less its bottom 8%), so it never reveals earlier */const r=s.getBoundingClientRect(),vb=innerHeight*.92,vis=Math.min(r.bottom,vb)-Math.max(r.top,0);if(r.height&&vis>0&&(vis/r.height>=.16||vis>=vb*.5)){s.classList.add(\"in\");io&&io.unobserve(s);pend.splice(i,1);}}}watchSecs();/* contents (built from the rich text h2s) */const toc=document1.getElementById(\"blToc\"),tocM=document1.getElementById(\"blTocM\"),tocm=tocM&&tocM.querySelector(\"ol\");const slugify=t=>t.toLowerCase().replace(/&/g,\"and\").replace(/&/g,\"and\").replace(/[^a-z0-9]+/g,\"-\").replace(/^-|-$/g,\"\");let hs=[],tocLinks=[];function buildToc(){hs=[...document1.querySelectorAll(\".bl-prose h2\")];const used={};hs.forEach(h=>{let id=slugify(h.textContent)||\"section\";if(used[id])id+=\"-\"+ ++used[id];else used[id]=1;h.id=id;});const li=(h,i)=>`