/* Fig. 4 · the industrial case, counted (13 Oct 2026; on Sea Foam, in the stage of #counted; told as a story since 14 Oct).
   The figure "600+" over a field of exactly 600 squares, one a request, and under them the case in three beats: before,
   what we built, now (Xavi, 14 Oct 2026: the reader has to see it's a real story). Before and Now carry a square of the
   field's own look, so its two states read as the story's: white with a Coastal Grey edge, a request unanswered; Deep
   Teal, a quote.
   Told once (fig4.js, through PEF.tell): the field stands empty with "Before"; "What we built"; then "Now", and the
   requests turn into quotes in a wave while the figure counts them. No Replay, and nothing to choose: at rest it says it
   all.
   The book's way: flat tokens by role, radius 0, no shadow, no opacity, no Sea Mist. Marks grow and words wipe; nothing
   fades. The figure takes its width from its container, 320 to 900 px, and answers that width, not the window's. */
#fig4{--f4:1;--settle:cubic-bezier(.2,.7,.2,1);container-type:inline-size;width:100%}   /* --f4 tells the script its styles are in */

/* the figure over its label, as Selected work sets a case's: the figure in Medium at the KPI's size, its label in Book
   and Deep Teal. The plus wipes in once the count has landed */
#fig4 .f4-kpi{display:grid;gap:8px;margin-bottom:24px}
#fig4 .f4-fig{font-size:var(--t-kpi);font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums proportional-nums}
/* before the telling the figure is unseen, so it never stands at "0" over its label beside a heading that says 600; it
   wipes in as the telling starts, with the empty field. (The digits in the page are "600" throughout: below) */
#fig4 .f4-fig{clip-path:inset(-8px 0);transition:clip-path calc(.4s*var(--pace)) var(--settle)}
#fig4[data-told="waiting"] .f4-fig{clip-path:inset(-8px 100% -8px 0)}
/* while it counts (fig4.js): the published digits stay in the page and hold their width, and the running value is drawn
   over them from the left, as the page's hero draws its own. They're unseen, not hidden (no ink, rather than
   visibility:hidden), so read aloud the figure is always the one that's written, never a count on its way */
#fig4 .f4-n[data-v]{position:relative;display:inline-block;color:transparent}
#fig4 .f4-n[data-v]::after{content:attr(data-v);content:attr(data-v) / "";position:absolute;left:0;top:0;color:var(--ink)}
#fig4 .f4-plus{display:inline-block;clip-path:inset(0 -2px);transition:clip-path .2s var(--settle)}
#fig4 .f4-label{font-size:var(--t-lead);line-height:1.45;color:var(--deep)}

/* the field: one canvas, drawn by the script to the device's own pixels, as wide as the figure. Without the script, the
   SVG the page is served with: the same six hundreds, turned */
#fig4 .f4-field{margin-bottom:32px}
#fig4 .f4-field svg{display:block;width:100%;max-width:373px;height:auto}
#fig4 .f4-field pattern rect{fill:var(--deep)}
#fig4 .f4-field canvas{display:block;width:100%}

/* ---------- the story, under the field: three beats, each a Detail term over a sentence, on a hairline, as figure 3's
   notes are. Each takes a Fathom rule over its hairline when it's told, and at rest all three have it ---------- */
#fig4 .f4-story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px var(--gap);margin:0;padding:0;list-style:none}
#fig4 .f4-story li{position:relative;padding-top:12px;border-top:1px solid var(--grey)}
#fig4 .f4-story li::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--fathom);transform-origin:0 50%}
#fig4 .f4-story .detail{display:flex;align-items:center;gap:8px;margin:0;color:var(--deep)}
#fig4 .f4-story .detail + p{margin:6px 0 0;font-size:clamp(15px,1.042vw,20px);line-height:1.5;color:var(--fathom);text-wrap:pretty}   /* the page's second size, as figure 3's notes */
#fig4 .f4-sw{flex:none;box-sizing:border-box;width:12px;height:12px;background:var(--white);border:1px solid var(--grey)}
#fig4 .f4-now .f4-sw{background:var(--deep);border-color:var(--deep)}

/* the foot: the key */
#fig4 .f4-foot{margin-top:24px}

/* ---------- the telling. While the figure carries data-at, a mark waits for its step's word in it (b1, b2 and b3: the
   story's beats; full: the field has turned). Lengths are a step's at pace 1 and scale with --pace (0 with reduced
   motion or ?fig=still); they hold only while it's told ---------- */
#fig4[data-at]:not([data-at~="full"]) .f4-plus{clip-path:inset(0 100% 0 -2px)}
#fig4 .f4-story li{clip-path:inset(-4px -4px 0 0)}
#fig4[data-at]:not([data-at~="b1"]) .f4-before,#fig4[data-at]:not([data-at~="b2"]) .f4-built,#fig4[data-at]:not([data-at~="b3"]) .f4-now{clip-path:inset(-4px 100% 0 0)}
#fig4[data-told="telling"] .f4-plus{transition:clip-path calc(.4s*var(--pace)) var(--settle)}
#fig4[data-told="telling"] .f4-story li{transition:clip-path calc(.8s*var(--pace)) var(--settle)}
#fig4.f4-snap *,#fig4.f4-snap *::before,#fig4.f4-snap *::after{transition:none!important}   /* back to the first frame at once */

/* ---------- narrow, by the figure's own width: a phone. The story's beats one under another, each its term at the left
   of its sentence, so the field and the whole story stand in one screen ---------- */
@container (max-width:599px){
  #fig4 .f4-kpi{gap:4px;margin-bottom:16px}
  #fig4 .f4-field{margin-bottom:14px}
  #fig4 .f4-story{grid-template-columns:minmax(0,1fr);gap:0}
  #fig4 .f4-story li{display:grid;grid-template-columns:7.2em minmax(0,1fr);column-gap:12px;padding-block:8px}
  #fig4 .f4-story .detail{align-items:flex-start;line-height:1.5}
  #fig4 .f4-story .f4-sw{margin-top:.2em}
  #fig4 .f4-story .detail + p{margin:0;font-size:14px;line-height:1.45}
  #fig4 .f4-foot{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){#fig4 *,#fig4 *::before,#fig4 *::after{transition:none!important}}