From a746ffd49dcffde33606fac7dffd65ca17c69b52 Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 4 Aug 2026 15:19:20 -0500
Subject: [PATCH] Lead single roles with the job title again

Only the grouped Broadcom run leads with the employer now, since the
company is what binds its two titles together. The four standalone roles
go back to title first, company beneath.

Acquisitions I wasn't around for get an elbow arrow rather than the git
merge glyph. Font Awesome's arrow-turn-down-right is Pro only, so this
rotates the free arrow-turn-up a quarter turn clockwise; that swaps the
glyph's 1em height into its width, hence the 1em icon box, without which
the arrow overhangs the left edge of the text above it. The merge icon
loses its accent colour, so the icon shape alone carries the during vs
after distinction.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/WhoisDirectory.astro | 113 ++++++++++++++--------------
 src/styles/global.css               |  32 ++++----
 2 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/components/WhoisDirectory.astro b/src/components/WhoisDirectory.astro
index 897120e..3a6f70f 100644
--- a/src/components/WhoisDirectory.astro
+++ b/src/components/WhoisDirectory.astro
@@ -193,7 +193,7 @@ const { active, expired } = await loadCertifications(whoisCredlyHandle);
         <section class="whois-group" aria-labelledby="whois-experience">
             <header class="whois-group-header">
                 <h3 id="whois-experience">Experience</h3>
-                <p>Where I've worked, most recent first.</p>
+                <p>Where I've worked, who's paying my bills.</p>
             </header>
             <ol class="whois-roles">
                 {
@@ -217,62 +217,63 @@ const { active, expired } = await loadCertifications(whoisCredlyHandle);
                                     </span>
                                 </span>
                                 <span class="whois-role-copy">
-                                    <strong>{run.company}</strong>
-                                    {grouped
-                                        ? run.formerly.length > 0 && (
-                                              <span class="whois-role-acquisition whois-role-acquisition-during">
-                                                  <i
-                                                      class="fa-solid fa-code-merge"
-                                                      aria-hidden="true"
-                                                  />
-                                                  via{" "}
-                                                  {run.formerly.join(", ")}
-                                              </span>
-                                          )
-                                        : lead.acquisition && (
-                                              <span
-                                                  class:list={[
-                                                      "whois-role-acquisition",
-                                                      lead.acquisition
-                                                          .duringTenure &&
-                                                          "whois-role-acquisition-during",
-                                                  ]}
-                                              >
-                                                  <i
-                                                      class="fa-solid fa-code-merge"
-                                                      aria-hidden="true"
-                                                  />
-                                                  {lead.acquisition.note}
-                                              </span>
-                                          )}
-                                    <ol
-                                        class:list={[
-                                            "whois-role-titles",
-                                            grouped &&
-                                                "whois-role-titles-grouped",
-                                        ]}
-                                    >
-                                        {run.roles.map((role) => {
-                                            const span = tenureParts(role);
+                                    {grouped ? (
+                                        <>
+                                            <strong>{run.company}</strong>
+                                            {run.formerly.length > 0 && (
+                                                <span class="whois-role-acquisition">
+                                                    <i
+                                                        class="fa-solid fa-code-merge"
+                                                        aria-hidden="true"
+                                                    />
+                                                    via {run.formerly.join(", ")}
+                                                </span>
+                                            )}
+                                            <ol class="whois-role-titles">
+                                                {run.roles.map((role) => {
+                                                    const span =
+                                                        tenureParts(role);
 
-                                            return (
-                                                <li>
-                                                    <span class="whois-role-title">
-                                                        {role.title}
-                                                    </span>
-                                                    {grouped && (
-                                                        <span class="whois-role-subtenure">
-                                                            {span.start}{" "}
-                                                            <span aria-hidden="true">
-                                                                –
-                                                            </span>{" "}
-                                                            {span.end}
-                                                        </span>
-                                                    )}
-                                                </li>
-                                            );
-                                        })}
-                                    </ol>
+                                                    return (
+                                                        <li>
+                                                            <span class="whois-role-title">
+                                                                {role.title}
+                                                            </span>
+                                                            <span class="whois-role-subtenure">
+                                                                {span.start}{" "}
+                                                                <span aria-hidden="true">
+                                                                    –
+                                                                </span>{" "}
+                                                                {span.end}
+                                                            </span>
+                                                        </li>
+                                                    );
+                                                })}
+                                            </ol>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <strong>{lead.title}</strong>
+                                            <span class="whois-role-company">
+                                                {lead.company}
+                                            </span>
+                                            {lead.acquisition && (
+                                                <span class="whois-role-acquisition">
+                                                    <i
+                                                        class:list={[
+                                                            "fa-solid",
+                                                            lead.acquisition
+                                                                .duringTenure
+                                                                ? "fa-code-merge"
+                                                                : "fa-arrow-turn-up fa-rotate-90",
+                                                        ]}
+                                                        aria-hidden="true"
+                                                    />
+                                                    {lead.acquisition.note}
+                                                </span>
+                                            )}
+                                        </>
+                                    )}
                                 </span>
                             </li>
                         );
diff --git a/src/styles/global.css b/src/styles/global.css
index 757e16c..b06bb4b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -876,6 +876,12 @@ h4 {
   font-weight: 800;
 }
 
+.whois-role-company {
+  margin-top: 0.1rem;
+  color: var(--ink);
+  font-size: 0.88rem;
+}
+
 .whois-role-acquisition {
   display: flex;
   gap: 0.45rem;
@@ -886,31 +892,27 @@ h4 {
   line-height: 1.45;
 }
 
+/* "arrow-turn-down-right" is Pro only; arrow-turn-up rotated a quarter turn
+   clockwise draws the same elbow, at the same weight as the other icons. That
+   turn swaps the glyph's 1em height into its width, so the box is 1em wide —
+   any narrower and the rotated arrow overhangs to the left of the text above. */
 .whois-role-acquisition i {
   flex: none;
-  width: 0.85em;
+  width: 1em;
   font-size: 0.9em;
+  line-height: 1;
   text-align: center;
 }
 
-/* Changes of ownership I was actually around for. */
-.whois-role-acquisition-during i {
-  color: var(--accent-strong);
-}
-
+/* Only grouped runs use this list: several titles under one employer, bound
+   together by a rule. Single roles lead with the title instead. */
 .whois-role-titles {
   display: grid;
   gap: 0.55rem;
-  margin: 0.35rem 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* Several titles under one employer earn a rule to bind them together. */
-.whois-role-titles-grouped {
-  margin-top: 0.7rem;
-  padding-left: 0.9rem;
+  margin: 0.7rem 0 0;
+  padding: 0 0 0 0.9rem;
   border-left: 1px solid var(--line);
+  list-style: none;
 }
 
 .whois-role-title {