diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index e0335a34..5e693203 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -329,6 +329,34 @@
 	background-color: color-mix(in srgb, var(--c-accent) 25%, transparent);
 }
 
+/* ─── 7b. Person mention link (transcription read mode) ────────────────────── */
+/*
+   Rendered by renderTranscriptionBody() via {@html ...} in TranscriptionReadView.
+   Underline at rest is required for WCAG AA — colour alone fails 8% of men
+   with red-green colour-blindness. Focus ring uses a box-shadow + border-radius
+   so the rectangle doesn't touch the glyphs.
+*/
+.person-mention {
+	color: var(--c-ink);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 3px;
+	text-decoration-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
+	cursor: pointer;
+	transition: text-decoration-color 0.15s ease;
+}
+
+.person-mention:hover {
+	text-decoration-color: var(--c-accent);
+	text-decoration-thickness: 2px;
+}
+
+.person-mention:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 2px var(--c-ink);
+	border-radius: 2px;
+}
+
 /* ─── 8. Base styles ───────────────────────────────────────────────────────── */
 @layer base {
 	html {