/* results.css: the rules the result pages share (the hub, the fan-out team, the reading chain), over site.css.
   Every chart is drawn in JS from a DATA block that a script in site/scripts fills from the lab's cells; the marks
   and text classes below are the one vocabulary those charts use. Edit once, bump ?v= on every result page. */
  /* The results demo (29 Sep 2026): the measured numbers behind the two demos, drawn for an
     investor. Every chart is drawn from the DATA block, which site/scripts/results_data.py
     fills from the lab's cells; no number in the charts is typed by hand. */
  html{scroll-snap-type:none}
  body{padding-top:calc(var(--hdr) + env(safe-area-inset-top));-webkit-font-smoothing:antialiased}
  footer{scroll-snap-align:none}
  .sec{position:relative;z-index:1;padding:clamp(2rem,5vh,3.4rem) 0;overflow-x:clip}
  .sec > .page{position:relative}
  .sec > .page::before{content:"";position:absolute;inset:-2rem -3rem;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--bg-rgb),.72) 62%,rgba(var(--bg-rgb),0) 100%)}
  #open h1{font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem);letter-spacing:-.025em;max-width:30ch;margin:0 0 .8rem}
  .lbl a{color:inherit;text-decoration:none}.lbl a:hover{color:var(--ink)}
  .sec .lbl{margin:0 0 1.1rem}
  .sec h2{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem);margin:0 0 .8rem;max-width:30ch}
  .lede{max-width:64ch;font-size:1.02rem}.lede b{color:var(--text);font-weight:600}
  .copy{max-width:62ch}.copy b{color:var(--text);font-weight:600}
  /* the three systems: one key, used by every chart */
  .key{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.2rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .key i{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:.6em}
  .key .agent{background:rgba(var(--text-rgb),.2);outline:1px solid var(--dim);outline-offset:-1px}.key .words{background:var(--base)}.key .latent{background:var(--ink)}
  .key span{color:var(--copy)}
  /* the roles table: a row a role, what each team's role thinks in and hands over */
  .roles{margin-top:2.4rem}
  .tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9rem;line-height:1.45;color:var(--copy)}
  .tbl th{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--dim);text-align:left;padding:0 1.2rem .6rem 0;border-bottom:1px solid rgba(var(--line-rgb),.5)}
  .tbl td{vertical-align:top;padding:.7rem 1.2rem .7rem 0;border-bottom:1px solid rgba(var(--line-rgb),.25)}
  .tbl td:first-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);white-space:nowrap;padding-top:.85rem}
  .tbl td b{color:var(--text);font-weight:600}.tbl td b.ink{color:var(--ink)}
  .tbl th.l,.tbl td.l{border-left:1px solid rgba(var(--line-rgb),.35);padding-left:1.2rem}
  /* the race */
  .race{margin-top:1.2rem}
  .rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
  .rhead .clock b{font-size:1.6rem;font-weight:500;color:var(--text);letter-spacing:0;font-variant-numeric:tabular-nums;margin-right:.3em}
  .rhead button{color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:none;padding:0;cursor:pointer;font-weight:500;position:relative}
  .rhead button::before{content:"";position:absolute;inset:-10px -8px}
  .rhead button:hover,.rhead button:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:none}
  figure{margin:1rem 0 0}
  figure svg{width:100%;height:auto;display:block;overflow:visible}
  figcaption{font-family:var(--sans);font-size:.88rem;line-height:1.5;color:var(--copy);max-width:70ch;margin-top:.8rem}
  figcaption b{color:var(--text);font-weight:600;margin-right:.35em}
  /* chart marks and text */
  .tk{font-family:var(--mono);font-size:11px;fill:var(--dim);letter-spacing:.06em}
  .tn{font-family:var(--mono);font-size:13px;fill:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
  .tn.big{font-size:15px}
  .tl{font-family:var(--mono);font-size:12px;fill:var(--text);font-weight:500;letter-spacing:.12em}
  .ts{font-family:var(--sans);font-size:12.5px;fill:var(--copy)}
  .ts.hit{fill:var(--text)}
  .th{font-family:var(--mono);font-size:10.5px;fill:var(--dim);letter-spacing:.2em}
  .grid{stroke:rgba(var(--line-rgb),.22);stroke-width:1}
  .axis{stroke:rgba(var(--line-rgb),.6);stroke-width:1}
  .track{fill:rgba(var(--text-rgb),.035);stroke:rgba(var(--line-rgb),.35);stroke-width:1}
  /* the three systems, one encoding on every figure: one agent a solid grey, a team the same grey cut into blocks
     (many agents), the latent team the same blocks in green; the block patterns live in the hidden #pats svg */
  .m-agent{fill:var(--base)}
  .m-words{fill:url(#blk-base)}
  .m-latent{fill:url(#blk-ink)}
  .m-words.sq{fill:url(#sq-base)}.m-latent.sq{fill:url(#sq-ink)}
  .m-short{fill:var(--base);opacity:.6}
  .cur{stroke:var(--text);stroke-width:1;opacity:.55}
  .done{fill:var(--ink)}
  /* the four measures, a panel each */
  .four{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 3rem;margin-top:1.6rem}
  .panel{border-top:1px solid rgba(var(--line-rgb),.4);padding-top:.9rem}
  .panel .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
  .panel .v{font-family:var(--mono);font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:500;color:var(--ink);letter-spacing:-.01em;margin:.3rem 0 .1rem;line-height:1.1}
  .panel .v small{font-size:.5em;color:var(--dim);font-weight:400;letter-spacing:.04em;margin-left:.6em}
  .panel .g{font-family:var(--sans);font-size:.86rem;color:var(--copy);line-height:1.45;max-width:46ch}
  .panel figure{margin-top:.6rem}
  .key.big{font-size:.62rem;gap:.8rem 2.4rem}.key.big b{color:var(--text);font-weight:500;margin-right:.5em}
  .note{font-family:var(--sans);font-size:.88rem;color:var(--copy);margin:0 0 .4rem;max-width:80ch}.note b{color:var(--text);font-weight:600}
  .panel .k span{color:var(--dim);opacity:.7;margin-left:.8em;letter-spacing:.14em}
  .th.ink{fill:var(--ink)}
  .arrow{fill:none;stroke:var(--ink);stroke-width:1.5}.arrowhead{fill:var(--ink)}
  .bub{fill-opacity:.5;stroke-width:1.5}.bub.m-agent{stroke:var(--base)}.bub.m-words{fill:url(#grid-base);stroke:var(--base)}.bub.m-latent{fill:url(#grid-ink);stroke:var(--ink);fill-opacity:.7}
  .core{fill:var(--text)}.core.ink{fill:var(--ink)}
  .sizekey{fill:none;stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3}
  .tick{fill:none;stroke:var(--bg);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.brace{fill:none;stroke:var(--base);stroke-width:1.5}.brace.ink{stroke:var(--ink)}
  .better{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .bettert{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.22em;fill:var(--ink)}
  .tn.inbar{fill:var(--bg)}
  .tn.huge{font-size:24px}.tn.ink{fill:var(--ink)}.ts.big{font-family:var(--serif);font-size:20px}
  .ln{fill:none;stroke-width:2.2;stroke-linejoin:round}.ln-agent{stroke:var(--dim)}.ln-words{stroke:var(--base)}.ln-latent{stroke:var(--ink);stroke-width:3}
  .ln.thin{stroke-dasharray:4 4;opacity:.7}.pt.thinpt{fill:var(--bg);stroke-width:1.3;stroke:currentColor}.pt.m-words{fill:var(--base)}.pt.m-latent{fill:var(--ink)}.pt.thinpt.m-latent{stroke:var(--ink)}.pt.thinpt.m-words{stroke:var(--base)}
  .pt.m-agent{fill:var(--base)}.pt.thinpt.m-agent{stroke:var(--base)}
  .sq.win{fill:var(--ink)}.sq.tie{fill:rgba(var(--text-rgb),.13)}.sq.loss{fill:var(--base)}
  .whos{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;margin-top:1.2rem}
  .who{margin:0;border-top:1px solid rgba(var(--line-rgb),.4);padding-top:1rem}
  .who svg{max-width:340px}
  .who figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .who figcaption b{display:block;color:var(--text);font-weight:500;font-size:.72rem;margin:0 0 .3rem}
  .who figcaption i{display:inline-block;width:11px;height:11px;margin-right:.6em;vertical-align:-1px;float:left;margin-top:.1rem}
  .who figcaption i.agent{background:var(--base)}.who figcaption i.words{background:repeating-linear-gradient(90deg,var(--base) 0 4px,transparent 4px 5.5px)}.who figcaption i.latent{background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 5.5px)}
  .who figcaption span{letter-spacing:.06em;text-transform:none;font-family:var(--sans);font-size:.84rem;color:var(--copy)}
  .nd{fill:var(--bg);stroke-width:1.5}.nd.agent{stroke:var(--dim)}.nd.words{stroke:var(--base)}.nd.latent{stroke:var(--ink)}
  .nl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;fill:var(--text)}.nl.sm{fill:var(--dim);font-size:10px}
  .ed{stroke:rgba(var(--line-rgb),.55);stroke-width:1}.ed.words{stroke:var(--base)}.ed.latent{stroke:var(--ink);stroke-width:1.4}
  .dt.words{fill:var(--base)}.dt.latent{fill:var(--ink)}
  .gl{fill:var(--bg);stroke:var(--base);stroke-width:1.2}.wl{stroke:var(--base);stroke-width:1.2}
  .w-agent .gl{stroke:var(--dim)}.w-agent .wl{stroke:var(--dim)}
  .vq{fill:var(--ink)}
  .seg{fill:rgba(var(--text-rgb),.16);stroke:var(--dim);stroke-width:.8}
  .plan{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.4rem 1rem;align-items:baseline;margin-top:1.8rem;border-top:1px solid rgba(var(--line-rgb),.4);padding-top:1rem}
  .plan .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .plan .opts{display:flex;gap:2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
  .plan .opts a{color:var(--dim);cursor:pointer;text-decoration:none;padding-bottom:.35rem;border-bottom:1px solid transparent}
  .plan .opts a.on{color:var(--ink);border-color:var(--ink)}.plan .opts a:hover{color:var(--text)}
  .plan p{grid-column:2;margin:.2rem 0 0;font-family:var(--serif);font-size:1rem;color:var(--copy)}
  /* the four measures in the site's hand: four columns on hairlines, the verdict in the serif, each value a hairline */
  .kpis4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2rem;border-top:1px solid rgba(var(--line-rgb),.4)}
  .kc{padding:1.4rem 1.6rem 1.6rem;border-left:1px solid rgba(var(--line-rgb),.25)}
  .kc:first-child{padding-left:0;border-left:none}
  .kh{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
  .kv{margin:.9rem 0 .2rem;font-family:var(--serif);color:var(--text);line-height:1;letter-spacing:-.02em}
  .kv b{font-weight:400;font-size:clamp(2.6rem,3.8vw,3.6rem);font-variant-numeric:tabular-nums}
  .kv b small{font-size:.62em;margin-left:.04em}
  .kv span{font-size:1.15rem;color:var(--copy);margin-left:.4rem;letter-spacing:0}
  .ks{white-space:nowrap;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:1.6rem}
  .kr .r{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:.9rem}
  .kr .r b{font-weight:400;font-size:.82rem;letter-spacing:.02em;color:var(--copy);text-transform:none;font-variant-numeric:tabular-nums}
  .kr .r.latent,.kr .r.latent b{color:var(--ink)}
  .kr .t{height:1px;margin-top:.45rem;background:rgba(var(--line-rgb),.25);position:relative}
  .kr .t i{position:absolute;left:0;top:-1.5px;height:4px;width:0;transition:width 2.4s cubic-bezier(.2,.7,.2,1)}
  .kr .t i.agent{background:var(--base)}.kr .t i.words{background:repeating-linear-gradient(90deg,var(--base) 0 9px,transparent 9px 12px)}.kr .t i.latent{background:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 12px)}
  /* hover (29 Sep 2026): one quiet move a figure; what is not pointed at steps back, what is pointed at comes forward */
  .whos .who,.kpis4 .kc{transition:opacity .35s ease}
  .whos:has(.who:hover) .who:not(:hover),.kpis4:has(.kc:hover) .kc:not(:hover){opacity:.42}
  .who svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.who:hover svg{transform:translateY(-3px)}
  .kc .kv b{transition:color .35s ease}.kc:hover .kv b{color:var(--ink)}
  .hit{fill:transparent;pointer-events:all}
  /* a figure is busy until its entrance has played (the founder, 29 Sep 2026): nothing on it answers the pointer meanwhile */
  .busy .hv,.busy .hit,.busy .kc,.busy .bub{pointer-events:none}
  .rhead button[disabled]{color:var(--dim);cursor:default;text-decoration:none}
  svg .hv{transition:opacity .35s ease}
  svg:has(.hv:hover) .hv:not(:hover){opacity:.35}
  .bub{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .hv:hover .bub{transform:scale(1.06)}
  .guide{opacity:0;transition:opacity .2s ease;pointer-events:none}.guide.on{opacity:1}
  .gline{stroke:var(--text);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
  .gk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;fill:var(--text)}
  .gbg{fill:var(--bg);stroke:rgba(var(--line-rgb),.5);stroke-width:1}
  .gv{font-family:var(--mono);font-size:11.5px;font-weight:500;fill:var(--copy)}.gv.latent{fill:var(--ink)}
  @media (prefers-reduced-motion:reduce){.who svg,.bub,.who,.kc,svg .hv,.guide{transition:none}}
  .fine{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;line-height:1.75;color:var(--dim);max-width:78ch;margin-top:1.4rem}
  .fine a{color:var(--ink);text-decoration:none}.fine a:hover{text-decoration:underline}
  .fine ul{margin:.4rem 0 0;padding-left:1.1rem}.fine li{margin:.15rem 0}
  @media (max-width:820px){
    .tbl{min-width:640px}
    .whos{grid-template-columns:1fr;gap:1.8rem}.who svg{max-width:300px}
    .kpis4{grid-template-columns:1fr 1fr}.kc:nth-child(3){padding-left:0;border-left:none}.kc{border-top:1px solid rgba(var(--line-rgb),.25)}
    #race-sec figure,#picture figure,#width figure{overflow-x:auto;overflow-y:hidden}
    #race,#scatter,#widthsvg,#computesvg{min-width:900px}
  }
  @media (max-width:480px){ .kpis4{grid-template-columns:1fr}.kc{padding-left:0;border-left:none} }
/* ---- A section's label, the line above its title ---- */
/* Every reading page names a section in a mono label over its h2 ("3 · the
   method"); the label and the hairline that runs from it to the column's
   edge are one rule here, not one a page (16 pages each carried it dead,
   on a child selector the label never matched, 28 Sep 2026). */
.sec .page > .lbl{margin:0 0 1.8rem;display:flex;align-items:center;gap:1rem;font-size:.66rem;letter-spacing:.2em;line-height:1;max-width:var(--col,860px)}
.sec .page > .lbl::after{content:"";flex:1;height:1px;background:rgba(var(--line-rgb),.28)}