feat(web): restyle partner sections

apps/web/app/routes/about.tsx

@@ -10,8 +10,8 @@
      Facts         a four-cell seam grid: the run, the coverage, the lead
                    partner and the funder.
      Nationwide    the approved body prose beside the three focus areas.
-     Consortium    the three members as role / name / deliverable panels, under
-                   a header row that carries the EU funding line.
+         Consortium    unboxed rows for the three members.
+           The header carries the EU funding line.
      Legacy        the SHARP I and II panel with the accent start-edge, and the
                    call to action into What We Do.
 
@@ -157,7 +157,7 @@ const ACCENT_EDGE =
 interface ConsortiumMember {
   id: string;
   name: string;
-  /** The role chip - `consortium.role` in the CMS, or the bundled copy's. */
+  /** The role label - `consortium.role` in the CMS, or the bundled copy's. */
   role: string | null;
   description: string;
   website: string | null;
@@ -301,33 +301,36 @@ export default function About({ loaderData }: Route.ComponentProps) {
             </p>
           </div>
 
-          <ul className="grid list-none grid-cols-1 gap-lg md:grid-cols-3">
+          <ul className="list-none divide-y divide-[var(--border-subtle)] border-y border-[var(--border-subtle)]">
             {consortium.map((member) => (
-              <li key={member.id}>
-                <InfoPanel
-                  /* On the sunken band the draft lifts these cards to the
-                     raised dark it uses for a page band (#1d1d1b), one step
-                     lighter than the panel shade InfoPanel defaults to. The
-                     `!` is what makes the override beat the component's own
-                     `bg-*` utility, which sorts after this one. */
-                  className="sh-lift sh-reveal sh-reveal--in hover:border-[var(--border-accent)]"
-                  title={member.name}
-                  {...(member.role
-                    ? { eyebrow: member.role, eyebrowVariant: "chip" as const }
-                    : {})}
-                >
-                  <span className="block">{member.description}</span>
-                  {member.website ? (
-                    <a
-                      href={member.website}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="mt-xs inline-block body-sm-bold text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
-                    >
-                      {member.name}
-                    </a>
+              <li
+                key={member.id}
+                className="sh-reveal sh-reveal--in grid grid-cols-1 gap-md py-lg md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-xl"
+              >
+                <div className="flex flex-col gap-xs">
+                  {member.role ? (
+                    <p className="label-md uppercase text-[var(--text-accent)]">
+                      {member.role}
+                    </p>
                   ) : null}
-                </InfoPanel>
+                  <h3 className="heading-h3 text-[var(--text-primary)]">
+                    {member.website ? (
+                      <a
+                        href={member.website}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-[var(--text-link)] underline underline-offset-2 hover:text-[var(--text-link-hover)]"
+                      >
+                        {member.name}
+                      </a>
+                    ) : (
+                      member.name
+                    )}
+                  </h3>
+                </div>
+                <p className="body-md text-[var(--text-secondary)]">
+                  {member.description}
+                </p>
               </li>
             ))}
           </ul>