diff --git a/css/tailwind.css b/css/tailwind.css
index 1bbafb7..1f027d7 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -1155,3 +1155,65 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
     background-color: rgb(142 192 124 / 0.1);
   }
 }
+
+/* ── Sidenotes ───────────────────────────────────────────────────────────── */
+/* Narrow: hide sidenotes; footnote <section> is visible by default          */
+
+.sidenote {
+  display: none;
+}
+
+.sidenote-host {
+  display: inline;
+}
+
+.footnote-ref-num {
+  font-size: 0.75em;
+  vertical-align: super;
+  line-height: 0;
+  font-weight: 600;
+  color: #458588; /* accent-400 */
+  font-variant-numeric: tabular-nums;
+}
+
+/* Wide (xl+): left gutter + floating sidenotes */
+@media (min-width: 1280px) {
+  /* Cancel the overflow:clip BFC so the float can escape the content box
+     into the padding gutter. The !important overrides Tailwind prose resets. */
+  article.has-sidenotes .e-content {
+    overflow-x: visible !important;
+    padding-left: 210px !important;
+  }
+
+  article.has-sidenotes .sidenote {
+    display: block;
+    float: left;
+    clear: left;
+    width: 190px;
+    margin-left: -210px; /* pull into the 210px padding gutter */
+    margin-top: 0.15em;  /* subtle optical alignment with line */
+    font-size: 0.8rem;
+    font-style: italic;
+    line-height: 1.5;
+    color: #7c6f64; /* surface-500 */
+  }
+
+  .dark article.has-sidenotes .sidenote {
+    color: #a89984; /* surface-400 */
+  }
+
+  article.has-sidenotes .sidenote-number {
+    display: block;
+    font-size: 0.7rem;
+    font-family: monospace;
+    font-style: normal;
+    color: #458588; /* accent-400 */
+    margin-bottom: 2px;
+  }
+
+  /* Hide the footnote fallback section on wide screens */
+  article.has-sidenotes .footnotes-sep,
+  article.has-sidenotes section.footnotes {
+    display: none;
+  }
+}