Improve large screen layout and TOC positioning (#14)

Author: DusKing1

src/styles/custom.css

@@ -11,14 +11,34 @@
   --sl-font-system: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --sl-font-mono: 'SF Mono', 'Fira Code', Monaco, Consolas, monospace;
 
-  /* Layout */
-  --sl-content-width: 75ch;
-  --sl-sidebar-width: 18rem;
-  
   /* Snap Scroll */
   --header-height: 4rem;
 }
 
+/* ===== Large screen layout adjustments ===== */
+/* Widen content area on large screens */
+@media (min-width: 72rem) {
+  :root {
+    --sl-content-width: 52rem;
+  }
+}
+
+@media (min-width: 100rem) {
+  :root {
+    --sl-content-width: 58rem;
+  }
+}
+
+/* Pin TOC to the right edge of the screen */
+@media (min-width: 72rem) {
+  .right-sidebar {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    /* Relies on Starlight's default --sl-sidebar-width; not redefined here to preserve core layout */
+    width: var(--sl-sidebar-width);
+  }
+}
+
 /* Dark mode accent adjustments */
 :root[data-theme='dark'] {
   --sl-color-accent-low: #4338ca;