diff --git a/app/globals.css b/app/globals.css
index d611fd20..294dcfa3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,7 +10,7 @@
 
   /* accent: --color-accent for fills only, --color-accent-text for colored text */
   --color-accent: #bafc3c;
-  --color-accent-text: #3f7a00;
+  --color-accent-text: #3a7000;
   --color-accent-contrast: #141414;
   --color-link: var(--color-accent-text);
 
diff --git a/app/ui/site/page-header.module.css b/app/ui/site/page-header.module.css
index 16875633..22dd3000 100644
--- a/app/ui/site/page-header.module.css
+++ b/app/ui/site/page-header.module.css
@@ -23,7 +23,15 @@
   overflow-wrap: anywhere;
 }
 
+/* The tight h1 line height lets the highlight reach the line above. Painting it
+   behind the title's other text keeps those descenders on top. */
+.header h1 {
+  isolation: isolate;
+}
+
 .header h1 mark {
+  position: relative;
+  z-index: -1;
   background: var(--color-accent);
   border-radius: var(--radius);
   box-decoration-break: clone;
@@ -32,6 +40,12 @@
   padding-inline: 0.16em;
 }
 
+/* A highlight that is or holds a link paints normally, so the link stays clickable. */
+.header h1 a mark,
+.header h1 mark:has(a) {
+  z-index: auto;
+}
+
 .header > p {
   color: var(--color-text);
   font-size: var(--text-body);
diff --git a/app/ui/site/prose.module.css b/app/ui/site/prose.module.css
index f0344238..a71a6981 100644
--- a/app/ui/site/prose.module.css
+++ b/app/ui/site/prose.module.css
@@ -14,10 +14,13 @@
 
 .prose h1 {
   font-size: var(--text-h1);
+  isolation: isolate;
   line-height: var(--line-h1);
 }
 
 .prose h1 mark {
+  position: relative;
+  z-index: -1;
   background: var(--color-accent);
   border-radius: var(--radius);
   box-decoration-break: clone;
@@ -26,6 +29,12 @@
   padding: 0 0.18em;
 }
 
+/* A highlight that is or holds a link paints normally, so the link stays clickable. */
+.prose h1 a mark,
+.prose h1 mark:has(a) {
+  z-index: auto;
+}
+
 .prose h2 {
   font-size: var(--text-h2);
 }