Glossary: replace accordion with always-expanded 2-column card grid

index.html

@@ -767,35 +767,33 @@ main {
 /* ── GLOSSARY ── */
 .glossary {
   margin-top: 40px;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  gap: 12px;
-  gap: 8px;
+  grid-template-columns: 1fr;
 }
+@media (min-width: 768px) { .glossary { grid-template-columns: repeat(2, 1fr); } }
 
 .gloss-item {
   border: 1px solid var(--border);
   border-radius: 12px;
-  overflow: hidden;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
 }
 
 .gloss-trigger {
   width: 100%;
-  padding: 16px 20px;
+  padding: 16px 20px 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   background: transparent;
   border: none;
-  cursor: pointer;
   text-align: left;
-  transition: background 150ms ease;
+  cursor: default;
 }
 
-@media (prefers-reduced-motion: reduce) { .gloss-trigger { transition: none; } }
-
-.gloss-trigger:hover { background: var(--hover-light); }
-
 .gloss-term {
   font-size: 0.9375rem;
   font-weight: 500;
@@ -812,31 +810,10 @@ main {
   flex-shrink: 0;
 }
 
-.gloss-chevron {
+.gloss-chevron { display: none; }
-  width: 16px;
-  height: 16px;
-  color: var(--text-55);
-  flex-shrink: 0;
-  transition: transform 200ms ease;
-}
 
-@media (prefers-reduced-motion: reduce) { .gloss-chevron { transition: none; } }
+.gloss-body { display: block; }
-
+.gloss-inner { overflow: visible; }
-.gloss-item.open .gloss-chevron { transform: rotate(180deg); }
-
-.gloss-body {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) { .gloss-body { transition: none; } }
-
-.gloss-item.open .gloss-body { grid-template-rows: 1fr; }
-
-.gloss-inner {
-  overflow: hidden;
-}
 
 .gloss-text {
   padding: 0 20px 16px;
@@ -849,6 +826,14 @@ main {
   color: var(--text);
   font-weight: 500;
 }
+.gloss-text code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--hover);
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  color: var(--text);
+}
 
 /* ── PROJECTS ── */
 .projects-grid {
@@ -1675,37 +1660,22 @@ const SCHEDULE = [
       scheduleEl.appendChild(div);
     });
 
-    // Render glossary
+    // Render glossary (always-expanded cards, two-column grid)
     const glossaryEl = document.getElementById('glossary-list');
     GLOSSARY.forEach(item => {
       const div = document.createElement('div');
       div.className = 'gloss-item';
       div.innerHTML = `
-        <button class="gloss-trigger" aria-expanded="false">
+        <div class="gloss-trigger">
           <span class="gloss-term">${item.term}</span>
           <span class="gloss-abbr">${item.abbr}</span>
-          <svg class="gloss-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
+        </div>
-            <polyline points="4,6 8,10 12,6"/>
+        <div class="gloss-body">
-          </svg>
-        </button>
-        <div class="gloss-body" role="region">
           <div class="gloss-inner">
             <div class="gloss-text">${item.definition}</div>
           </div>
         </div>
       `;
-      const btn = div.querySelector('.gloss-trigger');
-      btn.addEventListener('click', () => {
-        const isOpen = div.classList.contains('open');
-        document.querySelectorAll('.gloss-item.open').forEach(el => {
-          el.classList.remove('open');
-          el.querySelector('.gloss-trigger').setAttribute('aria-expanded', 'false');
-        });
-        if (!isOpen) {
-          div.classList.add('open');
-          btn.setAttribute('aria-expanded', 'true');
-        }
-      });
       glossaryEl.appendChild(div);
     });