/* Fig. 3 · the first sprint, and what follows it, in an average holding period (the private equity page, #sprint; 13 Oct
   2026, what follows the sprint added on 14 Oct). It stands on the page's flat Fathom band, so everything is drawn for a
   dark ground: the marks in white and Coastal Grey, the thin rules in Harbor Slate, the words in white or Coastal Grey.
   No Sea Mist.

   One scale, two views, one number between them. Everything in the plot is placed from --d, the days the frame holds:
   the sprint's 45 in "The sprint", the holding period's 2,409 in "In a holding period". A mark stands at its days over
   --d, as a share of the plot's width, so the lengths are to scale at any width and in every frame of the move.
   fig3.js only moves --d (and --fill, the bar's first filling). The value written here is the holding period, so with
   no script the figure stands drawn, complete.

   From the top: the holding period as a ruler, with its length over its end; the sprint under it, a white bar from the
   same edge; and what follows the sprint (Xavi, 14 Oct 2026: it read as 45 days of work and then nothing for 6.6 years).
   Three lines drop from the bar's end and run on to the end of the hold, each with its words over it, and
   they end on "Value builds across the portfolio". They are drawn in the holding period's view only, once the frame has
   pulled back: in the sprint's view they would start at the window's right edge.

   The bar is the plot's whole width, scaled: its length is the sum itself, to a fraction of a pixel, and so is what
   the DOM reports for it. A tick or a label is placed in one of two ways, from the same sums. At rest by left, which
   the browser sets on whole pixels: a 1 px tick stays 1 px. While the frame moves (.mv) by transform, which glides
   between pixels.

   The two day labels step back as the frame pulls away (--gone, from --d again), long before the bar's ends could
   bring them together, and the holding period's label rides in on its line's end: no two labels ever meet.

   Nothing fades: words wipe (clip-path), rules and lines draw, marks slide. A length times var(--pace) belongs to the
   telling (figure.js); the others are the reader's own choices and keep their length. Widths are the figure's own, not
   the screen's (it is its own container): under 600 px it's the phone's composition. */
#fig3{container:f3/inline-size;display:flex;flex-direction:column;margin:0;color:var(--white)}
#fig3 :focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* the two views, as tabs: the site's own (Our stack on a phone, Selected work), on the dark ground. One hairline under
   the pair, and a white bar that glides along it to the view on screen. Hidden in the HTML; the script shows them */
#fig3 .f3-tabs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:32px;border-bottom:1px solid var(--slate)}
#fig3 .f3-tabs[hidden]{display:none}
#fig3 .f3-tabs::after{content:"";position:absolute;left:0;bottom:-1px;width:50%;height:2px;background:var(--white);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
#fig3[data-view=sprint] .f3-tabs::after{transform:none}
#fig3[data-told=telling] .f3-tabs::after{transition-duration:calc(1.2s*var(--pace))}
#fig3 .f3-tabs button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 8px 12px;border-radius:var(--r) var(--r) 0 0;
  font:500 var(--t-btn)/1.2 var(--font);color:var(--grey);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease,background-color .2s ease}
#fig3 .f3-tabs button:hover,#fig3 .f3-tabs button[aria-selected=true]{color:var(--white)}
#fig3 .f3-tabs button:active{background:var(--deep)}
#fig3 .f3-tabs button:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
#fig3[data-told=telling] .f3-tabs button{pointer-events:none}   /* the telling isn't steered; a tap or a key ends it (figure.js) */

/* what starts the telling (fig3.js gives it to figure.js as the thing to watch): the plot and the notes under it, not the
   big figure over them. The first thing that moves is the bar, and its words are the notes: told from the figure's own
   standing in view, the bar filled under the fold */
#fig3 .f3-draw{position:relative}
#fig3 .f3-watch{position:absolute;left:0;right:0;top:calc(var(--t-kpi) + 14px);bottom:0;pointer-events:none}

/* the figure: Medium at the KPI size, its unit in Book. It's the bar's own value, so it stands right over it. While it
   counts, the number keeps the room of its last value and stands at the right of it, as the site's counted figures do
   (motion.js), so "days" doesn't move */
#fig3 .f3-kpi{display:flex;align-items:baseline;gap:.07em;margin-bottom:14px;font-size:var(--t-kpi);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums}
#fig3 .f3-kpi small{font-size:max(.28em,15px);font-weight:400;letter-spacing:0}
#fig3 .f3-num{text-align:right}
/* while it counts (fig3.js): the published digits stay in the page and hold their room, without ink, and the running value
   is drawn over them from the right, as figure 4 and the page's hero draw theirs. Read aloud, or by a reader that runs the
   script and doesn't scroll, the figure is always "45 days", never a count on its way */
#fig3 .f3-num[data-v]{position:relative;color:transparent}
#fig3 .f3-num[data-v]::after{content:attr(data-v);content:attr(data-v) / "";position:absolute;right:0;top:0;color:var(--white)}
/* before the telling the figure is unseen, so it never stands at zero under the section's "45 days"; it wipes in as the
   telling starts and the bar begins to fill. Only while the first frame is set (.tell): a view chosen early takes .tell
   off (fig3.js, choose), and the figure then stands whole, "45 days" with it */
#fig3 .f3-kpi{clip-path:inset(-8px 0);transition:clip-path calc(.5s*var(--pace)) cubic-bezier(.2,.7,.2,1)}
#fig3.tell[data-told=waiting] .f3-kpi{clip-path:inset(-8px 100% -8px 0)}

/* the plot, from the top: the holding period as a ruler (a Coastal Grey line, a tick hanging at each whole year, a stop at
   each end, its length over its end); the sprint, a white bar from the same edge; then what follows the sprint. In the
   sprint's view the room under the bar holds its two days under its ends. It's a window: what lies past its right edge
   isn't drawn, which is all there is to the pull back. --rl is the ruler's line, --bt the bar's top, --l0 the first
   line's top, --lane the step from one line to the next and --lt a line's own height, its words over it */
#fig3 .f3-plot{position:relative;overflow:hidden;--bh:14px;--rl:22px;--bt:calc(var(--rl) + 20px);--lane:38px;--lt:26px;--l0:calc(var(--bt) + var(--bh) + 16px);
  height:calc(var(--l0) + 2*var(--lane) + var(--lt) + 38px);
  --d:var(--f3-hold);--fill:1;--gone:clamp(0,calc((var(--d)/var(--f3-days) - 1)*1.5),1);--ease:cubic-bezier(.2,.7,.2,1)}
#fig3 :where(.f3-plot i){position:absolute;left:0;top:0;font-style:normal}
#fig3 .f3-bar{top:var(--bt);width:100%;height:var(--bh);background:var(--white);transform-origin:0 0;transform:scaleX(calc(var(--f3-days)/var(--d)*var(--fill)))}
#fig3 .f3-plot::after{content:"";position:absolute;left:0;top:var(--bt);width:calc(3px*var(--fill));height:var(--bh);background:var(--white)}   /* the bar never shows under 3 px wide: this stands under its start (it matters only in a figure under 161 px) */
#fig3 .f3-line{top:var(--rl);height:2px;background:var(--grey);width:calc(var(--f3-hold)/var(--d)*100%)}
#fig3 .f3-line::before,#fig3 .f3-end::before{content:"";position:absolute;top:-4px;width:2px;height:15px;background:var(--grey)}   /* the line's two ends */
#fig3 .f3-line::before{left:0}
#fig3 .f3-yr{top:calc(var(--rl) + 2px);left:calc(var(--k)*var(--f3-year)/var(--d)*100%);width:100%;height:9px;border-left:1px solid var(--grey)}
/* a carrier is as wide as the plot and stands with its left edge on a mark's place: the bar's end, the line's end.
   What it carries hangs from that edge, so a share of its own width, in a transform, is a share of the plot's */
#fig3 :is(.f3-d0,.f3-d45,.f3-end){width:100%;height:100%;pointer-events:none}
#fig3 .f3-d45{left:calc(var(--f3-days)/var(--d)*100%)}
#fig3 .f3-end{left:calc(var(--f3-hold)/var(--d)*100%)}
#fig3 .f3-end::before{top:calc(var(--rl) - 4px);right:100%}
#fig3 .f3-lab{position:absolute;left:0;top:calc(var(--bt) + var(--bh) + 8px);white-space:nowrap;color:var(--white);clip-path:inset(0 calc(var(--gone)*100%) 0 0)}
#fig3 :is(.f3-d45,.f3-end) .f3-lab{left:auto;right:100%}
#fig3 .f3-d45 .f3-lab{clip-path:inset(0 0 0 calc(var(--gone)*100%))}
#fig3 .f3-end .f3-lab{top:0;color:var(--grey);clip-path:none}   /* over the ruler's end */
/* in the telling (.tell, from its first frame to its rest) a day label waits for its step, then wipes in from its own end */
#fig3 .f3-lab span{display:block;clip-path:inset(0 0 0 0);transition:clip-path calc(.5s*var(--pace)) var(--ease)}
#fig3.tell .f3-d0:not(.in) span{clip-path:inset(0 100% 0 0)}
#fig3.tell .f3-d45:not(.in) span{clip-path:inset(0 0 0 100%)}
/* while the frame moves */
#fig3 .f3-plot.mv :is(.f3-bar,.f3-yr,.f3-d45,.f3-end){will-change:transform}
#fig3 .f3-plot.mv :is(.f3-yr,.f3-d45,.f3-end){left:0}
#fig3 .f3-plot.mv .f3-yr{transform:translateX(calc(var(--k)*var(--f3-year)/var(--d)*100%))}
#fig3 .f3-plot.mv .f3-d45{transform:translateX(calc(var(--f3-days)/var(--d)*100%))}
#fig3 .f3-plot.mv .f3-end{transform:translateX(calc(var(--f3-hold)/var(--d)*100%))}

/* what follows the sprint: each line drops from the bar's end (its elbow, .f3-el) and runs on to the end of the hold, a
   dot at its end and its words over it; under the last, at the end of the hold, the words they end on. White, as the
   sprint is: it's the same work, going on. The three elbows share one place, so the stem grows a line at a time. In the
   sprint's view they go at once; in the holding period's they draw once the frame has pulled back (the .9 s), each
   elbow first, then its line, its words with it */
#fig3 .f3-lanes{margin:0;padding:0;list-style:none}
#fig3 .f3-el{position:absolute;left:-2px;bottom:0;width:2px;height:calc(var(--l0) - var(--bt) - var(--bh) + var(--n)*var(--lane) + var(--lt));background:var(--white);transform-origin:50% 0;transition:transform .35s var(--ease) calc(.9s + var(--n)*.12s)}
#fig3 .f3-lane{position:absolute;left:calc(var(--f3-days)/var(--d)*100%);width:calc((var(--f3-hold) - var(--f3-days))/var(--d)*100%);top:calc(var(--l0) + var(--n)*var(--lane));height:var(--lt)}
#fig3 .f3-lane::before{content:"";position:absolute;left:0;right:3px;bottom:0;height:2px;background:var(--white);transform-origin:0 50%;transition:transform .6s var(--ease) calc(1.1s + var(--n)*.12s)}
#fig3 .f3-lane::after{content:"";position:absolute;right:0;bottom:-2px;width:6px;height:6px;border-radius:50%;background:var(--white);transition:transform .2s var(--ease) calc(1.55s + var(--n)*.12s)}
#fig3 .f3-lane span,#fig3 .f3-value{white-space:nowrap;font-size:clamp(15px,1.042vw,20px);line-height:1.2;color:var(--white);clip-path:inset(-4px -4px -4px 0);transition:clip-path .5s var(--ease) calc(1.1s + var(--n,0)*.12s)}
#fig3 .f3-lane span{position:absolute;left:12px;bottom:8px}
#fig3 .f3-value{position:absolute;margin:0;right:calc(100% - var(--f3-hold)/var(--d)*100%);top:calc(var(--l0) + 2*var(--lane) + var(--lt) + 12px);font-weight:500;--n:3}
#fig3[data-view=sprint] .f3-el{transform:scaleY(0);transition:transform .12s ease}
#fig3[data-view=sprint] .f3-lane::before{transform:scaleX(0);transition:transform .12s ease}
#fig3[data-view=sprint] .f3-lane::after{transform:scale(0);transition:transform .12s ease}
#fig3[data-view=sprint] :is(.f3-lane span,.f3-value){clip-path:inset(-4px 100% -4px 0);transition:clip-path .12s ease}
/* in the telling each waits for its step (.in), then draws at the telling's pace, with no delay */
#fig3.tell .f3-lane:not(.in) .f3-el{transform:scaleY(0)}
#fig3.tell .f3-lane:not(.in)::before{transform:scaleX(0)}
#fig3.tell .f3-lane:not(.in)::after{transform:scale(0)}
#fig3.tell :is(.f3-lane:not(.in) span,.f3-value:not(.in)){clip-path:inset(-4px 100% -4px 0)}
#fig3.tell .f3-el{transition:transform calc(.45s*var(--pace)) var(--ease)}
#fig3.tell .f3-lane::before{transition:transform calc(1.3s*var(--pace)) var(--ease) calc(.35s*var(--pace))}
#fig3.tell .f3-lane::after{transition:transform calc(.3s*var(--pace)) var(--ease) calc(1.5s*var(--pace))}
#fig3.tell .f3-lane span{transition:clip-path calc(.8s*var(--pace)) var(--ease) calc(.35s*var(--pace))}
#fig3.tell .f3-value{transition:clip-path calc(.8s*var(--pace)) var(--ease)}

/* the notes, right under what they name: a Detail term and a sentence each, on a hairline. The notes of the view on
   screen are marked as a chosen tab is: a white rule fills over the hairline and the term turns white. They follow
   data-notes, which is the view, but for one beat of the telling: the days' notes stay until the holding period's comes */
#fig3 .f3-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px var(--gap);margin:28px 0 24px}
#fig3 .f3-notes>div{position:relative;border-top:1px solid var(--slate);padding-top:12px;clip-path:inset(0 0 0 0);transition:clip-path calc(.7s*var(--pace)) cubic-bezier(.2,.7,.2,1)}
#fig3 .f3-notes>div::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--white);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
#fig3[data-notes=sprint] .f3-notes>[data-view=sprint]::before,#fig3[data-notes=hold] .f3-notes>[data-view=hold]::before{transform:none}
#fig3 .f3-notes dt{color:var(--grey);transition:color .25s ease}
#fig3[data-notes=sprint] .f3-notes>[data-view=sprint] dt,#fig3[data-notes=hold] .f3-notes>[data-view=hold] dt{color:var(--white)}
#fig3 .f3-notes dd{margin-top:6px;font-size:clamp(15px,1.042vw,20px);line-height:1.5;color:var(--grey);text-wrap:pretty}   /* the page's second size: 15 at 1440, 20 at 1920, as the people's lines */
#fig3 .f3-notes dd span{display:block;clip-path:inset(0 0 0 0);transition:clip-path calc(.7s*var(--pace)) cubic-bezier(.2,.7,.2,1)}   /* the last sentence, on a line of its own: it comes as the line lands */
/* in the telling a note waits for its step, then wipes in. At rest a note comes a beat after another has left (below) */
#fig3[data-told=rest] .f3-notes>div{transition:clip-path .28s cubic-bezier(.2,.7,.2,1) .16s}
#fig3.tell .f3-notes :is(div,span):not(.in){clip-path:inset(0 100% 0 0);transition:clip-path .16s ease}

/* the foot: the caption, at the page's small size */
#fig3 .f3-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px}
#fig3 .f3-foot .small{flex:1 1 32ch;max-width:64ch;color:var(--grey);text-wrap:pretty}
#fig3 .f3-foot a{text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease}
#fig3 .f3-foot a:hover{color:var(--white)}

/* the phone's composition, by the figure's own width. The marks a little lighter, and the notes of the view on screen
   only, right under the plot: the two days side by side under the bar's two ends, or the holding period across. With
   the script they share one place, as tall as the taller, so nothing under them moves when the view changes; one
   leaves before the other comes, so their words never cross */
@container f3 (max-width:599px){
  #fig3 .f3-tabs{margin-bottom:24px}
  #fig3 .f3-tabs button{font-size:15px}
  #fig3 .f3-kpi{margin-bottom:12px}
  #fig3 .f3-plot{--bh:12px;--rl:20px;--bt:calc(var(--rl) + 16px);--lane:30px;--lt:20px;--l0:calc(var(--bt) + var(--bh) + 12px);height:calc(var(--l0) + 2*var(--lane) + var(--lt) + 30px)}
  #fig3 :is(.f3-lane span,.f3-value){font-size:13px}
  #fig3 .f3-lane span{left:10px;bottom:6px}
  #fig3 .f3-value{top:calc(var(--l0) + 2*var(--lane) + var(--lt) + 9px)}
  #fig3 .f3-notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:20px 0 16px}
  #fig3 .f3-notes>[data-mark=d0]{grid-column:1}
  #fig3 .f3-notes>[data-mark=d45]{grid-column:2}
  #fig3 .f3-notes>[data-view=hold]{grid-column:1/-1}
  #fig3.on .f3-notes>div{grid-row:1}
  #fig3.on[data-notes=hold] .f3-notes>[data-view=sprint],#fig3.on[data-notes=sprint] .f3-notes>[data-view=hold]{clip-path:inset(0 100% 0 0);transition:clip-path .16s ease}
  #fig3.on[data-told=telling] .f3-notes>[data-view=hold]{transition-delay:.16s}   /* in the telling too, it waits for the days' notes to go */
}

/* still: with reduced motion, or ?fig=still, a choice changes the figure at once. fig3.js also sets .still for the
   instant it draws the first frame, so nothing moves on the way there: set at load, off screen, those moves could
   still be seen ending as the figure scrolled in (notes wiping out, the tabs' bar gliding back) */
#fig3.still *,#fig3.still *::before,#fig3.still *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){#fig3 *,#fig3 *::before,#fig3 *::after{transition:none!important}}