diff --git a/style.css b/style.css
index cf830d8..2e40b57 100644
--- a/style.css
+++ b/style.css
@@ -152,8 +152,7 @@ p.title-blurb {
 }
 
 .project-card:has(.project-details li):hover,
-.project-card:has(.project-details li).open {
-  background: var(--bg-hover);
+.project-card:has(.project-details li).open {  background: var(--bg-hover);
   border-left-color: var(--accent);
 }
 
@@ -181,11 +180,24 @@ p.title-blurb {
   opacity: 0;
   transition: max-height 0.28s ease, opacity 0.22s ease;
 }
-.project-card:hover .project-details,
-.project-card.open .project-details {
+/* On desktop: hover only, .open class has no effect */
+.project-card:hover .project-details {
   max-height: 500px;
   opacity: 1;
 }
+.education-card:hover .edu-extras {
+  max-height: 400px;
+  opacity: 1;
+  margin-top: 4px;
+}
+
+/* On touch/mobile: .open class works, hover does not */
+@media (hover: none) {
+  .project-card:hover .project-details { max-height: 0; opacity: 0; }
+  .project-card.open .project-details  { max-height: 500px; opacity: 1; }
+  .education-card:hover .edu-extras    { max-height: 0; opacity: 0; margin-top: 0; }
+  .education-card.open .edu-extras     { max-height: 400px; opacity: 1; margin-top: 4px; }
+}
 .project-details ul { padding-left: 12px; margin-top: 4px; }
 .project-details li {
   font-size: 0.68rem;
@@ -233,12 +245,7 @@ p.title-blurb {
   opacity: 0;
   transition: max-height 0.28s ease, opacity 0.22s ease;
 }
-.education-card:hover .edu-extras,
-.education-card.open .edu-extras {
-  max-height: 400px;
-  opacity: 1;
-  margin-top: 4px;
-}
+/* education hover handled in the desktop/mobile blocks above */
 .edu-extras ul { padding-left: 12px; }
 .edu-extras li {
   font-size: 0.78rem;