diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1dc30f2..3f73d7c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -177,6 +177,12 @@ html, body { overflow-x: hidden; }
   /* A shade off the page, so the bar reads as a surface rather than as the top
      of the content — white on white left it looking like a stray row of links. */
   background: linear-gradient(var(--card-bg), var(--bg));
+  /* A light surface inside a dark navbar, and `.navbar` sets a near-white text
+     colour for that dark background. Everything in here inherited it — the
+     study objective and its dropdown especially — so it was near-white on
+     near-white and barely legible. The links had their own override and looked
+     fine, which is why it went unnoticed. */
+  color: var(--text);
   border-bottom: 1px solid var(--border);
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
   height: 46px;
@@ -209,9 +215,12 @@ html, body { overflow-x: hidden; }
 @media (prefers-reduced-motion: reduce) { .navbar-sections { transition: none; } }
 [data-theme="markdown"] .navbar .logo { color: #d4a96a; }
 .nav-burger { display: none; background: none !important; border: 0 !important; cursor: pointer; color: var(--navbar-fg); padding: 6px; flex-direction: column; gap: 5px; opacity: 0.85; }
-.navbar a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; }
-.navbar a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; }
-.navbar button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; }
+/* Scoped to the dark bar. These were `.navbar a` and `.navbar button`, which
+   also caught everything in the light section bar beneath it — near-white text
+   and a translucent white border, on a white surface. */
+.navbar-primary a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; }
+.navbar-primary a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; }
+.navbar-primary button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; }
 
 /* ── Cards ──────────────────────────────────────────────────── */
 .card {