Issue #59 fixes

app/(marketing)/blog/[slug]/page.tsx

@@ -126,7 +126,7 @@ export default async function BlogPostPage({ params }: PageProps) {
     headline: post.frontmatter.title,
     description: post.frontmatter.description,
     author: {
-      "@type": "Person",
+      "@type": "Organization",
       name: post.frontmatter.author,
     },
     publisher: {

app/components/controls/Chip/Chip.view.tsx

@@ -155,6 +155,7 @@ function ChipView({
         tabIndex={0}
         onClick={handleClick}
         onKeyDown={(e) => {
+          if (e.target instanceof HTMLInputElement) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             handleClick(e as unknown as React.MouseEvent<HTMLButtonElement>);

app/components/navigation/Footer.tsx

@@ -25,7 +25,7 @@ const Footer = memo(() => {
   /** Figma 18411:62925 (1024+): org name is one line, `w-full whitespace-nowrap`. */
   const orgNameClass = `${bodyTextClass} lg:whitespace-nowrap`;
 
-  const primaryLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
+  const primaryLinkClass = `inline-flex w-fit max-w-full shrink-0 whitespace-nowrap self-start md:self-end text-[var(--color-content-default-primary)] font-inter text-base font-medium leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer lg:text-2xl lg:font-normal lg:leading-7`;
 
   /** Figma 18411:62944: 40px gaps, w-[396px] link block; `p-2` on links overruns 396px—tighten x at `md+` row. */
   const legalLinkClass = `inline-flex w-fit max-w-full self-start text-[var(--color-content-default-secondary)] font-inter text-sm font-normal leading-5 tracking-[0%] ${linkFocusClass} p-2 -m-2 cursor-pointer underline decoration-solid [text-decoration-skip-ink:none] md:self-auto md:px-0 md:py-1 md:mx-0 md:text-xs md:leading-4 md:whitespace-nowrap md:no-underline md:text-[var(--color-content-default-primary)] lg:text-sm lg:leading-5 lg:text-[var(--color-content-default-primary)]`;
@@ -37,7 +37,11 @@ const Footer = memo(() => {
     name: t("organization.name"),
     email: t("organization.email"),
     url: t("organization.url"),
-    sameAs: [t("social.bluesky.url"), t("social.gitlab.url")],
+    sameAs: [
+      t("social.bluesky.url"),
+      t("social.gitea.url"),
+      t("social.mastodon.url"),
+    ],
   };
 
   return (
@@ -104,27 +108,42 @@ const Footer = memo(() => {
                     {/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
                     <img
                       src={getAssetPath(ASSETS.BLUESKY_LOGO)}
-                      alt="Bluesky"
+                      alt=""
                       width={24}
                       height={22}
                       className="h-[21px] w-[24px] flex-shrink-0 transition-transform group-hover:scale-110"
                     />
-                    <div className={bodyTextClass}>{t("social.bluesky.handle")}</div>
+                    <div className={bodyTextClass}>{t("social.bluesky.label")}</div>
                   </a>
                   <a
-                    href={t("social.gitlab.url")}
+                    href={t("social.gitea.url")}
                     className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
-                    aria-label={t("social.gitlab.ariaLabel")}
+                    aria-label={t("social.gitea.ariaLabel")}
                   >
                     {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
                     <img
-                      src={getAssetPath(ASSETS.GITLAB_ICON)}
-                      alt="GitLab"
+                      src={getAssetPath(ASSETS.GITEA_ICON)}
+                      alt=""
                       width={22}
                       height={22}
                       className="h-5 w-[22px] flex-shrink-0 grayscale transition-transform group-hover:scale-110"
                     />
-                    <div className={bodyTextClass}>{t("social.gitlab.handle")}</div>
+                    <div className={bodyTextClass}>{t("social.gitea.label")}</div>
+                  </a>
+                  <a
+                    href={t("social.mastodon.url")}
+                    className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
+                    aria-label={t("social.mastodon.ariaLabel")}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
+                    <img
+                      src={getAssetPath(ASSETS.MASTODON_LOGO)}
+                      alt=""
+                      width={22}
+                      height={22}
+                      className="h-5 w-[22px] flex-shrink-0 grayscale transition-transform group-hover:scale-110"
+                    />
+                    <div className={bodyTextClass}>{t("social.mastodon.label")}</div>
                   </a>
                 </div>
               </div>

app/components/navigation/MenuItem/MenuItem.container.tsx

@@ -70,15 +70,15 @@ const MenuItemContainer = memo<MenuItemProps>(
           "border border-[var(--color-border-default-brand-primary,#fdfaa8)] text-[var(--color-content-default-brand-primary,#fefcc9)] bg-transparent hover:bg-[var(--color-gray-800)]",
       };
 
-    // State styles for Inverse mode (black text on yellow background)
+    // State styles for Inverse mode (black text on yellow HeaderTab / inverse surfaces)
     const inverseModeStyles: Record<"default" | "hover" | "selected", string> =
       {
         default:
-          "bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-brand-accent,#4d4a00)] hover:text-[var(--color-content-inverse-primary,black)]",
+          "bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-inverse-brand-secondary)] hover:text-[var(--color-content-inverse-primary,black)]",
         hover:
-          "bg-[var(--color-surface-brand-accent,#4d4a00)] text-[var(--color-content-inverse-primary,black)]",
+          "bg-[var(--color-surface-inverse-brand-secondary)] text-[var(--color-content-inverse-primary,black)]",
         selected:
-          "border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-brand-accent,#4d4a00)]",
+          "border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-inverse-brand-secondary)]",
       };
 
     // Get state styles based on mode

app/components/sections/LogoWall/LogoWall.container.tsx

@@ -20,37 +20,31 @@ const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
         src: getAssetPath(partnerLogoPath("food-not-bombs")),
         alt: t("partners.foodNotBombs"),
         size: "h-11 lg:h-14 xl:h-[70px]",
-        order: "order-1 sm:order-4",
       },
       {
         src: getAssetPath(partnerLogoPath("start-coop")),
         alt: t("partners.startCoop"),
         size: "h-[42px] lg:h-[53px] xl:h-[66px]",
-        order: "order-2 sm:order-2",
       },
       {
         src: getAssetPath(partnerLogoPath("metagov")),
         alt: t("partners.metagov"),
         size: "h-6 lg:h-8 xl:h-[41px]",
-        order: "order-3 sm:order-1",
       },
       {
         src: getAssetPath(partnerLogoPath("open-civics")),
         alt: t("partners.openCivics"),
         size: "h-8 lg:h-10 xl:h-[50px]",
-        order: "order-4 sm:order-5 md:order-6",
       },
       {
         src: getAssetPath(partnerLogoPath("mutual-aid-co")),
         alt: t("partners.mutualAidCo"),
         size: "h-11 lg:h-14 xl:h-[70px]",
-        order: "order-5 sm:order-6 md:order-5",
       },
       {
         src: getAssetPath(partnerLogoPath("cu-boulder")),
         alt: t("partners.cuBoulder"),
         size: "h-10 lg:h-12 xl:h-[60px]",
-        order: "order-6 sm:order-3",
       },
     ],
     [t],

app/components/sections/LogoWall/LogoWall.view.tsx

@@ -14,18 +14,12 @@ function LogoWallView({
       className={`p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)] ${className}`}
     >
       <div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
-        {/* Label */}
-        <p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
-          Trusted by leading cooperators
-        </p>
-
-        {/* Logo Grid Container */}
         <div
           className={`transition-opacity duration-500 ${
             isVisible ? "opacity-60" : "opacity-0"
           }`}
         >
-          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:justify-between md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
+          <div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:flex-wrap md:justify-center md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
             {displayLogos.map((logo, index) => (
               <div
                 key={index}