* { 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:#7a7a7a; 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 row -- so the widths must go on the headers. Setting them only on the td classes silently does nothing. */ /* Indices are one higher than they used to be: the founder names have their own column now, so Team size is child 5 and HQ is child 6. A hidden th still holds an auto column in a fixed layout, hence width:0 alongside display:none. */ th:nth-child(1) { width:32px; } th:nth-child(3) { width:92px; } th:nth-child(5) { 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; } th.h-fn, .fn { display:none; width:0; } .num { width:54px; font-size:10px; } .loc, th:nth-child(6) { display:none; width:0; } .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 as the flex item (so the row still lays out right), but the 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; } /* The "Originally posted on X" line: the last line on a list page, under the voter thanks. Same 10px mono as .thanks so it reads as part of that footer block; only the date is the link, and its hover welds word and rule to one colour with currentColor. */ .xline { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#999; margin-top:9px; } .xline a { color:#777; text-decoration-color:#ddd; } .xline a:hover { color:#000; text-decoration-color:currentColor; } /* ===== Readability + reach pass (2026-09-04) ===== CONTRAST, measured on white: the small greys were #999 (2.85:1) and #aaa (2.32:1), well under the 4.5:1 AA wants for body text. These move to ~#7d7d7d / #7a7a7a, which is a real improvement without flattening the hierarchy the table is built on -- everything here is still visibly secondary to the near-black company names. (#767676 is the lightest grey that fully passes; it was tried and read as competing with the data.) TAP TARGETS: the thanks line is the one place on the site where real links stack at 10px with no padding -- a 13px-tall target on a phone. The padding grows the invisible BOX, not the type: no word moves, resizes or re-wraps, so the information density is untouched. Measured 13px -> 25px. */ /* NO tap-target padding here. It was tried (line-height 2.25 + 6px, which took the targets from 13px to 25px) and reverted: it added ~100px of page height for links nobody clicks, and density wins over reach on this site. Colour only. */ .thanks { color:#7d7d7d; } .thanks a { color:#7d7d7d; } .backlink { color:#8c8c8c; } .backlink a { color:#7d7d7d; } .num, .loc { color:#7a7a7a; } .fnames { color:#6f6f6f; } .conote { color:#7d7d7d; } footer { color:#7a7a7a; } .xline { color:#7d7d7d; } .xline a { color:#6f6f6f; } /* A skip link is off-screen until focused: Tab once on load and it appears. On a page with 245 links it lets a keyboard user jump straight to the table instead of tabbing through the header and every row. Invisible to anyone using a mouse. */ .skip { position:absolute; left:-9999px; top:0; z-index:9; background:#111; color:#fff; padding:9px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:13px; text-decoration:none; } .skip:focus { left:12px; top:12px; } /* Previous / next, after the list and before the thanks: you finish the table, then you are offered the next one. It cycles the four hosted lists newest-first and wraps at both ends, so there is no dead stop. Two columns holding the page's edges, the way pagination reads everywhere else. */ .listnav { display:flex; justify-content:space-between; gap:20px; margin:18px 0 12px; padding-top:13px; border-top:1px solid #eee; font-family:'IBM Plex Sans',sans-serif; font-size:12px; } .listnav a { color:#444; display:block; text-decoration-color:#d8d8d8; } .listnav a:hover { text-decoration-color:#444; } .listnav .lab { display:block; color:#9a9a9a; font-size:10.5px; margin-bottom:2px; } .listnav .r { text-align:right; } @media (max-width:640px){ .listnav { font-size:11.5px; } } /* ===== Founder photos on hover: fan out (2026-09-05) ===== Chris asked Alain Meier whether the stack should stay put, fan out, or grow. Alain: "do a fan out, but apply a white very diffuse drop shadow under the fan out and have it not impact the DOM." So this is transform and box-shadow only -- paint, never layout. Verified by reading the row's cell widths before and after hover: 74,190,622,74,110 both times, no reflow. The translate has to land on the .st itself, never on the anchor. .stack a is display:contents (it has to be, or the overlap breaks), and a transform on a display:contents box does nothing at all -- it generates no box to transform. 10px per face = the 8px overlap plus 2px of air, so a fanned stack reads as separate faces rather than a looser pile. Written out to eight faces though the widest row today has five: a sixth founder on a future list would otherwise sit still while the rest of its stack fanned. The names used to sit on this same line and the fan landed on them. They have their own column now, and the fan is gated to the width where that column can afford to hold the fan's room -- see the three-stage block below. Do not try to solve an overlap by sliding .fnames out of the way: it is a non-replaced inline box, so a transform on it computes and renders nothing, and making it inline-block to work around that is a layout change, which is the one thing this effect promises not to be. (hover:hover) because a touchscreen has no un-hover: a tap would stick the fan open until something else was tapped. (min-width:1150px) is the first of the three stages. */ @media (hover:hover) and (pointer:fine) and (min-width:1150px) { .st { transition:transform .18s ease, box-shadow .18s ease; will-change:transform; } .stack:hover > *:nth-child(2) > .st, .stack:hover > .st:nth-child(2) { transform:translateX(10px); } .stack:hover > *:nth-child(3) > .st, .stack:hover > .st:nth-child(3) { transform:translateX(20px); } .stack:hover > *:nth-child(4) > .st, .stack:hover > .st:nth-child(4) { transform:translateX(30px); } .stack:hover > *:nth-child(5) > .st, .stack:hover > .st:nth-child(5) { transform:translateX(40px); } .stack:hover > *:nth-child(6) > .st, .stack:hover > .st:nth-child(6) { transform:translateX(50px); } .stack:hover > *:nth-child(7) > .st, .stack:hover > .st:nth-child(7) { transform:translateX(60px); } .stack:hover > *:nth-child(8) > .st, .stack:hover > .st:nth-child(8) { transform:translateX(70px); } .stack:hover .st { box-shadow:0 0 10px 5px rgba(255,255,255,.96), 0 0 2px 1px rgba(255,255,255,1); } } /* ===== Founder photos and founder names as two columns (2026-09-05) ===== They shared one cell, names hard against the avatar stack, so the hover fan landed on top of them. Splitting the cell lets the photo column reserve the fan's width permanently: the fan opens into empty space and never touches a name, at any stack size or any viewport. 116px is arithmetic, not taste. A five-face stack (the widest row on either list) measures 58px at rest and 98px fanned, so 116 leaves the fan 18px clear of the next cell. The width comes out of the names column, the only one with slack, so the page is no wider than before: at the 1150px container the columns are 74,190,116,506,74,110 and nothing wraps that did not wrap before. The names column carries no header. "Founders" already heads the pair. */ .fdrs { width:116px; padding-right:0; white-space:nowrap; } th.h-fn { width:auto; } .fn { font-size:11px; } .fn .fnames { margin-left:0; } /* THREE STAGES, and every number in them is measured on the real page rather than chosen. Chris's rule: "there could be another size breakpoint where when it doesn't fit the fan out, we just disable the fan out, but we keep the names, and then we only stop the names when the names also no longer fit easily." So the page sheds one thing at a time, cheapest first. Sweeping both configurations in 10px steps and counting name cells that run onto a second line (27 rows per page; the second column is the AI data list, which has the sharper knee, and the third is the supply chain list, which starts wrapping earlier and is what sets stage 3): viewport reserved 116px, fan on shrink-to-fit 70px, fan off data supply chain 1150 0 of 27 0 0 1140 1 0 0 1100 2 0 0 1090 2 2 2 950 3 2 3 910 11 3 4 900 12 3 5 890 12 4 6 880 13 6 7 870 16 8 7 860 17 12 8 STAGE 1, 1150px and up: the container is at its full width and the reserved column is free -- zero names wrap either way. The fan lives exactly here, and nowhere else. STAGE 2, 1149 down to 881: the reserved column now costs wrapped names, and the fan is the cheapest thing on the page, so it goes first. The photo column shrinks to fit its stack and hands the 46px back to the names, which then hold at zero wrapped rows down to 1100 and two down to 920 -- better than the shipped-with-the-fan version managed at any width below 1140. STAGE 3, 889 and below: the names stop fitting easily, so the column goes -- the way the responsive column-priority pattern says to shed rather than reflow. The line is drawn where wrapping stops being the exception, taken as a fifth of the rows: the supply chain list crosses it first, at 6 of 27 at 890px, so 890 is the last width that keeps the names. Setting the breakpoint off the easier page would have left the harder one visibly ragged. All three are bounded at BOTH ends. The phone block earlier in this file sets its own column widths and these rules come later, so left open-ended they beat it: an unbounded max-width:960 crushed the avatar column to 4px at 390px and put the Team size cell on top of the stack. 640 and below belongs to the phone block. */ @media (max-width:1149px) and (min-width:641px) { .fdrs, th:nth-child(3) { width:1%; padding-right:12px; } } @media (max-width:889px) and (min-width:641px) { th.h-fn, .fn { display:none; width:0; } } /* WHERE THE FREED WIDTH GOES, once the names are gone. It was briefly parked on the founders column alone, on the theory that every other column then keeps the width it was designed at and the avatars never move (they sat at x=304 at every width). Rendered at 820px that is wrong and obviously so: it opens a ~230px hole between the avatars and Team size, and a table is read across the row -- a void that wide severs the eye-line and the row stops reading as one thing. Letting the table share the slack out to every column instead keeps every pair of neighbours close: nothing but the column headers moves more than a few characters, and the page reads as a roomier version of itself rather than a broken one. The cost is that the columns do shift as you cross the breakpoint. That only shows while you are dragging the window; the hole showed for everybody sitting at that width. */