:root{
  --ink:#17142B; --ink-soft:#4F4A6B; --ground:#ECEAF2; --panel:#F6F5FA; --rule:#D9D5E6;
  --beanie:#F0B41C; --plaid:#D23B3B; --teal:#157F78; --violet:#5B4BC4;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Source Serif 4',Georgia,serif; --mono:'DM Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:1.12rem;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:760px}
.k{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.k a{text-decoration:none;border-bottom:1px solid currentColor}

/* bar */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;padding:12px 28px;background:var(--ink);color:#fff;font-family:var(--display)}
.bar .name{font-weight:700;text-decoration:none;margin-right:auto;white-space:nowrap}
.bar nav{display:flex;gap:20px}
.bar nav a{text-decoration:none;font-size:.98rem;color:#DDD9EE}
.bar nav a.here,.bar nav a:hover{color:var(--beanie)}
.bar .work{color:#fff;text-decoration:none;font-weight:700;padding:7px 16px;border-radius:999px;border:2px solid #fff;white-space:nowrap}
.bar .work:hover{background:#fff;color:var(--ink)}
.bar .hire{background:var(--beanie);color:var(--ink);text-decoration:none;font-weight:700;padding:9px 18px;border-radius:999px;white-space:nowrap}
@media (max-width:560px){.bar{gap:12px;padding:10px 16px}.bar nav{gap:12px}.bar nav a{font-size:.9rem}.bar .hire,.bar .work{padding:7px 11px;font-size:.84rem}.bar nav a.here{display:none}.bar .name{font-size:.95rem}.bar nav a[href$=".pdf"]{display:none}}

/* index */
.top{background:var(--ink);color:#F4F2FA;padding:74px 0 64px}
.top .k{color:var(--beanie)}
.top h1{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;letter-spacing:-.012em;margin:14px 0 0;max-width:13ch}
.top .lede{max-width:58ch;margin:22px 0 0;color:#DDD9EE;font-size:1.15rem}
.list{padding:56px 0 80px}
.feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px;align-items:center;text-decoration:none;background:var(--ink);color:#F4F2FA;border-radius:18px;overflow:hidden;margin-bottom:46px;transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.feat:hover{transform:translateY(-6px)}
.feat img{width:100%;height:100%;min-height:300px;object-fit:cover}
.feat div{padding:30px 34px 30px 0}
.feat .k{color:var(--beanie)}
.feat b{display:block;font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.06;margin:10px 0 12px}
.feat p{margin:0;color:#DDD9EE;font-size:1.02rem;line-height:1.5}
.feat i{display:inline-block;font-style:normal;font-family:var(--display);font-weight:700;background:var(--beanie);color:var(--ink);padding:10px 18px;border-radius:999px;margin-top:20px}
@media (max-width:800px){.feat{grid-template-columns:1fr;gap:0}.feat img{min-height:0;aspect-ratio:16/9}.feat div{padding:22px}}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--ink);box-shadow:0 14px 34px rgba(23,20,43,.18);transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.card:hover img{transform:translateY(-6px)}
.card .k{display:block;margin-top:14px}
.card b{display:block;font-family:var(--display);font-weight:800;font-stretch:84%;font-size:1.32rem;line-height:1.12;margin-top:6px}
.card p{margin:8px 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.45}

/* article */
.post{padding:56px 0 40px}
.post h1{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(2.2rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.012em;margin:14px 0 16px}
.by{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);margin:0 0 30px}
.hero{margin:0 auto 36px}
.hero img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:18px;background:var(--ink);box-shadow:0 30px 70px rgba(23,20,43,.28)}
.answer{background:var(--beanie);border-radius:16px;padding:22px 26px;margin:0 0 34px}
.answer span{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.answer p{margin:8px 0 0;font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.36}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.1;margin:1.7em 0 .55em}
.prose ul{margin:0 0 1.2em;padding-left:1.2em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--plaid)}
.prose b{font-weight:600}
.prose a{color:var(--violet)}
.prose .pull{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.12;border-left:6px solid var(--plaid);padding:4px 0 4px 20px;margin:1.3em 0}
.cta{background:var(--ink);color:#F4F2FA;border-radius:18px;padding:34px;margin:48px 0 10px}
.cta .k{color:var(--beanie)}
.cta h2{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.06;margin:10px 0 12px}
.cta p{margin:0 0 22px;color:#DDD9EE;font-size:1.04rem}
.btn{display:inline-block;font-family:var(--display);font-weight:700;text-decoration:none;background:var(--beanie);color:var(--ink);padding:13px 22px;border-radius:999px;margin:0 10px 8px 0}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn:hover{background:#fff;color:var(--ink)}
.more{background:var(--panel);padding:56px 0 70px;border-top:1px solid var(--rule)}
.more h2{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:1.9rem;margin:0 0 26px}
.foot{background:var(--ink);color:#C9C5E0;padding:36px 0;font-family:var(--display);font-size:.98rem}
.foot p{margin:0 0 6px}
.foot b{color:#fff}
.foot a{color:#fff}
@media (max-width:560px){body{font-size:1.06rem}.wrap{padding:0 18px}.post{padding-top:36px}.cta{padding:24px}.answer{padding:18px 20px}}
.hero figcaption{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);margin-top:8px;text-align:right}
.diagram{margin:0 0 34px}
.diagram img{width:100%;border-radius:14px;box-shadow:0 18px 44px rgba(23,20,43,.22)}

/* ---- article, second pass: title inside the image, a measured column, a table of contents ---- */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--plaid);transform:scaleX(0);transform-origin:0 50%;z-index:60}
.post{padding:0 0 40px}
.phero{position:relative;min-height:min(74vh,640px);display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,20,43,.96) 0%,rgba(23,20,43,.78) 34%,rgba(23,20,43,.3) 70%,rgba(23,20,43,.18) 100%)}
.pheroin{position:relative;z-index:1;width:100%;padding-top:120px;padding-bottom:46px}
.phero .k{color:var(--beanie)}
.phero h1{font-family:var(--display);font-weight:800;font-stretch:84%;font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.012em;margin:14px 0 16px;max-width:17ch;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.phero .by{color:#DDD9EE;margin:0}
.phero .credit{position:absolute;right:14px;bottom:10px;z-index:1;font-family:var(--mono);font-size:.66rem;color:rgba(255,255,255,.6)}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start;padding-top:46px}
.col{max-width:68ch;min-width:0}
.toc{position:sticky;top:84px;font-family:var(--display)}
.toc ol{list-style:none;margin:12px 0 0;padding:0;border-left:2px solid var(--rule)}
.toc a{display:block;text-decoration:none;font-size:.9rem;line-height:1.3;color:var(--ink-soft);padding:7px 0 7px 14px;margin-left:-2px;border-left:2px solid transparent}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:700;border-left-color:var(--plaid)}
.prose{font-size:1.16rem;line-height:1.65}
.prose p{margin:0 0 1.2em}
.prose h2{scroll-margin-top:84px}
.next{display:block;text-decoration:none;border:2px solid var(--ink);border-radius:16px;padding:22px 26px;margin:22px 0 0;transition:background .2s,color .2s}
.next b{display:block;font-family:var(--display);font-weight:800;font-stretch:84%;font-size:1.5rem;line-height:1.12;margin-top:6px}
.next:hover{background:var(--ink);color:#fff}.next:hover .k{color:var(--beanie)}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;gap:26px;padding-top:30px}
  .toc{position:static;background:var(--panel);border-radius:14px;padding:16px 18px}
  .toc ol{border:0;margin-top:8px;display:grid;gap:2px}
  .toc a{padding:6px 0;border:0;margin:0}
  .toc a.on{font-weight:400;color:var(--ink-soft)}
  .col{max-width:none}
}
@media (max-width:560px){.phero{min-height:68vh}.pheroin{padding-bottom:30px}.prose{font-size:1.09rem}}
.toc summary{cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
@media (min-width:981px){.toc summary{pointer-events:none}}
@media (max-width:980px){.toc{padding:14px 18px}.toc summary::after{content:" +";color:var(--plaid);font-weight:700}.toc details[open] summary::after{content:" −"}.toc ol{margin-top:10px}}
@media (max-width:560px){.answer p{font-size:1.06rem;line-height:1.4}}
.cta .fine{font-family:var(--mono);font-size:.76rem;color:#A9A4C6;margin:14px 0 0}
.midcta{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;margin:2.2em 0 .4em;font-family:var(--display)}
.midcta b{font-weight:700;font-size:1.12rem;line-height:1.25}
.midcta a{flex:none;background:var(--beanie);color:var(--ink);text-decoration:none;font-weight:700;padding:10px 18px;border-radius:999px;white-space:nowrap}
.midcta a:hover{background:#fff}