Fix human typo

index.html

@@ -8727,7 +8727,7 @@
                         <p>
                             <span class="none2">OFFSHORE ISLANDS</span>
                             <span class="none3"
-                                >exist in some quantity, some hav i ng human
+                                >exist in some quantity, some having human
                                 inhabitants, and one at least being the abode of
                                 DRAGONS.</span
                             >

script.js

@@ -52,15 +52,6 @@ Array.from(firstByLetter.entries())
     tocLetters?.appendChild(link);
   });
 
-// scroll TOC list when clicking a letter
-tocLetters?.addEventListener("click", (e) => {
-  if (e.target.tagName !== "A") return;
-  const href = e.target.getAttribute("href");
-  if (!href) return;
-  const tocLink = tocList?.querySelector(`a[href="${href}"]`);
-  tocLink?.scrollIntoView({ block: "start" });
-});
-
 const searchInput = document.getElementById("toc-search");
 let searchTimeout;
 searchInput?.addEventListener("input", (event) => {
@@ -353,13 +344,20 @@ tocList?.addEventListener("click", (e) => {
   }
 });
 
-// scroll TOC item into view when navigating via hash
-window.addEventListener("hashchange", () => {
+// highlight active TOC entry based on hash
+const updateActiveTocEntry = () => {
   const id = location.hash.slice(1);
+  tocList?.querySelector("a.active")?.classList.remove("active");
   if (id) {
-    tocList?.querySelector(`a[href="#${id}"]`)?.scrollIntoView({ block: "nearest" });
+    const link = tocList?.querySelector(`a[href="#${id}"]`);
+    link?.classList.add("active");
   }
-});
+};
+
+window.addEventListener("hashchange", updateActiveTocEntry);
+if (location.hash) {
+  updateActiveTocEntry();
+}
 
 // Entry popup preview on hover
 const popup = document.createElement("div");

style.css

@@ -140,7 +140,6 @@ body {
   padding: 6px 8px;
   border-radius: 10px;
   display: block;
-  scroll-margin-top: 1rem;
   transition:
     background 0.2s ease,
     color 0.2s ease;
@@ -152,6 +151,12 @@ body {
   color: var(--accent-deep);
 }
 
+.toc-list a.active {
+  background: rgba(182, 82, 47, 0.22);
+  color: var(--accent-deep);
+  font-weight: 600;
+}
+
 .content {
   background: rgba(255, 255, 255, 0.6);
   border-radius: clamp(12px, 3vw, 24px);