Fix marginnote position

Author: nstrayer

www/styles.scss

@@ -325,7 +325,7 @@ img {
   float: right;
   clear: right;
   margin-right: -60%;
-  width: 100%;
+  width: 50%;
   margin-top: 0;
   margin-bottom: 0;
   font-size: 1.1rem;
@@ -334,6 +334,45 @@ img {
   position: relative; 
 }
 
+/* Quarto-specific margin note fixes */
+.quarto-container-page .marginnote {
+  position: absolute;
+  right: -250px;
+  width: 200px;
+  margin-right: 0;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  padding: 0.5rem;
+  background: transparent;
+  float: none;
+}
+
+/* Ensure parent has relative positioning */
+.quarto-container-page p:has(.marginnote) {
+  position: relative;
+}
+
+/* Handle overflow and ensure margin notes don't cause horizontal scroll */
+.quarto-container-page {
+  overflow-x: hidden;
+}
+
+/* Adjust margin notes for narrower screens */
+@media (max-width: 1400px) {
+  .quarto-container-page .marginnote {
+    right: -200px;
+    width: 180px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .quarto-container-page .marginnote {
+    right: -180px;
+    width: 160px;
+    font-size: 0.85rem;
+  }
+}
+
 .table-caption { 
   float:right;
   clear:right;
@@ -540,6 +579,14 @@ label.margin-toggle:not(.sidenote-number) { display: none; }
     margin-left: 0;
     padding: 4px;
   }
+  
+  /* Override Quarto-specific styles on mobile */
+  .quarto-container-page .marginnote {
+    position: relative;
+    right: auto;
+    width: 95%;
+    margin: 1rem 2.5%;
+  }
 }
 
 /* Style activated by the addition of the lightbox selection class */