diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index e09b76fe38..40da4e2acf 100644
--- a/src/layouts/AboutLayout.astro
+++ b/src/layouts/AboutLayout.astro
@@ -137,7 +137,9 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
 </BaseLayout>
 
 <style lang="scss">
+  @reference "../../styles/global.css";
+
   a {
-    @reference text-type-magenta-dark;
+    @apply text-type-magenta-dark;
   }
 </style>
diff --git a/src/layouts/HomepageLayout.astro b/src/layouts/HomepageLayout.astro
index bed259b0c7..8d89b7de23 100644
--- a/src/layouts/HomepageLayout.astro
+++ b/src/layouts/HomepageLayout.astro
@@ -101,10 +101,11 @@ const sketches = config.data.sketchIds.map(
 </BaseLayout>
 
 <style lang="scss">
-  @use "/styles/variables.scss";
+  @use "../../styles/variables.scss";
+  @reference "../../styles/global.css";
 
   h2 {
-    @reference mb-sm mt-0;
+    @apply mb-sm mt-0;
     @media (min-width: variables.$breakpoint-tablet) {
       font-size: 3.5rem;
     }
diff --git a/styles/markdown.scss b/styles/markdown.scss
index ab37d0de4a..d31606cc72 100644
--- a/styles/markdown.scss
+++ b/styles/markdown.scss
@@ -5,7 +5,7 @@
 .rendered-markdown {
   & > *,
   & > astro-island > * {
-    @reference max-w-screen-md;
+    max-width: variables.$breakpoint-tablet;
   }
 
   & > .full-width,
@@ -15,7 +15,7 @@
 
   .full-width td,
   .full-width th {
-    @reference max-w-screen-md;
+    max-width: variables.$breakpoint-tablet;
   }
 
   a {