Image captions in post bodies + memo print cleanup

src/app/about/page.tsx

@@ -36,7 +36,7 @@ export default async function AboutPage() {
       <section className="px-6 sm:px-16 py-12 border-b border-border-light">
         <div className="max-w-screen-2xl mx-auto grid grid-cols-1 md:grid-cols-2 md:gap-x-12 items-stretch">
           <div className="md:pr-12 md:border-r md:border-border-light flex md:items-center">
-            <h1 className="type-display text-dark" style={{ letterSpacing: "-0.126rem" }}>
+            <h1 className="type-display text-dark">
               Canada can be the most prosperous country on earth
             </h1>
           </div>

src/app/globals.css

@@ -126,106 +126,40 @@ html {
 
 /* ─── Font Faces ─── */
 
+/* Licensed Klim webfonts (order 26070690). Weight ranges map every weight the
+   site requests onto the licensed cuts; italics and unlicensed bolds are
+   browser-synthesized. */
+
 /* Söhne Kraftig — Display/Headlines (primary brand font) */
 @font-face {
   font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-buch.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-buch-kursiv.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-kraftig.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-kraftig-kursiv.woff2") format("woff2");
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-dreiviertelfett.woff2") format("woff2");
-  font-weight: 600;
+  src: url("/assets/fonts/soehne-kraftig.woff2") format("woff2");
+  font-weight: 400 500;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: "Soehne Kraftig";
-  src: url("/assets/fonts/test-soehne/test-soehne-fett.woff2") format("woff2");
-  font-weight: 700;
+  src: url("/assets/fonts/soehne-fett.woff2") format("woff2");
+  font-weight: 600 700;
   font-style: normal;
   font-display: swap;
 }
 
 /* Financier Text — Body copy */
 @font-face {
   font-family: "Financier Text";
-  src: url("/assets/fonts/Test Financier Text/test-financier-text-regular.woff2") format("woff2");
+  src: url("/assets/fonts/financier-text-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
-@font-face {
-  font-family: "Financier Text";
-  src: url("/assets/fonts/Test Financier Text/test-financier-text-regular-italic.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Financier Text";
-  src: url("/assets/fonts/Test Financier Text/test-financier-text-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Financier Text";
-  src: url("/assets/fonts/Test Financier Text/test-financier-text-bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
 
 /* Founders Grotesk Mono — Buttons, labels, meta */
 @font-face {
   font-family: "Founders Grotesk Mono";
-  src: url("/assets/fonts/Test Founders Grotesk Mono/test-founders-grotesk-mono-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Founders Grotesk Mono";
-  src: url("/assets/fonts/Test Founders Grotesk Mono/test-founders-grotesk-mono-medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Founders Grotesk Mono";
-  src: url("/assets/fonts/Test Founders Grotesk Mono/test-founders-grotesk-mono-semibold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: "Founders Grotesk Mono";
-  src: url("/assets/fonts/Test Founders Grotesk Mono/test-founders-grotesk-mono-bold.woff2") format("woff2");
-  font-weight: 700;
+  src: url("/assets/fonts/founders-grotesk-mono-regular.woff2") format("woff2");
+  font-weight: 400 500;
   font-style: normal;
   font-display: swap;
 }
@@ -421,6 +355,20 @@ body {
   margin: 1.4em 0;
 }
 
+/* Image captions: an <em> directly after an <img> */
+.prose-bc img:has(+ em) {
+  margin-bottom: 0;
+}
+
+.prose-bc img + em {
+  display: block;
+  font-family: var(--font-label);
+  font-size: 0.8125rem;
+  font-style: normal;
+  color: var(--color-charcoal-500);
+  margin-top: 0.75em;
+}
+
 /* ─── Supporters list (memo detail) ─── */
 
 .memo-supporters p {

src/app/memos/[slug]/MemoPrintHeader.tsx

@@ -0,0 +1,84 @@
+interface MemoPrintHeaderProps {
+  title: string;
+  authorName: string;
+  authorTitle: string | null;
+  authorImage: string | null;
+  date: string;
+  url: string;
+  brand?: "canada" | "toronto";
+}
+
+/* Print-only header: Build Canada branding + memo meta. Hidden on screen
+   via the .print-only rules in globals.css. */
+export function MemoPrintHeader({
+  title,
+  authorName,
+  authorTitle,
+  authorImage,
+  date,
+  url,
+  brand = "canada",
+}: MemoPrintHeaderProps) {
+  return (
+    <div className="print-only mb-10 pb-5 border-b border-black">
+      <div className="flex items-center justify-between mb-8">
+        {brand === "toronto" ? (
+          /* The nav's Toronto lockup: white wordmark + "Toronto" in the
+             accent-blue box (see Navbar.tsx). Forced color-adjust so the
+             box prints. */
+          <div className="theme-toronto bg-accent flex items-center gap-3 px-4 py-3 [-webkit-print-color-adjust:exact] [print-color-adjust:exact]">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/assets/logos/logo-standard.svg"
+              alt="Build Canada"
+              width={86}
+              height={40}
+              className="h-[36px] w-auto"
+            />
+            <span aria-hidden="true" className="self-stretch w-px bg-bg" />
+            <span className="font-sans font-medium text-bg text-[18px] leading-none whitespace-nowrap">
+              Toronto
+            </span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/assets/logos/sticker-build-canada-logo.webp"
+              alt="Build Canada"
+              width={32}
+              height={32}
+              className="w-8 h-8"
+            />
+            <span className="type-label font-semibold tracking-wider">Build Canada</span>
+          </div>
+        )}
+        <span className="type-label break-all text-right">
+          {url.replace(/^https?:\/\//, "")}
+        </span>
+      </div>
+      <h1 className="type-title mb-4">{title}</h1>
+      <div className="flex items-center gap-4">
+        {authorImage && (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={authorImage}
+            alt={authorName}
+            width={56}
+            height={56}
+            className="w-14 h-14 object-cover shrink-0"
+          />
+        )}
+        <div className="min-w-0">
+          <p className="type-label font-medium m-0">{authorName}</p>
+          {authorTitle && (
+            <p className="type-label text-text-secondary m-0 mt-0.5">
+              {authorTitle}
+            </p>
+          )}
+          <p className="type-label text-text-secondary m-0 mt-0.5">{date}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/memos/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { TwitterEmbed, MemoSubscribe, RelatedMemos } from "./MemoClientParts";
 import { MemoEngagement } from "./MemoEngagement";
 import { ShareSection } from "@/components/share";
 import { MemoHero } from "./MemoHero";
+import { MemoPrintHeader } from "./MemoPrintHeader";
 import { Signpost } from "@/components/custom/signpost";
 import { buildGraph } from "@/lib/schemas/graph";
 import { generateArticleSchema } from "@/lib/schemas/generators/article";
@@ -170,56 +171,27 @@ export default async function MemoDetailPage({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
 
-      {/* Print-only header: Build Canada branding + memo meta */}
-      <div className="print-only mb-10 pb-5 border-b border-black">
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center gap-2">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src="/assets/logos/sticker-build-canada-logo.webp"
-              alt="Build Canada"
-              width={32}
-              height={32}
-              className="w-8 h-8"
-            />
-            <span className="type-label font-semibold tracking-wider">Build Canada</span>
-          </div>
-          <span className="type-label break-all text-right">
-            {fullUrl.replace(/^https?:\/\//, "")}
-          </span>
-        </div>
-        <h1 className="type-title mb-4">{memo.title}</h1>
-        <div className="flex items-center gap-4">
-          {authorImage && (
-            /* eslint-disable-next-line @next/next/no-img-element */
-            <img
-              src={authorImage}
-              alt={memo.author.name}
-              width={56}
-              height={56}
-              className="w-14 h-14 object-cover shrink-0"
-            />
-          )}
-          <div className="min-w-0">
-            <p className="type-label font-medium m-0">{memo.author.name}</p>
-            {memo.author.title && (
-              <p className="type-label text-text-secondary m-0 mt-0.5">
-                {memo.author.title}
-              </p>
-            )}
-            <p className="type-label text-text-secondary m-0 mt-0.5">{date}</p>
-          </div>
-        </div>
-      </div>
-
-      <MemoHero
+      <MemoPrintHeader
         title={memo.title}
         authorName={memo.author.name}
+        authorTitle={memo.author.title}
         authorImage={authorImage}
         date={date}
-        supporters={memo.supporters}
+        url={fullUrl}
       />
 
+      {/* Hidden in print — the print-only header above already carries the
+          title, author, and date. */}
+      <div className="print-hide">
+        <MemoHero
+          title={memo.title}
+          authorName={memo.author.name}
+          authorImage={authorImage}
+          date={date}
+          supporters={memo.supporters}
+        />
+      </div>
+
       <div
         className="animate-fade-in max-w-[1400px] mx-auto px-[5vw] md:px-[10vw] pt-4 pb-[52px] 2xl-memo:grid 2xl-memo:grid-cols-[240px_minmax(0,1fr)] 2xl-memo:gap-12"
         style={{ animationDelay: "0.3s" }}

src/app/toronto/memos/[slug]/page.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/app/memos/[slug]/MemoClientParts";
 import { ShareSection } from "@/components/share";
 import { MemoHero } from "@/app/memos/[slug]/MemoHero";
+import { MemoPrintHeader } from "@/app/memos/[slug]/MemoPrintHeader";
 import { Signpost } from "@/components/custom/signpost";
 import { buildGraph } from "@/lib/schemas/graph";
 import { generateArticleSchema } from "@/lib/schemas/generators/article";
@@ -160,16 +161,30 @@ export default async function TorontoMemoDetailPage({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
 
-      <MemoHero
+      <MemoPrintHeader
         title={memo.title}
         authorName={memo.author.name}
+        authorTitle={memo.author.title}
         authorImage={authorImage}
         date={date}
-        supporters={memo.supporters}
-        backHref={BASE_PATH}
-        backLabel="All Toronto Memos"
+        url={fullUrl}
+        brand="toronto"
       />
 
+      {/* Hidden in print — the print-only header above already carries the
+          title, author, and date. */}
+      <div className="print-hide">
+        <MemoHero
+          title={memo.title}
+          authorName={memo.author.name}
+          authorImage={authorImage}
+          date={date}
+          supporters={memo.supporters}
+          backHref={BASE_PATH}
+          backLabel="All Toronto Memos"
+        />
+      </div>
+
       <div
         className="animate-fade-in max-w-[1400px] mx-auto px-[5vw] md:px-[10vw] pt-[42px] pb-[52px] 2xl-memo:grid 2xl-memo:grid-cols-[240px_minmax(0,1fr)] 2xl-memo:gap-12"
         style={{ animationDelay: "0.3s" }}

src/components/Footer.tsx

@@ -82,8 +82,8 @@ export default function Footer() {
             <h2
               className="text-linen-100 text-[clamp(36px,10vw,120px)]"
               style={{
-                fontFamily: '"Test Soehne Fett", "Test Soehne", sans-serif',
-                fontWeight: 500,
+                fontFamily: '"Soehne Kraftig", sans-serif',
+                fontWeight: 400,
                 letterSpacing: "-0.03em",
                 lineHeight: 1.1,
               }}

src/components/auth/DraftPreviewBanner.tsx

@@ -31,15 +31,15 @@ function ExitPreviewButton({
 export function DraftPreviewBanner({ state }: DraftPreviewBannerProps) {
   if (state === "viewing-draft") {
     return (
-      <div className="w-full bg-amber-500 text-white text-sm px-4 py-2 flex items-center justify-between">
+      <div className="print-hide w-full bg-amber-500 text-white text-sm px-4 py-2 flex items-center justify-between">
         <span className="font-medium">DRAFT — not yet published</span>
         <ExitPreviewButton className="underline" label="Exit preview" />
       </div>
     );
   }
 
   return (
-    <div className="w-full border border-amber-400 bg-amber-50 text-amber-900 text-sm px-4 py-3 flex items-center gap-2">
+    <div className="print-hide w-full border border-amber-400 bg-amber-50 text-amber-900 text-sm px-4 py-3 flex items-center gap-2">
       <span>No draft found for this slug.</span>
       <ExitPreviewButton className="underline ml-auto" label="Exit preview mode" />
     </div>

src/components/custom/signpost/desktop-nav.tsx

@@ -45,7 +45,7 @@ export function DesktopNav({
   );
 
   return (
-    <nav className="hidden 2xl-memo:block" aria-label="Table of contents">
+    <nav className="print-hide hidden 2xl-memo:block" aria-label="Table of contents">
       <div
         className={`sticky ${topClass} ${showTopBorder ? "border-accent border-t-[2px] " : ""}overflow-x-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`}
       >