diff --git a/CHANGELOG.md b/CHANGELOG.md
index 558392c56..3465f7593 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,16 @@ All notable changes to Patternflow will be documented in this file, newest first
 
 ### Web
 
+- **Journal archive dates stay on one line on a desktop.** The index's date column was a fixed 120px, so above 720px 27 of the 37 Korean dates and 17 of the 37 English ones broke onto a second line. The column now grows to fit its date.
+- **Journal dates are the Seoul day a post was written, wherever the site is built.** The formatter used the build machine's time zone, so a UTC build printed the four posts written between midnight and 9 a.m. in Seoul a day early, 60 of the 520 dates across /journal.
+- **The journal's language switch and Archive label are readable.** The language a page is not in and the index's "Archive" label were #A69F90, 2.3:1 on the cream and 2.6:1 on the white panel, and axe flagged them on all 76 journal pages. They now use the journal's muted ink, 5.0:1 and 5.8:1.
+- **A journal post's language switch no longer sits over the text on a phone.** Below 721px it was fixed 22px from the right edge, inside the column of text, and at 390px the 74 posts scrolled 8,801 lines of text under it. It now starts in the same place and scrolls away with the page.
+- **Dates in the list under a journal post stay clear of the post numbers.** Its rows kept 56px for a 64px number, so above 760px the end of 350 of the 370 dates across the 74 posts ran under it. They now keep the index's 104px.
+- **The footers under a journal post and the journal index line up with the text above them.** As `<footer>`s they took the front page's 60px sides from 901px and none below, so the list under a post started 4px left of the post's text on a desktop and 64px left of it from 721 to 900px. Each now keeps its own panel's side padding; phones are unchanged.
+- **A journal post is one `<main>`, as the journal index is.** A screen reader's jump to the main content found nothing on a post, and axe flagged landmark-one-main on all 74 posts.
+- **A journal post's share card prints a date you can read.** The card printed the frontmatter timestamp, `2026-05-14T01:30:00+09:00`, on all 37 posts. It now prints the Seoul day the post page shows, in the card's English capitals: `MAY 14, 2026`.
+- **The journal's picture window keeps the focus.** Opening a picture left the focus on the post, so Tab went to the links under the backdrop and scrolled the post away from the picture. The focus now starts on Close and stays in the window, and closing it puts the focus back on the picture.
+- **The journal's stylesheet drops 61 lines that matched nothing.** No component or post used `.journal-list-number` or `.journal-figure` with its `-wide` and `-full`, the cover slots never held the `span` two rules styled, and two rules switched off a `::before` nothing switched on. Every journal page renders as before.
 - **The site nav links the shop.** Shop sits between Community and Instagram at the top right of the home page, boxed in ink like the hero's outline button, and opens shop.patternflow.work in a new tab. The Inside panel's last row of links carries it too.
 
 ## [3.12.0] - 2026-10-27
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index ddce3f83e..6ba5972b8 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1081,6 +1081,9 @@
     align-items: flex-start;
     gap: 14px;
   }
+  /* The language a page is not in: 5.0:1 on the cream, 5.8:1 on the white
+     panel, and 3.2:1 from the current one in --ink. --ink-faint was 2.3:1
+     and 2.6:1. */
   .journal-lang-switch {
     position: fixed;
     top: 28px;
@@ -1092,7 +1095,7 @@
     font-size: var(--pf-fs-mono);
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--ink-faint);
+    color: var(--ink-muted);
   }
   .journal-lang-switch a {
     color: inherit;
@@ -1138,7 +1141,6 @@
   .journal-lockup,
   .journal-featured-meta,
   .journal-archive-label,
-  .journal-list-number,
   .journal-list-meta,
   .journal-index-footer,
   .journal-back-link,
@@ -1236,14 +1238,6 @@
       rgba(20, 20, 20, 0.035) 15px
     );
   }
-  .journal-index-thumb span {
-    position: relative;
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--ink-muted);
-  }
   .journal-index-thumb img {
     position: relative;
     z-index: 1;
@@ -1262,17 +1256,6 @@
     border: 1px solid var(--rule);
     background: var(--cream-2);
   }
-  .journal-cover-slot::before {
-    content: none;
-  }
-  .journal-cover-slot span {
-    position: relative;
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--ink-muted);
-  }
   .journal-cover-slot img {
     position: relative;
     z-index: 1;
@@ -1285,7 +1268,7 @@
   }
   .journal-archive-label {
     margin-bottom: 16px;
-    color: var(--ink-faint);
+    color: var(--ink-muted);
   }
   .journal-post-list {
     list-style: none;
@@ -1294,9 +1277,12 @@
   .journal-post-list li {
     border-bottom: 0;
   }
+  /* The date column is at least 120px and as wide as its date. At 120px a
+     two-digit Korean date (130px, "2026년 10월 29일") and a long English
+     one (159px, "SEPTEMBER 29, 2026") broke onto a second line. */
   .journal-post-list a {
     display: grid;
-    grid-template-columns: 1fr 120px 80px;
+    grid-template-columns: minmax(0, 1fr) minmax(120px, max-content) 80px;
     gap: 24px;
     align-items: baseline;
     padding-right: 104px;
@@ -1312,9 +1298,6 @@
   .journal-post-list a .pf-ghost {
     right: 0;
   }
-  .journal-list-number {
-    color: var(--ink-faint);
-  }
   .journal-list-body {
     display: grid;
     gap: 4px;
@@ -1346,6 +1329,7 @@
   }
   .journal-list-meta {
     text-align: right;
+    white-space: nowrap;
   }
   .journal-list-body .pf-row-d {
     max-width: none;
@@ -1357,9 +1341,16 @@
   .journal-post-list a.journal-anchor-post .journal-list-meta:last-child {
     color: var(--pf-led);
   }
+  /* Both journal footers are <footer>s, so the front page's footer rule
+     gave them 60px a side from 901px and 0 below it. Each now keeps its
+     own panel's side padding, and its text starts where the panel's does:
+     the list under a post started 4px left of the post's text from 901px
+     and 64px left of it from 721 to 900. */
   .journal-index-footer {
     margin-top: 32px;
     padding-top: 14px;
+    padding-left: 60px;
+    padding-right: 60px;
     border-top: 1px solid var(--pf-rule);
     display: flex;
     justify-content: flex-start;
@@ -1441,10 +1432,6 @@
     overflow: visible;
     text-align: center;
   }
-  .journal-hero-cover .journal-cover-slot::before {
-    content: none;
-    display: none;
-  }
   .journal-hero-cover .journal-cover-slot img {
     display: block;
     width: auto;
@@ -1621,27 +1608,6 @@
     border: 0;
     background: var(--rule);
   }
-  .journal-figure {
-    margin: 36px 0;
-  }
-  .journal-figure-wide {
-    width: min(82vw, 1312px);
-    margin-left: 50%;
-    transform: translateX(-50%);
-  }
-  .journal-figure-full {
-    width: 100vw;
-    margin-left: 50%;
-    transform: translateX(-50%);
-  }
-  .journal-figure img,
-  .journal-figure video {
-    width: 100%;
-    height: auto;
-    display: block;
-    border: 1px solid var(--rule);
-    background: var(--cream-2);
-  }
   .journal-lightbox {
     position: fixed;
     inset: 0;
@@ -1690,13 +1656,6 @@
     text-transform: uppercase;
     cursor: pointer;
   }
-  .journal-figure figcaption {
-    margin-top: 10px;
-    font-family: var(--mono);
-    font-size: var(--pf-fs-mono);
-    letter-spacing: 0.06em;
-    color: var(--ink-muted);
-  }
   .journal-end-mark {
     margin-top: 80px;
     display: flex;
@@ -1718,6 +1677,9 @@
   .journal-article-footer {
     width: min(100%, 948px);
     margin: 34px auto 0;
+    /* .journal-article's side padding; see .journal-index-footer. */
+    padding-left: 64px;
+    padding-right: 64px;
     display: grid;
     gap: 18px;
     color: var(--ink-muted);
@@ -1731,12 +1693,15 @@
     letter-spacing: normal;
     text-transform: none;
   }
+  /* 104px clear for the post number, as the index rows keep. At 56px the
+     end of a date ran under the 64px number: 350 of the 370 rows on the
+     74 posts, from 761px up. */
   .journal-context-list .pf-row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 24px;
     align-items: baseline;
-    padding-right: 56px;
+    padding-right: 104px;
     border-top: 0;
     color: var(--ink-muted);
     text-decoration: none;
@@ -1851,6 +1816,12 @@
       top: 18px;
       right: 22px;
     }
+    /* A post's switch scrolls away with the page. Fixed, it sat over the
+       right end of each line of text that scrolled under it: 8,801 lines
+       across the 74 posts at 390px. It starts in the same place. */
+    .journal-article .journal-lang-switch {
+      position: absolute;
+    }
     .journal-shell {
       padding: 36px 24px 96px;
     }
@@ -1871,6 +1842,12 @@
       align-items: flex-start;
       gap: 12px;
     }
+    /* On a phone both footers stay at the panel's edge, as they were. */
+    .journal-index-footer,
+    .journal-article-footer {
+      padding-left: 0;
+      padding-right: 0;
+    }
     .journal-lockup {
       font-size: 50px;
     }
@@ -1963,12 +1940,6 @@
       margin-right: 12px;
       color: var(--pf-ink-muted);
     }
-    .journal-figure-wide,
-    .journal-figure-full {
-      width: 100%;
-      margin-left: 0;
-      transform: none;
-    }
     .journal-md-figure,
     .journal-md-figure:has(+ .journal-md-figure),
     .journal-md-figure:has(+ .journal-md-figure) + .journal-md-figure {
diff --git a/web/src/app/journal/[slug]/opengraph-image.test.tsx b/web/src/app/journal/[slug]/opengraph-image.test.tsx
new file mode 100644
index 000000000..77320f761
--- /dev/null
+++ b/web/src/app/journal/[slug]/opengraph-image.test.tsx
@@ -0,0 +1,57 @@
+// The card a post shows when its link is shared printed the frontmatter date
+// as it is written: "2026-05-14T01:30:00+09:00" across the top right of all
+// 37 cards, on 27 October.
+
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getAllJournalPosts } from "@/lib/journal";
+import OpenGraphImage from "./opengraph-image";
+
+vi.mock("next/og", () => ({
+  ImageResponse: class {
+    element: ReactElement;
+    constructor(element: ReactElement) {
+      this.element = element;
+    }
+  },
+}));
+
+function strings(node: ReactNode): string[] {
+  if (typeof node === "string" || typeof node === "number") return [String(node)];
+  if (Array.isArray(node)) return node.flatMap(strings);
+  if (isValidElement(node)) return strings((node.props as { children?: ReactNode }).children);
+  return [];
+}
+
+async function cardText(slug: string) {
+  const card = (await OpenGraphImage({ params: Promise.resolve({ slug }) })) as unknown as {
+    element: ReactElement;
+  };
+  return strings(card.element);
+}
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+});
+
+describe("journal share card", () => {
+  it("prints the day the post was written in Seoul, not the frontmatter string", async () => {
+    vi.stubEnv("TZ", "UTC");
+    const text = await cardText("headache");
+
+    expect(text).toContain("May 14, 2026");
+    expect(text).not.toContain("2026-05-14T01:30:00+09:00");
+  });
+
+  it("gives no card a raw timestamp", async () => {
+    vi.stubEnv("TZ", "UTC");
+    const raw: string[] = [];
+
+    for (const post of getAllJournalPosts({ includeDrafts: true })) {
+      const text = await cardText(post.slug);
+      if (text.some((line) => /\d{4}-\d{2}-\d{2}T/.test(line))) raw.push(post.slug);
+    }
+
+    expect(raw).toEqual([]);
+  });
+});
diff --git a/web/src/app/journal/[slug]/opengraph-image.tsx b/web/src/app/journal/[slug]/opengraph-image.tsx
index dcf8299d3..40c38e3a0 100644
--- a/web/src/app/journal/[slug]/opengraph-image.tsx
+++ b/web/src/app/journal/[slug]/opengraph-image.tsx
@@ -1,5 +1,5 @@
 import { ImageResponse } from "next/og";
-import { getAllJournalPosts, getJournalSlugs } from "@/lib/journal";
+import { formatJournalDate, getAllJournalPosts, getJournalSlugs } from "@/lib/journal";
 
 export const runtime = "nodejs";
 export const size = {
@@ -51,7 +51,9 @@ export default async function OpenGraphImage({ params }: OpenGraphImageProps) {
           }}
         >
           <span>patternflow / journal</span>
-          <span>{post?.date ?? ""}</span>
+          {/* The Korean and the English page share this card, and its top
+              line is English capitals, so the date is the English one. */}
+          <span>{post ? formatJournalDate(post.date, "en") : ""}</span>
         </div>
         <div
           style={{
diff --git a/web/src/components/journal/ArticleLayout.test.tsx b/web/src/components/journal/ArticleLayout.test.tsx
new file mode 100644
index 000000000..dbc581de8
--- /dev/null
+++ b/web/src/components/journal/ArticleLayout.test.tsx
@@ -0,0 +1,54 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import type { JournalPost } from "@/lib/journal";
+import ArticleLayout from "./ArticleLayout";
+
+// The index page is one <main>. A post was an <article> and a <footer> side by
+// side, with no <main> around either, so a screen reader's jump to the main
+// content found nothing. On 27 October axe flagged all 74 posts at 390 and
+// 1440 for landmark-one-main, with 900 blocks outside any landmark (region).
+
+vi.mock("next/link", () => ({
+  default: ({
+    href,
+    children,
+    ...rest
+  }: AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; children: ReactNode }) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}));
+
+function post(slug: string, title: string, date: string): JournalPost {
+  return { slug, title, date, excerpt: `${title} excerpt`, lang: "ko", content: "", readingTime: "3분" };
+}
+
+const older = post("older", "Older post", "2026-05-14T01:30:00+09:00");
+const current = post("current", "Current post", "2026-06-02T20:00:00+09:00");
+
+function renderPost() {
+  return render(
+    <ArticleLayout post={current} lang="ko" previous={older} next={null} allPosts={[current, older]}>
+      <p>Body text</p>
+    </ArticleLayout>,
+  );
+}
+
+describe("ArticleLayout", () => {
+  it("puts the whole post inside one main landmark", () => {
+    const { container } = renderPost();
+    expect(screen.getAllByRole("main")).toHaveLength(1);
+    expect([...container.children].map((el) => el.tagName)).toEqual(["MAIN"]);
+  });
+
+  it("keeps the article and the list of nearby posts in it", () => {
+    renderPost();
+    const main = screen.getByRole("main");
+    expect(within(main).getByRole("article")).toBeTruthy();
+    expect(within(main).getByRole("heading", { level: 1, name: "Current post" })).toBeTruthy();
+    expect(within(main).getByText("Body text")).toBeTruthy();
+    expect(within(main).getByRole("link", { name: /Older post/ }).getAttribute("href")).toBe("/journal/older");
+  });
+});
diff --git a/web/src/components/journal/ArticleLayout.tsx b/web/src/components/journal/ArticleLayout.tsx
index 2979ffc43..500fc7479 100644
--- a/web/src/components/journal/ArticleLayout.tsx
+++ b/web/src/components/journal/ArticleLayout.tsx
@@ -45,7 +45,7 @@ export default function ArticleLayout({
   const windowPosts = allPosts.slice(windowStart, windowStart + 5);
 
   return (
-    <>
+    <main>
       <article className="journal-article">
         <JournalLightbox />
         <LanguageSwitch lang={lang} slug={post.slug} />
@@ -123,7 +123,7 @@ export default function ArticleLayout({
           All writing
         </Link>
       </footer>
-    </>
+    </main>
   );
 }
 
diff --git a/web/src/components/journal/JournalLightbox.test.tsx b/web/src/components/journal/JournalLightbox.test.tsx
new file mode 100644
index 000000000..91588d62e
--- /dev/null
+++ b/web/src/components/journal/JournalLightbox.test.tsx
@@ -0,0 +1,113 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import JournalLightbox from "./JournalLightbox";
+
+// Clicking a picture in a post opens it large in a dialog. The focus stayed
+// on the page under it, so one Tab went to a link behind the backdrop. On 27
+// October, on the 50 posts with pictures at 390 and 1440, that Tab left the
+// window in 100 of 100 runs and scrolled the post away from the picture in 72.
+// In 2 it went into the video above the picture, and Esc no longer closed the
+// window.
+
+function renderPost() {
+  return render(
+    <>
+      <JournalLightbox />
+      <figure className="journal-md-figure">
+        {/* eslint-disable-next-line @next/next/no-img-element -- stands in for the picture JournalImage draws */}
+        <img src="/journal/desk.jpg" alt="The desk" />
+        <figcaption>The desk in October.</figcaption>
+      </figure>
+      <a href="#older">Older post</a>
+    </>,
+  );
+}
+
+function open() {
+  act(() => {
+    fireEvent.click(screen.getByAltText("The desk"));
+  });
+  return screen.getByRole("dialog", { name: "The desk in October." });
+}
+
+describe("JournalLightbox", () => {
+  it("moves the focus to the close button when a picture opens", () => {
+    renderPost();
+    open();
+    expect(document.activeElement).toBe(screen.getByRole("button", { name: "Close image" }));
+  });
+
+  it("keeps Tab and Shift+Tab on the close button", () => {
+    renderPost();
+    open();
+    const close = screen.getByRole("button", { name: "Close image" });
+
+    expect(fireEvent.keyDown(close, { key: "Tab" })).toBe(false);
+    expect(document.activeElement).toBe(close);
+    expect(fireEvent.keyDown(close, { key: "Tab", shiftKey: true })).toBe(false);
+    expect(document.activeElement).toBe(close);
+
+    // Focus that got out some other way comes back on the next Tab.
+    screen.getByRole("link", { name: "Older post" }).focus();
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Tab" });
+    expect(document.activeElement).toBe(close);
+  });
+
+  it("gives the focus back to the picture on Esc, without a Tab stop", () => {
+    renderPost();
+    open();
+    act(() => {
+      fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    });
+
+    expect(screen.queryByRole("dialog")).toBeNull();
+    const picture = screen.getByAltText("The desk");
+    expect(document.activeElement).toBe(picture);
+    expect(picture.tabIndex).toBe(-1);
+  });
+
+  it("gives the focus back to the picture when the close button is pressed", () => {
+    renderPost();
+    open();
+    act(() => {
+      fireEvent.click(screen.getByRole("button", { name: "Close image" }));
+    });
+
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(document.activeElement).toBe(screen.getByAltText("The desk"));
+  });
+
+  // Chromium rings whatever a script focuses, so a mouse that opened and
+  // closed the window would leave a ring on the close button and on the
+  // picture. jsdom draws no ring; the options passed to focus() are the test.
+  it("asks for a focus ring only once the reader has pressed Tab", () => {
+    const focus = vi.spyOn(HTMLElement.prototype, "focus");
+    const ringFor = (element: HTMLElement) =>
+      focus.mock.contexts.flatMap((context, i) =>
+        context === element ? [(focus.mock.calls[i][0] as { focusVisible?: boolean } | undefined)?.focusVisible] : [],
+      );
+
+    renderPost();
+    const picture = screen.getByAltText("The desk");
+    open();
+    const close = screen.getByRole("button", { name: "Close image" });
+    act(() => {
+      fireEvent.click(close);
+    });
+    expect(ringFor(close)).toEqual([false]);
+    expect(ringFor(picture)).toEqual([false]);
+
+    focus.mockClear();
+    open();
+    fireEvent.keyDown(screen.getByRole("button", { name: "Close image" }), { key: "Tab" });
+    act(() => {
+      fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    });
+    expect(focus.mock.calls.map((call) => (call[0] as { focusVisible?: boolean } | undefined)?.focusVisible)).toEqual([
+      false,
+      true,
+      true,
+    ]);
+    expect(focus.mock.contexts.at(-1)).toBe(picture);
+  });
+});
diff --git a/web/src/components/journal/JournalLightbox.tsx b/web/src/components/journal/JournalLightbox.tsx
index 56e79fe6e..9ff4137be 100644
--- a/web/src/components/journal/JournalLightbox.tsx
+++ b/web/src/components/journal/JournalLightbox.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 type LightboxImage = {
   src: string;
@@ -8,8 +8,16 @@ type LightboxImage = {
   caption: string;
 };
 
+// focusVisible is in Chromium and Firefox but not yet in TypeScript's DOM types.
+function moveFocus(element: HTMLElement, ring: boolean) {
+  const options: FocusOptions & { focusVisible: boolean } = { preventScroll: true, focusVisible: ring };
+  element.focus(options);
+}
+
 export default function JournalLightbox() {
   const [image, setImage] = useState<LightboxImage | null>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const openerRef = useRef<HTMLImageElement | null>(null);
 
   useEffect(() => {
     const handleClick = (event: MouseEvent) => {
@@ -31,6 +39,7 @@ export default function JournalLightbox() {
       // always shows the full-resolution image, even on mobile where
       // Next Image's srcset may have selected a smaller variant.
       const originalSrc = target.getAttribute("src") || target.src;
+      openerRef.current = target;
       setImage({
         src: originalSrc,
         alt: target.alt,
@@ -47,18 +56,41 @@ export default function JournalLightbox() {
       return;
     }
 
+    // Chromium draws the focus ring wherever a script puts the focus, even
+    // after a mouse click. The ring waits for the first Tab.
+    let tabbed = false;
+
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setImage(null);
+      } else if (event.key === "Tab") {
+        // The close button is the one thing in the window that takes the
+        // focus. A Tab that left it went to the links under the backdrop and
+        // scrolled the post away from the picture.
+        event.preventDefault();
+        const close = closeRef.current;
+        if (!close) return;
+        // focus() on the focused element changes nothing, ring included.
+        if (!tabbed) close.blur();
+        tabbed = true;
+        moveFocus(close, true);
       }
     };
 
     document.body.style.overflow = "hidden";
     document.addEventListener("keydown", handleKeyDown);
+    if (closeRef.current) moveFocus(closeRef.current, false);
 
     return () => {
       document.body.style.overflow = "";
       document.removeEventListener("keydown", handleKeyDown);
+      // Back to the picture, so the next Tab carries on from there. An img
+      // takes the focus only with a tabindex.
+      const opener = openerRef.current;
+      if (opener?.isConnected) {
+        if (!opener.hasAttribute("tabindex")) opener.tabIndex = -1;
+        moveFocus(opener, tabbed);
+      }
     };
   }, [image]);
 
@@ -75,6 +107,7 @@ export default function JournalLightbox() {
       onClick={() => setImage(null)}
     >
       <button
+        ref={closeRef}
         className="journal-lightbox-close"
         type="button"
         aria-label="Close image"
diff --git a/web/src/components/journal/journalCss.test.ts b/web/src/components/journal/journalCss.test.ts
new file mode 100644
index 000000000..e100fb0c2
--- /dev/null
+++ b/web/src/components/journal/journalCss.test.ts
@@ -0,0 +1,307 @@
+// jsdom applies no stylesheet, so the journal's rules are read from
+// app/globals.css. Above 720px each archive row is a grid, and its date
+// column was a fixed 120px. On 27 October, at 1440, 27 of the 37 Korean dates
+// ("2026년 9월 29일" is 122px) and 17 of the 37 English ones ("SEPTEMBER 29,
+// 2026" is 159px) broke onto a second line, leaving 일 or 2026 alone under it.
+
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { createElement } from "react";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import JournalImage from "./JournalImage";
+
+const css = readFileSync(path.resolve(__dirname, "../../app/globals.css"), "utf8");
+
+/** Every rule with no braces inside it; an @media block's rules come out on their own. */
+function rules(source: string) {
+  const bare = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  return [...bare.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((m) => ({
+    selectors: m[1].split(",").map((s) => s.trim().replace(/\s+/g, " ")),
+    body: m[2],
+  }));
+}
+
+function declaration(body: string, property: string) {
+  return body.match(new RegExp(`(?:^|;)\\s*${property}:\\s*([^;]+)`))?.[1].trim();
+}
+
+/** "minmax(0, 1fr) 120px 80px" → ["minmax(0, 1fr)", "120px", "80px"]. */
+function tracks(value: string) {
+  const out: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of value) {
+    if (ch === "(") depth++;
+    if (ch === ")") depth--;
+    if (/\s/.test(ch) && depth === 0) {
+      if (current) out.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  if (current) out.push(current);
+  return out;
+}
+
+describe("journal archive dates", () => {
+  const all = rules(css);
+
+  it("sizes the date column to its date", () => {
+    const row = all.find(
+      (r) => r.selectors.includes(".journal-post-list a") && declaration(r.body, "display") === "grid",
+    );
+    expect(row, "no .journal-post-list a grid rule").toBeDefined();
+    const columns = tracks(declaration(row!.body, "grid-template-columns") ?? "");
+    expect(columns, "title, date, reading time").toHaveLength(3);
+    expect(columns[1], "the date track").toMatch(/max-content/);
+  });
+
+  it("keeps a date on one line", () => {
+    const own = all.filter((r) => r.selectors.includes(".journal-list-meta"));
+    expect(own.some((r) => declaration(r.body, "white-space") === "nowrap")).toBe(true);
+  });
+});
+
+// The language a page is not in and the index's "Archive" label were
+// --ink-faint (#A69F90): 2.29:1 on the cream behind a post's switch and
+// 2.63:1 on the index's white panel. axe flagged them on all 76 journal pages.
+
+/** The sRGB contrast ratio WCAG 2 defines, for two "#rrggbb" colours. */
+function contrast(a: string, b: string) {
+  const luminance = (hex: string) => {
+    const [r, g, bl] = [1, 3, 5].map((i) => {
+      const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+      return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+  };
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+describe("journal faint text", () => {
+  const all = rules(css);
+  const root = all.find((r) => r.selectors.includes(":root") && declaration(r.body, "--cream"));
+  const resolve = (value: string | undefined) => {
+    const token = value?.match(/^var\((--[\w-]+)\)$/)?.[1];
+    const hex = token ? declaration(root?.body ?? "", token) : value;
+    expect(hex, `${value} is not a #rrggbb colour`).toMatch(/^#[0-9a-f]{6}$/i);
+    return hex!;
+  };
+  const own = (selector: string, property: string) =>
+    all
+      .filter((r) => r.selectors.includes(selector))
+      .map((r) => declaration(r.body, property))
+      .filter(Boolean)
+      .at(-1);
+
+  const cream = resolve(own(".journal-shell", "background"));
+  const panel = resolve(own(".journal-panel", "background"));
+
+  it("shows the other language at 4.5:1 on the cream and on the panel", () => {
+    const other = resolve(own(".journal-lang-switch", "color"));
+    expect(contrast(other, cream)).toBeGreaterThanOrEqual(4.5);
+    expect(contrast(other, panel)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("keeps the current language 3:1 apart from the other", () => {
+    const other = resolve(own(".journal-lang-switch", "color"));
+    const current = resolve(own(".journal-lang-switch a.active", "color"));
+    expect(contrast(current, other)).toBeGreaterThanOrEqual(3);
+  });
+
+  it("shows the Archive label at 4.5:1 on the panel", () => {
+    const label = resolve(own(".journal-archive-label", "color"));
+    expect(contrast(label, panel)).toBeGreaterThanOrEqual(4.5);
+  });
+});
+
+// A post's language switch is position: fixed, and below 721px it sits 22px
+// from the right edge, inside the column of text. On 27 October, at 390, all
+// 74 posts scrolled 8,801 lines of text under it.
+
+/** The inside of each `@media <query> { … }` block. */
+function mediaBlocks(source: string, query: string) {
+  const bare = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  const out: string[] = [];
+  const head = `@media ${query}`;
+  for (let at = bare.indexOf(head); at !== -1; at = bare.indexOf(head, at + 1)) {
+    const open = bare.indexOf("{", at);
+    let depth = 0;
+    for (let i = open; i < bare.length; i++) {
+      if (bare[i] === "{") depth++;
+      if (bare[i] === "}" && --depth === 0) {
+        out.push(bare.slice(open + 1, i));
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+describe("journal language switch on a phone", () => {
+  const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules);
+  const position = (selector: string) =>
+    phone
+      .filter((r) => r.selectors.includes(selector))
+      .map((r) => declaration(r.body, "position"))
+      .filter(Boolean)
+      .at(-1);
+
+  it("scrolls away with a post instead of staying over its text", () => {
+    expect(position(".journal-article .journal-lang-switch")).toBe("absolute");
+  });
+
+  it("keeps the index's switch in the panel's flow", () => {
+    expect(position(".journal-panel .journal-lang-switch")).toBe("static");
+  });
+});
+
+// Each row of the list under a post has its post number at the right, 64px
+// type, and the row kept 56px clear for it. On 27 October, from 761px up, the
+// end of 350 of the 370 dates on the 74 posts ran under the number, by up to
+// 18.7px; from 721px, where the number is 52px, 228 of them. The index's rows
+// keep 104px clear and none of their text meets the number.
+
+/** The stylesheet with every `@media` block taken out: the rules that hold at any width. */
+function withoutMedia(source: string) {
+  const bare = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  let out = "";
+  let from = 0;
+  for (let at = bare.indexOf("@media", from); at !== -1; at = bare.indexOf("@media", from)) {
+    out += bare.slice(from, at);
+    let depth = 0;
+    let i = bare.indexOf("{", at);
+    for (; i < bare.length; i++) {
+      if (bare[i] === "{") depth++;
+      if (bare[i] === "}" && --depth === 0) break;
+    }
+    from = i + 1;
+  }
+  return out + bare.slice(from);
+}
+
+describe("journal post numbers", () => {
+  const all = rules(withoutMedia(css));
+  const paddingRight = (selector: string) =>
+    all
+      .filter((r) => r.selectors.includes(selector))
+      .map((r) => {
+        const own = declaration(r.body, "padding-right");
+        if (own) return own;
+        const sides = declaration(r.body, "padding")?.split(/\s+/);
+        return sides && (sides[1] ?? sides[0]);
+      })
+      .filter(Boolean)
+      .at(-1);
+
+  it("keeps the list under a post as clear of the number as the index", () => {
+    const index = parseFloat(paddingRight(".journal-post-list a") ?? "");
+    const underPost = parseFloat(paddingRight(".journal-context-list .pf-row") ?? "");
+    expect(index, "the index row's padding-right").toBeGreaterThan(0);
+    expect(underPost).toBeGreaterThanOrEqual(index);
+  });
+});
+
+// Both journal footers are <footer>s, and the front page's footer rule gave
+// them its side padding: 60px from 901px and 0 at 900 and below. On 27
+// October the list under each of the 74 posts started 4px left of the post's
+// text from 901px and 64px left of it from 721 to 900, and the index's footer
+// 60px left of the panel's text from 721 to 900.
+
+describe("journal footers", () => {
+  const desktop = rules(withoutMedia(css));
+  const phone = mediaBlocks(css, "(max-width: 720px)").flatMap(rules);
+  /** The [left, right] padding in px the rules for `selector` leave it with. */
+  const sides = (list: ReturnType<typeof rules>, selector: string) => {
+    let left: string | undefined;
+    let right: string | undefined;
+    for (const r of list.filter((r) => r.selectors.includes(selector))) {
+      const all = declaration(r.body, "padding")?.split(/\s+/);
+      if (all) {
+        right = all[1] ?? all[0];
+        left = all[3] ?? right;
+      }
+      left = declaration(r.body, "padding-left") ?? left;
+      right = declaration(r.body, "padding-right") ?? right;
+    }
+    return [parseFloat(left ?? ""), parseFloat(right ?? "")];
+  };
+
+  it.each([
+    [".journal-article-footer", ".journal-article"],
+    [".journal-index-footer", ".journal-panel"],
+  ])("starts %s where the text in %s starts, above 720px", (footer, panel) => {
+    expect(sides(desktop, panel)[0], `${panel}'s side padding`).toBeGreaterThan(0);
+    expect(sides(desktop, footer)).toEqual(sides(desktop, panel));
+  });
+
+  it("keeps both at the panel's edge on a phone", () => {
+    expect(sides(phone, ".journal-article-footer")).toEqual([0, 0]);
+    expect(sides(phone, ".journal-index-footer")).toEqual([0, 0]);
+  });
+});
+
+// Rules that matched nothing on a journal page. No component and none of the
+// 74 posts wrote .journal-list-number, .journal-figure, -wide or -full (the
+// posts' figures are journal-md-figure and journal-figure-row). The two cover
+// slots hold a JournalImage, and the span rules inside them waited for a span
+// it never draws. The cover slot's ::before was switched off twice, and no
+// rule ever switched it on. On 27 October that was 61 lines of globals.css.
+
+/** Every .ts and .tsx under src/ that is not a test, and every post. */
+function written() {
+  const out: string[] = [];
+  const walk = (dir: string) => {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const at = path.join(dir, entry.name);
+      if (entry.isDirectory()) walk(at);
+      else if (/\.(tsx?|mdx?)$/.test(entry.name) && !/\.test\./.test(entry.name)) out.push(readFileSync(at, "utf8"));
+    }
+  };
+  walk(path.resolve(__dirname, "../.."));
+  walk(path.resolve(__dirname, "../../../content/journal"));
+  return out.join("\n");
+}
+
+describe("journal rules", () => {
+  const all = rules(css);
+  const selectors = all.flatMap((r) => r.selectors);
+
+  it("name only classes a journal component or post writes", () => {
+    const source = written();
+    const named = new Set(selectors.flatMap((s) => [...s.matchAll(/\.(journal-[\w-]+)/g)].map((m) => m[1])));
+    const unwritten = [...named].filter((c) => !new RegExp(`(^|[^\\w-])${c}(?![\\w-])`).test(source));
+    expect(named.size).toBeGreaterThan(30);
+    expect(unwritten).toEqual([]);
+  });
+
+  it("style nothing in a cover slot but what JournalImage draws", () => {
+    const { container } = render(createElement(JournalImage, { src: "/journal/good-but/funding-success.png" }));
+    const drawn = new Set([...container.querySelectorAll("*")].map((el) => el.tagName.toLowerCase()));
+    const inSlot = selectors
+      .map((s) => s.match(/\.journal-(?:index-thumb|cover-slot) ([a-z]+)$/)?.[1])
+      .filter((tag): tag is string => Boolean(tag));
+    expect(inSlot.length).toBeGreaterThan(0);
+    for (const tag of inSlot) expect(drawn, `.journal-… ${tag}`).toContain(tag);
+  });
+
+  it("switch off no ::before that no rule switches on", () => {
+    const last = (selector: string) => selector.split(" ").at(-1);
+    const content = (body: string) => declaration(body, "content");
+    for (const rule of all) {
+      for (const selector of rule.selectors) {
+        if (!selector.startsWith(".journal-") || !selector.endsWith("::before") || content(rule.body) !== "none") continue;
+        const on = all.some(
+          (other) =>
+            other.selectors.some((s) => last(s) === last(selector)) &&
+            content(other.body) !== undefined &&
+            content(other.body) !== "none",
+        );
+        expect(on, selector).toBe(true);
+      }
+    }
+  });
+});
diff --git a/web/src/lib/journal.test.ts b/web/src/lib/journal.test.ts
new file mode 100644
index 000000000..5d198a067
--- /dev/null
+++ b/web/src/lib/journal.test.ts
@@ -0,0 +1,44 @@
+// Every journal date is a Seoul time ("2026-05-14T01:30:00+09:00"), and the
+// pages are built wherever the build runs. On 27 October a build in UTC printed
+// 60 of the 520 dates on /journal a day early: headache, stopped,
+// i-hope-it-works-out and negative were written between midnight and 9 a.m. in
+// Seoul, which is still the day before in UTC.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { formatJournalDate, getAllJournalPosts, type JournalLang } from "./journal";
+
+// UTC is a build server, Los Angeles is nine hours further behind it, and
+// Kiritimati (UTC+14) is the one that runs ahead of Seoul.
+const ZONES = ["UTC", "America/Los_Angeles", "Pacific/Kiritimati", "Asia/Seoul"];
+
+afterEach(() => {
+  vi.unstubAllEnvs();
+});
+
+describe("formatJournalDate", () => {
+  it.each(ZONES)("prints the Seoul day when the process runs in %s", (zone) => {
+    vi.stubEnv("TZ", zone);
+
+    expect(formatJournalDate("2026-05-14T01:30:00+09:00", "ko")).toBe("2026년 5월 14일");
+    expect(formatJournalDate("2026-05-14T01:30:00+09:00", "en")).toBe("May 14, 2026");
+    expect(formatJournalDate("2026-05-23T07:00:00+09:00", "en")).toBe("May 23, 2026");
+    expect(formatJournalDate("2026-10-04T23:30:00+09:00", "ko")).toBe("2026년 10월 4일");
+  });
+
+  it("gives every post the day written in its frontmatter", () => {
+    vi.stubEnv("TZ", "UTC");
+    const wrong: string[] = [];
+
+    for (const lang of ["ko", "en"] satisfies JournalLang[]) {
+      for (const post of getAllJournalPosts({ lang, includeDrafts: true })) {
+        const day = post.date.match(/^(\d{4})-(\d{2})-(\d{2})T[^+]*\+09:00$/);
+        if (!day) continue;
+        const want = formatJournalDate(`${day[1]}-${day[2]}-${day[3]}T12:00:00+09:00`, lang);
+        const shown = formatJournalDate(post.date, lang);
+        if (shown !== want) wrong.push(`${post.slug} (${lang}): ${shown}, written ${want}`);
+      }
+    }
+
+    expect(wrong).toEqual([]);
+  });
+});
diff --git a/web/src/lib/journal.ts b/web/src/lib/journal.ts
index 191c088c1..6f0ec59e1 100644
--- a/web/src/lib/journal.ts
+++ b/web/src/lib/journal.ts
@@ -128,10 +128,13 @@ export function getAdjacentJournalPosts(slug: string, lang: JournalLang = "ko")
   };
 }
 
+// The dates are written in Seoul (+09:00). Without a zone the day is the build
+// machine's, and a post written at 01:30 in Seoul is the day before in UTC.
 export function formatJournalDate(date: string, lang: JournalLang = "ko") {
   return new Intl.DateTimeFormat(lang === "ko" ? "ko-KR" : "en", {
     month: "long",
     day: "numeric",
     year: "numeric",
+    timeZone: "Asia/Seoul",
   }).format(new Date(date));
 }