Glossary slider fix: width:100% + min-width:0 on container so cards overflow instead of expanding it

index.html

@@ -764,24 +764,26 @@ main {
 
 .tag.blue { background: rgba(0,102,204,0.1); color: var(--blue); }
 
-/* ── GLOSSARY (horizontal slider, CSS-grid auto-flow) ── */
+/* ── GLOSSARY (horizontal slider) ── */
 .glossary-slider {
   margin-top: 40px;
-  max-width: 100%;
+  width: 100%;
+  min-width: 0;
 }
 
 .glossary {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 280px;
+  display: flex;
   gap: 12px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 8px;
+  /* CRITICAL: constrain to parent so content overflows instead of expanding container */
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
-@media (min-width: 640px) { .glossary { grid-auto-columns: 320px; } }
 
 .glossary::-webkit-scrollbar { height: 6px; }
 .glossary::-webkit-scrollbar-track { background: transparent; }
@@ -795,8 +797,12 @@ main {
   flex-direction: column;
   scroll-snap-align: start;
   min-height: 200px;
+  flex: 0 0 280px;     /* fixed card width, no shrinking */
+  min-width: 280px;
+}
+@media (min-width: 640px) {
+  .gloss-item { min-height: 220px; flex-basis: 320px; min-width: 320px; }
 }
-@media (min-width: 640px) { .gloss-item { min-height: 220px; } }
 
 /* nav controls: arrows + counter, centered below cards */
 .gloss-nav {