diff --git a/client/src/styles/application.scss b/client/src/styles/application.scss
index 6e696324..36ccb4b9 100644
--- a/client/src/styles/application.scss
+++ b/client/src/styles/application.scss
@@ -3,7 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
 /* npm modules */
 @import "~flexboxgrid";
-@import "~@picocss/pico/css/pico.css";
+@import "~@picocss/pico/scss/pico";
 
 @import "./vars";
 // themeing pico
diff --git a/client/src/styles/vars.scss b/client/src/styles/vars.scss
index 7028eed1..40e7e22d 100644
--- a/client/src/styles/vars.scss
+++ b/client/src/styles/vars.scss
@@ -25,3 +25,12 @@
 
   --footer-height: 5rem;
 }
+
+// normalize.css and Pico both set `line-height` on the root element via
+// zero-specificity `:where()` selectors, so whichever ends up later in the
+// compiled stylesheet wins the cascade — order that isn't guaranteed to match
+// source order once webpack concatenates separate CSS modules. Pin it here
+// with real specificity so it can't lose regardless of module order.
+html {
+  line-height: var(--line-height);
+}