Committing extra source files

assets/scripts/script.js

@@ -0,0 +1,175 @@
+
+// COPY BUTTON:
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll("pre.src").forEach(function (block) {
+    const button = document.createElement("button");
+    button.innerText = "Copy";
+    button.className = "copy-btn";
+
+    // Append button inside <pre>
+    block.appendChild(button);
+
+    button.addEventListener("click", function () {
+      const text = block.innerText.replace(button.innerText, ""); // exclude button text
+      navigator.clipboard.writeText(text.trim()).then(() => {
+        button.innerText = "Copied!";
+        setTimeout(() => (button.innerText = "Copy"), 1500);
+      });
+    });
+  });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll('a.footref[href^="#fn"]').forEach(ref => {
+    const sup = ref.closest("sup") || ref;
+    // idempotent: don't insert twice
+    if (sup.nextElementSibling && sup.nextElementSibling.classList?.contains("footnote-sidenote")) return;
+
+    const targetId = ref.getAttribute("href").replace(/^#/, ""); // works for fn.2 or fn2
+
+    const anchor   = document.getElementById(targetId);
+    if (!anchor) return;
+
+    const footdef = anchor.closest(".footdef") || anchor.parentElement;
+    if (!footdef) return;
+
+    // 1) Prefer leaf paragraphs to avoid div+p duplication
+    let paras = footdef.querySelectorAll("p.footpara");
+    if (!paras.length) {
+      // fallback: any .footpara elements that don't contain another .footpara
+      paras = footdef.querySelectorAll(".footpara:not(:has(.footpara))");
+    }
+
+    // 2) Build HTML, de-duplicating by text content
+    let parts = [];
+    if (paras.length) {
+      const seen = new Set();
+      parts = Array.from(paras).map(p => {
+        const txt = p.textContent.trim().replace(/\s+/g, " ");
+        if (seen.has(txt)) return "";
+        seen.add(txt);
+        return p.innerHTML.trim();
+      }).filter(Boolean);
+    }
+
+    // 3) Fallback: clean full block if no paras found
+    if (!parts.length) {
+      const clone = footdef.cloneNode(true);
+      clone.querySelectorAll("sup.footnum, a[role='doc-backlink']").forEach(n => n.remove());
+      parts = [clone.innerHTML.trim()];
+    }
+
+    // 4) Insert the sidenote
+    const sn = document.createElement("span");
+    sn.className = "sidenote footnote-sidenote";
+    sn.setAttribute("data-fn", (ref.textContent || "").trim());
+    sn.innerHTML = parts.join(" ");
+
+    sup.insertAdjacentElement("afterend", sn);
+  });
+});
+  (function(){
+    const root = document.documentElement;
+    const storageKey = "theme";
+    const saved = localStorage.getItem(storageKey);
+    if (saved === "dark" || saved === "light") {
+      root.setAttribute("data-theme", saved);
+    }
+    const btn = document.getElementById("theme-toggle");
+    if (!btn) return;
+    btn.addEventListener("click", () => {
+      const current = root.getAttribute("data-theme");
+      const next = current === "dark" ? "light" : "dark";
+      // If no current (auto), assume we’re toggling to dark first
+      const target = current ? next : "dark";
+      root.setAttribute("data-theme", target);
+      localStorage.setItem(storageKey, target);
+    });
+  })();
+
+document.addEventListener("DOMContentLoaded", () => {
+  const toc = document.querySelector("#text-table-of-contents");
+  if (!toc) { console.warn("No #text-table-of-contents found"); return; }
+
+  const links = toc.querySelectorAll('a[href^="#"]');
+  if (!links.length) { console.warn("No ToC links found"); return; }
+
+  // Map: id -> link
+  const linkById = new Map();
+  links.forEach(a => {
+    const id = decodeURIComponent(a.getAttribute("href").slice(1));
+    const el = document.getElementById(id);
+    if (el) linkById.set(id, a);
+  });
+  if (!linkById.size) { console.warn("No matching headings with IDs"); return; }
+
+  // Headings to observe (h2–h4 usually)
+  const headings = [...document.querySelectorAll("h2[id], h3[id], h4[id]")]
+    .filter(h => linkById.has(h.id));
+
+  // Helper to mark active
+  const setActive = (id) => {
+    links.forEach(a => {
+      const active = a.getAttribute("href") === `#${id}`;
+      a.classList.toggle("is-active", active);
+      if (active) a.setAttribute("aria-current", "true");
+      else a.removeAttribute("aria-current");
+    });
+  };
+
+  // Calculate sticky header offset in px
+  const headerOffsetPx = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+  // Track visible headings (id -> distance from top)
+  const visible = new Map();
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      const id = entry.target.id;
+      if (entry.isIntersecting) {
+        // How far from the top (after header offset)
+        const dist = entry.target.getBoundingClientRect().top - headerOffsetPx;
+        visible.set(id, dist);
+      } else {
+        visible.delete(id);
+      }
+    });
+
+    if (visible.size) {
+      // Choose the heading closest to the top (>= -headerOffset)
+      const topMost = [...visible.entries()]
+        .sort((a,b) => Math.abs(a[1]) - Math.abs(b[1]))[0][0];
+      setActive(topMost);
+      // console.log("Active:", topMost, visible);
+    }
+  }, {
+    root: null,                                   // track relative to viewport
+    rootMargin: `-${headerOffsetPx}px 0px -70% 0px`,
+    threshold: [0, 0.01, 0.1]                     // fire as soon as it enters
+  });
+
+  headings.forEach(h => observer.observe(h));
+
+  // Initial highlight (in case you load mid‑page)
+  let bestId = null, bestDist = Infinity;
+  headings.forEach(h => {
+    const top = h.getBoundingClientRect().top - headerOffsetPx;
+    const dist = top < 0 ? Math.abs(top) : top + 1e6;
+    if (dist < bestDist) { bestDist = dist; bestId = h.id; }
+  });
+  if (bestId) setActive(bestId);
+
+  // Optional: smooth-scroll ToC clicks
+  toc.addEventListener("click", (e) => {
+    const a = e.target.closest('a[href^="#"]');
+    if (!a) return;
+    const id = decodeURIComponent(a.hash.slice(1));
+    const el = document.getElementById(id);
+    if (!el) return;
+    e.preventDefault();
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    el.setAttribute("tabindex", "-1");
+    el.focus({ preventScroll: true });
+    history.pushState(null, "", `#${id}`);
+  });
+});

assets/styles/style.css

@@ -0,0 +1,670 @@
+/* =========================
+   Theme variables
+   ========================= */
+:root{
+    /* Layout */
+    --content: 880px;
+    --gutter:  2rem;
+    --margin:  420px;
+    --body-pad: 1rem; 
+
+    /* Fullwidth media tuning */
+    --bleed: 48px; 
+    --fullwidth-cap: 860px;
+
+    /* Colors */
+    --bg: #faf9f6;
+    --fg: #000000;
+    --link: #1a0dab;
+    --heading: #004c99;
+    --code-bg: #f0f0f0;
+    --active-toc: #cacaca;
+
+    /* Notes */
+    --note-color: #555;
+    --note-bg: transparent;
+}
+
+/* =========================
+   Base
+   ========================= */
+html, body{
+    background-color: var(--bg);
+    color: var(--fg);
+    font-size: 16px;
+    transition: background-color .3s, color .3s;
+    margin: 0;
+}
+
+h1, h2, h3{ color: var(--heading); }
+
+a {
+  color: var(--link);
+  text-decoration: none; /* removes underline by default */
+}
+
+a:hover {
+  text-decoration: underline; /* only show on hover */
+}
+
+/* =========================
+   Header / Banner
+   ========================= */
+.banner-header{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: .5rem 1rem;
+    border-radius: 6px;
+}
+.banner-logo{
+    height: 80px; width: auto;
+    margin-right: 1.5rem; border-radius: 50%;
+}
+nav{
+    display: flex; gap: 1rem;
+    font-weight: 600; font-size: 1.1rem;
+}
+#updated{
+    font-size: .8rem; color: var(--fg);
+    margin: .5rem 0 1rem; font-style: italic;
+}
+/* Mobile banner */
+@media (max-width: 600px){
+    .banner-header{ flex-direction: column; align-items: center; text-align: center; }
+    .banner-logo{ margin: 0 0 .5rem 0; }
+    nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; }
+}
+/* Make the preamble align with the content column + right rail */
+#preamble.status{
+    max-width: var(--content);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--body-pad);
+    padding-right: var(--body-pad);
+    box-sizing: content-box;
+}
+
+#preamble .banner-header,
+#preamble #updated{
+    max-width: 100%;
+}
+
+@media (max-width: 1100px){
+    #preamble.status{
+      padding-right: var(--body-pad);
+  }
+}
+
+/* =========================
+   Footer
+   ========================= */
+footer{
+    color: var(--fg);
+    padding: 1rem; margin-top: 2rem;
+    border-radius: 6px; text-align: center;
+    font-size: .9rem; font-style: italic;
+}
+
+/* =========================
+   Content column + reserved right margin
+   ========================= */
+#content.content{
+  max-width: var(--content);
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: var(--body-pad);
+  padding-right: var(--body-pad);
+  box-sizing: content-box;
+  position: relative; /* fine to keep */
+}
+
+
+/* Figures & normal images obey text column */
+#content .figure,
+#content img:not(.fullwidth){
+    max-width: 100%;
+    height: auto;
+}
+
+/* =========================
+   Sidenotes (Tufte-like)
+   ========================= */
+/* HTML pattern:
+   label.margin-toggle.sidenote-number + input.margin-toggle + span.sidenote
+*/
+/* Sidenotes: float-right inside #content, then push them into the right gutter+edge */
+.sidenote,
+.marginnote{
+    float: right;
+    width: var(--margin);
+    margin-right: calc(-1 * ( (95vw - var(--content)) / 2 ));
+    padding-left: var(--gutter);
+    overflow-wrap: break-word;    /* preferred */
+    word-wrap: break-word;        /* legacy support */
+    word-break: break-word;       /* safety for stubborn cases */
+    margin-top: .3rem;
+    margin-bottom: .6rem;
+    font-size: .95rem;
+    line-height: 1.35;
+    color: var(--note-color);
+    background: var(--note-bg);
+    box-sizing: border-box;
+}
+
+/* Optional: show the same footnote number in the margin */
+.footnote-sidenote::before{
+  content: attr(data-fn) " ";
+  font-size: 0.85em;
+  vertical-align: super;
+  margin-right: 0.2rem;
+  opacity: 0.85;
+}
+/* Sidenote numbering */
+body{ counter-reset: sidenote-counter; }
+.sidenote-number:after{
+    counter-increment: sidenote-counter;
+    content: counter(sidenote-counter);
+    font-size: .85em;
+    vertical-align: super;
+    margin-left: .15rem;
+}
+
+/* Hide checkbox toggles (kept for mobile patterns if added later) */
+.margin-toggle{
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Safety: only big blocks should clear floats to avoid gaps */
+#content .figure,
+#content .org-src-container,
+#content img.fullwidth{
+    //clear: both;
+}
+
+/* =========================
+   Fullwidth media (centered, modest bleed, no collision)
+   ========================= */
+.fullwidth{
+    display: block;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    height: auto;
+    margin: 1.25rem 0 1.75rem;
+    width: 100%;
+    max-width: min(
+	calc(var(--content) + var(--bleed) * 2),     /* centered bleed */
+	var(--fullwidth-cap),                        /* absolute cap */
+	calc(100vw - 2 * var(--body-pad))            /* never cause horizontal scroll */
+    );
+}
+.figure .fullwidth{ width: inherit; }           /* if img sits inside a figure */
+.figure figcaption{
+    text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
+}
+
+@media (max-width: 1100px){
+  #content.content{
+    padding-right: var(--body-pad);
+  }
+  .sidenote,
+  .marginnote{
+    float: none;
+    clear: both;
+    width: auto;
+    display: block;          /* ⬅ make them start on a new line */
+    margin: 0.5rem 0 0.75rem; /* spacing above/below */
+    padding-left: 0.75rem;
+    border-left: 3px solid rgba(0,0,0,.08);
+    margin-right: 0;
+  }
+  .fullwidth{
+    max-width: calc(100vw - 2 * var(--body-pad));
+  }
+}
+
+
+/* Ultra-wide comfort tweaks */
+/* @media (min-width: 1600px){ */
+/*     :root{ --content: 720px; --margin: 360px; } */
+/* } */
+
+/* =========================
+   Code highlighting (Org-mode classes)
+   ========================= */
+.org-comment        { color: #b22222; }      /* comments */
+.org-string         { color: #8b2252; }      /* string literals */
+.org-keyword        { color: #a020f0; }      /* keywords */
+.org-builtin        { color: #483d8b; }      /* builtins */
+.org-constant       { color: #008b8b; }      /* constants / numbers */
+.org-function-name  { color: #0000ff; }      /* function names */
+.org-variable-name  { color: sienna; }       /* variables */
+.org-type           { color: #228b22; }      /* types/classes */
+.org-preprocessor   { color: #483d8b; }      /* #define, import, etc. */
+.org-doc            { color: #8b2252; }      /* docstrings */
+.org-warning        { color: #ff8c00; font-weight: 700; } /* warnings */
+
+/* Inline code */
+:not(pre) > code{
+    padding: 2px 5px; margin: 0 1px;
+    border: 1px solid #ddd; border-radius: 3px;
+    background-clip: padding-box;
+    color: #333; font-size: 80%;
+}
+pre {
+    background-color: var(--bg);
+}
+/* Code blocks */
+.org-src-container{
+    border: 1px solid #ccc;
+    box-shadow: 3px 3px 3px #eee;
+    font-family: Lucida Console, monospace;
+    font-size: 80%;
+    margin: 1em auto;
+    padding: .1em .5em;
+    position: relative;
+}
+.org-src-container > pre{ overflow: auto; }
+
+/* Language badges (optional) */
+.org-src-container > pre:before{
+    display: block; position: absolute; top: 0; right: 0;
+    background-color: #b3b3b3; color: #fff;
+    padding: 0 .5em; border-bottom-left-radius: 8px; border: 0;
+    font-size: 80%;
+}
+.org-src-container > pre.src-bash:before        { content: "bash"; }
+.org-src-container > pre.src-sh:before          { content: "sh"; }
+.org-src-container > pre.src-shell:before       { content: "shell"; }
+.org-src-container > pre.src-python:before      { content: "Python"; }
+.org-src-container > pre.src-emacs-lisp:before  { content: "Emacs Lisp"; }
+.org-src-container > pre.src-js:before,
+.org-src-container > pre.src-javascript:before  { content: "Javascript"; }
+.org-src-container > pre.src-typescript:before  { content: "Typescript"; }
+.org-src-container > pre.src-html:before        { content: "HTML"; }
+.org-src-container > pre.src-css:before         { content: "CSS"; }
+.org-src-container > pre.src-c:before           { content: "C"; }
+.org-src-container > pre.src-cpp:before         { content: "C++"; }
+.org-src-container > pre.src-java:before        { content: "Java"; }
+.org-src-container > pre.src-rust:before        { content: "Rust"; }
+.org-src-container > pre.src-R:before           { content: "R"; }
+
+/* Org copy button on blocks */
+.copy-btn{
+    position: absolute; top: .4em; right: .4em;
+    background-color: var(--code-bg); color: var(--heading);
+    border: 1px solid var(--heading); border-radius: 4px;
+    padding: .2em .6em; font-size: .8rem; cursor: pointer; z-index: 10;
+    transition: background-color .3s;
+}
+.copy-btn:hover{ background-color: var(--heading); color: var(--code-bg); }
+
+/* Org’s default pre label removal if duplicated elsewhere */
+pre.src::before{ content: none !important; }
+pre.src{
+    padding: 1.5em 1em 1em;
+    font-family: "Fira Mono","Courier New",monospace;
+    font-size: .9rem; line-height: 1.4;
+    overflow-x: auto; white-space: pre-wrap;
+}
+
+/* =========================
+   Lists with post meta chips
+   ========================= */
+.post-date{ color: pink; font-size: .9em; margin-left: 8px; }
+
+/* Post tag chip no longer needs a clearfix */
+.post-tag{
+    float: right;
+    display: inline-block;
+    background-color: #f0f0f0;
+    color: #444;
+    border-radius: 5px;
+    padding: 2px 6px;
+    margin-left: 6px;
+    font-size: 0.8em;
+}
+/* Shared base styles for all lists */
+ul, ol {
+  margin: 1rem 0 1.5rem 1.5rem; /* space above/below and indent */
+  padding: 0;
+  line-height: 1.5;
+}
+
+/* Unordered lists: custom bullet */
+ul {
+  list-style: none; /* remove default bullet */
+}
+ul li {
+  position: relative;
+  padding-left: 1.2em; /* space for custom bullet */
+}
+ul li::before {
+  content: "•"; /* bullet character */
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--heading); /* matches your headings color */
+  font-weight: bold;
+}
+
+/* Ordered lists: styled numbers */
+ol {
+  counter-reset: list-counter;
+  list-style: none; /* remove default numbering */
+}
+ol li {
+  counter-increment: list-counter;
+  position: relative;
+  padding-left: 1.8em; /* space for custom number */
+}
+ol li::before {
+  content: counter(list-counter) ".";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--heading);
+  font-weight: bold;
+}
+
+/* List items: keep your float containment and spacing */
+li {
+  margin-bottom: 8px;
+  display: flow-root; /* contains floats like .post-tag */
+}
+
+/* Remove the old clearfix ::after */
+li::after {
+  content: none;
+}
+
+/* Nested lists: smaller bullet/number and reduced spacing */
+li ul,
+li ol {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+li ul li::before {
+  content: "–"; /* en dash for nested bullets */
+  font-weight: normal;
+  color: var(--note-color);
+}
+li ol li::before {
+  font-weight: normal;
+  color: var(--note-color);
+}
+/* Epigraph container: center and limit width */
+.epigraph {
+  margin: 2rem auto;
+  max-width: 80%; /* narrower than full text width */
+  font-style: italic;
+}
+
+/* Main blockquote style */
+.epigraph blockquote {
+  margin: 0;
+  padding: 1rem 1.5rem;
+  border-left: 4px solid var(--heading);
+  background-color: rgba(0, 0, 0, 0.02); /* subtle background */
+  color: var(--fg);
+  line-height: 1.6;
+}
+
+/* Footer inside blockquote: author/source */
+.epigraph blockquote footer {
+  margin-top: 0.75rem;
+  font-style: normal; /* turn off italic for attribution */
+  font-size: 0.9em;
+  color: var(--note-color);
+  text-align: right;
+}
+
+/* Cite: make source title distinct */
+.epigraph blockquote cite {
+  font-style: italic;
+  font-weight: 500;
+  color: var(--link);
+}
+
+/* Optional: remove automatic quotes from <blockquote> in some browsers */
+.epigraph blockquote::before,
+.epigraph blockquote::after {
+  content: none;
+}
+/* =========================================
+   Dark mode — manual (data-theme) wins
+   ========================================= */
+:root {
+  /* optional: shared tokens for borders/chips */
+  --border: #d7d7d7;
+  --chip-bg: #f0f0f0;
+  --chip-fg: #444;
+  --muted: #666;
+}
+
+:root[data-theme="dark"]{
+  --bg: #0f1115;
+  --fg: #e6e6e6;
+  --link: #8ab4ff;
+  --heading: #9ecbff;
+  --code-bg: #1a1d24;
+
+  --note-color: #c2c7cf;
+  --note-bg: transparent;
+
+  --border: #2a2f3a;
+  --chip-bg: #1f2330;
+  --chip-fg: #cfd3da;
+  --muted: #a9b0bb;
+    --active-toc: #313131;
+
+}
+
+/* Auto scheme if no manual override is set */
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){
+    --bg: #0f1115;
+    --fg: #e6e6e6;
+    --link: #8ab4ff;
+    --heading: #9ecbff;
+    --code-bg: #1a1d24;
+
+    --note-color: #c2c7cf;
+    --note-bg: transparent;
+
+    --border: #2a2f3a;
+    --chip-bg: #1f2330;
+    --chip-fg: #cfd3da;
+    --muted: #a9b0bb;
+  }
+}
+
+/* Tweak components that used fixed light colors */
+.figure figcaption{ color: var(--muted); }
+.post-tag{
+  background-color: var(--chip-bg);
+  color: var(--chip-fg);
+}
+.org-src-container{
+  border: 1px solid var(--border);
+  box-shadow: 3px 3px 3px rgba(0,0,0,.15);
+}
+:not(pre) > code{
+  border: 1px solid var(--border);
+  background-color: var(--code-bg);
+  color: var(--fg);
+}
+.epigraph blockquote{
+  border-left-color: var(--heading);
+  background-color: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
+  color: var(--fg);
+}
+.epigraph blockquote footer{ color: var(--muted); }
+
+/* Mobile sidenote rule uses a light border; make it theme-aware */
+@media (max-width: 1100px){
+  .sidenote, .marginnote{
+    border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  }
+}
+
+/* Theme toggle button positioning + transparent background */
+.theme-toggle {
+  position: fixed;
+  top: 0.75rem;
+  right: 1rem;
+  z-index: 1000;
+  border: 1px solid var(--border, #ccc);
+  background: transparent;
+  color: var(--fg);
+  padding: .35rem .7rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+}
+.theme-toggle:hover {
+  background-color: rgba(0,0,0,0.05); /* subtle hover tint */
+  color: var(--heading);
+  border-color: var(--heading);
+}
+
+/* Mobile: place next to nav links */
+@media (max-width: 600px) {
+  .theme-toggle {
+    position: static;
+    order: 2; /* after nav links in flex layout */
+    margin-left: .5rem;
+    padding: .3rem .6rem;
+    background: transparent;
+  }
+
+  .banner-header {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .banner-header nav {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+}
+/* Margin/sidenote images */
+.sidenote .mn-fig,
+.marginnote .mn-fig{
+  margin: 0;
+}
+.sidenote .mn-img,
+.marginnote .mn-img{
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border: 1px solid var(--border, #d7d7d7);
+  border-radius: 6px;
+  background: var(--bg);
+}
+.sidenote .mn-fig figcaption,
+.marginnote .mn-fig figcaption{
+  margin-top: .35rem;
+  font-size: .85rem;
+  color: var(--muted, #666);
+  line-height: 1.35;
+}
+
+/* Mobile: these already stack under content via your media query; nothing special needed,
+   but we can soften the border a touch to match the mobile sidenote rule */
+@media (max-width: 1100px){
+  .sidenote .mn-img,
+  .marginnote .mn-img{
+    border-color: color-mix(in oklab, var(--fg) 12%, transparent);
+  }
+}
+.sidenote img {
+  margin-top: 0.35rem;
+  display: block;
+}
+/* .sidenote.footnote-sidenote img { */
+/*   margin-top: 0.35rem; */
+/*   display: block; */
+/* } */
+
+
+/* =========================
+   Left sticky Table of Contents (desktop)
+   ========================= */
+#table-of-contents{
+  /* push into the left gutter, mirroring .sidenote on the right */
+  float: left;
+  width: var(--margin);
+  margin-left: calc(-1 * ( (95vw - var(--content)) / 2 ));
+  padding-right: var(--gutter);
+  box-sizing: border-box;
+
+  /* sticky behavior */
+  position: sticky;
+  top: 5.5rem;                  /* clear your banner/header */
+  max-height: calc(100vh - 6rem);
+  overflow: auto;
+
+  /* look & feel */
+  font-size: .95rem;
+  border-right: 1px solid var(--border, #d7d7d7);
+  padding-top: .25rem;
+}
+
+#table-of-contents > h2{
+  margin: 0 0 .5rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  color: var(--muted, #666);
+}
+
+#text-table-of-contents ul{
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+#text-table-of-contents li{
+  margin: .25rem 0;
+}
+#text-table-of-contents a{
+  text-decoration: none;      /* no underline by default */
+}
+#text-table-of-contents a:hover{
+  text-decoration: underline;
+}
+
+/* Indent nested ToC levels a bit */
+#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
+
+/* Headings offset so anchors don’t hide under the sticky header */
+h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
+
+/* =========================
+   Mobile / narrow view
+   ========================= */
+@media (max-width: 1100px){
+  #table-of-contents{
+    float: none;
+    position: static;          /* no sticky on small screens */
+    width: auto;
+    margin: 0 0 1rem;
+    padding: .5rem .75rem;
+    border-right: 0;
+    border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
+    background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
+    border-radius: 4px;
+  }
+}
+#text-table-of-contents a.is-active{
+  // font-weight: 700;
+  text-decoration: underline;
+    background-color: var(--active-toc);
+    //border: 1px solid var(--border, #ccc);
+ 
+}