Dev: fix/content-proofreading

skills/context/progress-tracker.md

@@ -22,7 +22,7 @@ All seven homepage sections are built, wired, and animated (scroll-driven entran
 ### Sections
 
 - **Hero** -- full-bleed with isolated `HeroWebglBackground` layer, responsive typography, inner `.site-container`. Interactive WebGL globe (R3F/Three.js) in `src/components/webgl/globe/` (surface, hubs, arcs, atmosphere, starfield, shaders, layout, colors modules); baked static WebP/PNG fallback for mobile (`<1024px`), no-WebGL, and reduced motion via `hero-globe-static.ts` + `GlobeCanvasErrorBoundary`. Hero copy uses `.hero-*` component classes in `globals.css`; CTAs use `HashLink`.
-- **Mission** -- desktop accordion cards with scroll pin-stack, mobile snap carousel with pagination dots, per-card illustrations, reduced-motion support. Card height capped via `min(px, dvh)` for viewport fit. Illustration placements use dvh-based responsive sizing.
+- **Mission** -- desktop accordion cards with scroll pin-stack, mobile snap carousel with pagination dots, per-card illustrations, reduced-motion support. Card height capped via `min(px, dvh)` for viewport fit. Expanded card content and illustrations use card-container-aware scaling, with illustrations centered in the available space between the title and body for short desktop viewports.
 - **History** -- timeline section.
 - **Team** -- team member cards. Member names link to X profile (tappable on mobile/tablet).
 - **Monad** -- GSAP hover/dialog animations, `MonadCardsClient` with Radix dialog (desktop) + Sheet (mobile), `TooltipProvider` in layout.
@@ -90,4 +90,4 @@ All seven homepage sections are built, wired, and animated (scroll-driven entran
 
 ## Latest Handoff
 
-- Events empty state: `events-empty-divider` full-width rule when no upcoming events remain (list borders unchanged when events exist). Removed temporary event helper tests and left no package test script because the static-event flow will be replaced by the event submission/API pipeline. Touched `events-section.tsx`, `globals.css`, and removed the local event test files. Verified at `/#events` (empty + live states); `typecheck`, `build`, and `lint` pass. Open: confirm June 27 vs July 27 event date. Next: event submission/API pipeline.
+- Mission graph placement tuning: moved expanded-card illustrations into the Mission card content grid so each graph centers in the remaining space between the wrapped title and body instead of relying on fixed vertical offsets. Added equal vertical inset and max sizing for the illustration row to preserve breathing room at short desktop heights such as 1440x670. Touched `src/components/sections/mission/mission-cards-client.tsx` and `src/app/globals.css`. Verification: `bun run typecheck`, `bun run lint` (passes with existing warnings in `site-footer.tsx` and `monad-topic-enter.ts`), `bun run build`, browser geometry check at 1440x670 showing equal title/graph and graph/body gaps. Open: existing unrelated lint warnings remain. Next: continue Mission card-by-card visual tuning if requested.

src/app/globals.css

@@ -362,7 +362,7 @@
   }
 
   .hero-container {
-    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-12 relative z-10 flex min-h-svh flex-col pt-[26svh] pb-20 sm:flex-row sm:items-center sm:pt-(--site-header-height) sm:pb-0 lg:translate-y-6;
+    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-12 relative z-10 flex min-h-svh flex-col pt-[26svh] pb-20 sm:flex-row sm:items-center sm:pt-(--site-header-height) sm:pb-0 lg:top-6;
   }
 
   .hero-content {
@@ -392,15 +392,12 @@
   }
 
   .hero-subtitle {
-    @apply mx-auto flex max-w-88 flex-1 flex-col gap-2.5 font-open text-[0.875rem] leading-normal text-text-secondary sm:mx-0 sm:max-w-lg sm:flex-initial sm:text-[0.9375rem] sm:leading-[1.4] md:max-w-xl md:gap-4 md:text-body lg:max-w-3xl text-pretty;
-  }
-
-  .hero-subtitle-lead {
-    @apply lg:whitespace-pre-line;
+    @apply mx-auto flex max-w-88 flex-1 flex-col gap-2.5 font-open text-[0.875rem] leading-normal font-normal text-text-secondary sm:mx-0 sm:max-w-lg sm:flex-initial sm:text-[0.9375rem] sm:leading-[1.4] md:max-w-xl md:gap-4 md:text-body lg:max-w-3xl text-wrap;
   }
 
   .hero-subtitle-emphasis {
     @apply font-mona font-semibold text-text-primary;
+    font-synthesis: none;
   }
 
   .hero-paragraph-lead {
@@ -513,32 +510,64 @@
 
   .mission-card-shell {
     @apply relative overflow-hidden rounded-2xl border border-border-default bg-background text-left;
+    container: mission-card / size;
   }
 
   .mission-card-illustration {
-    @apply pointer-events-none absolute inset-x-0 flex justify-center;
+    @apply pointer-events-none flex h-full min-h-0 items-center justify-center overflow-visible;
+    padding-block: 0.75rem;
+    padding-block: clamp(0.75rem, 2cqh, 1rem);
+  }
+
+  .mission-card-illustration > * {
+    max-width: 100%;
+    max-height: 100%;
   }
 
   .mission-card-content {
-    @apply relative z-10 grid h-full grid-rows-[auto_1fr_auto] p-5 md:p-6 xl:p-7;
+    @apply relative z-10 grid h-full grid-rows-[auto_minmax(0,1fr)_auto] p-5 md:p-6 xl:p-7;
   }
 
   .mission-card-title {
     @apply font-mona leading-none text-text-primary max-md:text-[2.25rem] max-md:font-semibold md:text-section-heading md:font-medium xl:font-semibold;
   }
 
+  .mission-card-title-spaced {
+    @apply mt-4 md:mt-5;
+  }
+
+  .mission-card-body {
+    @apply font-mona text-body-sm font-light text-text-secondary;
+  }
+
+  @media (width >= 48rem) {
+    .mission-card-body {
+      font-size: var(--text-body);
+      line-height: var(--text-body-line-height);
+    }
+  }
+
   @media (width >= 80rem) {
+    .mission-card-content {
+      padding: 1.75rem;
+      padding: clamp(1.25rem, min(5cqw, 4.4cqh), 1.75rem);
+    }
+
     .mission-card-title {
-      font-size: clamp(3rem, 5.5dvh, 3.75rem);
+      font-size: 3.75rem;
+      font-size: clamp(2.5rem, min(10.8cqw, 8.4cqh), 3.75rem);
     }
-  }
 
-  .mission-card-title-spaced {
-    @apply mt-4 md:mt-5 xl:mt-7;
-  }
+    .mission-card-title-spaced {
+      margin-top: 1.75rem;
+      margin-top: clamp(1rem, 3.4cqh, 1.75rem);
+    }
 
-  .mission-card-body {
-    @apply font-mona text-body-sm font-light text-text-secondary md:text-body xl:text-body-lg;
+    .mission-card-body {
+      font-size: var(--text-body-lg);
+      font-size: clamp(1rem, min(3.6cqw, 3.2cqh), 1.25rem);
+      line-height: 1.3;
+    }
   }
 
   .mission-desktop-card-trigger {

src/components/sections/hero-section.tsx

@@ -63,6 +63,12 @@ export function HeroSection() {
                   </>
                 )}
                 {heroSection.paragraphs[0].text}
+                {heroSection.paragraphs[0].tabletLine ? (
+                  <>
+                    <br className="hidden md:block lg:hidden" aria-hidden="true" />
+                    {heroSection.paragraphs[0].tabletLine}
+                  </>
+                ) : null}
               </p>
               {heroSection.paragraphs.slice(1).map((p, i) => (
                 <p

src/components/sections/mission/mission-cards-client.tsx

@@ -29,7 +29,6 @@ import {
 import type { MissionCard, MissionCardId } from "@/lib/content/mission";
 
 type MissionIllustrationPlacement = {
-  topClass: string;
   sizeClass: string;
 };
 
@@ -44,26 +43,27 @@ type MissionDesktopStackProps = MissionCardsProps & {
 const MISSION_COLLAPSED_EYEBROW_CLASS =
   "mission-eyebrow mission-collapsed-card-eyebrow";
 
+const MISSION_ILLUSTRATION_SIZE_LG =
+  "xl:size-[clamp(15rem,min(74cqw,48cqh),28rem)]";
+
+const MISSION_ILLUSTRATION_SIZE_MD =
+  "xl:size-[clamp(13rem,min(64cqw,42cqh),24rem)]";
+
 const MISSION_ILLUSTRATION_PLACEMENTS = {
   pulse: {
-    topClass: "top-[12.5rem] md:top-[14.5rem] xl:top-[60%] xl:-translate-y-1/2",
-    sizeClass: "size-[13.5rem] md:size-[22rem] xl:size-[clamp(18rem,42dvh,28rem)]",
+    sizeClass: `size-[13.5rem] md:size-[22rem] ${MISSION_ILLUSTRATION_SIZE_LG}`,
   },
   disciplines: {
-    topClass: "top-[12rem] md:top-[14rem] xl:top-[calc(50%+3rem)] xl:-translate-y-1/2",
-    sizeClass: "size-[13rem] md:size-[22rem] xl:size-[clamp(18rem,42dvh,28rem)]",
+    sizeClass: `size-[13rem] md:size-[22rem] ${MISSION_ILLUSTRATION_SIZE_LG}`,
   },
   collections: {
-    topClass: "top-[13.5rem] md:top-[14.5rem] xl:top-[calc(50%+3rem)] xl:-translate-y-1/2",
-    sizeClass: "size-[11.5rem] md:size-[20rem] xl:size-[clamp(16rem,36dvh,24rem)]",
+    sizeClass: `size-[11.5rem] md:size-[20rem] ${MISSION_ILLUSTRATION_SIZE_MD}`,
   },
   ideas: {
-    topClass: "top-[12.8rem] md:top-[14.5rem] xl:top-[calc(50%+3rem)] xl:-translate-y-1/2",
-    sizeClass: "size-[14rem] md:size-[22rem] xl:size-[clamp(18rem,42dvh,28rem)]",
+    sizeClass: `size-[14rem] md:size-[22rem] ${MISSION_ILLUSTRATION_SIZE_LG}`,
   },
   culture: {
-    topClass: "top-[14.5rem] md:top-[15.5rem] xl:top-[60%] xl:-translate-y-1/2",
-    sizeClass: "size-[11.5rem] md:size-[18rem] xl:size-[clamp(16rem,36dvh,24rem)]",
+    sizeClass: `size-[11.5rem] md:size-[18rem] ${MISSION_ILLUSTRATION_SIZE_MD}`,
   },
 } satisfies Record<MissionCardId, MissionIllustrationPlacement>;
 
@@ -77,32 +77,30 @@ const MissionExpandedCard = memo(function MissionExpandedCard({
   illustrationActive: boolean;
   className?: string;
 }) {
-  const { topClass, sizeClass } = MISSION_ILLUSTRATION_PLACEMENTS[card.id];
+  const { sizeClass } = MISSION_ILLUSTRATION_PLACEMENTS[card.id];
   const illustrationClassName = cn("text-text-secondary", sizeClass);
 
   return (
     <div className={cn("mission-card-shell", className)}>
-      <div className={cn("mission-card-illustration", topClass)}>
-        {illustrationActive ? (
-          <MissionIllustration
-            key={card.id}
-            pattern={card.pattern}
-            active
-            className={illustrationClassName}
-          />
-        ) : (
-          <MissionIllustrationFallback className={illustrationClassName} />
-        )}
-      </div>
-
       <div className="mission-card-content">
         <div>
           <p className="mission-eyebrow">{card.eyebrow}</p>
           <h2 className="mission-card-title mission-card-title-spaced">
             {card.title}
           </h2>
         </div>
-        <div aria-hidden />
+        <div className="mission-card-illustration" aria-hidden>
+          {illustrationActive ? (
+            <MissionIllustration
+              key={card.id}
+              pattern={card.pattern}
+              active
+              className={illustrationClassName}
+            />
+          ) : (
+            <MissionIllustrationFallback className={illustrationClassName} />
+          )}
+        </div>
         <p className="mission-card-body self-end">{card.body}</p>
       </div>
     </div>

src/lib/content/hero.ts

@@ -5,6 +5,8 @@ export type HeroParagraph = {
   /** Word or phrase rendered with emphasis (e.g. bold + primary color). */
   emphasis?: string;
   text: string;
+  /** Continuation rendered after a tablet-only line break (md–lg). */
+  tabletLine?: string;
 };
 
 export const heroSection = {
@@ -13,7 +15,9 @@ export const heroSection = {
   paragraphs: [
     {
       emphasis: "Cortex",
-      text: "serves all individual, business, and community needs from our local hubs —\nlocal citizens providing expertise, guidance, and connection to the top industry professionals in all verticals — around the world.",
+      text: "serves all individual, business, and community needs through our globally distributed professional network —",
+      tabletLine:
+        "local citizens providing expertise, guidance, and connection to the top industry professionals in all verticals.",
     },
     {
       text: "Everything for Everyone. Everywhere.",
@@ -22,15 +26,15 @@ export const heroSection = {
   mobileParagraphs: [
     {
       emphasis: "Cortex",
-      text: "connects people, businesses, and communities with trusted local experts — anywhere in the world.",
+      text: "serves individual, business, and community needs through a globally distributed professional network.",
     },
   ] satisfies readonly HeroParagraph[],
   primaryCta: {
-    label: "I am new here",
+    label: "New to Cortex",
     href: siteLinks.start.href,
   } satisfies ContentCta,
   secondaryCta: {
-    label: "I am in community",
+    label: "Cortex Community",
     href: siteLinks.services.href,
   } satisfies ContentCta,
 } as const satisfies SectionContent & {

src/lib/content/history.ts

@@ -60,7 +60,7 @@ export const historySection = {
         },
         {
           accent: "North America /",
-          text: " ETH NY mobilization began with Cortex US East alongside new Miami events.",
+          text: " ETH NY mobilization began with Cortex US East alongside new Atlanta events.",
         },
         {
           accent: "Europe & Asia /",

src/lib/content/mission.ts

@@ -33,7 +33,7 @@ export const missionSection = {
   paragraphs: [
     {
       emphasis: "Cortex",
-      text: "is a global network of professionals accelerating the growth, adoption, and integration of blockchain technology into all facets of community life.",
+      text: "is a global network of professionals accelerating the growth, adoption, and integration of AI and Blockchain technology into all facets of community life.",
     },
     {
       text: "We support every region and the unique needs and personas through expert education for every audience, and a full-slate of services including technical, security, research, advocacy, and incubation offerings integral to drive open innovation.",
@@ -68,7 +68,7 @@ export const missionSection = {
       id: "ideas",
       eyebrow: "04 / Ideas",
       title: "Real projects that can become real businesses.",
-      body: "The goal is a pipeline of market-ready products and resilient teams connected to Nitro and other Monad programs.",
+      body: "The goal is a pipeline of market-ready products and resilient teams connected to blockchain and AI platforms, incubators, accelerators, and other support programs across the industries.",
       pattern: "radiating-segments",
     },
     {

src/lib/content/team.ts

@@ -23,7 +23,7 @@ export const teamSection = {
       id: "jeff-paul",
       name: "Jeff Paul",
       role: "Education and talent development",
-      bio: "Former Turbine CEO who helped train 300+ professionals across Web3 ecosystems and scale advanced builder education.",
+      bio: "Edupreneur with over 35 years in education, program building, and talent development. Multi-time founder who has worked across technical, research, product, BD, and operations.",
       image: {
         src: "/images/team/jeff.png",
         alt: "Jeff Paul",
@@ -33,7 +33,7 @@ export const teamSection = {
       xHandle: "japarjam",
       metrics: [
         { label: "300+ careers launched" },
-        { label: "Revenue-positive for 2 years" },
+        { label: "Over $5m in Grants Raised" },
       ],
     },
     {