/* ==========================================================================
   Portfolio pages — portfolio.html, portfolio-company.html, anti-portfolio.html
   Page-only rules. Everything else comes from styles.css + css/vc.css.
   ========================================================================== */

/* ---------- Hero trailing actions ---------- */
.pg-hero .actions .ask-trigger{height:40px}

/* ---------- Metrics strip ---------- */
.pf-metrics{padding:40px var(--pad);border-bottom:1px solid var(--border)}
.pf-metrics .metrics{gap:0}
.pf-metrics .metric{padding-right:24px;border-right:1px solid var(--hairline)}
.pf-metrics .metric:last-child{border-right:none}
.pf-metrics .metric + .metric{padding-left:24px}

/* ---------- Browse toolbar ---------- */
.pf-tools{padding:40px var(--pad) 24px}
.pf-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pf-tools .search{margin-bottom:0;flex:0 1 360px}

.view-toggle{display:inline-flex;padding:3px;border-radius:0;background:var(--chip);
  border:1px solid var(--border);height:40px;flex:none}
.view-toggle button{display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:0;
  font-size:14px;line-height:20px;font-weight:500;color:var(--muted-2);
  transition:background .18s,color .18s}
.view-toggle button svg{width:14px;height:14px;flex:none}
.view-toggle button:hover{color:var(--text)}
.view-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-2)}

/* ---------- Filter groups ---------- */
.pf-filter-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.pf-filter-group .glabel{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);width:72px;flex:none}
.pf-filter-group .filters{margin-bottom:0;flex:1;min-width:0}
.pf-filter-group .filter{height:32px;padding:6px 14px;font-size:13px}
.pf-filter-group .filter .n{margin-left:7px;color:var(--faint);font-family:var(--font-mono);font-size:11px}
.pf-filter-group .filter.on .n{color:rgba(28,25,23,.5)}

/* The result count is gone — the row is now the hairline above the grid plus the
   reset, which sits right where it always did. flex-end rather than
   space-between because with one child left, space-between pushes it to the
   left edge. */
.pf-status{display:flex;align-items:baseline;justify-content:flex-end;gap:16px;flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline)}
.pf-reset{font-size:13px;line-height:20px;color:var(--muted-2);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--faint);transition:color .18s}
.pf-reset:hover{color:var(--text)}
.pf-reset[hidden]{display:none}

/* ---------- Company card additions ---------- */
.pf-co-card{height:100%}
.pf-co-card .yr{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--faint);padding-top:4px}
.pf-co-card p{flex:1 0 auto}
.co-lead{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--hairline);font-size:13px;line-height:18px;color:var(--muted-2)}
.co-lead .ini{width:22px;height:22px;border-radius:0;background:var(--surface);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;
  letter-spacing:.02em;color:var(--muted)}
.co-lead b{color:var(--muted);font-weight:500}
.pf-co-card:hover .co-lead b{color:var(--text)}

/* ---------- Table view ---------- */
.pf-table{border-top:1px solid var(--border)}
.pf-table .tbl th{padding-left:var(--pad)}
.pf-table .tbl th + th{padding-left:16px}
.pf-table .tbl td{padding-left:16px}
.pf-table .tbl td:first-child,.pf-table .tbl th:first-child{padding-left:var(--pad)}
.pf-table .tbl td:last-child,.pf-table .tbl th:last-child{padding-right:var(--pad)}
.pf-table .tbl th button{display:inline-flex;align-items:center;gap:6px;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;transition:color .18s}
.pf-table .tbl th button:hover{color:var(--text)}
.pf-table .tbl th .arrow{opacity:0;transition:opacity .18s,transform .18s}
.pf-table .tbl th.sorted button{color:var(--text)}
.pf-table .tbl th.sorted .arrow{opacity:1}
.pf-table .tbl th.sorted.desc .arrow{transform:rotate(180deg)}
.pf-table .cn{display:flex;align-items:center;gap:12px;min-width:0}
/* mark slot: see "Portfolio wordmarks" at the foot of this file */
.pf-table .cn .nm{font-weight:500;white-space:nowrap}

/* The whole row goes to the company page, the same as a card does in grid view.
   The printed name is plain text, not a link: the row's one anchor is .pf-hit,
   laid over the whole row and carrying the company name as its accessible text.
   Unlike the card's version it does not need a ::after — the row is the
   positioned ancestor, so the link itself can be the hit layer, which keeps it
   out of .cn's flex flow and off the column widths. Its text is pushed out of
   sight rather than display:none'd so a screen reader still reads it. Nothing
   else in a row is clickable, so there is no link to swallow. */
.pf-table tbody tr{position:relative;transition:background .18s}
.pf-table tbody tr:hover{background:var(--surface)}
.pf-table .cn a.pf-hit{position:absolute;inset:0;z-index:1;
  text-indent:-200vw;overflow:hidden;white-space:nowrap}
.pf-table tbody tr:has(a.pf-hit:focus-visible){background:var(--surface);
  outline:2px solid var(--accent);outline-offset:-2px}
.pf-table td.mut{color:var(--muted)}
.pf-table td.yr{font-family:var(--font-mono);color:var(--muted-2)}

/* ---------- Company detail ----------
   Identity, one-liner and pills run down the left; the two or three actions sit
   top right, so the buttons read as page controls rather than as the end of the
   sentence. Grid rather than a wrapper div: the markup is a flat run of blocks
   and the actions are just the one that changes column. */
.co-head{
  padding:48px var(--pad);border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:40px;align-items:start;
}
.co-head > *{grid-column:1}
.co-head .idrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.co-head .co-logo{width:72px;height:72px;border-radius:0}
.co-head .co-logo img{width:40px;height:40px}
.co-head h1{font-size:40px;line-height:44px;letter-spacing:0}
.co-head .one{color:var(--muted);font-size:20px;line-height:28px;margin-top:20px;max-width:60ch}

/* Three fields that all describe the company, so they get three different
   weights or they read as the same field said three times:
     sector      — one word, a solid pill in .pills ("EdTech")
     .cat        — the taxonomy line, mono and dim ("Early childhood learning content")
     .desc       — what it actually does, prose, held to a 68ch measure
   .cat sits above .desc because it tells you what kind of thing you are about
   to read about. A company can carry .one or .desc, not both — .one is the
   short form for a company with nothing longer written yet. */
.co-head .cat{
  font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-top:20px;
}
.co-head .desc{color:var(--muted);font-size:17px;line-height:27px;margin-top:14px;max-width:68ch}
.co-head .cat + .desc{margin-top:12px}
/* Sector first as the solid pill, then the funds as ghosts. The solid/ghost
   split is what separates the two kinds of fact, so a company gets exactly one
   solid pill — add a second and the row stops reading as "sector, then funds". */
.co-head .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.co-head .actions{
  grid-column:2;grid-row:1;margin-top:0;
  display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
}

.co-side h3,.co-body h2.sh{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-family:var(--font-mono);font-weight:400;margin-bottom:8px}
.co-side .kv{margin-bottom:32px}
.co-side .kv .v a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.co-side .kv .v a:hover{text-decoration-color:var(--text)}

.role-list{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.role-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--hairline);transition:padding-left .18s}
.role-list a:hover{padding-left:6px}
.role-list .rt{font-size:15px;line-height:22px;font-weight:500}
.role-list .rm{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);
  white-space:nowrap;text-align:right}

.co-body .prose{max-width:64ch}
.co-quote{padding:48px var(--pad)}
.co-quote .quote{border-top:none;padding-top:0;margin-top:0}
.co-quote blockquote{font-size:24px;line-height:34px;letter-spacing:-.01em;max-width:52ch}
.co-quote .by .ini{width:36px;height:36px;border-radius:0;background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted)}

/* ---------- Anti-portfolio ---------- */
.ap-note{padding:40px var(--pad);border-bottom:1px solid var(--border);background:var(--card)}
.ap-note .prose{max-width:68ch}
.ap-list .step-row{grid-template-columns:56px minmax(0,1fr);align-items:start}
.ap-list .step-row .idx{font-size:24px;line-height:28px;padding-top:2px}
.ap-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ap-head h3{font-size:20px;line-height:26px}
.ap-head .what{color:var(--muted-2);font-size:14px;line-height:20px}
.ap-passed{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13px;line-height:20px;
  color:var(--muted-2);flex-wrap:nowrap}
.ap-passed > span:last-child{min-width:0}
.ap-passed .ini{width:24px;height:24px;border-radius:0;background:var(--surface);flex:none;margin-top:-2px;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--muted)}
.ap-passed b{color:var(--text);font-weight:500}
.ap-reason{max-width:80ch;margin-top:16px;padding:16px 20px;border-left:2px solid var(--accent);border-radius:0;
  background:rgba(255,246,149,.05)}
.ap-reason p{color:var(--muted);font-size:16px;line-height:26px;margin:0;max-width:72ch}
.ap-since{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.ap-since .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.ap-since .val{font-size:14px;line-height:20px;color:var(--muted)}

.ap-changes{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.ap-changes > div{padding:24px 32px 24px 0}
.ap-changes h4{font-size:15px;line-height:22px;font-weight:600}
.ap-changes p{color:var(--muted);font-size:14px;line-height:22px;margin-top:6px}

/* ---------- Related ---------- */
.rel-grid .pf-co-card h3{margin-top:20px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .pf-metrics .metric{border-right:none;padding-right:0}
  .pf-metrics .metric + .metric{padding-left:0}
  .pf-metrics .metrics{gap:32px 24px}
  .co-head h1{font-size:32px;line-height:36px}
  /* Below this the actions column starves the identity column, so it goes back
     under the pills where it started. */
  .co-head{grid-template-columns:minmax(0,1fr)}
  .co-head .actions{grid-column:1;grid-row:auto;margin-top:28px;justify-content:flex-start}
  .ap-changes{grid-template-columns:1fr}
  .ap-changes > div{padding-right:0}
}
@media (max-width:620px){
  .pf-tools{padding:32px 24px 20px}
  .pf-metrics{padding:32px 24px}
  .pf-toolbar{flex-direction:column;align-items:stretch}
  .pf-tools .search{flex:0 0 auto;width:100%;height:40px}
  .view-toggle{align-self:flex-start}
  .pf-filter-group{align-items:flex-start;flex-direction:column;gap:10px}
  .pf-filter-group .glabel{width:auto}
  .pf-table .tbl th:first-child,.pf-table .tbl td:first-child{padding-left:24px}
  .pf-table .tbl th:last-child,.pf-table .tbl td:last-child{padding-right:24px}
  .co-head{padding:32px 24px}
  .co-head .co-logo{width:56px;height:56px}
  .co-head .co-logo img{width:32px;height:32px}
  .co-quote{padding:32px 24px}
  .co-quote blockquote{font-size:20px;line-height:28px}
  .ap-note{padding:32px 24px}
  .ap-list .step-row{grid-template-columns:36px minmax(0,1fr);gap:14px}
  .ap-list .step-row .idx{font-size:18px;line-height:24px}
}

/* full-bleed split inside a padded section */
.sec > .split{margin:0 calc(var(--pad) * -1) calc(var(--pad) * -1)}
@media (max-width:620px){ .sec > .split{margin:0 -24px -24px} .split > *{padding:24px} }

/* section dividers for the company detail layout */
.shell-col > .split{border-bottom:1px solid var(--border)}
.co-quote{border-bottom:1px solid var(--border)}
.shell-col > .grid-3.ruled.rel-grid > *:nth-last-child(-n+3){border-bottom:none}

/* ==========================================================================
   Portfolio wordmarks
   The logo set runs 1.98:1 to 5.24:1, so the 56px .co-logo tile squashed every
   one of them into a square and then shrank it to 32px inside. Cards and rows
   show the mark itself instead — no ground, no box, sized by height so every
   wordmark lands on the same optical weight regardless of how long the name is.
   38px matches the company page's own wordmark.
   ========================================================================== */
/* One number for the rendered wordmark height, used by the portfolio cards here
   and by each company page's .idrow.wordmark in portfolio-company.css. Declared
   in this file because it is the last stylesheet both pages load.

   No tile behind the mark on either the cards or the table — the wordmarks are
   white ink sitting on the page's own ground, left-aligned on the same edge as
   the company name below them. Height is still pinned to --wordmark-h so marks
   running 1.98:1 to 5.24:1 all land on the same optical weight and the same
   baseline from card to card; only the ground and the centring are gone. */
:root{
  --wordmark-h:32px;
}

.pf-co-card .pf-mark{
  height:var(--wordmark-h,32px);
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:20px;
}
.pf-co-card .pf-mark img{height:var(--wordmark-h,32px);width:auto;max-width:100%;display:block}

/* The sector pill sits between the wordmark and the meta line, so it takes the
   mark's own 20px gap and hands a tighter one on — vc.css gives .co-tags a 16px
   top margin, which stacked with the next block's to 40px of air in the middle of
   the card. The clipped .pf-hit link sits between the two in the DOM and adds no
   height, so the 10px is set on the meta line that follows it. */
.pf-co-card .co-tags{margin-top:0}
.pf-co-card .co-tags + .pf-hit + .co-meta{margin-top:10px}

/* Table rows keep the fixed slot width — it is what makes the company names line
   up in a column instead of stepping raggedly across as each mark's width
   changes — but the mark now sits at the left edge of that slot rather than
   floating in the middle of a tile. */
.pf-table .cn{gap:16px}
.pf-table .cn .mk{
  width:140px;height:44px;flex:none;
  background:none;border:0;padding:0;
  display:flex;align-items:center;justify-content:flex-start;
}
.pf-table .cn .mk img{height:20px;width:auto;max-width:100%;object-fit:contain;display:block}

@media (max-width:900px){
  .pf-table .cn .mk{width:116px;height:38px}
  .pf-table .cn .mk img{height:16px}
}


/* Founder cluster on a portfolio card. Squares with a hairline, matching the
   portraits on the company pages — the portraits are cut out on transparent, so
   they do not overlap: two transparent cut-outs on top of each other read as a
   smudge, not a stack. */
/* Faces on one line, names on the next. Side by side, the names got whatever
   width the portraits left over — 143px on a two-founder card but only 104px on
   a three, so H3D wrapped to three lines and Termina to five while every other
   card sat at two. The gap was a constant 10px throughout; it was the ragged
   line count that read as uneven spacing. Stacked, every card has the same two
   rows and the names get the full card measure. */
.pf-founders{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline)}
.pf-founders .faces{display:flex;gap:4px;flex:none}
.pf-founders .faces img{width:36px;height:36px;object-fit:cover;display:block;
  background:none;border:1px solid rgba(250,250,249,.22)}
/* The line used to read "2 founders" — metadata, so it was set in mono at the
   faint grey. It carries the founders' actual names now, which is content, so it
   takes the body face at a readable size. min-width:0 lets a three-founder line
   wrap inside the flex row instead of forcing the card wider. */
.pf-founders .n{font-family:var(--font-body);font-size:13px;line-height:19px;
  letter-spacing:0;color:var(--muted);min-width:0}

/* ---------- Exit badge ----------
   The card stopped being a single anchor so the badge could link somewhere else.
   .pf-hit stretches an invisible layer over the card to keep the whole thing
   clickable; the badge is raised above it. Both stay real links, so keyboard
   focus and middle-click still work on each.
   First Light is the site's only colour, and an exit is the thing on this page
   worth pointing at.
   The card prints no company name, so the link has nothing to sit on: it is
   clipped to a pixel and carries the name as its accessible text, which is what a
   screen reader announces for the card. It has to stay position:static — the
   moment it is positioned, ::after sizes to the link instead of the card and the
   hit layer collapses. A one-pixel link cannot show a focus ring either, so the
   card takes the outline. */
.pf-co-card{position:relative}
.pf-co-card a.pf-hit{display:block;width:1px;height:1px;overflow:hidden;
  white-space:nowrap;color:inherit}
.pf-co-card a.pf-hit::after{content:"";position:absolute;inset:0;z-index:1}
.pf-co-card:has(a.pf-hit:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.pf-co-card:hover{background:rgba(250,250,249,.02)}

/* Pinned to the card's top-right corner, on the same 32px inset the .ruled grid
   pads every card with (24px under 620px, where that padding steps down). Out of
   flow, so it does not push the founders row down and every card in a row keeps
   the same rhythm whether or not it carries a badge. */
.pf-exit{
  position:absolute;z-index:2;top:32px;right:32px;
  padding:4px 10px;
  font-family:var(--font-mono);font-size:11px;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);
}
a.pf-exit:hover{background:var(--accent);color:var(--accent-on)}
/* The wordmark sits at the top-left on the same line. Only the cards that carry
   a badge give up the width — the rest keep the full measure for the mark. */
.pf-co-card:has(.pf-exit) .pf-mark{padding-right:104px}

@media (max-width:620px){
  .pf-exit{top:24px;right:24px}
}

/* ---------- Founder portraits fade in ----------
   Every portrait is its own file and they land one at a time, each at full
   opacity the instant it decodes, so a grid of twenty-odd faces snapped in at
   random. Anything not already in cache starts transparent and fades once it
   has actually loaded.

   Opt-in per image rather than a blanket rule on the selector: main.js puts
   .im-fade on an image only when it has hold of it and is committed to
   revealing it, so a script that fails or never runs cannot leave a portrait
   stranded at opacity 0. Covers the cluster on a portfolio card and the
   profiles on a company page, which both load this sheet. */
.pf-founders .faces img.im-fade,
.fdr-grid .person img.av.im-fade{opacity:0}
.pf-founders .faces img.im-fade.is-in,
.fdr-grid .person img.av.im-fade.is-in{opacity:1;transition:opacity .5s ease}

/* Reduced motion keeps the reveal, drops the movement — the image appears the
   moment it is ready, which is the behaviour this block replaced. */
@media (prefers-reduced-motion:reduce){
  .pf-founders .faces img.im-fade.is-in,
  .fdr-grid .person img.av.im-fade.is-in{transition:none}
}