* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'IBM Plex Mono',monospace; max-width:1150px; margin:0 auto; background:#fff; color:#444; padding:20px 40px 14px; }
h1 { font-family:'IBM Plex Sans',sans-serif; font-size:21px; font-weight:600; color:#000; }
.sub { font-family:'IBM Plex Sans',sans-serif; font-size:13px; color:#777; margin:2px 0 9px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding:5px 12px 5px 0; font-size:11px; color:#888; border-bottom:2px solid #000; font-weight:500; font-family:'IBM Plex Sans',sans-serif; }
th, td { vertical-align:middle; }
td { padding:2px 12px 2px 0; border-bottom:1px solid #eee; font-size:12px; }
.cnt { width:74px; font-size:12px; color:#000; font-weight:500; }
.co { white-space:nowrap; width:190px; color:#000; font-weight:500; }
.fav { width:16px; height:16px; border-radius:3px; vertical-align:-3px; margin-right:8px; display:inline-block; }
.favtxt { background:#eee; }
.loc { color:#888; white-space:nowrap; font-size:11px; width:110px; }
.num { color:#888; white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:11px; width:74px; }
.stack { display:inline-flex; align-items:center; vertical-align:middle; }
.st { border-radius:50%; border:2px solid #fff; margin-left:-8px; background:#f4f4f4; display:block; width:18px; height:18px; object-fit:cover; }
.stack .st:first-child { margin-left:0; }
.st-blank { display:inline-flex; align-items:center; justify-content:center; box-sizing:content-box; line-height:1; font-family:'IBM Plex Sans',sans-serif; font-size:8.5px; font-weight:600; letter-spacing:.3px; color:#fff; }
.fnames { font-size:11px; color:#777; margin-left:8px; vertical-align:middle; }
.singles { margin-top:10px; }
.singles h2 { font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; font-weight:600; color:#000; margin-bottom:4px; }
.chips { display:flex; flex-wrap:wrap; gap:3px 14px; }
.chip { display:inline-flex; align-items:center; font-size:11px; color:#555; white-space:nowrap; }
.sfav { width:14px; height:14px; border-radius:3px; margin-right:6px; display:inline-block; }
.sfav-blank { background:#eee; }
.thanks { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#999; line-height:1.45; margin-top:5px; word-spacing:2px; }
/* One size for the whole byline line, visually matched to the 10px-MONO thanks handles:
   10/10.5/11/11.5 were rendered side by side at real size and 10.5 is the even match
   (10 reads a touch smaller than mono, 11 a touch larger). */
footer { font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; color:#888; margin-top:10px; display:flex; align-items:center; }
footer img { width:18px; height:18px; border-radius:50%; margin-right:7px; }
footer b { color:#444; font-weight:500; }
.conote { color:#999; font-weight:400; font-size:10px; margin-left:7px; }

/* Back-link to the index. The list pages were dead ends -- no way home. */
.backlink { font-family:'IBM Plex Sans',sans-serif; font-size:11px; color:#aaa; margin-bottom:5px; }
.backlink a { color:#888; text-decoration:none; border-bottom:1px solid #ddd; }
.backlink a:hover { color:#000; border-bottom-color:#888; }

/* ===== Mobile (Chris's pick 2026-08-20: "still a table") =====
   The five-column ledger does not fit 390px, so on phones it drops the two least
   scannable pieces -- the founder NAMES (the faces stay, and alt/title still carry the
   name on tap) and the HQ column -- rather than abandoning the table form. Desktop is
   untouched: everything here lives inside the media query. */
@media (max-width:640px){
  body { padding:16px 12px 12px; }
  h1 { font-size:18px; line-height:1.25; }
  .sub { font-size:12px; line-height:1.45; margin:3px 0 10px; }
  table { table-layout:fixed; width:100%; }
  th { font-size:10px; padding:4px 6px 5px 0; }
  td { font-size:11.5px; padding:6px 6px 6px 0; }
  /* table-layout:fixed reads its widths off the FIRST row -- which is the <th> row -- so the
     widths must go on the headers. Setting them only on the td classes silently does nothing. */
  th:nth-child(1) { width:32px; } th:nth-child(3) { width:92px; } th:nth-child(4) { width:54px; }
  .cnt { width:32px; font-size:12px; }
  .co { width:auto; white-space:normal; font-size:12px; line-height:1.3; overflow-wrap:break-word; }
  .co .fav { margin-right:5px; }
  .fdrs { width:92px; }
  .fnames { display:none; }
  .num { width:54px; font-size:10px; }
  .loc, th:nth-child(5) { display:none; }
  .singles { margin-top:16px; }
  .chips { gap:4px 12px; }
  .thanks { word-spacing:1px; line-height:1.6; }
  footer { align-items:flex-start; line-height:1.5; }
  footer img { flex:none; }
}

/* ===== Links (2026-08-20) =====
   Every entity on the page is a link: company -> its own site, founder -> x.com, voter -> x.com.
   They are underlined AT REST, quietly. Reasoning, because the quieter hover-only version is
   tempting on a page this dense:
     - Chris has rejected hover-dependent affordances three times in review notes, once under
       SHOWSTOPPER ("I had to hover to see the title text. On mobile this won't work.") -- and
       the mobile layout is a first-class surface here, where hover does not exist at all.
     - He already settled this on a table of the same species: the Breakout List round-5 A/B
       offered two link styles and BOTH were underlined at rest; he picked the pale-underline
       one, and the element audit rated link affordance "KEEP -- affordance is Lindy".
     - Tufte's smallest effective difference is the governing rule for a dense table: make the
       distinction as subtle as possible, but still clear. A hairline underline is that; absent
       is past it.
   Colour is inherited so the company stays black and the voters stay grey -- weight and ink
   carry the hierarchy, the underline only carries "this is clickable". */
a { color: inherit; text-decoration: underline; text-decoration-color: #d8d8d8;
    text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: #444; }

/* The thanks line is #999 text, so the global #444 hover rule drew a near-black underline under
   grey words -- the rule read as a separate element from the handle it belonged to (Chris,
   2026-08-20: "looks weird to have the text be grey then underline turns the line black... doesnt
   look right with the diff color underline and text"). Fix: on hover the word and its rule move
   together to the same value, so the two are never different colours. currentColor keeps them
   welded no matter what the text colour is. Scoped to .thanks -- he checked the main table and
   said it reads fine there, where the text is already near-black. */
.thanks a:hover { color: #555; text-decoration-color: currentColor; }

/* The founder stack is an inline-flex row whose avatars overlap via margin-left:-8px, with
   .stack .st:first-child resetting the leftmost one to 0. Wrapping an avatar in an anchor
   breaks that: display:contents keeps the <img> as the flex item (so the row still lays out
   right), but the <img> is now the first child OF ITS ANCHOR, so :first-child matches EVERY
   wrapped avatar and kills the overlap on all of them. Restore it for every anchor that is not
   the stack's first child -- higher specificity than the .stack .st:first-child rule it fights. */
.stack a { display: contents; }
.stack > a:not(:first-child) > .st { margin-left: -8px; }

/* .chip is an inline-flex row of [favicon][text]. Wrapping both in an anchor puts them inside
   an inline line box instead, which adds the font's descender space and grows every chip from
   14px to 17px tall. Make the anchor carry the same flex layout the chip had. */
.chip a { display: inline-flex; align-items: center; }