diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 33a1cd41f..02fdf53c0 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -41,7 +41,7 @@ label {
 .broadcast-wrapper {
   display: flex;
   position: relative;
-  z-index: auto;
+  z-index: unset;
 }
 
 .site-config__required {
diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index 8e4a866b2..c050acd0c 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -55,7 +55,6 @@ article {
 
   &.article {
     position: relative;
-    z-index: 5;
   }
 
   .title {
@@ -227,7 +226,6 @@ article {
     line-height: 32px;
     background: var(--card-bg);
     position: relative;
-    z-index: 5;
     padding: 5px 0px;
     overflow-wrap: break-word;
 
diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index 92758fdf6..d0b1110c5 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -17,7 +17,7 @@
       top: 48px;
       left: 0;
       bottom: 0;
-      z-index: 100;
+      z-index: var(--z-drawer);
       overflow-y: auto;
       width: 200%;
       height: calc(100% - 48px);
@@ -68,7 +68,7 @@
     line-height: 1.35em;
     display: none;
     position: relative;
-    z-index: 5;
+    z-index: var(--z-drawer);
     padding: 16px 0;
     box-sizing: border-box;
     color: var(--card-secondary-color);
@@ -307,15 +307,6 @@
       // TODO: what is this .active thingy?
       opacity: 0.66;
     }
-    &.big-article {
-      &.active {
-        opacity: 0.84;
-      }
-      .time-ago-indicator {
-        // TODO: where do we use it?
-        vertical-align: 0.11em;
-      }
-    }
     &.single-article-small-pic {
       vertical-align: top;
       overflow: hidden;
@@ -344,37 +335,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .single-article-video-preview {
-      img {
-        width: 100%;
-      }
-      position: relative;
-      padding-top: 56%;
-      display: block;
-      background: $black no-repeat center center;
-      background-size: cover;
-      &:hover {
-        opacity: 1;
-      }
-      .single-article-video-duration {
-        position: absolute;
-        bottom: 8px;
-        right: 7px;
-        background: rgba(0, 0, 0, 0.8);
-        color: white;
-        border-radius: 3px;
-        padding: 2px 5px 3px;
-        font-size: 0.75em;
-        font-weight: 500;
-        img {
-          width: 12px;
-          height: 12px;
-          margin-right: 4px;
-          vertical-align: -1px;
-        }
-      }
-    }
-
     // Organization Badge
     .org-headline-filler {
       @include themeable(
@@ -543,89 +503,6 @@
       color: rgb(163, 188, 201);
       padding-bottom: 16px;
     }
-    &.big-article {
-      padding: 0px;
-      .picture {
-        padding-top: 42%;
-        border-radius: 3px 3px 0 0;
-        background: no-repeat center center;
-        background-size: cover;
-      }
-      .content-wrapper {
-        padding-bottom: 115px;
-        h3 {
-          font-size: 28px;
-          padding: 16px;
-          margin: 0;
-          word-break: break-word;
-          line-height: 1.28em;
-          @media screen and (min-width: 450px) {
-            font-size: 40px;
-          }
-        }
-        .title-block {
-          display: inline-block;
-        }
-      }
-    }
-  }
-  .featured-profile-button {
-    float: left;
-    z-index: 10;
-    left: 16px;
-    position: absolute;
-    margin-top: -110px;
-  }
-  img.featured-profile-pic {
-    height: 40px;
-    width: 40px;
-    border-radius: 50px;
-    overflow: hidden;
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-  .featured-user-name {
-    font-weight: bold;
-    margin-top: 0;
-    position: absolute;
-    width: 80%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    z-index: 10;
-    left: 72px;
-    bottom: 65px;
-    font-size: 0.8em;
-    a {
-      color: var(--card-color-tertiary);
-    }
-    @media screen and (min-width: 450px) {
-      font-size: 1em;
-    }
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  .featured-tags {
-    font-size: 1em;
-    position: absolute;
-    max-width: 80%;
-    bottom: 95px !important;
-    left: 62px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    z-index: 10;
-  }
-  .article-reading-time {
-    position: absolute;
-    right: 82px;
-    bottom: 12px;
-    font-size: 0.7em;
-    padding: 6px 0px;
-    z-index: 8;
-    color: var(--card-color-tertiary);
   }
   .article-engagement-count {
     font-size: 13px;
@@ -708,28 +585,6 @@
       display: inline-block;
     }
   }
-  .video-player-header {
-    background: $black;
-    margin-top: 0;
-    max-width: 1050px;
-    margin: auto;
-    margin-bottom: 15px;
-    height: 52.5vw;
-    margin-bottom: -5px;
-    overflow-y: hidden;
-    @media screen and (min-width: 750px) {
-      height: 396px;
-    }
-    @media screen and (min-width: 950px) {
-      height: calc(52.5vw - 172px);
-    }
-    @media screen and (min-width: 1120px) {
-      height: calc(52.5vw - 314px);
-    }
-    @media screen and (min-width: 1240px) {
-      height: 339px;
-    }
-  }
 }
 
 // Podcast episode that goes within the <TodaysPodcast /> component.
diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index 82d910a5d..0338d5347 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -201,10 +201,10 @@
   }
 
   &.swiped-in {
-    z-index: 100;
+    z-index: var(--z-drawer);
     display: block;
     position: fixed;
-    top: var(--header-height);
+    top: 0;
     bottom: 0;
     -webkit-overflow-scrolling: touch;
 
@@ -215,7 +215,6 @@
     .side-bar {
       position: relative;
       background: var(--body-bg);
-      z-index: 2;
       padding: 16px;
       align-content: start;
       height: 100%;
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index 02599f6b2..7357162d2 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -199,7 +199,6 @@ a.header-link {
         margin-top: 0px;
       }
       summary {
-        z-index: 15;
         position: relative;
       }
       &[open] {
@@ -240,7 +239,7 @@ a.header-link {
       margin-top: -45px;
       margin-bottom: 45px;
       border: 1px solid transparent;
-      z-index: -10;
+      z-index: var(--z-negative);
       position: relative;
       &:target + .single-comment-node {
         animation-name: fade-out;
@@ -538,55 +537,6 @@ a.header-link {
         right: 10px;
       }
 
-      .dropdown-content {
-        display: none;
-        font-size: var(--fs-base);
-        position: absolute;
-        right: 0;
-        border-radius: 3px;
-        @include generate-box(
-          $level: 2,
-          $bg: var(--card-bg),
-          $border: var(--card-color),
-          $color: var(--card-color)
-        );
-        z-index: 20;
-        width: 160px;
-        &.showing {
-          display: block;
-        }
-      }
-
-      .dropdown-content a {
-        padding: 12px 16px;
-        display: block;
-        white-space: nowrap;
-      }
-
-      .dropdown-content button {
-        display: inline-block;
-        color: black;
-        border: none;
-        background: none;
-        padding: 12px 16px;
-        width: 100%;
-        height: 38px;
-        font-size: 14px;
-        font-weight: bold;
-        text-align: left;
-        &:hover {
-          background-color: #f1f1f1;
-        }
-      }
-
-      .dropdown-content .comment-actions .async-hide {
-        display: none;
-      }
-
-      .dropdown-content a:hover {
-        background-color: #f1f1f1;
-      }
-
       .dropdown-icon {
         position: absolute;
         left: 10px;
diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss
index f28af6bfa..5b2137cd9 100644
--- a/app/assets/stylesheets/components/buttons.scss
+++ b/app/assets/stylesheets/components/buttons.scss
@@ -78,7 +78,7 @@
     border-color: var(--border-hover);
     box-shadow: var(--shadow-hover);
     color: var(--color-hover);
-    z-index: 2;
+    z-index: var(--z-elevate);
   }
 
   &.crayons-btn--inverted {
diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss
index a0e537e0a..6293a3f0a 100644
--- a/app/assets/stylesheets/components/dropdowns.scss
+++ b/app/assets/stylesheets/components/dropdowns.scss
@@ -11,6 +11,7 @@
   display: none; // initially hidden
   padding: var(--su-4);
   min-width: 250px;
+  z-index: var(--z-dropdown);
 
   @media (min-width: $breakpoint-s) {
     max-width: 360px;
diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss
index 5116e0461..ab434d358 100644
--- a/app/assets/stylesheets/components/header.scss
+++ b/app/assets/stylesheets/components/header.scss
@@ -12,7 +12,7 @@
     top: 0px;
     left: 0px;
     right: 0px;
-    z-index: 102; // Must be higher than the z-index of the broadcast-wrapper.
+    z-index: var(--z-sticky);
   }
 
   &__container {
@@ -93,7 +93,6 @@
   height: 100%;
   display: flex;
   align-items: center;
-  z-index: 20;
 
   @media (min-width: $breakpoint-s) {
     perspective: 1000px;
@@ -144,7 +143,7 @@
   transform: translate(-50%, -100px);
   background: var(--body-color);
   color: var(--body-color-inverted);
-  z-index: 9999;
+  z-index: var(--z-popover);
   padding: var(--su-4);
   pointer-events: none;
   opacity: 0;
@@ -230,7 +229,7 @@
   position: fixed;
   top: 0;
   background: var(--accent-brand);
-  z-index: 103;
+  z-index: var(--popover);
   height: var(--su-1);
   width: 0;
   &.showing {
diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss
index 6ba444385..ede310f01 100644
--- a/app/assets/stylesheets/components/modals.scss
+++ b/app/assets/stylesheets/components/modals.scss
@@ -31,7 +31,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 500;
+  z-index: var(--z-modal);
   pointer-events: none;
 
   &__overlay {
@@ -42,7 +42,6 @@
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: 600;
     pointer-events: auto;
   }
 
@@ -52,7 +51,7 @@
     max-width: var(--modal-max-width);
     background: var(--card-bg);
     color: var(--card-color);
-    z-index: 700;
+    z-index: var(--z-elevate);
     max-height: 100%;
     width: 100%;
     height: 100%;
diff --git a/app/assets/stylesheets/components/snackbars.scss b/app/assets/stylesheets/components/snackbars.scss
index ce55b6540..2d3732ad7 100644
--- a/app/assets/stylesheets/components/snackbars.scss
+++ b/app/assets/stylesheets/components/snackbars.scss
@@ -2,7 +2,7 @@
 
 .crayons-snackbar {
   position: fixed;
-  z-index: 9999; // todo: make z-index a variable..
+  z-index: var(--z-popover);
   left: var(--su-2);
   right: var(--su-2);
   bottom: var(--su-2);
diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index 03ba7299e..2261d1b66 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/app/assets/stylesheets/components/stories.scss
@@ -187,8 +187,6 @@
 
     &__actions {
       padding-left: calc(var(--su-6) + var(--su-4));
-      z-index: 6;
-      position: relative;
       margin-top: var(--su-1);
     }
   }
diff --git a/app/assets/stylesheets/components/syntax.scss b/app/assets/stylesheets/components/syntax.scss
index 2a084a6d7..9a5f77305 100644
--- a/app/assets/stylesheets/components/syntax.scss
+++ b/app/assets/stylesheets/components/syntax.scss
@@ -90,7 +90,7 @@ div.highlight {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: var(--z-modal);
   width: 100%;
   height: 100vh;
   background: var(--syntax-background-color);
diff --git a/app/assets/stylesheets/components/tooltips.scss b/app/assets/stylesheets/components/tooltips.scss
index c07c80671..63aecafdb 100644
--- a/app/assets/stylesheets/components/tooltips.scss
+++ b/app/assets/stylesheets/components/tooltips.scss
@@ -19,7 +19,7 @@
     transform: translateY(var(--su-1));
     opacity: 0;
     transition: all var(--transition-props);
-    z-index: 1000;
+    z-index: var(--z-popover);
   }
 
   &:hover {
diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss
index 782d1f9ba..8bd3b5ff2 100644
--- a/app/assets/stylesheets/config/_generator.scss
+++ b/app/assets/stylesheets/config/_generator.scss
@@ -409,22 +409,7 @@
     (),
     true
   ),
-  (
-    'z',
-    'z-index',
-    (
-      'negative': -1,
-      '0': 0,
-      '10': 10,
-      '20': 20,
-      '30': 30,
-      '40': 40,
-      '50': 50,
-      'auto': auto
-    ),
-    (),
-    false
-  ),
+  ('z', 'z-index', $z-indexes, (), false),
   (
     'overflow',
     'overflow',
diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss
index 95bcd774a..ed8c672d4 100644
--- a/app/assets/stylesheets/config/_import.scss
+++ b/app/assets/stylesheets/config/_import.scss
@@ -86,6 +86,18 @@ $negative-spacing-units: (
   '10': calc(var(--su-10) * -1),
 );
 
+////////////////////////////////////////////////////////////////////////////////////
+
+$z-indexes: (
+  'negative': var(--z-negative),
+  'elevate': var(--z-elevate),
+  'sticky': var(--z-sticky),
+  'drawer': var(--z-drawer),
+  'modal': var(--z-modal),
+  'dropdown': var(--z-dropdown),
+  'popover': var(--z-popover),
+);
+
 ////////////////////////////////////////////////////////////////////////////////////
 // Helpers /////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
index 13087d809..2e79bed9d 100644
--- a/app/assets/stylesheets/config/_variables.scss
+++ b/app/assets/stylesheets/config/_variables.scss
@@ -94,4 +94,16 @@
 
   --lh-tight: 1.25; // 20px for 16px font-size
   --lh-base: 1.5; // 24px for 16px font-size
+
+  ////////////////////////////////////////////////////////////////////////////////////
+  // Z-indexes. //////////////////////////////////////////////////////////////////////
+  ////////////////////////////////////////////////////////////////////////////////////
+
+  --z-negative: -1; // to hide something behind everything else
+  --z-elevate: 1; // to elevate something, just a little, in relation to its sibling
+  --z-sticky: 100; // header, mobile actions bar
+  --z-drawer: 200; // sidebar sliding nav drawers
+  --z-modal: 300; // modals ¯\_(ツ)_/¯
+  --z-dropdown: 400; // all kinds of dropdowns
+  --z-popover: 500; // tooltips, snackbars, etc.
 }
diff --git a/app/assets/stylesheets/podcast-episodes-show.scss b/app/assets/stylesheets/podcast-episodes-show.scss
index bf998f6d4..9bc7aea51 100644
--- a/app/assets/stylesheets/podcast-episodes-show.scss
+++ b/app/assets/stylesheets/podcast-episodes-show.scss
@@ -109,7 +109,6 @@
         margin-top: -63px;
       }
       position: absolute;
-      z-index: 13;
       text-align: center;
       left: 0;
       right: 0;
@@ -160,7 +159,6 @@
         box-shadow: 5px 5px 60px rgba(0, 0, 0, 0.3);
         background: $black;
         position: relative;
-        z-index: 12;
         width: 100%;
         height: 100%;
         min-height: 160px;
@@ -176,11 +174,9 @@
         position: absolute;
         width: 120px;
         height: 120px;
-        position: absolute;
         top: 50%;
         left: 50%;
         margin: -60px 0 0 -60px;
-        z-index: 18;
       }
       .pause-butt {
         display: none;
diff --git a/app/assets/stylesheets/preact/article-form.scss b/app/assets/stylesheets/preact/article-form.scss
index 3187bc66f..30b61c555 100644
--- a/app/assets/stylesheets/preact/article-form.scss
+++ b/app/assets/stylesheets/preact/article-form.scss
@@ -1,10 +1,6 @@
 @import '../variables';
 @import '../mixins';
 
-.articleformcontainer {
-  padding: 24px 0 96px;
-}
-
 .article-form-video-preview {
   text-align: center;
   padding-top: 60px;
@@ -34,676 +30,6 @@
   }
 }
 
-.articleform {
-  margin: 0 auto;
-  width: 97%;
-  max-width: 860px;
-  padding: 0px 6px;
-  @include dev-card;
-  position: relative;
-  box-sizing: border-box;
-
-  @media screen and (min-width: 500px) {
-    padding: 0px 12px;
-  }
-  @media screen and (min-width: 600px) {
-    width: calc(97% - 30px);
-  }
-  @media screen and (min-width: 800px) {
-    width: calc(95% - 40px);
-    padding: 0px 20px;
-  }
-  .container {
-    border: 1px solid $light-medium-gray;
-  }
-  .help-guide-title {
-    padding-top: 20px;
-  }
-}
-
-.articleform__form {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1px;
-}
-
-.articleform__errors {
-  background: $red;
-  color: white;
-  font-weight: bold;
-  margin-top: 12px;
-  border-radius: 3px;
-  padding: 15px;
-}
-
-.articleform__orgsettings {
-  padding: 0px;
-  padding-left: 0px;
-  margin: 20px 2px 0px;
-  font-size: 16px;
-  select {
-    margin-left: 7px;
-    vertical-align: middle;
-  }
-  @media screen and (min-width: 600px) {
-    font-size: 18px;
-    padding-left: 10px;
-  }
-}
-
-.articleform__mainimage {
-  text-align: center;
-  width: 60%;
-  border-radius: 8px;
-  background: $light-gray;
-  background: var(--body-bg);
-  margin-top: 10px;
-  cursor: pointer;
-  @media screen and (min-width: 550px) {
-    width: 40%;
-  }
-  @media screen and (min-width: 985px) {
-    width: 30%;
-  }
-  img {
-    width: 100%;
-    height: calc(28vw - 42px);
-    background: #fcfcfc;
-    border-radius: 8px;
-    @media screen and (min-width: 550px) {
-      height: calc(16.8vw - 18px);
-    }
-    @media screen and (min-width: 985px) {
-      height: 111px;
-    }
-    display: block;
-  }
-  &:hover {
-    opacity: 0.8;
-  }
-  &.articleform__mainimagepreview {
-    border-radius: 0px;
-    border: 0px;
-    margin-top: 0px;
-    border-radius: 3px;
-    width: 100%;
-    cursor: default;
-    img {
-      width: 100%;
-      height: calc(42vw - 44px);
-      border-radius: 3px;
-      @media screen and (min-width: 985px) {
-        height: 355px;
-      }
-    }
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-.articleform__title {
-  height: 26px;
-  width: 99%;
-  font-size: 17px;
-  border: 0;
-  padding: 20px 0px 15px;
-  font-weight: 600;
-  color: var(--body-color);
-  resize: none;
-  background: transparent;
-  font-family: var(--ff-monospace);
-  @media screen and (min-width: 600px) {
-    font-size: 29px;
-    height: 50px;
-  }
-  &::placeholder {
-    color: var(--form-placeholder-color);
-  }
-  &.articleform__titlepreview {
-    margin-bottom: 0px;
-    margin-bottom: 1px;
-    @media screen and (min-width: 600px) {
-      height: 43px;
-      margin-bottom: 7px;
-    }
-  }
-}
-
-.articleform__titleTooLong {
-  position: relative;
-  &::before {
-    content: 'Title Too Long';
-    top: 5px;
-    left: 5px;
-    position: absolute;
-    font-size: 0.8em;
-    font-weight: bold;
-  }
-  .articleform__title {
-    background: darken($red, 8%);
-    border-radius: 3px;
-  }
-}
-
-.articleform__detailfields {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-.articleform__tagswrapper {
-  display: inline-block;
-  flex-grow: 1;
-  float: left;
-  padding-right: 15px;
-  @media screen and (min-width: 500px) {
-    padding-right: 0px;
-  }
-}
-
-.articleform__tags {
-  height: 40px;
-  width: 100%;
-  border-radius: 3px;
-  padding: 8px 8px 7px;
-  @media screen and (min-width: 500px) {
-    width: 98%;
-  }
-  @media screen and (min-width: 600px) {
-    height: 19px;
-    border-radius: 100px;
-    padding-left: 17px;
-  }
-  margin-left: -4px;
-  resize: none;
-  border: 0;
-  font-size: 16px;
-  font-family: var(--ff-monospace);
-  font-weight: bold;
-  background: var(--form-bg);
-  color: var(--body-color);
-}
-
-.articleform__tagsoptions {
-  position: absolute;
-  left: -4px;
-  right: 3px;
-  top: 50px;
-  @media screen and (min-width: 600px) {
-    top: 30px;
-    left: 8px;
-    right: 155px;
-  }
-  background: var(--card-bg);
-  border: 1px solid var(--body-color);
-  font-family: var(--ff-monospace);
-  z-index: 20;
-}
-.articleform__tagoptionrow {
-  padding: 10px;
-  font-weight: bold;
-  cursor: pointer;
-  position: relative;
-  &:hover {
-    background: var(--button-primary-bg-hover);
-    color: var(--button-primary-color-hover);
-  }
-}
-
-.articleform__tagsoptionsbottomrow {
-  padding: 12px 10px 10px;
-  font-weight: bold;
-  cursor: pointer;
-  position: relative;
-  font-size: 0.7em;
-  font-style: italic;
-  border-top: 1px solid $medium-gray;
-  color: var(--body-color);
-}
-
-.articleform__tagsoptionrulesbutton {
-  position: absolute;
-  right: 7px;
-  top: 7px;
-  border: 0;
-  border-radius: 3px;
-  background: var(--button-primary-bg);
-  color: var(--button-primary-color);
-  font-size: 0.8em;
-  width: 130px;
-  padding: 6px 0px;
-}
-
-.articleform__tagrules--inactive {
-  display: none;
-}
-
-.articleform__tagrules--active {
-  font-size: 0.76em;
-  max-height: 270px;
-  overflow: auto;
-  border: 1px solid $medium-gray;
-  border-radius: 3px;
-  margin-top: 8px;
-  padding: 0px 8px;
-}
-
-.articleform__tagoptionrow--active {
-  background: var(--button-primary-bg);
-  color: var(--button-primary-color);
-}
-
-.articleform__tagoptionsummary {
-  color: var(--card-color-secondary);
-  font-weight: 400;
-}
-
-.articleform__detailsButton {
-  color: var(--button-secondary-color);
-  background: var(--form-bg);
-  border: 0px;
-  border-radius: 300px;
-  padding: 3px 18px;
-  font-family: $helvetica-condensed;
-  font-size: 14.4px;
-  height: 34px;
-  width: 60px;
-  display: none;
-  @media screen and (min-width: 600px) {
-    display: inline-block;
-  }
-  margin-left: 25px;
-  &:hover {
-    background: var(--button-secondary-bg-hover);
-  }
-  img {
-    width: 18px;
-    height: 18px;
-    vertical-align: -4px;
-    display: inline-block;
-    filter: var(--theme-social-icon-invert, invert(0));
-  }
-  &.articleform__detailsButton--moreconfig {
-    margin-left: 5px;
-    &.articleform__detailsButton--bottom {
-      margin-left: 5px;
-      width: 50px;
-    }
-  }
-  &.articleform__detailsButton--bottom {
-    margin-left: 2px;
-    margin-top: 10px;
-    margin-bottom: 8px;
-    display: inline-block;
-    padding: 2px 15px;
-    border-radius: 3px;
-    width: 110px;
-    @media screen and (min-width: 600px) {
-      margin-left: -5px;
-      display: none;
-    }
-    img {
-      margin-right: 0.3rem;
-    }
-  }
-}
-
-.articleform__form--v1 {
-  .articleform__detailsButton--bottom {
-    @media screen and (min-width: 600px) {
-      display: inline-block;
-    }
-  }
-}
-
-.articleform__description {
-  height: 30px;
-}
-
-.articleform__body {
-  height: calc(80vh - 265px);
-  width: 98%;
-  border: 0;
-  font-size: 15px;
-  resize: none;
-  padding: 20px 6px;
-  font-family: var(--ff-monospace);
-  background: var(--card-bg);
-  color: var(--card-color);
-  overflow-y: auto;
-  @media screen and (min-width: 600px) {
-    font-size: 18px;
-    height: calc(82vh - 200px);
-  }
-  &::placeholder {
-    color: var(--form-placeholder-color);
-  }
-}
-.articleform__form--v1 {
-  .articleform__body {
-    min-height: calc(90vh - 370px);
-    @media screen and (min-width: 600px) {
-      font-size: 18px;
-      height: calc(95vh - 280px);
-    }
-  }
-}
-
-.articleform__buttons {
-  padding-bottom: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  position: fixed;
-  flex-wrap: wrap-reverse;
-  bottom: 0px;
-  left: 0;
-  right: 0;
-  background: var(--card-bg);
-  z-index: 20;
-  &::after {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background: var(--body-color);
-    opacity: 0.1;
-    content: '';
-    height: 1px;
-  }
-
-  * {
-    margin: 4px calc(0.7vw);
-  }
-
-  span {
-    display: -webkit-inline-flex;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    flex-direction: column;
-    max-width: 90%;
-    width: 290px;
-    @media screen and (min-width: 430px) {
-      max-width: 90%;
-      width: auto;
-    }
-    p {
-      display: inline-block;
-      margin-bottom: 2px;
-      font-size: 11px;
-      color: var(--card-color-secondary);
-      font-style: italic;
-      margin-left: -2px;
-    }
-    button {
-      margin-top: 0px;
-      margin-left: -1px;
-    }
-    .hidden {
-      visibility: 'hidden';
-    }
-    .clear-button {
-      // in part from https://css-tricks.com/overriding-default-button-styles/
-      display: inline-block;
-      border: none;
-      margin: 0;
-      text-decoration: none;
-      background: none;
-      border: none;
-      box-shadow: none;
-      color: $medium-gray;
-      color: var(--card-color-secondary);
-      font-family: sans-serif;
-      font-size: 1rem;
-      cursor: pointer;
-      text-align: center;
-      transition: background 250ms ease-in-out, transform 150ms ease;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      text-decoration: underline;
-      margin: 0px;
-      padding: 0px;
-      cursor: pointer;
-      font-size: 12.5px;
-      font-style: italic;
-      display: inline;
-      width: fit-content;
-    }
-    .clear-button:hover {
-      background: none;
-      color: #666;
-    }
-    .clear-button:focus {
-      outline: 1px solid #fff;
-      outline-offset: -4px;
-    }
-
-    .clear-button:active {
-      transform: scale(0.99);
-    }
-  }
-  button,
-  a {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    cursor: pointer;
-    background: var(--button-secondary-bg);
-    font-family: $helvetica-condensed;
-    font-size: 14.5px;
-    border: 0px;
-    border-radius: 113px;
-    padding: 6px 13px;
-    display: inline-block;
-    text-align: center;
-    color: var(--button-secondary-color);
-    white-space: nowrap;
-    @media screen and (min-width: 430px) {
-      margin-top: 23px;
-      margin-bottom: 8px;
-    }
-    &:hover {
-      background: var(--button-secondary-bg-hover);
-    }
-    &:focus {
-      background: var(--button-secondary-bg-hover);
-      outline: 0;
-    }
-    &.active {
-      background: $green;
-      color: $black;
-    }
-    &.previewbutt {
-      min-width: 95px;
-    }
-    &.articleform__buttons--small {
-      width: 45px;
-      border: white;
-    }
-    &.articleform__buttons--publish {
-      background: $bold-blue;
-      color: white;
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-    @media screen and (min-width: 630px) {
-      font-size: 15px;
-    }
-  }
-}
-
-.articleform__overlay {
-  position: absolute;
-  top: 0px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: $dark-gray;
-  color: white;
-  padding: 4%;
-  text-align: center;
-  border-radius: 3px;
-  overflow-y: scroll;
-  clipboard-copy {
-    cursor: pointer;
-    img {
-      display: inline-block;
-      max-width: 24px;
-      margin: -10px 5px;
-      position: relative;
-      filter: invert(100%);
-    }
-    input {
-      cursor: pointer;
-    }
-
-    #image-markdown-copy-link-input {
-      margin-left: 24px;
-    }
-    #image-markdown-copy-link-announcer {
-      display: block;
-      padding-top: 10px;
-
-      &[hidden] {
-        display: none;
-      }
-    }
-  }
-  h2 {
-    color: $green;
-    font-size: 1.9em;
-    font-family: $helvetica-condensed;
-  }
-  p {
-    font-size: 0.8em;
-    padding: 20px 0px;
-    code {
-      background: $black;
-      padding: 1px 4px;
-      border-radius: 3px;
-    }
-  }
-  input[type='file'] {
-    width: 90%;
-    background: $black;
-    padding: 20px;
-    border-radius: 3px;
-    margin: 20px auto;
-    display: block;
-    cursor: pointer;
-  }
-  input[type='text'],
-  textarea {
-    width: calc(80% - 20px);
-    padding: 10px 20px;
-    border-radius: 3px;
-    margin: 5px auto 0px;
-    display: inline-block;
-    border: 0px;
-    font-size: 1em;
-    @media screen and (min-width: 600px) {
-      width: calc(100% - 270px);
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-      margin: 20px auto 0px;
-    }
-  }
-  label {
-    margin-top: 20px;
-    display: inline-block;
-    width: 80%;
-    font-weight: bold;
-    color: white;
-    font-size: 1em;
-    background: $medium-gray;
-    padding: 10px;
-    border-radius: 3px;
-    @media screen and (min-width: 600px) {
-      width: 180px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-  }
-  small {
-    display: block;
-    font-size: 0.8em;
-    color: $light-medium-gray;
-    text-align: left;
-    width: 80%;
-    margin: 7px auto;
-    font-style: oblique;
-    @media screen and (min-width: 600px) {
-      width: calc(100% - 40px);
-    }
-    button {
-      margin-left: 5px;
-      background: $bold-blue;
-    }
-  }
-  .articleform__exitbutton {
-    position: absolute;
-    color: white;
-    font-size: 37px;
-    font-weight: bold;
-    left: 1%;
-    top: 0%;
-    background: transparent;
-    border: 0px;
-    cursor: pointer;
-  }
-  button {
-    background: $red;
-    color: white;
-    border: 0px;
-    padding: 4px 10px;
-    font-size: 14px;
-    border-radius: 3px;
-    font-weight: bold;
-  }
-  .articleform__donebutton {
-    display: block;
-    font-size: 22px;
-    background: $green;
-    color: $black;
-    padding: 10px 40px;
-    margin: 20px auto;
-  }
-  img {
-    display: block;
-    margin: 10px auto;
-    width: 200px;
-    height: 84px;
-    border-radius: 8px;
-  }
-}
-
-.articleform__notice {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 25px 0px;
-  color: white;
-  background: $green;
-  text-align: center;
-  font-size: 2em;
-  font-weight: bold;
-  z-index: 50;
-  &.articleform__notice--draft {
-    background: $yellow;
-    color: $black;
-  }
-}
-
-.articleform_titlepreviewsmall {
-  font-size: calc(1.9vw + 22px) !important;
-  @media screen and (min-width: 1600px) {
-    font-size: 50px !important;
-  }
-}
-
 .articleform__uploaderror {
   color: darken($red, 8%);
   font-size: 0.8em;
diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index 532b36829..d5484a19b 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -15,7 +15,6 @@
 // modal box card
 .onboarding-main {
   border: none;
-  z-index: 1;
 
   @media screen and (min-width: 600px) {
     border-width: 2px;
@@ -310,7 +309,6 @@
       right: 0;
       top: 0;
       transition: all ease-in-out 0.1s;
-      z-index: 2;
     }
 
     &:hover,
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 216399ddb..9b5a2e1db 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -71,7 +71,7 @@ body.ten-x-hacker-theme {
   position: fixed;
   text-align: center;
   width: 100%;
-  z-index: 101; // Must be higher than the z-index of the sticky-nav.
+  z-index: var(--z-sticky);
 
   .static-header & {
     position: relative;
@@ -105,7 +105,7 @@ body.trusted-status-true .trusted-visible-block {
   animation: loading-fadein 1.5s;
   animation-delay: 0.6s;
   font-size: 1.2em;
-  z-index: -1;
+  z-index: var(--z-negative);
 }
 
 @keyframes loading-fadein {
diff --git a/app/assets/stylesheets/shared.scss b/app/assets/stylesheets/shared.scss
index aaa335726..3800a2576 100644
--- a/app/assets/stylesheets/shared.scss
+++ b/app/assets/stylesheets/shared.scss
@@ -5,7 +5,7 @@
   bottom: 0px;
   left: 0px;
   right: 0px;
-  z-index: 15;
+  z-index: var(--z-sticky);
   font-family: var(--ff-sans-serif);
   display: block;
   #progressBar {
@@ -19,7 +19,6 @@
     right: 0;
     text-align: left;
     background: rgb(236, 236, 236);
-    z-index: 19;
     display: none;
     &.playing {
       display: block;
@@ -105,7 +104,7 @@
           top: 0px;
           left: 26px;
           background: rgb(32, 32, 32);
-          z-index: 30;
+          z-index: var(--z-elevate);
           width: 0;
           overflow: hidden;
           transition: width 200ms ease-out 95ms;
@@ -137,7 +136,6 @@
         height: calc(48px + 1vh);
         display: inline-block;
         position: relative;
-        z-index: 23;
         transition: width 0.25s ease-in-out;
       }
       #buffer {
@@ -146,18 +144,17 @@
         display: inline-block;
         position: absolute;
         bottom: 0;
-        z-index: 22;
         transition: width 0.15s ease-in-out;
       }
       #time {
         position: absolute;
         right: calc(50px + 0.1vh + 1.5vw);
         top: calc(16px + 0.1vh);
-        z-index: 23;
         color: rgb(161, 161, 161);
         font-size: calc(14px + 0.2vh);
         background: rgba(236, 236, 236, 0.74);
         padding: 2px;
+        pointer-events: none;
       }
       #closebutt {
         position: absolute;
@@ -172,7 +169,6 @@
         padding-top: calc(8px + 0.2vh);
         color: #535353;
         font-size: 13.5px;
-        z-index: 25;
         width: calc(42px + 0.1vh + 1.5vw);
         text-align: center;
         transition: all 0.3s ease 0s;
diff --git a/app/assets/stylesheets/snackbars.scss b/app/assets/stylesheets/snackbars.scss
index f56b25980..e2aed9b64 100644
--- a/app/assets/stylesheets/snackbars.scss
+++ b/app/assets/stylesheets/snackbars.scss
@@ -14,9 +14,9 @@
   );
   @include themeable(border, container-border, 2px solid $purple);
   padding: 12px 30px;
-  z-index: 20;
-  border-radius: 3px;
-  font-weight: bold;
+  z-index: var(--z-popover);
+  border-radius: var(--radius);
+  font-weight: var(--fw-bold);
   @media screen and (min-width: 430px) {
     right: auto;
     display: inline-block;
diff --git a/app/assets/stylesheets/user-profile-header.scss b/app/assets/stylesheets/user-profile-header.scss
index 97c4dc37a..147313b35 100644
--- a/app/assets/stylesheets/user-profile-header.scss
+++ b/app/assets/stylesheets/user-profile-header.scss
@@ -224,13 +224,13 @@
       margin-left: 5%;
       @media screen and (min-width: 430px) {
         font-size: 1.15em;
-        padding: 15px 15px 15px 0
+        padding: 15px 15px 15px 0;
       }
       @media screen and (min-width: 1100px) {
         position: absolute;
         top: 45%;
         transform: translateY(-45%);
-        padding: 15px 15px 15px 0
+        padding: 15px 15px 15px 0;
       }
       .row {
         padding: calc(5px + 0.2vw) 0px;
@@ -350,160 +350,4 @@
       min-width: 80px;
     }
   }
-
-  // new message modal for open inbox
-  .modal {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 990;
-  }
-
-  .modal .overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 995;
-    background: rgba(0, 0, 0, 0.85);
-  }
-
-  .modal-content {
-    z-index: 999;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-height: 80%;
-    overflow: auto;
-    background: #fff;
-    box-sizing: border-box;
-    padding: 20px;
-    border: 1px solid #d6d6d6;
-    box-shadow: 3px 3px 0px #bababa;
-    border-radius: 3px;
-    max-width: 95%;
-    width: 600px;
-
-    .message-form {
-      display: flex;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      justify-content: space-around;
-      align-items: center;
-      align-content: stretch;
-      @media screen and (min-width: 500px) {
-        flex-direction: row;
-      }
-      textarea {
-        border-radius: 3px;
-        border: 1px solid #d6d6d6;
-        font-size: 14px;
-        margin: 10px;
-        padding: 5px;
-        width: calc(100% - 50px);
-        order: 1;
-        flex-grow: 1;
-        height: 80px;
-        resize: vertical;
-        max-height: 50vh;
-        @media screen and (min-width: 500px) {
-          width: calc(100% - 100px);
-        }
-      }
-
-      .submit-message {
-        margin: 0px auto;
-        border-radius: 3px;
-        background: $dark-purple;
-        font-weight: 600px;
-        font-family: $helvetica-condensed;
-        width: 220px;
-        color: white;
-        font-size: 17px;
-        height: 40px;
-        order: 10;
-        flex-grow: 1;
-        border: 0px;
-        @media screen and (min-width: 500px) {
-          margin: 10px 10px 10px 0;
-          width: 82px;
-          height: 80px;
-        }
-      }
-    }
-    p {
-      color: $dark-gray;
-      font-size: 0.8em;
-      margin: 5px auto;
-      width: 96%;
-    }
-    .close-modal {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      cursor: pointer;
-      font-size: 18px;
-      opacity: 0.5;
-      background: none;
-      border: none;
-      padding: 0 0 0 10px;
-      transition: opacity 0.2s ease;
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-  }
-  .profile-dropdown {
-    position: absolute;
-    top: 0px;
-    right: 6px;
-    button {
-      border: 0px;
-      background: transparent;
-      padding: 8px;
-    }
-    img {
-      height: 22px;
-      width: 22px;
-    }
-    .profile-dropdownmenu {
-      display: none;
-      position: absolute;
-      top: 30px;
-      right: 3px;
-      border: 1px solid $light-medium-gray;
-      border-radius: 3px;
-      background: var(--card-bg);
-      z-index: 20;
-      width: 200px;
-      box-shadow: $shadow;
-      a {
-        font-size: 0.75em;
-        color: var(--body-color);
-        display: block;
-        padding: 9px 10px;
-        font-weight: bold;
-      }
-      &.showing {
-        display: block;
-      }
-      button {
-        font-size: 0.75em;
-        color: var(--body-color);
-        font-weight: bold;
-        width: 100%;
-        text-align: left;
-        padding-left: 10px;
-        display: block;
-        border: none;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        background: transparent;
-      }
-    }
-  }
 }
diff --git a/app/assets/stylesheets/views/article-form.scss b/app/assets/stylesheets/views/article-form.scss
index 8b9892900..80ee63299 100644
--- a/app/assets/stylesheets/views/article-form.scss
+++ b/app/assets/stylesheets/views/article-form.scss
@@ -246,7 +246,7 @@
     left: 0;
     right: 0;
     top: calc(100% + var(--su-4));
-    z-index: 100;
+    z-index: var(--z-dropdown);
     padding: var(--su-1);
 
     @media (min-width: $breakpoint-s) {
diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index ac14dfb04..1e2825537 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -74,7 +74,7 @@
   padding: var(--su-2);
   background: var(--body-bg);
   box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
-  z-index: 100;
+  z-index: var(--z-sticky);
 
   @media (min-width: $breakpoint-m) {
     padding: 0;
diff --git a/app/assets/stylesheets/views/listings.scss b/app/assets/stylesheets/views/listings.scss
index aca9603a0..6a7627340 100644
--- a/app/assets/stylesheets/views/listings.scss
+++ b/app/assets/stylesheets/views/listings.scss
@@ -53,7 +53,7 @@
     left: 0;
     right: 0;
     top: calc(100%);
-    z-index: 100;
+    z-index: var(--z-dropdown);
     padding: var(--su-1);
     left: calc(var(--su-1) * -1);
     right: calc(var(--su-1) * -1);
diff --git a/app/assets/stylesheets/views/mod-actions.scss b/app/assets/stylesheets/views/mod-actions.scss
index e735b5eed..8899a0870 100644
--- a/app/assets/stylesheets/views/mod-actions.scss
+++ b/app/assets/stylesheets/views/mod-actions.scss
@@ -7,7 +7,7 @@
   top: var(--header-height);
   right: 0;
   height: calc(100vh - var(--header-height));
-  z-index: 100;
+  z-index: var(--z-drawer);
   transform: translateX(360px);
   transition: var(--transition-props);
 
@@ -35,7 +35,7 @@
   bottom: var(--su-7);
   margin-bottom: env(safe-area-inset-bottom);
   right: var(--su-7);
-  z-index: 201;
+  z-index: var(--z-elevate);
   cursor: pointer;
   border-radius: 50px;
 
diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss
index d8a4e6681..e13f36466 100644
--- a/app/assets/stylesheets/views/signin.scss
+++ b/app/assets/stylesheets/views/signin.scss
@@ -166,7 +166,6 @@
       position: absolute;
       top: 50%;
       width: 100%;
-      z-index: 0;
       border-radius: var(--radius);
     }
   }
@@ -177,7 +176,7 @@
     color: var(--card-color-secondary);
     background: var(--card-bg);
     padding: 0 var(--su-2);
-    z-index: 1;
+    z-index: var(--z-elevate);
     display: inline-block;
     max-width: 75%;
   }
diff --git a/app/javascript/CommentSubscription/CommentSubscription.jsx b/app/javascript/CommentSubscription/CommentSubscription.jsx
index 56905a7fd..95d38ab14 100644
--- a/app/javascript/CommentSubscription/CommentSubscription.jsx
+++ b/app/javascript/CommentSubscription/CommentSubscription.jsx
@@ -139,7 +139,7 @@ export class CommentSubscription extends Component {
             aria-hidden={!showOptions}
             className={
               showOptions
-                ? `inline-block z-30 right-4 left-4 s:right-0 s:left-auto${
+                ? `inline-block right-4 left-4 s:right-0 s:left-auto${
                     positionType === 'relative' ? ' w-full' : ''
                   }`
                 : null
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 9f3ff9fb0..753ce8956 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -29,7 +29,7 @@
       <button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
         <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
       </button>
-      <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
+      <div class="crayons-dropdown p-1 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
         <clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
           <div class="flex items-center">
             <input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
diff --git a/app/views/comments/_comment_proper.html.erb b/app/views/comments/_comment_proper.html.erb
index e7523512f..51d373929 100644
--- a/app/views/comments/_comment_proper.html.erb
+++ b/app/views/comments/_comment_proper.html.erb
@@ -50,7 +50,7 @@
           <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon", title: "Dropdown menu") %>
         </button>
         <div class="dropdown">
-          <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:right-0 s:left-auto fs-base">
+          <div class="crayons-dropdown p-1 right-1 left-1 s:right-0 s:left-auto fs-base">
             <a href="<%= comment.path %>" class="crayons-link crayons-link--block">Permalink</a>
             <span class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= comment.path %>/settings">
             </span>
diff --git a/app/views/dashboards/_dashboard_article_row.html.erb b/app/views/dashboards/_dashboard_article_row.html.erb
index 4c2ef9973..0e9c7799d 100644
--- a/app/views/dashboards/_dashboard_article_row.html.erb
+++ b/app/views/dashboards/_dashboard_article_row.html.erb
@@ -95,7 +95,7 @@
         <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More...") %>
       </button>
 
-      <div class="crayons-dropdown top-100 right-0 z-10 align-left js-dashboard-row-more-dropdown p-1">
+      <div class="crayons-dropdown top-100 right-0 align-left js-dashboard-row-more-dropdown p-1">
         <% if article.user_subscriptions_count > 0 %>
           <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="crayons-link crayons-link--block w-100"><%= "Subscriptions (#{article.user_subscriptions_count})" %></a>
         <% end %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 1c515664b..2adc35d70 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -31,7 +31,7 @@
                 <%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "Toggle dropdown menu") %>
               </button>
 
-              <div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 z-10 p-1">
+              <div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 p-1">
                 <a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>
                 <% if user_signed_in? %>
                   <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
diff --git a/docs/installation/imgproxy.md b/docs/installation/imgproxy.md
index 1e530382d..30dce7bc7 100644
--- a/docs/installation/imgproxy.md
+++ b/docs/installation/imgproxy.md
@@ -5,7 +5,8 @@ title: Imgproxy
 # Imgproxy
 
 Imgproxy is a standalone server for resizing images. It is optional and you do
-not need it to start Forem locally. We are currently only using it in Forem Cloud.
+not need it to start Forem locally. We are currently only using it in Forem
+Cloud.
 
 ## Installation
 
diff --git a/docs/installation/mac.md b/docs/installation/mac.md
index 211df9e3b..02fef0cba 100644
--- a/docs/installation/mac.md
+++ b/docs/installation/mac.md
@@ -63,7 +63,8 @@ redis-cli ping
 
 Forem requires Elasticsearch 7.x to run. We recommend version 7.5.2.
 
-You have the option of installing Elasticsearch with Homebrew or through an archive. We **recommend** installing from archive on Mac.
+You have the option of installing Elasticsearch with Homebrew or through an
+archive. We **recommend** installing from archive on Mac.
 
 ### Installing Elasticsearch from the archive
 
@@ -107,10 +108,11 @@ To start elasticsearch as a daemonized process:
 
 ### Installing Elasticsearch with Homebrew
 
-To install Elasticsearch with Homebrew we will use the following commands to: 
+To install Elasticsearch with Homebrew we will use the following commands to:
+
 - tap the Elastic Homebrew repository
 - install the latest OSS distribution
-- pin the latest OSS distribution. 
+- pin the latest OSS distribution.
 
 ```shell
 brew tap elastic/tap