/* ==========================================================================
   portfolio-company.html — page-only additions.
   Loaded AFTER styles.css → css/vc.css → css/portfolio.css.
   Only the founders block lives here; everything else is shared.
   ========================================================================== */

/* ---------- Founders: a template that flexes for 1, 2 or 3 ----------
   The grid reads data-count on .fdr-grid. Three columns at 3, two at 2,
   and at 1 the single card turns into a wide row so it does not sit as a
   lonely square in a 1120px column.
   ------------------------------------------------------------------- */
.fdr-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.fdr-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px}
.fdr-grid[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:720px}

.fdr{
  border:1px solid var(--border);
  border-radius:0;
  background:var(--card);
  padding:24px;
  display:flex;
  flex-direction:column;
  transition:border-color .2s,background .2s;
}
.fdr:hover{border-color:var(--border-2);background:#191512}

/* .person in vc.css makes images full-width squares — founders use a round
   64px avatar instead, so override with a more specific selector. */
.fdr-grid .person img.av{
  width:64px;height:64px;
  aspect-ratio:auto;
  border-radius:0;
  object-fit:cover;
  background:var(--surface);
  flex:none;
}
.fdr-body{min-width:0;display:flex;flex-direction:column;flex:1}
.fdr .nm{font-weight:600;margin-top:16px}
.fdr .rl{color:var(--muted-2)}
.fdr .bio{flex:1 0 auto}
.fdr .links{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);gap:14px}
.fdr .links a{display:inline-flex;align-items:center;gap:5px}
.fdr .links svg{width:12px;height:12px;flex:none}

/* ---------- Wordmark identity ----------
   The portfolio logo set is wordmarks at roughly 3.5:1, not square icon marks,
   so the 72px .co-logo tile squashes them to nothing. A wordmark company drops
   the tile and sets the mark by height instead. Alt text carries the h1. */
.co-head .idrow.wordmark h1 img{height:var(--wordmark-h,38px);width:auto;display:block}

/* ---------- Profiles variant ----------
   Founder bios run to about 500 characters. Dropped into the stock 2- or 3-up
   card grid that lands at a 40–50 character measure, so the bio stacks 11 deep
   at two founders and 17 at three — a thin column of text in a very tall card.
   Profiles are ruled rather than boxed — the .ruled idiom the rest of the site
   already uses — and run two to a row: portrait above, then name, role, bio and
   link, bio held to a 72ch measure. One founder gets the full width to itself
   with the portrait beside the text rather than sitting alone in half a row.
   Not clickable as a whole: with a bio to read, a click anywhere navigating
   off-site is hostile, and a link inside a link is invalid anyway. */
.fdr-grid.profiles,
.fdr-grid.profiles[data-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:none;
  column-gap:40px;
  row-gap:0;
}
.fdr-grid.profiles[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.fdr-grid.profiles .fdr{
  flex-direction:column;gap:20px;align-items:stretch;
  background:none;border:0;border-top:1px solid var(--border);
  padding:28px 0;
}
/* Ruled top and bottom: every card draws its own top rule, and the bottom row
   closes the block. -n+2 is the last row of a two-column grid at any count —
   at an odd count it is the lone last card plus the one whose row already ends
   there, so the closing rule still runs the full width. */
.fdr-grid.profiles .fdr:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
.fdr-grid.profiles[data-count="1"] .fdr{flex-direction:row;gap:24px}
.fdr-grid.profiles .fdr:hover{background:none;border-color:var(--border)}

/* The last row already closes with a rule, so the block below must not draw a
   second one 32px under it. */
.fdr-grid.profiles + .fdr-why{border-top:0;padding-top:0}

/* Portraits are cut out, so no fill behind them — a stroke holds the square. */
.fdr-grid.profiles .person img.av{
  width:72px;height:72px;
  background:none;border:1px solid rgba(250,250,249,.24);
}

.fdr-grid.profiles .fdr .nm{margin-top:0}
.fdr-grid.profiles .fdr .rl{font-size:14px;line-height:20px;margin-top:2px}
.fdr-grid.profiles .fdr .bio{flex:none;margin-top:12px;max-width:72ch}
.fdr-grid.profiles .fdr .links{margin-top:14px;padding-top:0;border-top:0}

/* Two columns need about 340px of measure each to be worth having. Below that
   the pair drops to one, and the portrait moves back beside the text. */
@media (max-width:860px){
  .fdr-grid.profiles,
  .fdr-grid.profiles[data-count="2"]{grid-template-columns:minmax(0,1fr)}
  .fdr-grid.profiles .fdr{flex-direction:row;gap:24px}
}
@media (max-width:620px){
  .fdr-grid.profiles .fdr,
  .fdr-grid.profiles[data-count="1"] .fdr{flex-direction:column;gap:16px;padding:24px 0}
  .fdr-grid.profiles .person img.av{width:64px;height:64px}
}

/* One founder → wide row */
.fdr-grid[data-count="1"] .fdr{flex-direction:row;gap:24px;align-items:flex-start}
.fdr-grid[data-count="1"] .fdr .nm{margin-top:0}
.fdr-grid[data-count="1"] .fdr .links{margin-top:18px}

/* ---------- Why this team (the investing partner's line) ---------- */
.fdr-why{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--border);
}
.fdr-why img{width:44px;height:44px;border-radius:0;object-fit:cover;flex:none}
.fdr-why .w-body{min-width:0}
.fdr-why .lbl{
  font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.fdr-why p{color:var(--muted);font-size:16px;line-height:26px;max-width:72ch}
.fdr-why .sig{margin-top:10px;font-size:13px;line-height:20px;color:var(--muted-2)}
.fdr-why .sig b{color:var(--text);font-weight:500}
.fdr-why .sig a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint)}
.fdr-why .sig a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .fdr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .fdr-grid,
  .fdr-grid[data-count="2"],
  .fdr-grid[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:none}
  .fdr{padding:20px}
  .fdr-grid[data-count="1"] .fdr{flex-direction:column;gap:0}
  .fdr-grid[data-count="1"] .fdr .nm{margin-top:16px}
  .fdr-why{flex-direction:column;gap:12px}
}