/* “Where is the money now?” case study: panels, sketch, chain. Scoped to the essay body. */
:root{--card:#EEE8DC;--sheet:#FCFAF6;--soft:#6E6155;--faint:#A69C90;--up:#2F6B45;--down:#9E3A2B}
.abody{--line:rgba(31,28,26,.16)}
.abody{display:grid;gap:1.05em;font:clamp(17px,.45vw + 13px,19.5px)/1.65 var(--read)}
.abody h2{margin:1.3em 0 0;font:600 clamp(26px,3.2vw,32px)/1.1 var(--display);text-wrap:balance}
.abody ul{margin:0;padding-inline-start:1.1em;display:grid;gap:.3em}
.abody .made{font:700 1.02em var(--hand);color:var(--pen)}
.abody .num{font-variant-numeric:tabular-nums}
.abody .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:.4em 0}
.abody .stat{background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;display:grid;gap:2px}
.abody .stat b{font:600 clamp(24px,3vw,30px)/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.abody .stat>span{font:500 12px/1.35 var(--small);color:var(--soft)}
.abody .stat.neg b{color:var(--down)}
@media (max-width:560px){.abody .stats{grid-template-columns:1fr}}
.abody /* interactive panels */
.panel{background:var(--card);border-radius:16px;padding:18px clamp(14px,3vw,22px) 20px;display:grid;gap:14px;font:15px/1.5 var(--small)}
.abody .ptitle{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.abody .ptitle b{font:700 21px/1 var(--hand);color:var(--pen)}
.abody .ptitle small{font:500 12px var(--small);color:var(--soft)}
.abody .seg{display:flex;flex-wrap:wrap;gap:6px}
.abody .seg button{font:500 13px var(--small);border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);padding:6px 12px;border-radius:999px;cursor:pointer;transition:transform 140ms var(--eo),background 160ms ease,color 160ms ease}
.abody .seg button:active{transform:scale(.97)}
.abody .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.abody button:focus-visible,.abody a:focus-visible,.abody input:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.abody .steps{display:flex;flex-wrap:wrap;gap:6px}
.abody .what{margin:0;font:16px/1.5 var(--read)}
.abody /* one sale,.abody sketched straight onto the page */
.wbp{background:transparent;padding-inline:0}
.abody .steprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.abody .steprow .hint{font:700 18px/1 var(--hand);color:var(--soft)}
.abody .stop{transition:transform 140ms var(--eo),color 160ms ease}
.abody .md{transition:transform 140ms var(--eo),color 160ms ease,text-decoration-color 160ms ease}
.abody .stop:active,.abody .md:active{transform:scale(.97)}
.abody .stop:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:6px}
.abody .panel .track{margin:4px 0 2px}
.abody .wb{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);align-items:start;gap:0 8px;padding:10px 0 0;min-height:176px}
.abody .wb .col{display:grid;align-content:start;gap:6px;min-width:0}
.abody .wb .col>div{display:grid;align-content:start;gap:6px}
.abody .wb .er{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.abody .wb .w.tag{font:700 17px/1.1 var(--hand);color:var(--pen);opacity:.75;transform:rotate(-3deg)}
.abody .modes{margin:0;font:16px/1.5 var(--read);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.abody .md{background:none;border:0;padding:2px 2px;font:700 21px/1 var(--hand);color:var(--soft);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:color 160ms ease,text-decoration-color 160ms ease}
.abody .md[aria-pressed="true"]{color:var(--pen);text-decoration-color:rgba(47,79,162,.82)}
.abody .md:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:4px}
.abody .wb h3{position:relative;margin:0 0 6px;font:700 24px/1.1 var(--hand);color:var(--ink);justify-self:start}
.abody .wb .ul{position:absolute;left:-2px;right:-4px;bottom:-5px;width:calc(100% + 6px);height:8px;overflow:visible}
.abody .wb .w{position:relative;margin:0;font:700 22px/1.15 var(--hand);color:var(--pen);justify-self:start;clip-path:inset(-20% 100% -20% 0)}
.abody .wb .w.sm{font-size:17px;color:var(--soft)}
.abody .wb .w.on{clip-path:inset(-20% -12% -20% -4%)}
.abody .wb .w.x::after{content:"";position:absolute;left:-3px;right:-3px;top:55%;border-top:2px solid var(--pen);transform:rotate(-2deg);transform-origin:left;animation:strike 260ms cubic-bezier(.45,.05,.35,1) both}
.abody .wb .w.x{opacity:.6}
@keyframes strike{from{transform:rotate(-2deg) scaleX(0)}}
.abody .wb .ln{fill:none;stroke:rgba(47,79,162,.82);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.abody .wb h3 .ln{stroke:var(--ink);stroke-width:1.5}
.abody .wb .sigl{display:grid;justify-items:start;margin-top:8px;width:160px}
.abody .wb .sigw{width:136px;height:38px;overflow:visible;margin-bottom:-4px}
.abody .wb .sigl small{width:100%;border-top:1.5px solid var(--ink);padding-top:3px;font:500 11px var(--small);color:var(--soft)}
.abody .wb .arr{display:grid;justify-items:center;padding-top:30px;gap:0}
.abody .wb .arr .w.sm{justify-self:center;margin-bottom:-6px}
.abody .wb .arr svg{width:60px;height:34px;overflow:visible}
.abody .wb .cashw{position:relative;justify-self:start}
.abody .wb .ring{position:absolute;left:-14px;top:-7px;width:calc(100% + 28px);height:calc(100% + 14px);overflow:visible}
.abody .wb .cash{font-size:30px}
@media (max-width:620px){.abody .wb{grid-template-columns:1fr;gap:4px}.abody .wb .arr{padding:0;justify-content:start;justify-items:start;padding-inline-start:12px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;gap:6px}.abody .wb .arr svg{transform:rotate(90deg);width:40px;grid-row:1;grid-column:1}.abody .wb .arr .w.sm{grid-column:2;margin:0}}
.abody /* ledgers */
.ledgers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.abody .ledger{background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:10px 12px 12px}
.abody .ledger h3{margin:0 0 6px;font:600 12px var(--small);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.abody .row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--line);font:15px/1.3 var(--read)}
.abody .row:first-of-type{border-top:0}
.abody .row span:last-child{font-variant-numeric:tabular-nums;font-family:var(--small);font-weight:500}
.abody .row.zero span{color:var(--soft)}
.abody .row>span:last-child{position:relative}
.abody .row svg.pc{position:absolute;left:-10px;top:-6px;overflow:visible;pointer-events:none}
.abody .row svg.pc path{fill:none;stroke:rgba(47,79,162,.82);stroke-width:1.6;stroke-linecap:round}
.abody .row small.note{font:12px var(--small);color:var(--soft)}
.abody /* shared: a ledger that groups by what the money is doing */
.book{background:var(--sheet);border-radius:12px;box-shadow:0 0 0 1.5px var(--ink);padding:14px 16px 12px}
.abody .book h3{margin:0 0 10px;font:600 12px var(--small);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.abody .grp{display:grid;gap:0}
.abody .grp+.grp{margin-top:12px}
.abody .grp>small{font:600 11px var(--small);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.abody .ln{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font:16px/1.3 var(--read)}
.abody .ln .v{position:relative;font:600 16px var(--small);font-variant-numeric:tabular-nums lining-nums;transition:color 160ms ease}
.abody .ln.zero{color:var(--faint)}.abody .ln.zero .v{color:var(--faint);font-weight:500}
.abody .ln .v svg{position:absolute;left:-10px;top:-6px;overflow:visible;pointer-events:none}
.abody .ln .v svg path{fill:none;stroke:rgba(47,79,162,.82);stroke-width:1.6;stroke-linecap:round}
.abody .say{margin:0;font:16px/1.5 var(--read);min-height:3em}
.abody .say b{font-weight:500}
.abody /* A: one question,.abody then a story you step through */
.A{display:grid;gap:16px}
.abody .ask{display:grid;gap:8px}
.abody .ask>span{font:16px var(--read)}
.abody .choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.abody .choice{grid-template-columns:1fr}}
.abody .choice button{text-align:left;background:var(--sheet);border:0;border-radius:12px;box-shadow:0 0 0 1.5px var(--line);padding:10px 12px;cursor:pointer;display:grid;gap:2px;transition:box-shadow 160ms ease,transform 140ms var(--eo)}
.abody .choice button:active{transform:scale(.98)}
.abody .choice button b{font:600 15px var(--small)}
.abody .choice button span{font:13px/1.35 var(--small);color:var(--soft)}
.abody .choice button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.abody .track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:4px;gap:0}
.abody .track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;border-top:1.5px solid var(--line)}
.abody .stop{position:relative;display:grid;justify-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:0 2px;font:500 12px/1.25 var(--small);color:var(--soft);text-align:center}
.abody .stop i{width:14px;height:14px;border-radius:50%;background:var(--sheet);box-shadow:0 0 0 1.5px var(--faint);transition:background 160ms ease,box-shadow 160ms ease}
.abody .stop.done i{background:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.abody .stop[aria-current="step"]{color:var(--ink);font-weight:600}
.abody .stop[aria-current="step"] i{background:var(--pen);box-shadow:0 0 0 1.5px var(--pen),0 0 0 5px rgba(47,79,162,.14)}
.abody .nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.abody .next{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:9px 18px;font:600 14px var(--small);cursor:pointer;transition:transform 140ms var(--eo),opacity 160ms ease}
.abody .next:active{transform:scale(.96)}
.abody .next[disabled]{opacity:.35;cursor:default}
.abody .prev{background:transparent;color:var(--ink);border:0;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);padding:9px 18px;font:600 14px var(--small);cursor:pointer;transition:transform 140ms var(--eo),background 160ms ease}
.abody .prev:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.abody .prev:hover{background:var(--sheet)}}
.abody .prev:focus-visible,.abody .next:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:999px}
.abody .prev[disabled]{visibility:hidden}
.abody .count{font:500 12px var(--small);color:var(--soft)}

.abody /* calculator */
.calc{display:grid;gap:12px}
.abody .field{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:center}
.abody .field label{font:15px/1.3 var(--read)}
.abody .field output{font:600 15px var(--small);text-align:right;font-variant-numeric:tabular-nums}
.abody input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--ink);margin:0}
.abody .result{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--sheet);border-radius:12px;box-shadow:0 0 0 1.5px var(--ink);padding:12px 16px}
.abody .result>div{display:grid;gap:4px}
@media (max-width:480px){.abody .result{grid-template-columns:1fr}}
.abody .result b{font:600 28px/1 var(--display);font-variant-numeric:lining-nums tabular-nums}
.abody .result span{font:500 12px/1.3 var(--small);color:var(--soft)}
.abody .fine{margin:0;font:13px/1.5 var(--small);color:var(--soft)}
.abody .end{font-weight:500}
.abody .transit{display:flex;flex-wrap:wrap;gap:8px}
.abody .transit span{font:700 18px/1 var(--hand);color:var(--pen);border:1.5px solid var(--pen);border-radius:999px;padding:6px 12px 7px}
.abody .pchain{margin:.6em 0;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);align-items:start;gap:0 4px}
.abody .pn{display:grid;justify-items:center;text-align:center;gap:4px}
.abody .pi{width:64px;height:64px;overflow:visible}
.abody .pi-lion{width:64px}
.abody .pi *{fill:none;stroke:rgba(47,79,162,.82);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.abody .pn b{font:700 21px/1.05 var(--hand);color:var(--ink);text-wrap:balance}
.abody .pn span{font:14px/1.35 var(--read);color:var(--soft);text-wrap:balance}
.abody .pl{position:relative;padding-top:18px;display:grid;justify-items:center}
.abody .pa{width:44px;height:28px;overflow:visible}
.abody .pa path{fill:none;stroke:rgba(47,79,162,.82);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.abody .pl em{position:absolute;top:-2px;font:700 17px/1 var(--hand);font-style:normal;color:var(--pen);transform:rotate(-4deg)}
@media (max-width:620px){.abody .pchain{grid-template-columns:1fr;justify-items:center;gap:6px}.abody .pl{padding:4px 0}.abody .pa{transform:rotate(90deg)}.abody .pl em{top:14px;left:calc(50% + 24px)}.abody .pn{max-width:260px}}
.abody .qs{list-style:none;margin:0;padding:0;display:grid;gap:.25em}
.abody .qs li{padding-inline-start:1.45em;position:relative}
.abody .qs li::before{content:"";position:absolute;left:-1px;top:.6em;width:17px;height:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1.5 4.6 C4.5 3.4 8.5 4.9 13.5 3.3' fill='none' stroke='%232F4FA2' stroke-opacity='.82' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.abody .qs li:nth-child(3n+2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M1.5 3.8 C5.5 4.9 9 3.1 14 4.1' fill='none' stroke='%232F4FA2' stroke-opacity='.82' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.abody .qs li:nth-child(3n)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M2 4.9 C5 4.1 9.5 3.6 13 3.9' fill='none' stroke='%232F4FA2' stroke-opacity='.82' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");transform:rotate(-3deg)}
.abody .journeys{display:grid;gap:8px;margin:.2em 0}
.abody .journeys p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;font:700 20px/1.2 var(--hand);color:var(--pen)}
.abody .journeys span+span::before{content:"→";margin:0 10px;color:var(--soft);font-weight:700}
.abody /* full scenes (sky,.abody street) need a longer fade than figures on paper */
.afig.scene img{-webkit-mask:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);mask-composite:intersect}
.abody sup.fn{font:600 .62em/0 var(--small);vertical-align:super;margin-inline-start:1px}
.abody sup.fn a{color:var(--pen);text-decoration:none;padding:0 2px}
.abody sup.fn a:hover{text-decoration:underline}
.abody .penq{margin:.2em 0 0;font:700 clamp(30px,3.4vw,38px)/1.1 var(--hand);color:var(--pen);transform:rotate(-2deg);transform-origin:left}
.abody .notes{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line)}
.abody .notes ol{margin:0;padding-inline-start:1.3em;display:grid;gap:.45em;font:13px/1.55 var(--small);color:var(--soft)}
.abody .notes ol li::marker{color:var(--pen);font-weight:600}
.abody .notes a{color:inherit;text-underline-offset:3px}
.abody .notes .back-fn{text-decoration:none;color:var(--pen);margin-inline-start:2px}
.abody :target{scroll-margin-top:24px}
.abody li:target{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.abody *{transition-duration:0ms!important;animation:none!important}}