/* ---------- for funds ---------- */
/* the way to the page for funds (14 Oct 2026, Xavi: a CTA in the home's module, no menu button): the site's outline pill, under the lead */
.funds .pf-more{margin-top:24px}
.funds .rail .photo{aspect-ratio:4/3;margin-top:12px;align-self:stretch}
.d6cap{border-top:1px solid var(--fathom);padding-top:16px;margin-top:20px}
.d6cap b{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.d6cap p{margin-top:8px;font-size:16px;max-width:62ch;text-wrap:balance}
/* the caption always takes the room of its longest text: two lines on a wide screen, three on a phone, whatever the step's
   own words need (Xavi, 6 Oct 2026: "otherwise the button row jumps"). Every step's text lies in the same cell, unseen
   (portfolio.js puts them there), and the one being told is drawn over them. A height in pixels had been tried: it was
   7 px short of two lines, so the chips still moved. Until the script runs, two lines are kept */
.d6cap p{min-height:3.1em}
.d6cap .d6txt{display:grid;grid-template-columns:minmax(0,1fr);margin-top:8px}
.d6cap .d6txt p{grid-area:1/1;margin-top:0;min-height:0}
.d6cap .d6size{visibility:hidden}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
button.chip{font:500 14px/1 var(--font);border-radius:999px;padding:12px 16px;cursor:pointer;color:var(--fathom);background:transparent;border:1px solid var(--fathom);transition:background-color .25s ease,border-color .25s ease,color .25s ease}
button.chip:hover{background:var(--deep);border-color:var(--deep);color:var(--white)}
button.chip[aria-pressed="true"]{background:var(--fathom);color:var(--white)}
/* a company's connector thickens under the pointer, eased */
#portfolio .wire{transition:stroke-width .25s ease}
@media (prefers-reduced-motion:reduce){button.chip,#portfolio .wire{transition:none}}
/* the drawing's type: portfolio.js sizes it for the room the drawing has and says so here, in the drawing's own units
   (--lab for the labels, --pill for the pills; the kit's 11 and 10 until it has). Where it had to go large (.tight) the
   labels' tracking comes in a little, so the four names keep their distance */
.funds .lab text{font-size:var(--lab,11px)}
.funds .pill text{font-size:var(--pill,10px)}
.funds svg.tight .lab text{letter-spacing:.04em}
/* on a phone: the rail's photo goes (the drawing is the picture here) and the panel runs to the screen's edges. The four
   step chips are left out (Xavi, 6 Oct 2026: two by two they "look awful"): the story loops by itself and the caption
   names the step it's on */
@media (max-width:600px){
  .funds .rail .photo{display:none}
  .funds .diagram.framed{margin-inline:calc(-1*var(--m));border-inline:0;border-radius:0}
  .funds .controls{display:none}
}
.funds .diagram:focus-visible{outline:2px solid var(--deep);outline-offset:4px}