/* Fig. 1 · Count · 100 portfolio companies, by AI stage (in #market, on Sea Foam; 13 Oct 2026, split in two on 14 Oct).
   A hundred squares, one for each company in a hundred, in two blocks parted by one rule: the 64 not in production over
   it, 16 across, under their large figure, and the 36 in production under it, 9 across, against the rule's right end,
   with their small line at its left (Xavi, 14 Oct 2026: the 64 is the point; the 36 is not where the focus goes). The
   table is the key, in the same two groups, and each of its rows has a note on what its stage means, which unfolds while
   the row or one of its squares is pointed at, focused or chosen.
   Told once, then explored (figure.js): the 64 arrive in reading order as their figure counts them, the rule draws under
   them, then the 36, then the seven across the whole enterprise turn Fathom over their bracket. No Replay.
   The book's way: flat tokens by role, radius 0, no shadow, and nothing fades. A square grows in, a fill rises, a line,
   a rule or a note wipes or unfolds. White with a Coastal Grey edge is empty; the three stages FTI calls exploration go
   from white to Coastal Grey (empty, half, full); piloting is Harbor Slate; production is Deep Teal, the seven across
   the whole enterprise Fathom. No Sea Mist: the map, one section on, has the view's.
   Three layouts, by the figure's own width (fig1.js sets data-lay, from --two and --grid below): under 720 px one
   column, its control two tabs over the field and the table after it as the key; from 720, the table beside the field;
   from 1100, on the page's rail and stage. The script reads its layout numbers from here and holds none. */
#fig1{--across:16;--below:9;--two:720;--grid:1100;      /* squares across over the rule and under it; the widths where the layout changes */
  /* fig1.js sets the rest on the figure: --u a square's side, in whole, even pixels, and --g the gap, which takes what the
     squares leave (it may be a fraction of a pixel), so the field ends on the figure's right edge; --up and --lo the rows of
     the two blocks; and on the bracket --k, how many squares it runs under */
  --fs:clamp(12px,calc(var(--u)*.72),max(16px,calc(var(--u)*.4)));   /* a line on the field: 13 on a phone, 16 at 1440, 20 at 1920, with its squares */
  --ease:cubic-bezier(.2,.7,.2,1);color:var(--fathom)}
#fig1 .n{font-weight:500;font-variant-numeric:lining-nums proportional-nums}
#fig1 .f1-title{margin-bottom:24px}

/* without the script: a numbered list, the table and the source, one under another */
#fig1 .f1-says{margin:0 0 24px;padding-left:1.3em;list-style:decimal;font-size:var(--t-lead);line-height:1.45}
#fig1 .f1-key{margin-bottom:24px}
#fig1 figcaption{max-width:72ch}
#fig1 figcaption a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}   /* the page's link inside a sentence: its own ink, a hairline under it */
#fig1 figcaption a:hover{text-decoration-thickness:2px}

/* ---------- the table: the book's (Detail heads over a Fathom rule, Book rows on Coastal Grey hairlines, numbers at the
   right, tabular), and the figure's key. A group is set in Medium, as the book sets a total; a stage carries its
   square. Each row is a button: the row chosen, or told, takes a 2 px Fathom rule ---------- */
#fig1 .f1-key{width:100%;max-width:520px;border-collapse:collapse;font-size:16px;line-height:1.3;font-variant-numeric:lining-nums tabular-nums}
#fig1 .f1-key thead th{padding:0 0 12px;border-bottom:1px solid var(--fathom);font-size:var(--t-detail);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--deep)}
#fig1 .f1-key .num{text-align:right;white-space:nowrap}
#fig1 .f1-key tbody :is(th,td){position:relative;padding:0;font-weight:400;text-align:left}
#fig1 .f1-key tbody td{padding-left:16px;text-align:right}
#fig1 .f1-key .grp :is(th,td){font-weight:500}
#fig1 .f1-key tbody tr:not(.grp) .n{font-weight:400}   /* a stage's share in Book, its percent sign with it: only a group's is Medium (the .n above is for the lines) */
#fig1[data-lay] .f1-key tbody tr{cursor:pointer}
#fig1 .f1-key button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 0;-webkit-tap-highlight-color:transparent}
#fig1 button:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
@supports selector(:has(*)){                                                  /* the ring goes round the whole row, its number included, 3 px outside it as every ring on the page: the row has no side padding, so a ring set inside it ran through its first letter and its "%" */
  #fig1 .f1-key tr:has(button:focus-visible){outline:2px solid var(--deep);outline-offset:3px}
  #fig1 .f1-key button:focus-visible{outline:none}
}
/* a stage's square in the key: the same edge and fill as on the field. The fill is the bottom border, so half is half */
#fig1 .f1-key tr[data-fill] button::before{content:"";flex:none;box-sizing:border-box;width:var(--s,12px);height:var(--s,12px);background:var(--white);border:1px solid var(--sw);border-bottom-width:calc(1px + (var(--s,12px) - 2px)*var(--f))}
/* a stage's note, under its row: what the stage means, in FTI's words where its report describes it. The row's hairline is
   the note's, so it moves down with the note as it opens; the row chosen, or told, takes a 2 px Fathom rule there */
#fig1 .f1-key .f1-why td{position:relative;padding:0 0 12px;border-bottom:1px solid var(--grey);font-size:.875em;line-height:1.45;color:var(--deep);text-align:left}
#fig1 .f1-key .f1-why p{margin:0;max-width:46ch}
#fig1 .f1-key tr[data-fill] + .f1-why p{padding-left:calc(var(--s,12px) + 12px)}   /* under the stage's name, past its square */
#fig1 .f1-key .f1-why td::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fathom);transform:scaleY(0);transform-origin:bottom;transition:transform .24s var(--ease)}
#fig1 .f1-key tr:is(.at,.told) + .f1-why td::after{transform:none}
/* drawn: a note is folded until its row is pointed at, focused or chosen, then unfolds in a short eased move (Xavi, 6 Oct
   2026: nothing opens or closes "right away"). Folded, it stays in the page for a reader and a search engine */
#fig1[data-lay] .f1-key .f1-why td{padding-bottom:0;transition:padding .28s var(--ease)}
#fig1[data-lay] .f1-key .f1-why div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
#fig1[data-lay] .f1-key .f1-why p{min-height:0;overflow:hidden}
#fig1[data-lay] .f1-key tr.at + .f1-why td{padding-bottom:12px}
#fig1[data-lay] .f1-key tr.at + .f1-why div{grid-template-rows:1fr}

/* how a stage's squares look: --c the fill, --e the edge, --f how full; --sw is the key's square, as the field rests */
#fig1 [data-fill]{--c:var(--grey);--e:var(--grey);--f:1;--sw:var(--c)}
#fig1 [data-fill=empty]{--f:0}
#fig1 [data-fill=half]{--f:.5}
#fig1 [data-fill=slate]{--c:var(--slate);--e:var(--slate)}
#fig1 [data-fill=deep],#fig1 [data-fill=fathom]{--c:var(--deep);--e:var(--deep)}
#fig1 [data-fill=fathom]{--sw:var(--fathom)}

#fig1 .f1-tabs,#fig1 .f1-field{display:none}

/* ---------- drawn (fig1.js has set data-lay): the field, on a grid of 16 squares. Rows, from the top: the large figure;
   the upper block; the rule; the lower block, with the line on production at its left; the bracket; the seven's line ---------- */
#fig1[data-lay] .f1-plot{display:grid;grid-template-columns:repeat(var(--across),var(--u));column-gap:var(--g);row-gap:var(--g);justify-content:start;align-items:start;
  grid-template-rows:auto repeat(var(--up),var(--u)) auto repeat(var(--lo),var(--u)) auto auto;scroll-margin-top:24px}
#fig1[data-lay] :is(.f1-says,.f1-field){display:contents}
#fig1[data-lay] .f1-says li{list-style:none;font-size:var(--fs);line-height:1.35;text-wrap:balance}
/* the large figure, as the book's KPI row sets one and as figures 3 and 4 set theirs: its name in Detail over it, the number
   in Medium at the page's KPI size, its unit in Book beside it */
#fig1[data-lay] .f1-says .f1-head{grid-area:1/1/auto/-1;justify-self:start;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;margin-bottom:calc(var(--g) + 8px)}
#fig1[data-lay] .f1-head .f1-lab{flex-basis:100%;margin-bottom:10px;font-size:var(--t-detail);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
#fig1[data-lay] .f1-punct{display:none}   /* the colon after its name and the stop after its unit read in the sentence a crawler or a reader with no styles gets; drawn, they would be noise */
#fig1[data-lay] .f1-head .f1-unit{font-size:max(15px,calc(min(var(--t-kpi),calc(var(--u)*2.4))*.28))}
/* the line on production stands at the left of its 36, at the size of the field's lines: the focus is the 64 above.
   The reader's chosen stage shows in the same place, its count and its name, and wipes the line away as it comes. Its
   place runs on into the bracket's row, the one row here that can grow: on a 320 px screen the sentence is longer than
   the block beside it, and the seven's line then starts under it */
#fig1[data-lay] :is(.f1-says [data-step="2"],.f1-now){grid-row:calc(var(--up) + 3)/span calc(var(--lo) + 1);grid-column:1/span calc(var(--across) - var(--below));width:100%;max-width:20em;padding:0 var(--g) 8px 0;font-size:var(--fs);line-height:1.35;text-wrap:balance}
#fig1[data-lay] .big{display:inline-block;margin:0;font-size:min(var(--t-kpi),calc(var(--u)*2.4));line-height:1;letter-spacing:-.02em}   /* the page's KPI size, as figures 3 and 4 set theirs; two and a half squares tall where that is less (a phone) */
/* while it counts (fig1.js): the published digits stay in the page, without ink, and the running value is drawn over them,
   as the other figures and the page's hero draw theirs */
#fig1 .big[data-v]{position:relative;color:transparent}
#fig1 .big[data-v]::after{content:attr(data-v);content:attr(data-v) / "";position:absolute;left:0;top:0;color:var(--fathom)}
#fig1[data-lay] .f1-says [data-step="3"]{grid-row:calc(var(--up) + var(--lo) + 4);grid-column:1/-1;justify-self:end;text-align:right}
#fig1 .f1-now .t{display:block}

/* a square: white inside its 1 px edge, with a fill that stands as high as its stage is full */
#fig1 .sq{position:relative;box-sizing:border-box;width:var(--u);height:var(--u);grid-row:calc(var(--row) + 2);grid-column:calc(var(--col) + 1);background:var(--white);border:1px solid var(--e);cursor:pointer;
  transform:scale(0);transition:transform .24s var(--ease)}
#fig1 .sq.lo{grid-row:calc(var(--row) + var(--up) + 3);grid-column:calc(var(--col) + 1 + var(--across) - var(--below))}
#fig1 .sq::before,#fig1 .sq[data-s2]::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .24s var(--ease)}
#fig1 .sq[data-s2]::after{background:var(--fathom)}                        /* the seven: Fathom rises over Deep Teal at their own step */
#fig1 .sq.in{transform:none}
#fig1 .sq.in::before{transform:scaleY(var(--f))}
#fig1 .sq.in2{--e:var(--fathom)}
#fig1 .sq.in2::after{transform:none}
#fig1 .f1-rule{grid-row:calc(var(--up) + 2);grid-column:1/-1;height:1px;margin-block:calc(var(--g)*.5) var(--g);background:var(--fathom);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
#fig1 .f1-rule.in{transform:none}
#fig1 .f1-br{grid-row:calc(var(--up) + var(--lo) + 3);grid-column:calc(var(--across) + 1 - var(--k))/-1;height:6px;margin-top:calc(var(--g)*-.25);border:1px solid var(--fathom);border-top:0;clip-path:inset(0 100% 0 0);transition:clip-path .24s var(--ease)}
#fig1 .f1-br.in{clip-path:inset(0)}
/* the lines wipe in from the left, each at its step; before it, a line holds its place unseen */
#fig1[data-told] .f1-says li{clip-path:inset(0 100% 0 0);transition:clip-path .28s var(--ease)}
#fig1[data-told] .f1-says li.in{clip-path:inset(-.3em)}

/* ---------- told: lengths at pace 1, scaled by --pace (figure.js). A square waits its turn in the wave (--d, in ms), its
   fill rises a beat after it lands. At rest the delays go and what is left completes at the reader's speed ---------- */
#fig1[data-told=telling] .sq{transition:transform calc(.5s*var(--pace)) var(--ease) calc(var(--d)*1ms*var(--pace))}
#fig1[data-told=telling] .sq::before{transition:transform calc(.5s*var(--pace)) var(--ease) calc((var(--d)*1ms + .24s)*var(--pace))}
#fig1[data-told=telling] .sq::after{transition:transform calc(.6s*var(--pace)) var(--ease) calc(var(--d2)*1ms*var(--pace))}
#fig1[data-told=telling] .f1-rule{transition:transform calc(1.3s*var(--pace)) var(--ease)}
#fig1[data-told=telling] .f1-br{transition:clip-path calc(.9s*var(--pace)) var(--ease) calc(.3s*var(--pace))}
#fig1[data-told=telling] .f1-says li{transition:clip-path calc(1s*var(--pace)) var(--ease)}
#fig1[data-told=waiting] :is(.f1-key,.f1-tabs,.f1-plot),#fig1[data-told=telling] :is(.f1-key,.f1-tabs,.f1-plot){pointer-events:none}   /* the telling isn't steered; a tap or a key ends it (figure.js) */

/* ---------- explored: the chosen stage keeps its fills and takes a Fathom edge; every other square steps back to its own
   outline, its fill sinking. Nothing is greyed. Its count and name wipe in where the line on production stands ---------- */
#fig1[data-on] .sq:not(.on)::before,#fig1[data-on] .sq:not(.on)::after{transform:scaleY(0)}
#fig1 .sq.on{border-color:var(--fathom)}
#fig1[data-on] .sq.in2:not(.on){--e:var(--deep)}                           /* the seven step back to production's outline: a Fathom edge says chosen, and only that */
#fig1 .f1-now{clip-path:inset(0 100% 0 0);transition:clip-path .28s var(--ease);pointer-events:none}
#fig1[data-on] .f1-now{clip-path:inset(-.3em)}
#fig1[data-told][data-on] .f1-says [data-step="2"]{clip-path:inset(0 0 0 100%)}

/* ---------- from 720 px: the table at the left, the field at the right, on twelve columns; from 1100 they are the page's
   rail and stage, a column apart. The source runs under both: the field is taller than the table with one note open, so
   a note unfolding moves nothing under the figure ---------- */
#fig1:is([data-lay=mid],[data-lay=wide]){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
#fig1:is([data-lay=mid],[data-lay=wide]) .f1-title{grid-area:1/1/auto/-1;margin-bottom:32px}
#fig1:is([data-lay=mid],[data-lay=wide]) .f1-key{max-width:none;margin:0}
#fig1[data-lay=wide] .f1-key{grid-area:2/1/auto/span 4;font-size:clamp(16px,calc(var(--t-lead) - 2px),22px)}   /* with the page's type: 16 at 1440, 22 at 1920 */
@media (min-width:1680px){#fig1[data-lay=wide] .f1-key{--s:16px}}
#fig1[data-lay=wide] figcaption{grid-area:3/1/auto/-1;margin-top:32px}
#fig1[data-lay=wide] .f1-plot{grid-area:2/6/auto/-1}
#fig1[data-lay=mid] .f1-key{grid-area:2/1/auto/span 5;font-size:15px}
#fig1[data-lay=mid] .f1-plot{grid-area:2/6/auto/-1}
#fig1[data-lay=mid] figcaption{grid-area:3/1/auto/-1;margin-top:24px}

/* ---------- under 720 px: one column. Two tabs with a gliding bar, built from the table's two groups, then the field
   with its lines and the source: one screen on a phone. The table follows as the key; a tap on a row opens its note where
   it stands, so the control and what it changes share the screen. A tap on a tab or a square chooses; a second lets go ---------- */
#fig1[data-lay=narrow]{display:flex;flex-direction:column}
#fig1[data-lay=narrow] .f1-title{margin-bottom:12px}
#fig1[data-lay=narrow] .f1-tabs{order:1;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:12px;margin-bottom:14px;border-bottom:1px solid var(--grey)}
#fig1 .f1-tabs::after{content:"";position:absolute;left:0;bottom:-1px;width:calc((100% - (var(--tabs) - 1)*12px)/var(--tabs));height:2px;background:var(--fathom);
  transform:translateX(calc(var(--at,0)*(100% + 12px))) scaleX(var(--bar,0));transform-origin:left;transition:transform .32s var(--ease)}
#fig1 .f1-tabs.jump::after{transition:none}
#fig1 .f1-tabs button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;min-height:64px;padding:6px 0 10px;color:var(--deep);cursor:pointer;-webkit-tap-highlight-color:transparent}
#fig1 .f1-tabs .n{font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--fathom)}
#fig1 .f1-tabs .t{font-size:13px;line-height:1.25;text-wrap:balance}
#fig1 .f1-tabs button[aria-pressed=true] .t{color:var(--fathom)}
#fig1 .f1-tabs button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
#fig1[data-lay=narrow] .f1-plot{order:2}
#fig1[data-lay=narrow] figcaption{order:3;margin-top:14px;font-size:clamp(12px,calc(var(--u)*.5),15px);line-height:1.45}
#fig1[data-lay=narrow] .f1-key{order:5;max-width:none;margin:28px 0 0;font-size:14px}
#fig1[data-lay=narrow] .f1-key button{min-height:36px;padding:6px 0}
#fig1[data-lay=narrow] .f1-key thead th{padding-bottom:8px}

/* a first frame is set, and reduced motion or ?fig=still changes, at once */
#fig1.f1-cut *,#fig1.f1-cut *::before,#fig1.f1-cut *::after,#fig1.f1-still *,#fig1.f1-still *::before,#fig1.f1-still *::after{transition:none!important}
@media (prefers-reduced-motion:reduce){#fig1 *,#fig1 *::before,#fig1 *::after{transition:none!important}}