diff --git a/__tests__/contrast.test.ts b/__tests__/contrast.test.ts
new file mode 100644
index 0000000..fe6ed39
--- /dev/null
+++ b/__tests__/contrast.test.ts
@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import { contrastRatio } from '../lib/format/contrast'
+
+const css = readFileSync('app/globals.css', 'utf8')
+const token = (name: string) => {
+  const match = css.match(new RegExp(`(?:^|[^\\w-])--${name}:\\s*(#[0-9a-f]{6})`, 'im'))
+  if (!match) throw new Error(`token --${name} not found in app/globals.css`)
+  return match[1]
+}
+
+const BG = token('oxblood-900')
+const pairs: Array<[string, string, string]> = [
+  ['fg-low on bg', token('bone-500'), BG],
+  ['fg-muted on bg', token('bone-400'), BG],
+  ['gold accent text on bg', token('gold-500'), BG],
+  ['oxblood accent text on bg', token('blood-400'), BG],
+  ['button text on gold', token('oxblood-900'), token('gold-500')],
+  ['button text on blood', '#ffffff', token('blood-500')],
+]
+
+describe('brand token contrast (WCAG AA, 4.5:1)', () => {
+  it.each(pairs)('%s', (_, fg, bg) => {
+    expect(contrastRatio(fg, bg)).toBeGreaterThanOrEqual(4.5)
+  })
+})
diff --git a/app/globals.css b/app/globals.css
index 1dc0820..4bf78bf 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -136,7 +136,7 @@ input,
   --bone-100: #f4efe6;
   --bone-200: #e8dfcf;
   --bone-400: #b8ab94;
-  --bone-600: #7a7060;
+  --bone-500: #948872;
 
   --blood-500: #c8102e;
   --blood-400: #e63d52;
@@ -159,12 +159,14 @@ input,
 
   --fg: var(--bone-100);
   --fg-muted: var(--bone-400);
-  --fg-low: var(--bone-600);
+  --fg-low: var(--bone-500);
   --fg-inverse: var(--oxblood-900);
 
   --accent: var(--blood-500);
   --accent-hover: var(--blood-400);
   --accent-press: var(--blood-700);
+  --accent-text: var(--blood-400);
+  --btn-fg: var(--ink-000);
 
   --border-bru: var(--oxblood-600);
   --border-strong: var(--bone-400);
@@ -251,6 +253,8 @@ input,
   --accent: var(--gold-500);
   --accent-hover: var(--gold-400);
   --accent-press: var(--gold-700);
+  --accent-text: var(--gold-500);
+  --btn-fg: var(--oxblood-900);
 }
 
 /* ---- High-contrast variant ------------------------------- */
@@ -262,6 +266,8 @@ input,
   --fg-low: var(--ink-000);
   --accent: var(--ink-000);
   --accent-hover: var(--ink-000);
+  --accent-text: var(--ink-000);
+  --btn-fg: var(--ink-999);
   --border-bru: var(--ink-000);
   --border-strong: var(--ink-000);
   --rule: var(--ink-000);
@@ -276,7 +282,25 @@ input,
 .brutalist-root *::before,
 .brutalist-root *::after { box-sizing: border-box; }
 
-.brutalist-root ::selection { background: var(--accent); color: var(--ink-000); }
+.brutalist-root ::selection { background: var(--accent); color: var(--btn-fg); }
+
+/* ---- Focus (visible in every theme, including High Contrast) --- */
+.brutalist-root :focus-visible { outline: var(--bw-2) solid var(--accent); outline-offset: 3px; }
+.brutalist-root[data-contrast="high"] :focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #000; }
+.field input:focus-visible, .field textarea:focus-visible { outline-offset: 6px; border-bottom-width: 2px; }
+
+/* ---- Reduced motion --------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .brutalist-root *, .brutalist-root *::before, .brutalist-root *::after {
+    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
+  }
+  .work-card:hover { transform: none !important; }
+  .btn-primary:hover { transform: none !important; }
+}
+
+/* ---- Skip link --------------------------------------------- */
+.skip-link { position: fixed; left: -9999px; top: 8px; z-index: 60; padding: 8px 12px; background: var(--accent); color: var(--btn-fg); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
+.skip-link:focus { left: var(--gutter); }
 
 /* ---- Semantic helpers (ds-*) ----------------------------- */
 .ds-eyebrow {
@@ -319,7 +343,7 @@ input,
   width: 36px;
   height: 36px;
   background: var(--accent);
-  color: #fff;
+  color: var(--btn-fg);
   font-family: var(--font-display);
   font-size: 19px;
   line-height: 1;
@@ -349,8 +373,8 @@ input,
   transition: color var(--dur-fast) var(--ease-out),
     border-color var(--dur-fast) var(--ease-out);
 }
-.nav-link:hover { color: var(--accent); }
-.nav-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }
+.nav-link:hover { color: var(--accent-text); }
+.nav-link.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
 .nav-right { display: flex; align-items: center; gap: 18px; }
 .contrast-toggle {
   display: inline-flex;
@@ -366,7 +390,7 @@ input,
   text-transform: uppercase;
   padding: 6px 0;
 }
-.contrast-toggle:hover { color: var(--accent); }
+.contrast-toggle:hover { color: var(--accent-text); }
 .contrast-swatch {
   width: 14px;
   height: 14px;
@@ -417,7 +441,7 @@ input,
 .avail-sep { color: var(--fg-low); }
 .avail-cta {
   margin-left: auto;
-  color: var(--accent);
+  color: var(--accent-text);
   border: 0;
   border-bottom: 1px solid var(--accent);
   padding-bottom: 2px;
@@ -448,7 +472,7 @@ input,
   border-bottom: 1px solid var(--rule);
   color: var(--fg-low);
 }
-.binary-rule.is-accent { color: var(--accent); }
+.binary-rule.is-accent { color: var(--accent-text); }
 
 /* ---- Hero ------------------------------------------------ */
 .hero { padding: var(--s-7) 0 var(--s-9); }
@@ -500,7 +524,7 @@ input,
   margin: 0;
   text-wrap: balance;
 }
-.hero-title-alt { color: var(--accent); }
+.hero-title-alt { color: var(--accent-text); }
 .hero-kicker {
   font-family: var(--font-mono);
   font-size: 13px;
@@ -510,7 +534,7 @@ input,
   margin: var(--s-2) 0 0;
   max-width: 540px;
 }
-.hero-kicker-alt { color: var(--accent); }
+.hero-kicker-alt { color: var(--accent-text); }
 .hero-meta {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr);
@@ -593,7 +617,7 @@ input,
 .scrub-stat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
 .scrub-stat b { color: var(--fg); font-weight: 500; }
 .scrub-new { display: flex; flex-wrap: wrap; gap: 6px; }
-.scrub-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border: 1px solid var(--accent); color: var(--accent); }
+.scrub-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border: 1px solid var(--accent); color: var(--accent-text); }
 .scrub-chip.is-muted { border-color: var(--rule); color: var(--fg-low); }
 
 /* ---- Travel: real globe map embed ------------------------ */
@@ -637,8 +661,8 @@ input,
   transition: color var(--dur-fast) var(--ease-out),
     border-color var(--dur-fast) var(--ease-out);
 }
-.travel-map-toggle:hover { color: var(--accent); border-color: var(--accent); }
-.travel-map-toggle.is-active { color: var(--accent); border-color: var(--accent); }
+.travel-map-toggle:hover { color: var(--accent-text); border-color: var(--accent); }
+.travel-map-toggle.is-active { color: var(--accent-text); border-color: var(--accent); }
 .travel-map-cap {
   margin-top: var(--s-3);
   font-family: var(--font-mono);
@@ -711,7 +735,7 @@ input,
   margin: 0;
   transition: color var(--dur-fast) var(--ease-out);
 }
-.work-card:hover .work-name { color: var(--accent); }
+.work-card:hover .work-name { color: var(--accent-text); }
 .work-company {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -724,7 +748,7 @@ input,
   font-family: var(--font-sans);
   font-weight: 500;
   font-size: 14px;
-  color: var(--accent);
+  color: var(--accent-text);
   margin: 4px 0 0;
 }
 .work-points {
@@ -747,7 +771,7 @@ input,
   content: '→';
   position: absolute;
   left: 0;
-  color: var(--accent);
+  color: var(--accent-text);
 }
 /* Cards that link out are anchors — strip link styling, restore keyboard focus. */
 .work-card.is-linked {
@@ -755,11 +779,9 @@ input,
   color: inherit;
 }
 .work-card.is-linked:focus-visible {
-  outline: var(--bw-2) solid var(--accent);
-  outline-offset: 3px;
   border-color: var(--accent);
 }
-.work-card.is-linked:focus-visible .work-name { color: var(--accent); }
+.work-card.is-linked:focus-visible .work-name { color: var(--accent-text); }
 .work-link {
   margin-top: auto;
   padding-top: var(--s-3);
@@ -771,7 +793,7 @@ input,
   transition: color var(--dur-fast) var(--ease-out);
 }
 .work-card.is-linked:hover .work-link,
-.work-card.is-linked:focus-visible .work-link { color: var(--accent); }
+.work-card.is-linked:focus-visible .work-link { color: var(--accent-text); }
 
 /* ---- Writing --------------------------------------------- */
 .writing-all {
@@ -789,14 +811,14 @@ input,
     border-color var(--dur-fast) var(--ease-out);
 }
 .writing-all:hover,
-.writing-all:focus-visible { color: var(--accent); border-color: var(--accent); }
+.writing-all:focus-visible { color: var(--accent-text); border-color: var(--accent); }
 
 /* ---- 404 --------------------------------------------------- */
 .nf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
 .nf-title { font-family: var(--font-display); font-size: clamp(44px, 8vw, 110px); line-height: .88; letter-spacing: -.04em; margin: 10px 0 0; }
 .nf-lead { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; letter-spacing: .04em; color: var(--fg-muted); max-width: 52ch; margin: var(--s-4) 0 0; overflow-wrap: anywhere; }
 .nf-lead code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: var(--fg); background: var(--bg-elevated); padding: 2px 4px; }
-.nf-count { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: .06em; margin: var(--s-3) 0 0; min-height: 1.6em; }
+.nf-count { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); letter-spacing: .06em; margin: var(--s-3) 0 0; min-height: 1.6em; }
 .nf-actions { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
 .nf-stay {
   background: none;
@@ -811,7 +833,7 @@ input,
   padding: 0;
 }
 .nf-stay:hover,
-.nf-stay:focus-visible { color: var(--accent); }
+.nf-stay:focus-visible { color: var(--accent-text); }
 .nf-map { list-style: none; margin: 0; padding: var(--s-5); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--s-3); }
 .nf-map .writing-all { margin-top: 0; }
 
@@ -839,7 +861,7 @@ input,
      Scales below ~540px; identical at 14px on anything wider. */
   font-size: clamp(9px, 2.6vw, 14px);
   letter-spacing: 0.42em;
-  color: var(--accent);
+  color: var(--accent-text);
   text-transform: uppercase;
   margin-bottom: var(--s-4);
 }
@@ -853,7 +875,7 @@ input,
   letter-spacing: 0.04em;
   align-self: flex-start;
 }
-.contact-email:hover { color: var(--accent); border-color: var(--accent); }
+.contact-email:hover { color: var(--accent-text); border-color: var(--accent); }
 .contact-socials {
   display: flex;
   flex-direction: column;
@@ -871,7 +893,7 @@ input,
   padding-bottom: 4px;
   align-self: flex-start;
 }
-.contact-socials a:hover { color: var(--accent); border-color: var(--accent); }
+.contact-socials a:hover { color: var(--accent-text); border-color: var(--accent); }
 .contact-form {
   display: flex;
   flex-direction: column;
@@ -896,7 +918,6 @@ input,
   color: var(--fg);
   font-family: var(--font-sans);
   font-size: 16px;
-  outline: none;
   transition: border-color var(--dur-fast) var(--ease-out);
 }
 .field input::placeholder,
@@ -994,7 +1015,7 @@ input,
 .resume-sent {
   font-family: var(--font-mono);
   font-size: 13px;
-  color: var(--accent);
+  color: var(--accent-text);
   letter-spacing: 0.04em;
   margin: 0;
 }
@@ -1009,7 +1030,7 @@ input,
   color: var(--fg-muted);
   cursor: pointer;
 }
-.btn-text:hover { color: var(--accent); }
+.btn-text:hover { color: var(--accent-text); }
 .resume-meta {
   list-style: none;
   padding: 0;
@@ -1039,7 +1060,7 @@ input,
   gap: 10px;
   padding: 14px 22px;
   background: var(--accent);
-  color: #fff;
+  color: var(--btn-fg);
   font-family: var(--font-mono);
   font-size: 12px;
   letter-spacing: 0.18em;
@@ -1054,7 +1075,6 @@ input,
 .btn-primary:hover {
   transform: translate(-2px, -2px);
   box-shadow: 6px 6px 0 0 var(--blood-700);
-  background: var(--blood-400);
 }
 .btn-primary:active {
   transform: translate(2px, 2px);
@@ -1093,7 +1113,7 @@ input,
   border-bottom: 1px solid var(--rule);
   padding-bottom: 2px;
 }
-.footer-socials a:hover { color: var(--accent); border-color: var(--accent); }
+.footer-socials a:hover { color: var(--accent-text); border-color: var(--accent); }
 .footer-legal {
   font-family: var(--font-mono);
   font-size: 11px;
@@ -1109,7 +1129,6 @@ input,
 .brutalist-root[data-contrast="high"] .brand-mark { background: #fff; color: #000; }
 .brutalist-root[data-contrast="high"] .btn-primary {
   background: #fff;
-  color: #000;
   box-shadow: 4px 4px 0 0 #fff;
 }
 .brutalist-root[data-contrast="high"] .btn-primary:hover { background: #fff; }
@@ -1134,7 +1153,7 @@ input,
   .travel-grid > * { min-width: 0; }
   /* Nav links used to be display:none here, which left mobile with no way
      to reach any section. Scroll them horizontally instead. */
-  .site-nav { flex-wrap: wrap; gap: var(--s-3); }
+  .site-nav { flex-wrap: wrap; gap: var(--s-3); position: relative; }
   .nav-links {
     order: 3;
     width: 100%;
@@ -1143,9 +1162,19 @@ input,
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     padding-bottom: 4px;
+    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
+    mask-image: linear-gradient(to right, #000 82%, transparent);
+    padding-right: 32px;
   }
   .nav-links::-webkit-scrollbar { display: none; }
+  .nav-links.is-scrolled-end,
+  .nav-links:focus-within { -webkit-mask-image: none; mask-image: none; }
   .nav-link { white-space: nowrap; }
+  .site-nav::after { content: "→" / ""; position: absolute; right: 0; bottom: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); pointer-events: none; }
+  .site-nav.is-scrolled-end::after { display: none; }
+  .availability { gap: 10px; }
+  .availability > span:nth-child(2),
+  .availability .avail-sep { display: none; }
   .timeline-row { grid-template-columns: 1fr; gap: 6px; }
   .continent-row { grid-template-columns: 120px 1fr 36px; }
   .hero-portrait { max-width: 100%; justify-self: stretch; }
diff --git a/app/layout.tsx b/app/layout.tsx
index 0f4999f..d7da38c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import Script from "next/script";
 import {
   Geist,
@@ -59,16 +59,31 @@ export const metadata: Metadata = {
     siteName: "Dom Mangonon",
     type: "website",
     locale: "en_US",
+    images: [
+      {
+        url: "/og.png",
+        width: 1200,
+        height: 630,
+        alt: "Dom Mangonon — builds software with AI",
+      },
+    ],
   },
   twitter: {
-    card: "summary",
+    card: "summary_large_image",
     creator: "@CollapseContext",
+    images: ["/og.png"],
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: "/apple-touch-icon.png",
   },
   alternates: {
     canonical: "/",
   },
 };
 
+export const viewport: Viewport = { themeColor: "#160000" };
+
 export default function RootLayout({
   children,
 }: Readonly<{
diff --git a/components/landing/BrutalistLanding.tsx b/components/landing/BrutalistLanding.tsx
index 99d0a19..4f0b4b8 100644
--- a/components/landing/BrutalistLanding.tsx
+++ b/components/landing/BrutalistLanding.tsx
@@ -30,7 +30,8 @@ export interface LandingTravelData {
 const SECTION_IDS: SectionId[] = ['hero', 'projects', 'writing', 'resume', 'travel', 'contact']
 
 function scrollToSection(id: SectionId) {
-  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  document.getElementById(id)?.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' })
 }
 
 export function BrutalistLanding({ travel }: { travel: LandingTravelData }) {
@@ -68,6 +69,7 @@ export function BrutalistLanding({ travel }: { travel: LandingTravelData }) {
   return (
     <div className="brutalist-root" data-accent={accentAttr} data-contrast={contrastAttr}>
       <div className="page">
+        <a className="skip-link" href="#projects">Skip to projects</a>
         <Nav
           section={section}
           mode={mode}
diff --git a/components/landing/Contact.tsx b/components/landing/Contact.tsx
index b238eb3..45a07c1 100644
--- a/components/landing/Contact.tsx
+++ b/components/landing/Contact.tsx
@@ -64,7 +64,7 @@ export function Contact() {
             <br />
             Talk
           </h2>
-          <div className="contact-tracked">L E T &apos; S &nbsp; T A L K</div>
+          <div className="contact-tracked" aria-hidden="true">L E T &apos; S &nbsp; T A L K</div>
           <a className="contact-email" href="mailto:dom.mangonon@gmail.com">
             dom.mangonon@gmail.com →
           </a>
diff --git a/components/landing/Nav.tsx b/components/landing/Nav.tsx
index ffdbee2..2cba43b 100644
--- a/components/landing/Nav.tsx
+++ b/components/landing/Nav.tsx
@@ -1,5 +1,8 @@
+'use client'
+
 // Nav — sticky top nav. Brand wordmark + section links + a single theme
 // toggle that cycles Gold (default) → Oxblood → High Contrast.
+import { useEffect, useRef } from 'react'
 
 export type ThemeMode = 'gold' | 'oxblood' | 'contrast'
 export type SectionId = 'hero' | 'projects' | 'writing' | 'resume' | 'travel' | 'contact'
@@ -20,6 +23,28 @@ interface NavProps {
 }
 
 export function Nav({ section, mode, onCycleMode, onNavigate, showWriting }: NavProps) {
+  const navRef = useRef<HTMLElement>(null)
+  const linksRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const links = linksRef.current
+    const nav = navRef.current
+    if (!links || !nav) return
+    const onScroll = () => {
+      const atEnd = links.scrollLeft + links.clientWidth >= links.scrollWidth - 2
+      links.classList.toggle('is-scrolled-end', atEnd)
+      nav.classList.toggle('is-scrolled-end', atEnd)
+    }
+    links.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onScroll)
+    document.fonts?.ready.then(onScroll)
+    onScroll()
+    return () => {
+      links.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onScroll)
+    }
+  }, [])
+
   const link = (id: SectionId, label: string) => (
     <a
       href={`#${id}`}
@@ -34,7 +59,7 @@ export function Nav({ section, mode, onCycleMode, onNavigate, showWriting }: Nav
   )
 
   return (
-    <nav className="site-nav">
+    <nav className="site-nav" aria-label="Main" ref={navRef}>
       <a
         href="#hero"
         className="brand"
@@ -47,7 +72,7 @@ export function Nav({ section, mode, onCycleMode, onNavigate, showWriting }: Nav
         <span className="brand-mark">DM</span>
         <span className="brand-word">Dom Mangonon</span>
       </a>
-      <div className="nav-links">
+      <div className="nav-links" ref={linksRef}>
         {link('hero', 'Intro')}
         {link('projects', 'Projects')}
         {showWriting && link('writing', 'Writing')}
diff --git a/components/landing/Projects.tsx b/components/landing/Projects.tsx
index 66c44e9..264d76b 100644
--- a/components/landing/Projects.tsx
+++ b/components/landing/Projects.tsx
@@ -29,7 +29,7 @@ function CardBody({ project }: { project: Project }) {
 
 export function Projects() {
   return (
-    <section id="projects" className="projects section">
+    <section id="projects" className="projects section" tabIndex={-1}>
       <BinaryRule seed={57} />
       <div className="projects-head">
         <span className="ds-eyebrow">Projects</span>
diff --git a/lib/format/contrast.ts b/lib/format/contrast.ts
new file mode 100644
index 0000000..001ba3f
--- /dev/null
+++ b/lib/format/contrast.ts
@@ -0,0 +1,15 @@
+const lin = (c: number) => {
+  const s = c / 255
+  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4
+}
+
+const lum = (hex: string) => {
+  const h = hex.replace('#', '')
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16))
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+}
+
+export const contrastRatio = (a: string, b: string): number => {
+  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)
+  return (hi + 0.05) / (lo + 0.05)
+}
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..9dd1bcb
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/og.png b/public/og.png
new file mode 100644
index 0000000..d1a3c02
Binary files /dev/null and b/public/og.png differ
diff --git a/scripts/og/template.html b/scripts/og/template.html
new file mode 100644
index 0000000..d309614
--- /dev/null
+++ b/scripts/og/template.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html><head><meta charset="utf-8">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500&display=swap">
+<style>
+  html,body{margin:0}
+  .og{width:1200px;height:630px;background:#160000;color:#f4efe6;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 420px;font-family:"JetBrains Mono",monospace}
+  .rule{position:absolute;left:0;right:0;font-size:16px;letter-spacing:.3em;word-spacing:.8em;white-space:nowrap;overflow:hidden;color:#7a7060;padding:18px 56px;border-bottom:1px solid #3d0f0f}
+  .rule.top{top:0}
+  .rule.bot{bottom:0;border-bottom:0;border-top:1px solid #3d0f0f;color:#d4a847}
+  .text{padding:120px 0 0 56px;display:flex;flex-direction:column;gap:22px}
+  .brand{display:flex;align-items:center;gap:16px}
+  .brand .m{width:48px;height:48px;background:#d4a847;color:#160000;font-family:"Archivo Black",sans-serif;font-size:24px;display:flex;align-items:center;justify-content:center}
+  .brand .w{font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:#b8ab94}
+  h1{font-family:"Archivo Black",sans-serif;font-size:104px;line-height:.9;letter-spacing:-.04em;margin:0}
+  h1 span{color:#d4a847}
+  .k{font-size:22px;line-height:1.4;letter-spacing:.04em;color:#b8ab94;max-width:640px;margin:0}
+  .portrait{padding:60px 56px 60px 0;display:flex;align-items:center;justify-content:flex-end}
+  .portrait img{height:430px;width:auto;border:1px solid #7a7060;padding:10px;background:#160000}
+</style></head>
+<body><div class="og">
+  <div class="rule top">0 0 1 1 0 0 0 1 1 0 0 1 1 0 1 0 0 1 0 1 1 1 1 0 1 1 0 1 0 1 0 1 1 0 0 0 0 0 1 1 0 1 1 0 0 1 0 1 1</div>
+  <div class="text">
+    <div class="brand"><span class="m">DM</span><span class="w">dommango.github.io</span></div>
+    <h1>Dom<br>Mangonon<span>.</span></h1>
+    <p class="k">Builds software with AI — SousIQ, Bracketeer, the Claude Code Placemat. Projects, writing, a travel map.</p>
+  </div>
+  <div class="portrait"><img src="../../public/images/portrait-skyline.webp" alt=""></div>
+  <div class="rule bot">PROJECTS · WRITING · CAREER · TRAVEL · CONTACT</div>
+</div></body></html>
diff --git a/scripts/render-og.mjs b/scripts/render-og.mjs
new file mode 100644
index 0000000..404932f
--- /dev/null
+++ b/scripts/render-og.mjs
@@ -0,0 +1,25 @@
+// Renders the Open Graph card and the apple-touch-icon once; commit the PNGs.
+// Run: node scripts/render-og.mjs
+import { chromium } from 'playwright'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const template = 'file://' + path.join(here, 'og', 'template.html')
+const out = path.join(here, '..', 'public')
+
+const browser = await chromium.launch()
+const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 })
+await page.goto(template, { waitUntil: 'networkidle' })
+await page.evaluate(() => document.fonts.ready)
+await page.screenshot({ path: path.join(out, 'og.png'), clip: { x: 0, y: 0, width: 1200, height: 630 } })
+
+// Touch icon: the DM mark on oxblood, 180×180.
+await page.setViewportSize({ width: 180, height: 180 })
+await page.setContent(`<body style="margin:0;background:#160000;display:grid;place-items:center;height:180px">
+  <div style="width:120px;height:120px;background:#d4a847;color:#160000;font:64px 'Archivo Black',sans-serif;display:grid;place-items:center;letter-spacing:-.04em">DM</div>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"></body>`)
+await page.evaluate(() => document.fonts.ready)
+await page.screenshot({ path: path.join(out, 'apple-touch-icon.png') })
+await browser.close()
+console.log('wrote public/og.png and public/apple-touch-icon.png')