diff --git a/PlotLine/Views/Characters/Details.cshtml b/PlotLine/Views/Characters/Details.cshtml
index 2029c95..98adff2 100644
--- a/PlotLine/Views/Characters/Details.cshtml
+++ b/PlotLine/Views/Characters/Details.cshtml
@@ -1,6 +1,7 @@
 @model CharacterDetailViewModel
 @{
     ViewData["Title"] = Model.Character.CharacterName;
+    ViewData["ProjectSection"] = "Characters";
     var firstAppearance = Model.Appearances.FirstOrDefault();
     var storyImportance = Model.Character.CharacterImportance switch
     {
@@ -18,49 +19,50 @@
     <span>@Model.Character.CharacterName</span>
 </nav>
 
-<section class="context-header">
-    <div class="context-title">
-        <span class="eyebrow">Project context</span>
-        <strong>@Model.Project.ProjectName</strong>
-    </div>
-    <nav class="context-nav" aria-label="Project navigation">
-        <a asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstAppearance?.SceneID" asp-route-FocusType="character" asp-route-FocusID="@Model.Character.CharacterID">Show on timeline</a>
-        <a asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-focusCharacterId="@Model.Character.CharacterID">Relationship Map</a>
-        <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
-        <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
-        <a asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
-    </nav>
-</section>
+<partial name="_ProjectSectionNav" model="Model.Project" />
 
-<div class="page-heading">
+<div class="page-heading pw-page-heading">
     <div>
         <p class="eyebrow">Character</p>
         <h1>@Model.Character.CharacterName <help-icon key="characters.details" /></h1>
         <p class="lead-text">@Model.Character.DefaultDescription</p>
     </div>
     <div class="button-row">
-        <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
+        <a class="btn btn-outline-secondary" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Back to characters</a>
         <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Index" asp-route-ProjectID="@Model.Project.ProjectID" asp-route-SelectedSceneID="@firstAppearance?.SceneID" asp-route-FocusType="character" asp-route-FocusID="@Model.Character.CharacterID">Back to timeline</a>
-        <a class="btn btn-outline-primary" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID" asp-route-focusCharacterId="@Model.Character.CharacterID">View Relationship Map</a>
-        <a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Character arc</a>
-        <a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Knowledge" asp-route-id="@Model.Character.CharacterID">Knowledge timeline</a>
-        <a class="btn btn-outline-primary" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Export character</a>
-        <a class="btn btn-outline-secondary" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID" asp-route-format="markdown">Markdown</a>
-        <a class="btn btn-outline-primary" asp-action="Edit" asp-route-id="@Model.Character.CharacterID">Edit character</a>
-        <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this character?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later.">
-            <input type="hidden" name="id" value="@Model.Character.CharacterID" />
-            <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
-            <button class="btn btn-outline-danger" type="submit">Archive Character</button>
-        </form>
+        <div class="dropdown pw-actions">
+            <button class="btn pw-actions__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Actions
+            </button>
+            <div class="dropdown-menu dropdown-menu-end">
+                <a class="dropdown-item" asp-action="Edit" asp-route-id="@Model.Character.CharacterID">Edit character</a>
+                <a class="dropdown-item" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Export character</a>
+                <a class="dropdown-item" asp-controller="Exports" asp-action="Character" asp-route-id="@Model.Character.CharacterID" asp-route-format="markdown">Markdown</a>
+                <div class="dropdown-divider"></div>
+                <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this character?&#10;&#10;This will hide it from active lists and timelines, but the data will be kept and can be restored later.">
+                    <input type="hidden" name="id" value="@Model.Character.CharacterID" />
+                    <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
+                    <button class="dropdown-item text-danger" type="submit">Archive Character</button>
+                </form>
+            </div>
+        </div>
     </div>
 </div>
 
+<nav class="pw-character-nav" aria-label="Character sections">
+    <a class="pw-character-nav__link active" href="#character-overview">Overview</a>
+    <a class="pw-character-nav__link" href="#character-relationships">Relationships</a>
+    <a class="pw-character-nav__link" asp-controller="Dynamics" asp-action="Character" asp-route-id="@Model.Character.CharacterID">Arc</a>
+    <a class="pw-character-nav__link" asp-controller="Dynamics" asp-action="Knowledge" asp-route-id="@Model.Character.CharacterID">Knowledge</a>
+    <a class="pw-character-nav__link" href="#character-appearances">Appearances</a>
+</nav>
+
 @if (TempData["RelationshipMessage"] is string relationshipMessage)
 {
     <div class="alert alert-info">@relationshipMessage</div>
 }
 
-<section class="asset-detail-grid">
+<section id="character-overview" class="asset-detail-grid">
     <article class="plain-card">
         <h2>Profile</h2>
         <p><strong>Short name:</strong> @Model.Character.ShortName</p>
@@ -245,7 +247,7 @@
     </article>
 </section>
 
-<section class="list-section mt-3">
+<section id="character-relationships" class="list-section mt-3">
     <h2>Current Relationships <help-icon key="characters.currentRelationships" /></h2>
     @if (!Model.CurrentRelationships.Any())
     {
@@ -337,7 +339,7 @@
     }
 </section>
 
-<section class="list-section mt-3">
+<section id="character-appearances" class="list-section mt-3">
     <h2>Scene appearances <help-icon key="characters.sceneAppearances" /></h2>
     @if (!Model.Appearances.Any())
     {
diff --git a/PlotLine/Views/Characters/Index.cshtml b/PlotLine/Views/Characters/Index.cshtml
index 65f3f9f..9d04a1f 100644
--- a/PlotLine/Views/Characters/Index.cshtml
+++ b/PlotLine/Views/Characters/Index.cshtml
@@ -1,20 +1,16 @@
 @model CharacterListViewModel
 @{
     ViewData["Title"] = "Characters";
+    ViewData["ProjectSection"] = "Characters";
 }
 
-<section class="context-header">
-    <div class="context-title"><span class="eyebrow">Project context</span><strong>@Model.Project.ProjectName</strong></div>
-    <nav class="context-nav" aria-label="Project navigation">
-        <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a>
-        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a>
-        <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
-        <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
-        <a asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Assets</a>
-        <a asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
-        <a asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Threads</a>
-    </nav>
-</section>
+<nav class="breadcrumb-trail" aria-label="Breadcrumb">
+    <a asp-controller="Projects" asp-action="Index">Projects</a>
+    <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">@Model.Project.ProjectName</a>
+    <span>Characters</span>
+</nav>
+
+<partial name="_ProjectSectionNav" model="Model.Project" />
 
 <div class="page-heading">
     <div>
@@ -22,7 +18,6 @@
         <h1>@Model.Project.ProjectName <help-icon key="characters.overview" /></h1>
     </div>
     <div class="button-row">
-        <a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Project</a>
         <a class="btn btn-primary" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add character</a>
     </div>
 </div>
diff --git a/PlotLine/Views/Projects/Details.cshtml b/PlotLine/Views/Projects/Details.cshtml
index 2d31ef1..d1f2f03 100644
--- a/PlotLine/Views/Projects/Details.cshtml
+++ b/PlotLine/Views/Projects/Details.cshtml
@@ -1,6 +1,7 @@
 @model ProjectDetailViewModel
 @{
     ViewData["Title"] = Model.Project.ProjectName;
+    ViewData["ProjectSection"] = "Overview";
 }
 
 <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@@ -8,32 +9,7 @@
     <span>@Model.Project.ProjectName</span>
 </nav>
 
-<section class="context-header">
-    <div class="context-title">
-        <span class="eyebrow">Current project</span>
-        <strong>@Model.Project.ProjectName</strong>
-    </div>
-    <nav class="context-nav" aria-label="Project navigation">
-        <a asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a>
-        <a asp-controller="Timeline" asp-action="Settings" asp-route-projectId="@Model.Project.ProjectID">Timeline Settings</a>
-        <a asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scene Metrics</a>
-        <a asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scenarios</a>
-        <a asp-controller="Writer" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Writer Workspace</a>
-        <a asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story Bible</a>
-        <a asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Relationship Map</a>
-        <a asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
-        <a asp-controller="Dynamics" asp-action="Story" asp-route-projectId="@Model.Project.ProjectID">Story dynamics</a>
-        <a asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
-        <a asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
-        <a asp-controller="Archives" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Archived Items</a>
-        <a asp-controller="Characters" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
-        <a asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Assets</a>
-        <a asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
-        <a asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Threads</a>
-    </nav>
-</section>
-
-<div class="page-heading">
+<div class="page-heading pw-page-heading">
     <div>
         <p class="eyebrow">Project / Series</p>
         <h1>@Model.Project.ProjectName <help-icon key="projectDashboard.overview" /></h1>
@@ -42,46 +18,38 @@
             <p class="lead-text">@Model.Project.Description</p>
         }
     </div>
-    <div class="button-row">
-        <a class="btn btn-outline-secondary" asp-action="Edit" asp-route-id="@Model.Project.ProjectID">Edit project</a>
-        <a class="btn btn-outline-secondary" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">Activity</a>
-        @if (Model.Project.IsOwner)
-        {
-            <a class="btn btn-outline-secondary" asp-controller="ProjectCollaborators" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Collaborators</a>
-        }
-        <a class="btn btn-outline-primary" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Timeline</a>
-        <a class="btn btn-outline-secondary" asp-controller="Timeline" asp-action="Settings" asp-route-projectId="@Model.Project.ProjectID">Timeline Settings</a>
-        <a class="btn btn-outline-secondary" asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scene Metrics</a>
-        <a class="btn btn-outline-primary" asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Scenarios</a>
-        <a class="btn btn-outline-primary" asp-controller="Writer" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Writer Workspace</a>
-        <a class="btn btn-outline-primary" asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story Bible</a>
-        <a class="btn btn-outline-primary" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Relationship Map</a>
-        <a class="btn btn-outline-primary" asp-controller="PlotLines" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Plot lines</a>
-        <a class="btn btn-outline-primary" asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Plot threads</a>
-        <a class="btn btn-outline-primary" asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story assets</a>
-        <a class="btn btn-outline-primary" asp-controller="Characters" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Characters</a>
-        <a class="btn btn-outline-primary" asp-controller="Locations" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Locations</a>
-        <a class="btn btn-outline-primary" asp-controller="Warnings" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Warnings</a>
-        <a class="btn btn-outline-primary" asp-controller="Analytics" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Story health</a>
-        <a class="btn btn-outline-primary" asp-controller="Dynamics" asp-action="Story" asp-route-projectId="@Model.Project.ProjectID">Story dynamics</a>
-        <a class="btn btn-outline-secondary" asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
-        <a class="btn btn-outline-secondary" asp-controller="Archives" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Archived Items</a>
-        @if (Model.Project.IsOwner)
-        {
-            <a class="btn btn-outline-secondary" asp-controller="Exports" asp-action="ProjectBackup" asp-route-projectId="@Model.Project.ProjectID">Download Project Backup</a>
-        }
-        <a class="btn btn-outline-secondary" asp-controller="ProjectRestorePoints" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Restore Points</a>
-        <a class="btn btn-primary" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
-        @if (Model.Project.IsOwner)
-        {
-            <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this project?&#10;&#10;Archived projects are hidden from your active workspace but remain stored within PlotWeaver Studio. Export your project first if you wish to maintain an external backup.">
-                <input type="hidden" name="id" value="@Model.Project.ProjectID" />
-                <button class="btn btn-outline-danger" type="submit">Archive Project</button>
-            </form>
-        }
+    <div class="dropdown pw-actions">
+        <button class="btn pw-actions__toggle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Actions
+        </button>
+        <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item" asp-action="Edit" asp-route-id="@Model.Project.ProjectID">Edit project</a>
+            <a class="dropdown-item" asp-action="Activity" asp-route-id="@Model.Project.ProjectID">Activity</a>
+            @if (Model.Project.IsOwner)
+            {
+                <a class="dropdown-item" asp-controller="ProjectCollaborators" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Collaborators</a>
+            }
+            <a class="dropdown-item" asp-controller="Books" asp-action="Create" asp-route-projectId="@Model.Project.ProjectID">Add book</a>
+            @if (Model.Project.IsOwner)
+            {
+                <a class="dropdown-item" asp-controller="Exports" asp-action="ProjectBackup" asp-route-projectId="@Model.Project.ProjectID">Download Project Backup</a>
+            }
+            <a class="dropdown-item" asp-controller="ProjectRestorePoints" asp-action="Index" asp-route-projectId="@Model.Project.ProjectID">Restore Points</a>
+            <a class="dropdown-item" asp-controller="Acceptance" asp-action="Phase1" asp-route-projectId="@Model.Project.ProjectID">Phase 1 Checklist</a>
+            @if (Model.Project.IsOwner)
+            {
+                <div class="dropdown-divider"></div>
+                <form asp-action="Archive" method="post" class="archive-button-form" data-confirm-message="Archive this project?&#10;&#10;Archived projects are hidden from your active workspace but remain stored within PlotWeaver Studio. Export your project first if you wish to maintain an external backup.">
+                    <input type="hidden" name="id" value="@Model.Project.ProjectID" />
+                    <button class="dropdown-item text-danger" type="submit">Archive Project</button>
+                </form>
+            }
+        </div>
     </div>
 </div>
 
+<partial name="_ProjectSectionNav" model="Model.Project" />
+
 @if (TempData["ProjectExportMessage"] is string projectExportMessage)
 {
     <div class="alert alert-warning">@projectExportMessage</div>
diff --git a/PlotLine/Views/Shared/_Layout.cshtml b/PlotLine/Views/Shared/_Layout.cshtml
index a21980e..3478b52 100644
--- a/PlotLine/Views/Shared/_Layout.cshtml
+++ b/PlotLine/Views/Shared/_Layout.cshtml
@@ -48,9 +48,6 @@
                             <li class="nav-item">
                                 <a class="nav-link text-dark" asp-area="" asp-controller="Writer" asp-action="Index">Writer Workspace</a>
                             </li>
-                            <li class="nav-item">
-                                <a class="nav-link text-dark" asp-area="" asp-controller="RelationshipMap" asp-action="Index">Relationship Map</a>
-                            </li>
                             <li class="nav-item">
                                 <a class="nav-link text-dark" asp-area="" asp-controller="Help" asp-action="Index">Help</a>
                             </li>
diff --git a/PlotLine/Views/Shared/_ProjectSectionNav.cshtml b/PlotLine/Views/Shared/_ProjectSectionNav.cshtml
new file mode 100644
index 0000000..45d59a0
--- /dev/null
+++ b/PlotLine/Views/Shared/_ProjectSectionNav.cshtml
@@ -0,0 +1,27 @@
+@model Project
+@{
+    var activeSection = ViewData["ProjectSection"] as string ?? "Overview";
+    var projectId = Model.ProjectID;
+
+    string ActiveClass(string section) =>
+        string.Equals(activeSection, section, StringComparison.OrdinalIgnoreCase) ? "active" : string.Empty;
+}
+
+<section class="pw-project-nav" aria-label="Project navigation">
+    <span class="pw-project-nav__label">Project navigation</span>
+    <nav class="pw-project-nav__links" aria-label="Project sections">
+        <a class="pw-project-nav__link @(ActiveClass("Overview"))" asp-controller="Projects" asp-action="Details" asp-route-id="@projectId">Overview</a>
+        <a class="pw-project-nav__link @(ActiveClass("Timeline"))" asp-controller="Timeline" asp-action="Index" asp-route-projectId="@projectId">Timeline</a>
+        <a class="pw-project-nav__link @(ActiveClass("Characters"))" asp-controller="Characters" asp-action="Index" asp-route-projectId="@projectId">Characters</a>
+        <a class="pw-project-nav__link @(ActiveClass("Relationships"))" asp-controller="RelationshipMap" asp-action="Index" asp-route-projectId="@projectId">Relationships</a>
+        <a class="pw-project-nav__link @(ActiveClass("Assets"))" asp-controller="StoryAssets" asp-action="Index" asp-route-projectId="@projectId">Assets</a>
+        <a class="pw-project-nav__link @(ActiveClass("Locations"))" asp-controller="Locations" asp-action="Index" asp-route-projectId="@projectId">Locations</a>
+        <a class="pw-project-nav__link @(ActiveClass("Threads"))" asp-controller="PlotThreads" asp-action="Index" asp-route-projectId="@projectId">Threads</a>
+        <a class="pw-project-nav__link @(ActiveClass("Metrics"))" asp-controller="ProjectMetrics" asp-action="Index" asp-route-projectId="@projectId">Metrics</a>
+        <a class="pw-project-nav__link @(ActiveClass("Scenarios"))" asp-controller="Scenarios" asp-action="Index" asp-route-projectId="@projectId">Scenarios</a>
+        <a class="pw-project-nav__link @(ActiveClass("Story Bible"))" asp-controller="StoryBible" asp-action="Index" asp-route-projectId="@projectId">Story Bible</a>
+        <a class="pw-project-nav__link @(ActiveClass("Health"))" asp-controller="Analytics" asp-action="Index" asp-route-projectId="@projectId">Health</a>
+        <a class="pw-project-nav__link @(ActiveClass("Warnings"))" asp-controller="Warnings" asp-action="Index" asp-route-projectId="@projectId">Warnings</a>
+        <a class="pw-project-nav__link @(ActiveClass("Archive"))" asp-controller="Archives" asp-action="Index" asp-route-projectId="@projectId">Archive</a>
+    </nav>
+</section>
diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css
index 3edb1d8..4924109 100644
--- a/PlotLine/wwwroot/css/plotline-theme.css
+++ b/PlotLine/wwwroot/css/plotline-theme.css
@@ -288,6 +288,153 @@ a:hover {
   color: var(--plotline-accent-dark);
 }
 
+.pw-page-heading {
+  align-items: center;
+  gap: clamp(0.85rem, 2vw, 1.35rem);
+  margin-bottom: 1rem;
+}
+
+.pw-page-heading > div:first-child {
+  min-width: min(100%, 26rem);
+}
+
+.pw-page-heading .lead-text {
+  max-width: 52rem;
+}
+
+.pw-project-nav {
+  display: grid;
+  gap: 0.55rem;
+  margin: 0 0 1.1rem;
+  border: 1px solid var(--plotline-border-soft);
+  border-radius: var(--plotline-radius);
+  padding: 0.7rem 0.75rem;
+  background:
+    linear-gradient(135deg, rgba(255, 253, 248, 0.9), rgba(242, 226, 207, 0.55)),
+    var(--plotline-surface);
+  box-shadow: var(--plotline-shadow-subtle);
+}
+
+.pw-project-nav__label {
+  color: var(--plotline-accent);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.pw-project-nav__links,
+.pw-character-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.42rem;
+  align-items: center;
+}
+
+.pw-project-nav__link,
+.pw-character-nav__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  border: 1px solid rgba(84, 68, 48, 0.16);
+  border-radius: 999px;
+  padding: 0.32rem 0.68rem;
+  color: var(--plotline-accent-dark);
+  background: rgba(255, 250, 241, 0.82);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
+  font-size: 0.8rem;
+  font-weight: 780;
+  line-height: 1.1;
+  text-decoration: none;
+  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.pw-project-nav__link:hover,
+.pw-project-nav__link:focus,
+.pw-character-nav__link:hover,
+.pw-character-nav__link:focus {
+  color: var(--plotline-accent-dark);
+  border-color: rgba(122, 77, 44, 0.32);
+  background: rgba(122, 77, 44, 0.11);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 5px 12px rgba(62, 45, 28, 0.06);
+}
+
+.pw-project-nav__link.active,
+.pw-character-nav__link.active {
+  color: #fff8ec;
+  border-color: var(--plotline-accent);
+  background: linear-gradient(180deg, var(--plotline-accent), var(--plotline-accent-dark));
+  box-shadow: 0 6px 14px rgba(62, 45, 28, 0.16);
+}
+
+.pw-character-nav {
+  margin: 0 0 1rem;
+  border-bottom: 1px solid rgba(84, 68, 48, 0.11);
+  padding-bottom: 0.65rem;
+}
+
+.pw-actions {
+  flex: 0 0 auto;
+}
+
+.pw-actions__toggle {
+  --bs-btn-color: var(--plotline-accent-dark);
+  --bs-btn-bg: rgba(255, 250, 241, 0.86);
+  --bs-btn-border-color: rgba(122, 77, 44, 0.32);
+  --bs-btn-hover-color: #fff8ec;
+  --bs-btn-hover-bg: var(--plotline-accent);
+  --bs-btn-hover-border-color: var(--plotline-accent);
+  --bs-btn-active-color: #fff8ec;
+  --bs-btn-active-bg: var(--plotline-accent-dark);
+  --bs-btn-active-border-color: var(--plotline-accent-dark);
+  min-height: 2.35rem;
+  padding-inline: 1rem;
+  box-shadow: var(--plotline-shadow-subtle);
+}
+
+.pw-actions .dropdown-menu {
+  --bs-dropdown-bg: var(--plotline-surface-elevated);
+  --bs-dropdown-color: var(--plotline-text);
+  --bs-dropdown-border-color: var(--plotline-border-soft);
+  --bs-dropdown-link-color: var(--plotline-text);
+  --bs-dropdown-link-hover-color: var(--plotline-accent-dark);
+  --bs-dropdown-link-hover-bg: rgba(122, 77, 44, 0.1);
+  --bs-dropdown-divider-bg: rgba(84, 68, 48, 0.13);
+  border-radius: var(--plotline-radius-sm);
+  box-shadow: var(--plotline-shadow-card);
+}
+
+.pw-actions .dropdown-item {
+  font-weight: 650;
+}
+
+.pw-actions .dropdown-item.text-danger {
+  color: var(--plotline-danger) !important;
+}
+
+.pw-actions .dropdown-item.text-danger:hover,
+.pw-actions .dropdown-item.text-danger:focus {
+  color: #fff8ec !important;
+  background: var(--plotline-danger);
+}
+
+@media (max-width: 767.98px) {
+  .pw-page-heading {
+    align-items: stretch;
+  }
+
+  .pw-page-heading .pw-actions,
+  .pw-page-heading .pw-actions__toggle {
+    width: 100%;
+  }
+
+  .pw-project-nav {
+    padding: 0.65rem;
+  }
+}
+
 .timeline-workspace {
   background:
     linear-gradient(180deg, rgba(255, 251, 244, 0.84), rgba(237, 226, 211, 0.66)),
@@ -1343,6 +1490,75 @@ a:focus-visible {
   border-color: #ffd5a6;
 }
 
+[data-theme="dark"] .pw-project-nav {
+  color: var(--app-text);
+  border-color: rgba(241, 195, 143, 0.18);
+  background:
+    linear-gradient(135deg, rgba(42, 35, 30, 0.96), rgba(58, 42, 32, 0.58)),
+    var(--app-surface);
+  box-shadow: var(--plotline-shadow-subtle);
+}
+
+[data-theme="dark"] .pw-project-nav__label {
+  color: #dfc6aa;
+}
+
+[data-theme="dark"] .pw-character-nav {
+  border-bottom-color: rgba(241, 195, 143, 0.16);
+}
+
+[data-theme="dark"] .pw-project-nav__link,
+[data-theme="dark"] .pw-character-nav__link {
+  color: #f1dcc4;
+  border-color: rgba(241, 195, 143, 0.26);
+  background: rgba(241, 195, 143, 0.1);
+  box-shadow: none;
+}
+
+[data-theme="dark"] .pw-project-nav__link:hover,
+[data-theme="dark"] .pw-project-nav__link:focus,
+[data-theme="dark"] .pw-character-nav__link:hover,
+[data-theme="dark"] .pw-character-nav__link:focus {
+  color: #21160f;
+  border-color: #ffd5a6;
+  background: #f1c38f;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
+}
+
+[data-theme="dark"] .pw-project-nav__link.active,
+[data-theme="dark"] .pw-character-nav__link.active {
+  color: #21160f;
+  border-color: #ffd5a6;
+  background: linear-gradient(180deg, #f1c38f, var(--plotline-accent));
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+}
+
+[data-theme="dark"] .pw-actions__toggle {
+  --bs-btn-color: #f1dcc4;
+  --bs-btn-bg: rgba(241, 195, 143, 0.1);
+  --bs-btn-border-color: rgba(241, 195, 143, 0.3);
+  --bs-btn-hover-color: #21160f;
+  --bs-btn-hover-bg: #f1c38f;
+  --bs-btn-hover-border-color: #ffd5a6;
+  --bs-btn-active-color: #21160f;
+  --bs-btn-active-bg: var(--plotline-accent-dark);
+  --bs-btn-active-border-color: #ffd5a6;
+}
+
+[data-theme="dark"] .pw-actions .dropdown-menu {
+  --bs-dropdown-color: var(--app-text);
+  --bs-dropdown-bg: var(--app-surface-alt);
+  --bs-dropdown-border-color: rgba(241, 195, 143, 0.22);
+  --bs-dropdown-link-color: var(--app-text);
+  --bs-dropdown-link-hover-color: #21160f;
+  --bs-dropdown-link-hover-bg: #f1c38f;
+  --bs-dropdown-divider-bg: rgba(241, 195, 143, 0.18);
+}
+
+[data-theme="dark"] .pw-actions .dropdown-item.text-danger {
+  color: #ffb2aa !important;
+}
+
 [data-theme="dark"] .timeline-filter,
 [data-theme="dark"] .workspace-heading .button-row,
 [data-theme="dark"] .timeline-control-panel {