refactor(website): clean up homepage

3 files changed, 44 insertions, 279 deletions

diff --git a/website/css/site.css b/website/css/site.css
index 8049408d..5654fc48 100644
--- a/website/css/site.css
+++ b/website/css/site.css
@@ -1,30 +1,12 @@
 /* ──────────────────────────────────────────────────────────────
    site.css — herdr.dev chassis. Loaded after style.css, which is
    kept only for the session mock (.herdr-ui-mock) and its tokens.
-
-   Ink is the default ground and the presentation layer; paper is an opt-in
-   preference shared with the docs. html[data-palette] themes the mock only
-   and follows the ground, so page and plate always share one mauve.
+   Ink is the default ground; paper is shared with the docs via
+   Starlight's `starlight-theme` key.
    ────────────────────────────────────────────────────────────── */
 
-/* Ink is the presentation layer: terminals are dark and the audience has
-   internalised that, so it is the default and never follows the system.
-   Paper is a preference the reader opts into, shared with the docs through
-   Starlight's own `starlight-theme` key so one choice covers both surfaces.
-   The mock follows the ground, and the mauve shifts with it — one mauve in
-   view at any time, never two. */
 html,
 html[data-mode="ink"] {
-  /* The ground is near-neutral by test, not by taste. A blue-violet dark at
-     20% saturation measurably matched the old site's hue, but read as harder
-     — saturated blue at low luminance softens the edges of light text, and
-     the eye has least acuity there. Draining it to 6% won a side-by-side.
-     Colour now lives in the mauve accent, which pops harder against neutral.
-     The greys are drained for the same reason the ground was: violet-tinted
-     text on a violet-tinted ground loses perceived contrast to shared hue,
-     and it crowds the mauve. faint2 is the recessed tier — the old page had
-     two muted steps and collapsing them flattened the card hierarchy.
-     Contrast: ink 14.7, dim 11.2, faint 8.3, faint2 5.6 — all above AA. */
   --bg: #17171a; --panel: #1e1e22; --mass: #26262b;
   --ink: #eae8ee; --dim: #cdccd2; --faint: #b0afb6; --faint2: #908f96;
   --line: #26262b; --line2: #35353d;
@@ -41,35 +23,18 @@ html[data-mode="paper"] {
 }
 :root {
   --run: #5fae74; --wait: #d3a027; --idle: #5a615c; --done: #6f6a86;
-  /* The TUI's own mapping, not a palette invented for the website:
-     src/ui/status.rs state_dot() paints blocked with p.red, working with
-     p.yellow and idle with p.green once seen, and the default palette in
-     src/app/state.rs is Catppuccin Mocha — the same #f38ba8 / #f9e2af /
-     #a6e3a1 that style.css already defines for the plate. Aliasing rather
-     than copying keeps the legend, the plate and the app in step, and lets
-     all three follow the ground when it changes. */
+  /* agent state colours alias the style.css tokens so the legend, the
+     plate and the app stay in step */
   --st-blocked: var(--red);
   --st-working: var(--yellow);
   --st-idle: var(--green);
-  /* done is p.teal, and style.css has no teal token to alias, so it is set
-     per ground: Catppuccin Mocha teal on ink, Solarized cyan on paper */
+  /* style.css has no teal token to alias, so done is set per ground */
   --st-done: #94e2d5;
   --disp: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
-  /* Sentences are not code. Mono removes the word-shape cues you read by, so
-     it costs speed in prose and gets worse below ~14px. Inter is already what
-     the docs declare, so using it here makes the two surfaces agree. */
   --body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
   --gut: 34px;
 }
 
-/* The plate's chrome takes the page's spot, so there is exactly one mauve
-   in view. Agent identity colours inside the panes (claude coral, opencode
-   purple, codex) stay native. */
-/* The plate's agent states follow the TUI, not the page accent. `done` reads
-   var(--accent) in style.css, and aliasing accent to the page mauve painted a
-   done agent purple — a colour Herdr's sidebar never shows. src/ui/status.rs
-   state_dot() is the authority: blocked red, working filled yellow, done
-   filled teal, idle hollow green, unknown grey. */
 body.site .mock-agent.done > span,
 body.site .mock-agent.done small { color: var(--st-done); }
 
@@ -81,13 +46,8 @@ html[data-palette] {
   --term-blue: var(--spot);
 }
 
-/* The ported plugins page still reads style.css tokens directly, and style.css
-   only knows the 20 mock palettes — so catppuccin's violet #181825 was reaching
-   the publish card, which is why that block stayed tinted after the ground went
-   neutral. Bridge the legacy names onto the neutral scale at the page wrapper.
-   Scoped to this page, not to body.site, because the mock reads --radius-* for
-   its tabs and panes and must keep its own corners. Terminal tokens are left
-   alone on purpose: the plate stays catppuccin. */
+/* bridge style.css's legacy token names onto the neutral scale; scoped to
+   this page so the mock keeps its own --radius-* */
 body.site .plugins-page {
   --bg-elevated: var(--panel);
   --ink-soft: var(--dim);
@@ -95,21 +55,18 @@ body.site .plugins-page {
   --muted-2: var(--faint2);
   --line-strong: var(--line2);
   --accent-soft: color-mix(in srgb, var(--spot) 8%, transparent);
-  /* the language is hairline cells in a sheet; nothing here is a rounded box */
   --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
 }
 
 body.site {
   margin: 0; background: var(--bg); color: var(--ink);
   font-family: var(--body); font-size: 14.5px; line-height: 1.65;
-  /* no `antialiased`: grayscale smoothing thins light-on-dark glyphs on
-     macOS, and every text tone here is already near its contrast floor */
+  /* no `antialiased`: grayscale smoothing thins light-on-dark glyphs on macOS */
   background-image:
     linear-gradient(var(--grid) 1px, transparent 1px),
     linear-gradient(90deg, var(--grid) 1px, transparent 1px);
   background-size: 72px 72px;
   overflow-x: clip;
-  /* exactly one grid module of ground below the sheet */
   padding-bottom: 72px;
 }
 body.site ::selection { background: var(--spot); color: var(--spot-ink); }
@@ -122,8 +79,6 @@ body.site .ram {
 body.site .hd-frame {
   max-width: 1440px; margin: 0 auto; background: var(--bg); position: relative;
   border-left: 1px solid var(--line2); border-right: 1px solid var(--line2);
-  /* close the sheet: without this the two vertical rules stopped in mid-air on
-     the last pixel of the document, which read as a crop rather than an end */
   border-bottom: 1px solid var(--line2);
 }
 
@@ -140,10 +95,6 @@ body.site .hd-nav a.lnk { color: var(--dim); text-decoration: none; font-size: 1
 body.site .hd-nav a.lnk:hover { color: var(--ink); }
 body.site .hd-nav .btn { border: 1px solid var(--line2); padding: 7px 15px; color: var(--ink); text-decoration: none; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; }
 body.site .hd-nav .btn:hover { background: var(--spot); color: var(--spot-ink); border-color: var(--spot); }
-/* Square hairline cells, the same box as the mode toggle and the Install
-   button — so the nav reads as one row of cells rather than text plus chrome.
-   The GitHub one widens to carry its count; the count is real, baked at build
-   and refreshed live, so it is proof rather than decoration. */
 body.site .hd-nav .ico {
   display: inline-flex; align-items: center; justify-content: center;
   width: 30px; height: 30px; flex: 0 0 auto;
@@ -155,12 +106,9 @@ body.site .hd-nav .ico b {
   font-family: var(--mono); font-weight: 400; font-size: 11.5px;
   letter-spacing: .04em; font-variant-numeric: tabular-nums;
 }
-/* an empty count must not leave a lopsided cell */
 body.site .hd-nav .ico.wide:has(b:empty) { width: 30px; gap: 0; padding: 0; }
 body.site .hd-nav .ico:hover { color: var(--spot); border-color: var(--spot); }
 
-/* the menu cell is the same box as the icons and Install, so the nav stays one
-   row of cells; it only exists below the nav's own breakpoint */
 body.site .hd-nav .menu {
   display: none; align-items: center; justify-content: center; gap: 4px;
   flex-direction: column; width: 30px; height: 30px; flex: 0 0 auto; padding: 0;
@@ -169,8 +117,6 @@ body.site .hd-nav .menu {
 body.site .hd-nav .menu span { display: block; width: 13px; height: 1px; background: currentColor; }
 body.site .hd-nav .menu[aria-expanded="true"] { color: var(--spot); border-color: var(--spot); }
 
-/* The sheet is a continuation of the nav rather than a modal: same hairline
-   rows, same cell language, dropped under the bar it belongs to. */
 body.site .sheet { display: none; border-bottom: 1px solid var(--line2); }
 body.site .sheet a {
   display: block; padding: 15px var(--gut); text-decoration: none; color: var(--ink);
@@ -196,9 +142,7 @@ body.site .mode button {
 body.site .mode button:hover { color: var(--ink); }
 body.site .mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
 
-/* ── hero ──
-   Single column. The ram is mass bleeding off the right edge, not an
-   object sitting in a second column with nothing to do. */
+/* ── hero ── */
 body.site .hd-hero { position: relative; overflow: hidden; padding: 68px var(--gut) 56px; }
 body.site .ghost {
   position: absolute; right: -14%; top: 50%; transform: translateY(-50%);
@@ -210,15 +154,12 @@ body.site .hd-eyebrow { display: flex; align-items: center; gap: 14px; color: va
 body.site .hd-eyebrow s { width: 42px; height: 1px; background: var(--spot); text-decoration: none; }
 body.site h1 {
   font-family: var(--disp); font-weight: 900; letter-spacing: -.055em; line-height: .88;
-  /* wide enough that each sentence takes one line and the type reaches
-     across the frame — a narrow measure is what left the right side empty */
   font-size: clamp(38px, 6.6vw, 132px); margin: 24px 0 0; max-width: 20ch; color: var(--ink);
 }
 body.site h1 em { font-style: normal; color: var(--spot); }
 body.site .lede { color: var(--dim); font-size: 15px; line-height: 1.75; max-width: 50ch; margin: 32px 0 0; }
 body.site .lede b { color: var(--ink); font-weight: 400; }
 
-/* one command, one link — every other install path lives on /install/ */
 body.site .go { display: flex; align-items: center; gap: 22px; margin-top: 38px; flex-wrap: wrap; }
 body.site .hd-cmd {
   display: inline-flex; align-items: center; border: 1px solid var(--line2);
@@ -235,9 +176,7 @@ body.site .meta { margin-top: 20px; color: var(--faint); font-size: 11.5px; lett
 body.site .meta a { color: var(--spot); text-decoration: none; }
 body.site .meta a:hover { text-decoration: underline; }
 
-/* ── numbers ──
-   Every value is real: baked at build from the R2 snapshots, refreshed live
-   and counted up if it moved since the last deploy. */
+/* ── numbers ── */
 body.site .strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
 body.site .stat {
   position: relative; display: block; overflow: hidden; text-decoration: none;
@@ -273,9 +212,7 @@ body.site .stat i.live {
   body.site .stat i.live { animation: none; }
 }
 
-/* ── FIG 1 · the plate ──
-   Inset with paper around it and a hairline border, so it reads as a plate
-   resting on the sheet rather than a hole punched through it. */
+/* ── FIG 1 · the plate ── */
 body.site .fig { padding: 40px var(--gut) 46px; border-bottom: 1px solid var(--line2); }
 body.site .fighd {
   display: flex; align-items: baseline; gap: 16px; padding: 0 0 11px;
@@ -304,19 +241,8 @@ body.site .plate .herdr-ui-mock {
 body.site .plate .mock-main { min-height: 0; }
 body.site .plate .mock-panes { grid-template-rows: minmax(0, 1fr); }
 
-/* ── router rows: signposts, not pillars ──
-   Stacked so each gets room and the destination is the heaviest thing in
-   the row — these are for going somewhere, not for persuading. */
+/* ── router rows ── */
 body.site .caps { border-bottom: 1px solid var(--line2); }
-/* The whole row is the link, so the destination button is gone and the marks
-   move to the right — which is also where the frame had a half-empty column
-   doing nothing. The arrow is the affordance and it is always visible, since a
-   row that only reveals it on hover gives a reader nothing to go on. */
-/* Three columns: index, text at its measure, evidence. The row used to be text
-   plus a lot of nothing, and making the whole row a hover target drew a box
-   around the nothing. Every row now ends in something real — the session the
-   plate above shows, the agent states the copy names, the commands agents run,
-   the agents themselves — so the width is used rather than merely spanned. */
 body.site .caps > .cap {
   display: grid; grid-template-columns: 130px minmax(0, 58ch) minmax(0, 1fr);
   gap: 0 40px; align-items: start;
@@ -326,27 +252,14 @@ body.site .caps > .cap {
 body.site .caps > .cap:last-child { border-bottom: 0; }
 body.site .caps > .cap:hover { background: color-mix(in srgb, var(--spot) 4%, transparent); }
 body.site .caps > .cap:hover h3 { color: var(--spot); }
-/* .arw, not .go — .go is already the hero's button group and carries a
-   38px top margin that pushed the arrow to the bottom of the column.
-   It rides the headline rather than sitting in the mark column: with the
-   marks moved left, an arrow down there would point away from the text and
-   away from the destination. On the headline it sits where the eye lands. */
-/* Inline, not inline-block: an atomic inline carries a wrap opportunity before
-   it whatever the whitespace does, so at narrow widths the arrow dropped to a
-   line of its own under the heading. As plain inline text the no-break space in
-   the markup binds it to the last word. The hover nudge moves the margin for
-   the same reason — transforms don't apply to a non-replaced inline. */
+/* plain inline: an atomic inline adds a wrap opportunity before it, and
+   transforms don't apply to a non-replaced inline — so the nudge is margin */
 body.site .caps .arw {
   margin-left: 4px; vertical-align: 2px;
   font-family: var(--body); font-weight: 400; font-size: 15px; line-height: 1;
   color: var(--faint); transition: color .12s ease, margin-left .12s ease;
 }
 body.site .caps > .cap:hover .arw { color: var(--spot); margin-left: 8px; }
-/* The marks lead the row. On the right they sat past the end of a 62ch
-   measure and read as debris pinned to the frame edge; on the left they are a
-   margin the text hangs off, and the row's ragged right edge is just how
-   columns end. The index is set large for mass but kept low in contrast — it
-   is texture and position, not a second headline competing with the h3. */
 body.site .caps .n {
   display: flex; flex-direction: column; gap: 13px; align-items: flex-start;
   align-self: start; line-height: 1;
@@ -357,10 +270,6 @@ body.site .caps .n > span:first-child {
 }
 body.site .caps > .cap:hover .n > span:first-child { color: var(--line2); }
 
-/* One frame for all four, at one width, flush to the right gutter — so the
-   evidence reads as the same kind of object in every row and the column has a
-   straight edge instead of a ragged one. The frame is the terminal's, moved up
-   from .tape so the typing line no longer owns a border the others lack. */
 body.site .caps .ev {
   align-self: center; justify-self: end;
   width: 100%; max-width: 520px;
@@ -377,18 +286,15 @@ body.site .caps .ev-row b {
 body.site .caps .ev-row i { display: block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
 body.site .caps .ev-note { margin-top: 9px; line-height: 1.7; }
 
-/* ── 05, the tease ──
-   Inert by design: no link, no pointer, no hover reveal, no arrow. It reads
-   the same to everyone on every device, which is the only version of this
-   that a phone gets too. The blocks are set in mono because JetBrains Mono
-   actually carries U+2580–259F; in the display face they would fall back to
-   whatever the system happens to have. */
-body.site .caps .cap-soon { cursor: default; }
+/* ── 05 ──
+   masks are mono because JetBrains Mono carries U+2580–259F; the display
+   face would fall back to whatever the system has */
 body.site .caps .cap-soon .mask { font-family: var(--mono); color: var(--line2); letter-spacing: -.02em; }
-body.site .caps .cap-soon .tape { color: var(--faint); }
-/* The line is fully redacted, so there is nothing being typed. A caret would
-   imply a live prompt and put the one moving thing on the page next to the row
-   that is deliberately saying nothing. */
+body.site .caps .cap-soon .soon-tag {
+  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
+  text-transform: uppercase; color: var(--faint);
+  border: 1px solid var(--line2); padding: 4px 8px;
+}
 body.site .caps .cap-soon .tape > span { border-right: 0; animation: none; }
 /* available to a screen reader, never on screen */
 body.site .sr {
@@ -396,34 +302,22 @@ body.site .sr {
   overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
 }
 
-/* green live dot: "this is up right now" */
 body.site .caps .beat {
   display: block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
   background: var(--run); animation: site-pulse 2.2s ease-in-out infinite;
 }
-/* blocked, working, idle — traffic-light order, and all three sit still: they
-   are a legend, and a legend that moves reads as an alarm. Only the heartbeat
-   in the row above animates. */
 body.site .caps .ev-row .b { background: var(--st-blocked); }
 body.site .caps .ev-row .w { background: var(--st-working); }
-/* hollow, because state_dot() draws idle as ○ and every other state as ● —
-   the fill is part of the signal, not decoration */
+/* hollow: state_dot() draws idle as ○ */
 body.site .caps .ev-row .i { background: none; box-shadow: inset 0 0 0 2px var(--st-idle); }
 
-/* the typing line. The frame lives on .ev now, so this is just the line —
-   still nowrap and clipped, so a long command can never reflow the box. */
 body.site .caps .tape {
   display: flex; align-items: baseline; gap: 9px; margin: 0;
   color: var(--dim); min-height: 19px; overflow: hidden; white-space: nowrap;
 }
 body.site .caps .tape b { color: var(--spot); font-weight: 400; }
-/* The caret is the span's own right border, not a sibling box. As a sibling it
-   sat at the shrunk span's edge while the text overflowed past it, which drew
-   the caret on top of the words — and a block sibling can't sit on the text
-   baseline. A border rides the line box, so it lands after the last character
-   at the right height by construction. */
-/* direct child only: row 05's line wraps a nested redaction block, and a
-   descendant selector gave that block a caret of its own mid-line */
+/* the caret is the span's own right border so it rides the line box; direct
+   child only — row 05 nests a mask span */
 body.site .caps .tape > span {
   flex: 0 1 auto; min-width: 0;
   border-right: 7px solid var(--dim);
@@ -431,11 +325,6 @@ body.site .caps .tape > span {
 }
 @keyframes site-caret { 0%, 49% { border-color: var(--dim) } 50%, 100% { border-color: transparent } }
 
-/* Masked, not inlined: the source files carry their own brand fills, and one
-   of them is white — which would vanish on paper. Silhouettes in one colour
-   also stop the row turning into a logo salad. */
-/* two columns so eight entries stay a compact block rather than a tall list
-   that would tower over the other three evidence boxes */
 body.site .caps .herd {
   display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; margin: 0;
 }
@@ -457,8 +346,6 @@ body.site .caps h3 { transition: color .12s ease; }
 
 /* ── page head: shared by blog and any other framed page ── */
 body.site .ph { padding: 68px var(--gut) 44px; border-bottom: 1px solid var(--line2); }
-/* a wide frame left the right half of the head empty — give it a slot with
-   something real in it rather than widening the measure past readability */
 body.site .ph-split {
   display: grid; grid-template-columns: minmax(0, 1fr) auto;
   gap: 60px; align-items: end;
@@ -483,7 +370,6 @@ body.site .ph p { margin: 22px 0 0; color: var(--dim); font-size: 14.5px; line-h
 body.site .ph code {
   color: var(--ink); background: var(--panel);
   border: 1px solid var(--line2); padding: 1px 6px; font-size: 12px;
-  /* a chip split across two lines reads as a rendering fault, not a wrap */
   white-space: nowrap;
 }
 body.site .ph-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
@@ -495,11 +381,8 @@ body.site .btn-solid { background: var(--spot); border-color: var(--spot); color
 body.site .btn-ghost { color: var(--ink); }
 body.site .btn-ghost:hover { background: var(--spot); border-color: var(--spot); color: var(--spot-ink); }
 
-/* The ported pages still carry style.css's .button classes on the publish
-   links and the load-more control. Given the site language here rather than
-   swapped in the markup, so all three stay in step. The solid one rendered as
-   an empty light slab because `body.site a { color: inherit }` outranks
-   .button-primary's own `color`, so the label took the card's near-white. */
+/* `body.site a { color: inherit }` outranks .button-primary's own color, so
+   the site language is restated here for style.css's .button classes */
 body.site .button {
   min-height: 0; padding: 12px 18px; border-radius: 0;
   border: 1px solid var(--line2); font-family: var(--mono); font-weight: 400;
@@ -510,10 +393,7 @@ body.site .button-primary:hover { background: var(--ink); border-color: var(--in
 body.site .button-secondary { background: none; color: var(--ink); }
 body.site .button-secondary:hover { background: var(--spot); border-color: var(--spot); color: var(--spot-ink); }
 
-/* ── plugins ──
-   The markup is the original page's; only the language is restyled, so the
-   live fetch, search and sort behaviour is untouched. ── */
-/* not flex: a wrapping flex row put the status dot on a line of its own */
+/* ── plugins ── */
 body.site .plugins-trust {
   display: block; margin: 20px 0 0;
   color: var(--faint); font-size: 12px; line-height: 1.7; max-width: 78ch;
@@ -552,23 +432,15 @@ body.site .plugins-sort {
   background-repeat: no-repeat;
 }
 body.site .plugins-sort:focus { outline: 0; border-color: var(--spot); }
-/* the count sits flush against the frame otherwise */
 body.site .plugins-status { margin-left: auto; padding: 0; white-space: nowrap; }
 body.site .plugins-metabar { border-bottom: 1px solid var(--line); }
-/* Counts and timestamps are data, not labels — the uppercase + wide-tracked
-   micro-type treatment that works for one-word chrome labels destroys word
-   shapes when it carries whole sentences of metadata, which is most of what
-   this page shows. Data rows stay mono but keep their natural case. */
 body.site .plugins-meta,
 body.site .plugins-status {
   margin: 0; padding: 13px var(--gut); color: var(--faint); font-size: 11.5px;
   letter-spacing: .04em;
 }
 body.site .plugins-status { border-top: 1px solid var(--line); }
-/* the old page wraps every block in .section, which brings its own vertical
-   padding, a top border and a horizontal inset — so blocks drifted further
-   right the deeper they were nested. Neutralise it and let each block own
-   its gutter, aligned with the page head. */
+/* neutralise style.css's .section padding/borders on the ported page */
 body.site .plugins-page .section {
   padding: 0; border-top: 0; max-width: none; margin: 0;
 }
@@ -577,9 +449,6 @@ body.site .plugins-grid {
   display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 14px; padding: 26px var(--gut) 34px;
 }
-/* cards are hairline cells in a sheet, but a fully transparent cell puts its
-   text on the same ground as everything around it — a whisper of panel fill
-   gives each cell a surface to read against without rounding it into a box */
 body.site .plugin-card {
   display: flex; flex-direction: column; min-width: 0;
   padding: 20px 22px 22px; text-decoration: none;
@@ -596,8 +465,6 @@ body.site .plugin-name { color: var(--ink); font-weight: 500; }
 body.site .plugin-card:hover .plugin-name { color: var(--spot); }
 body.site .plugin-go { margin-left: auto; color: var(--faint2); font-size: 14px; }
 body.site .plugin-card:hover .plugin-go { color: var(--spot); }
-/* clamp to two lines so every cell has the same shape — the feed's own
-   ellipsis truncated at a character count, which made the rows ragged */
 body.site .plugin-desc {
   margin: 11px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.65;
   text-transform: none; letter-spacing: normal;
@@ -613,9 +480,6 @@ body.site .plugin-stat { display: flex; align-items: center; gap: 7px; }
 body.site .plugin-star { color: var(--spot); }
 body.site .plugin-lang-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
 body.site .plugin-updated { margin-left: auto; color: var(--faint2); }
-/* .plugins-more is the button, not a wrapper — given section padding it
-   inflated into a floating slab. It's the foot of a long list, so make it the
-   full-width row a list foot should be rather than a box parked in the middle. */
 body.site .plugins-more {
   display: block; width: 100%; margin: 0; padding: 22px var(--gut);
   border: 0; border-top: 1px solid var(--line2); background: none;
@@ -624,13 +488,10 @@ body.site .plugins-more {
 body.site .plugins-more:hover {
   background: color-mix(in srgb, var(--spot) 5%, transparent); color: var(--spot);
 }
-/* the rule above outranks the page's own .plugins-more[hidden] guard, so the
-   exhausted button stayed on screen; restate the guard at this weight */
+/* the rule above outranks the page's own [hidden] guard, so restate it */
 body.site .plugins-more[hidden] { display: none; }
 body.site .plugins-publish { padding: 40px var(--gut) 48px; border-bottom: 1px solid var(--line2); }
 body.site .plugins-publish-card { border: 1px solid var(--line2); padding: 26px 28px; }
-/* the card's heading is an h3, so the h2 rule missed it and the page's own
-   mono declaration stood — the one section heading not in Archivo */
 body.site .plugins-publish h2,
 body.site .plugins-publish h3 {
   margin: 0; font-family: var(--disp); font-weight: 900; letter-spacing: -.035em;
@@ -658,18 +519,11 @@ body.site .posts .go-arrow { color: var(--faint); font-size: 15px; }
 body.site .posts a:hover .go-arrow { color: var(--spot); }
 
 /* ── article ── */
-/* The measure column is capped at the body's own 76ch. Left as 1fr it ate every
-   spare pixel and parked the sections list against the far edge, with the gap
-   between them growing without limit on a wide display. */
 body.site .article {
   display: grid; grid-template-columns: minmax(0, 76ch) 224px; gap: 60px;
   justify-content: center;
   padding: 54px var(--gut) 76px; border-bottom: 1px solid var(--line2); align-items: start;
 }
-/* No sidebar means no second column, and the measure centres rather than
-   hugging the left gutter with the whole frame empty beside it. Elsewhere on
-   the site a short measure sits left because something else occupies the
-   right; here nothing does. */
 body.site .article-solo { grid-template-columns: minmax(0, 1fr); }
 body.site .article-solo .article-body { margin-inline: auto; }
 body.site .article-body { min-width: 0; max-width: 76ch; }
@@ -685,7 +539,6 @@ body.site .article h1 {
 body.site .article-lede { margin: 20px 0 0; color: var(--dim); font-size: 15px; line-height: 1.75; }
 body.site .article-rule { margin: 34px 0 0; border: 0; border-top: 1px solid var(--line2); }
 
-/* prose: mono body, display headings, hairlines instead of boxes */
 body.site .prose { margin-top: 34px; color: var(--dim); font-size: 13.5px; line-height: 1.85; }
 body.site .prose > * + * { margin-top: 20px; }
 body.site .prose h2 {
@@ -714,10 +567,7 @@ body.site .prose table { width: 100%; border-collapse: collapse; font-size: 12.5
 body.site .prose th, body.site .prose td { text-align: left; padding: 9px 12px; border: 1px solid var(--line); }
 body.site .prose th { color: var(--ink); font-weight: 500; }
 
-/* ── post figures ──
-   Diagrams are built from the site's own tokens rather than exported as PNGs.
-   They switch with ink and paper, stay sharp at any density, and a diagram of
-   the sidebar stops being a lie the next time the sidebar changes. */
+/* ── post figures ── */
 body.site .pf { margin: 34px 0 0; }
 body.site .pf-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
 body.site .pf-panel { border: 1px solid var(--line2); background: var(--panel); min-width: 0; }
@@ -744,8 +594,6 @@ body.site .pf-row.blocked .pf-mark, body.site .pf-row.blocked small { color: var
 body.site .pf-row.done .pf-mark, body.site .pf-row.done small { color: var(--st-done); }
 body.site .pf-row.idle .pf-mark, body.site .pf-row.idle small { color: var(--st-idle); }
 
-/* The left panel animates because the argument is the motion. Four braille
-   frames at 8fps is what 0.7.5 actually did, per working pane, forever. */
 body.site .pf-spin { position: relative; display: inline-block; width: 1ch; }
 body.site .pf-spin i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: pf-frame .5s steps(1, end) infinite; }
 body.site .pf-spin i:nth-child(2) { animation-delay: .125s; }
@@ -763,8 +611,6 @@ body.site .pf-step { color: var(--dim); padding: 5px 0; }
 body.site .pf-step b { color: var(--ink); font-weight: 400; }
 body.site .pf-step s { display: block; color: var(--faint); text-decoration: none; font-size: 10.5px; padding-top: 2px; }
 body.site .pf-arrow { color: var(--line2); padding: 1px 0; }
-/* the two outcomes are alternatives, not the next two steps, so they get a
-   fork rather than another length of the same connector */
 body.site .pf-fork em { color: var(--faint); font-style: normal; margin-right: 8px; }
 body.site .pf-fork s { padding-left: 34px; }
 body.site .pf-stop { color: var(--st-done); }
@@ -841,9 +687,8 @@ body.site .vs-list p { margin: 0; color: var(--dim); font-size: 14px; line-heigh
 
 /* ── close ── */
 body.site .end { position: relative; overflow: hidden; padding: 96px var(--gut) 104px; border-bottom: 1px solid var(--line2); }
-/* The bleed is a fraction of the mark, not of the section. As a percentage it
-   resolved against .end's height, so the taller the copy wrapped the further
-   the ram sank — on a phone only its crown cleared the divider. */
+/* the bleed is a fraction of the mark, not the section — a % would resolve
+   against .end's height */
 body.site .end .ram {
   --ram-size: min(560px, 54vw);
   position: absolute; right: -6%; bottom: calc(var(--ram-size) * -0.22);
@@ -853,12 +698,7 @@ body.site .end .in { position: relative; z-index: 1; }
 body.site .end h2 { font-family: var(--disp); font-weight: 900; letter-spacing: -.05em; font-size: clamp(36px, 5.4vw, 70px); line-height: .93; margin: 0; max-width: 13ch; color: var(--ink); }
 body.site .end p { margin: 20px 0 0; color: var(--dim); font-size: 13.5px; max-width: 52ch; line-height: 1.8; }
 
-/* ── footer ──
-   The drafting title block that used to sit here is gone. Three of its five
-   cells were marketing in a spec costume, it was identical on every page so it
-   said nothing after the first view, and its version was hardcoded in two
-   files. The two facts worth keeping now sit in the footer line, with the
-   version read from latest.json at build. */
+/* ── footer ── */
 body.site .foot { padding: 22px var(--gut); border-top: 1px solid var(--line2); display: flex; gap: 22px; align-items: center; flex-wrap: wrap; color: var(--faint); font-size: 11.5px; }
 body.site .foot a { color: var(--dim); text-decoration: none; }
 body.site .foot a:hover { color: var(--ink); }
@@ -868,9 +708,6 @@ body.site .meta .yc { color: var(--dim); display: inline-flex; align-items: cent
 body.site .meta .yc img { display: block; }
 body.site .meta .yc:hover { color: var(--ink); text-decoration: none; }
 body.site .foot .fact { color: var(--faint); font-variant-numeric: tabular-nums; }
-/* the outbound cluster sits right: site links and provenance on one side, ways
-   to reach the project on the other. Its own gap is tighter than the row's, so
-   two 14px marks read as a pair, not as two more items in the list. */
 body.site .foot .out { margin-left: auto; display: flex; align-items: center; gap: 16px; }
 body.site .foot .ico { display: inline-flex; color: var(--faint); }
 body.site .foot .ico svg { width: 14px; height: 14px; fill: currentColor; }
@@ -879,92 +716,49 @@ body.site .foot .ico:hover { color: var(--ink); }
 @media (max-width: 900px) {
   :root { --gut: 20px; }
   body.site { background-size: 40px 40px; padding-bottom: 40px; }
-  /* One row can't hold the lockup, the count, Install and three links at
-     390px — those are 450px of cells in 350px. The links move into the sheet,
-     which also carries what phone width otherwise drops silently. */
   body.site .hd-nav a.lnk { display: none; }
-  /* the toggle is 103px of the bar and the sheet now carries it. Left in, it
-     overflowed the nav at 430–560px, which widened the document past the
-     viewport and left a dead strip down the right of every section. */
   body.site .hd-nav .mode { display: none; }
   body.site .hd-nav .menu { display: inline-flex; }
   body.site .sheet.open { display: block; }
-  /* two up: the column divider alone left the rows floating together, so the
-     four cells read as one block rather than a grid. The bottom row keeps its
-     edge from the strip's own border. */
   body.site .strip { grid-template-columns: 1fr 1fr; }
   body.site .strip .stat { border-bottom: 1px solid var(--line); }
   body.site .strip .stat:nth-last-child(-n + 2) { border-bottom: 0; }
   body.site .strip .stat:nth-child(2n) { border-right: 0; }
-  /* the evidence drops under the text rather than competing for width */
   body.site .caps > .cap { grid-template-columns: 54px minmax(0, 1fr); gap: 0 18px; }
   body.site .caps .n > span:first-child { font-size: 30px; }
-  /* stacked, the card butted straight into the last line of the paragraph —
-     the 20px was inside its border, so it padded the card rather than
-     separating it. Margin instead, and the interior goes back to even. */
   body.site .caps .ev { grid-column: 2; margin-top: 20px; }
   body.site .fig { padding: 26px var(--gut) 30px; }
   body.site .plate { aspect-ratio: auto; }
   body.site .hd-hero { padding: 60px var(--gut) 52px; }
-  /* 224px of sections beside a phone measure left the title breaking every two
-     words. A sticky jump list is worth least on the screen it costs most, so
-     the post falls back to the same single column a heading-less post uses. */
   body.site .article { grid-template-columns: minmax(0, 1fr); }
   body.site .article .toc { display: none; }
 }
 
-/* Below this the nav's cells stop fitting, so they come off in order of how
-   little they're worth on a phone. Measured at the 24px gap: lock 88 + github
-   88 + x 30 + toggle 103 + install 86 is 515px of cells, and a 480px viewport
-   leaves 440px. X goes first — it's the one thing the footer also carries. */
 @media (max-width: 560px) {
   body.site .hd-nav { gap: 14px; }
   body.site .hd-nav .ico[href*="x.com"] { display: none; }
-  /* the hint stops competing for the same line as the title and becomes the
-     line under it — right-aligned, it read as a second ragged column */
   body.site .fighd { flex-wrap: wrap; gap: 6px 16px; }
   body.site .fighd .r { margin-left: 0; text-align: left; }
-  /* the close is mostly the watermark's room at this width */
   body.site .end { padding: 56px var(--gut) 64px; }
-  /* nothing to push against on one column: the cluster hung alone on its own
-     line while the rest of the footer sat left */
   body.site .foot .out { margin-left: 0; }
-  /* the mark carries no wordmark of its own, so once the row wrapped it read as
-     a stray glyph leading a list rather than as a lockup. The identity is at the
-     top of the page; here it was only costing the row its first cell. */
   body.site .foot .ram { display: none; }
-  /* the 132px date column left the title about 120px to live in, so every
-     headline broke every two words. The date goes above the entry instead. */
   body.site .posts a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
   body.site .posts time { grid-column: 1 / -1; }
-  /* the count column took half the head and squeezed the copy into a
-     three-words-per-line ribbon; stacked, it becomes the head's footer */
   body.site .ph-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
   body.site .ph-side { text-align: left; }
   body.site .ph-side b { font-size: 44px; }
 }
 
 @media (max-width: 430px) {
-  /* 44 characters at 13.5px ran to a third line with "sh" alone on it. At 12px
-     the only break opportunity — the space after -fsSL — lands mid-line and the
-     URL stays whole. */
   body.site .hd-cmd code { padding: 12px 14px; font-size: 12px; }
   body.site .hd-cmd button { padding: 12px 13px; }
 }
 
-/* The narrow end of the range — SE-class phones and folded covers, 320px up.
-   Four cells and three gaps came to 334px against 324px of bar at 364, so the
-   nav overflowed again and the document went wider than the screen. The count
-   is the widest thing that can go and still leave a working link: the mark
-   keeps the destination, and the same number is one screen down in the strip. */
 @media (max-width: 380px) {
   :root { --gut: 16px; }
   body.site .hd-nav { gap: 10px; }
   body.site .hd-nav .ico.wide { width: 30px; gap: 0; padding: 0; }
   body.site .hd-nav .ico.wide b { display: none; }
-  /* the button's 60px was the difference between two lines and a third with
-     "sh" on it, so it becomes the row under the command instead of the cell
-     beside it — the same shape the plugins list uses for its foot */
   body.site .hd-cmd { flex-wrap: wrap; }
   body.site .hd-cmd code { flex: 1 1 100%; }
   body.site .hd-cmd button {
@@ -973,23 +767,16 @@ body.site .foot .ico:hover { color: var(--ink); }
   }
 }
 
-/* The mock scales on its own width — .hero-product-shot is the container.
-   Sidebar left, tabs above the pane: the same layout as the wide plate, just
-   smaller. It used to reflow into stacked strips, which is a shape herdr
-   never renders and which overflowed sideways anyway. Type is the thing that
-   shrinks, so the terminal stays crisp rather than being transform-scaled. */
+/* the mock scales on its own width — .hero-product-shot is the container */
 @container (max-width: 900px) {
   body.site .herdr-ui-mock {
     aspect-ratio: auto; height: 74vh; min-height: 460px;
-    /* the sidebar keeps enough width for a branch name under the workspace */
     grid-template-columns: minmax(84px, 27%) minmax(0, 1fr);
   }
   body.site .mock-space, body.site .mock-agent { padding: 6px 8px; }
-  /* "grouped" is the sort mode; at this width it collides with the heading */
   body.site .mock-agent-title span:last-child { display: none; }
   body.site .mock-main { min-height: 0; min-width: 0; }
   body.site .mock-view, body.site .mock-pane { min-width: 0; }
-  /* splits stack out of view rather than halving an already narrow pane */
   body.site .mock-panes { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
   body.site .mock-panes .mock-pane:not(.focused) { display: none; }
 }
@@ -998,14 +785,8 @@ body.site .foot .ico:hover { color: var(--ink); }
   body.site .strip i.live { animation: none; }
 }
 
-/* ──────────────────────────────────────────────────────────────
-   Typography split — readability first.
-
-   Prose inherits --body from body.site. Everything below is put back
-   into mono because mono is doing a real job there: identifiers and
-   repo paths, commands, uppercase labels, and figures with units.
-   Display headings stay Archivo and are set where they're declared.
-   ────────────────────────────────────────────────────────────── */
+/* ── typography: mono where it carries identifiers, commands, labels,
+   figures; prose stays --body ── */
 body.site .hd-nav a.lnk,
 body.site .hd-nav .btn,
 body.site .hd-eyebrow,
@@ -1032,7 +813,6 @@ body.site pre {
   font-family: var(--mono);
 }
 
-/* prose sizes: comfortable rather than compact */
 body.site .lede { font-size: 16px; line-height: 1.7; max-width: 56ch; }
 body.site .ph p { font-size: 15.5px; line-height: 1.7; max-width: 62ch; }
 body.site .caps p { font-size: 14.5px; line-height: 1.7; color: var(--dim); }
diff --git a/website/index.html b/website/index.html
index d761fd66..b241c1b7 100644
--- a/website/index.html
+++ b/website/index.html
@@ -90,7 +90,7 @@
             window.herdrGround.apply(window.herdrGround.read());
         </script>
         <link rel="stylesheet" href="/css/style.css?v=59" />
-        <link rel="stylesheet" href="/css/site.css?v=62" />
+        <link rel="stylesheet" href="/css/site.css?v=64" />
     </head>
     <body class="site">
     <div class="hd-frame">
@@ -403,8 +403,6 @@
                     <h3>Always running.&nbsp;<b class="arw">&#8594;</b></h3>
                     <p>Herdr isn't an app you keep open. It's a server running in the background, and the terminals live inside it. Close the lid or drop the network and the agents keep working; restart the machine and Herdr brings the layout back and resumes their sessions.</p>
                 </div>
-                <!-- the evidence column describes the session in the plate above,
-                     so the two never state different numbers -->
                 <div class="ev" aria-hidden="true">
                     <div class="ev-row"><span>herdr-server</span><b><i class="beat"></i>up</b></div>
                     <div class="ev-note">3 workspaces &middot; 4 agents &middot; nobody attached</div>
@@ -428,8 +426,6 @@
                     <h3>Agent-native.&nbsp;<b class="arw">&#8594;</b></h3>
                     <p>The CLI and the socket API are the same surface agents drive. They split panes, start each other, prompt each other, and wait until another agent is genuinely blocked instead of firing keystrokes and hoping.</p>
                 </div>
-                <!-- real lines from docs/agent-automation, in the order a
-                     review workflow actually runs them -->
                 <div class="ev">
                     <div class="tape" aria-hidden="true"><b>$</b><span data-tape></span></div>
                 </div>
@@ -441,9 +437,6 @@
                     <p>Claude Code, Codex, Cursor, opencode, Grok and the rest. Herdr doesn't wrap them or replace them, it just owns their terminals — one binary, macOS and Linux, Windows in beta.</p>
                 </div>
                 <div class="ev">
-                    <!-- named, not bare marks: several of these silhouettes are
-                         unreadable at this size on their own, and the name is
-                         what a visitor is scanning for anyway -->
                     <div class="herd">
                         <span><i style="--m: url('/assets/agent-icons/claude.svg')"></i>Claude Code</span>
                         <span><i style="--m: url('/assets/agent-icons/codex-mask.svg')"></i>Codex</span>
@@ -457,26 +450,18 @@
                     <div class="ev-note"><!--AGENTS_NOTE--></div>
                 </div>
             </a>
-            <!-- 05 stays redacted. There is no reveal and no link: the whole
-                 point is that something is there and it isn't saying what.
-                 The real copy is deliberately not in this page at all — not in
-                 a hidden element and not in a comment — because view-source
-                 ships to everyone and the product hasn't launched. The only
-                 thing that leaks is the shape of a command, which is the
-                 tease. Blocks are aria-hidden so a screen reader gets the
-                 caption instead of a mouthful of gibberish. -->
-            <div class="cap cap-soon">
-                <div class="n"><span>05</span></div>
+            <a class="cap cap-soon" href="/blog/herdr-is-joining-y-combinator/#where-were-going">
+                <div class="n"><span>05</span><span class="soon-tag">soon</span></div>
                 <div class="cap-in">
-                    <h3 aria-hidden="true"><span class="mask">█████ ██████</span></h3>
+                    <h3>Where do agents run while you sleep?&nbsp;<b class="arw">&#8594;</b></h3>
                     <p aria-hidden="true"><span class="mask">████ █████████ █████████ ████ █ ████████ ████ ███ ██ ██ ██████ ███ ███ ██████ █████ █████ █████</span></p>
-                    <p class="sr">Redacted. Something is coming.</p>
+                    <p class="sr">The answer is redacted for now. Read where Herdr is going in the Y Combinator announcement.</p>
                 </div>
                 <div class="ev">
                     <div class="tape" aria-hidden="true"><b>$</b><span class="mask">█████ █████ █████</span></div>
                     <div class="ev-note" aria-hidden="true"><span class="mask">███████ ███ █████ █████</span></div>
                 </div>
-            </div>
+            </a>
         </div>
 
         <section class="end" id="install">
diff --git a/website/src/components/SiteLayout.astro b/website/src/components/SiteLayout.astro
index 799bcf26..85240b2e 100644
--- a/website/src/components/SiteLayout.astro
+++ b/website/src/components/SiteLayout.astro
@@ -95,7 +95,7 @@ const facts = version ? `v${version} · Apache 2.0` : 'Apache 2.0';
       window.herdrGround.apply(window.herdrGround.read());
     </script>
     <link rel="stylesheet" href="/css/style.css?v=59" />
-    <link rel="stylesheet" href="/css/site.css?v=63" />
+    <link rel="stylesheet" href="/css/site.css?v=64" />
   </head>
   <body class="site">
     <div class="hd-frame">