changed css

css/base/base.css

@@ -10,19 +10,6 @@
  * Generic base elements.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 *,
 *::before,
 *::after {
@@ -42,31 +29,31 @@ body {
   color: var(--color-text-neutral-medium);
   background-color: var(--color--gray-100);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
-  background-position: top left /* LTR */
+  background-position: top left; /* LTR */
 }
 
 body.is-fixed {
-    position: fixed;
-    overflow: hidden;
-    width: 100%;
-  }
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+}
 
 [dir="rtl"] body {
   background-position: top right;
 }
 
 a {
-  color: var(--color-text-primary-medium)
+  color: var(--color-text-primary-medium);
 }
 
 a:hover {
-    color: var(--color--primary-50);
-  }
+  color: var(--color--primary-50);
+}
 
 a:focus {
-    outline: solid 2px currentColor;
-    outline-offset: 2px;
-  }
+  outline: solid 2px currentColor;
+  outline-offset: 2px;
+}
 
 button {
   font-family: inherit;
@@ -87,43 +74,40 @@ audio {
 h1 {
   letter-spacing: -0.01em;
   font-size: 1.75rem;
-  line-height: var(--sp2)
+  line-height: var(--sp2);
 }
 
 @media (min-width: 43.75rem) {
-
-h1 {
+  h1 {
     font-size: 3.75rem;
-    line-height: var(--sp4)
-}
+    line-height: var(--sp4);
   }
+}
 
 h2 {
   letter-spacing: -0.01em;
   font-size: 1.5rem;
-  line-height: var(--sp2)
+  line-height: var(--sp2);
 }
 
 @media (min-width: 43.75rem) {
-
-h2 {
+  h2 {
     font-size: 2.25rem;
-    line-height: var(--sp3)
-}
+    line-height: var(--sp3);
   }
+}
 
 h3 {
   font-size: 1.25rem;
-  line-height: var(--sp1-5)
+  line-height: var(--sp1-5);
 }
 
 @media (min-width: 43.75rem) {
-
-h3 {
+  h3 {
     font-size: 1.5rem;
-    line-height: var(--sp2)
-}
+    line-height: var(--sp2);
   }
+}
 
 h4 {
   font-size: 1.125rem;
@@ -146,53 +130,29 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: var(--sp);
-  margin-bottom: var(--sp);
+  margin-block: var(--sp);
   color: var(--color-text-neutral-loud);
   font-family: var(--font-sans);
-  font-weight: bold
+  font-weight: bold;
 }
 
 @media (min-width: 43.75rem) {
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    margin-top: var(--sp2);
-    margin-bottom: var(--sp2)
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block: var(--sp2);
   }
-
-[dir="ltr"] ul {
-  margin-left: 1.5em;
-}
-
-[dir="rtl"] ul {
-  margin-right: 1.5em;
-}
-
-[dir="ltr"] ul {
-  margin-right: 0;
-}
-
-[dir="rtl"] ul {
-  margin-left: 0;
-}
-
-[dir="ltr"] ul {
-  padding-left: 0;
-}
-
-[dir="rtl"] ul {
-  padding-right: 0;
 }
 
 ul {
-  margin-top: 0.25em;
-  margin-bottom: 0.25em;
+  margin-block-start: 0.25em;
+  margin-block-end: 0.25em;
+  margin-inline-start: 1.5em;
+  margin-inline-end: 0;
+  padding-inline-start: 0;
   list-style-type: disc;
   list-style-image: none;
 }

css/base/fonts.css

@@ -10,77 +10,6 @@
  * Base Fonts.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Bold.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Italic.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Regular.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Italic.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-/*
- *old stuff
- */
-
 @font-face {
   font-family: metropolis;
   src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
@@ -109,10 +38,7 @@
 
 @font-face {
   font-family: Lora;
-  src:
-    local("Lora Regular"),
-    local("Lora-Regular"),
-    url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
+  src: local("Lora Regular"), local("Lora-Regular"), url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -122,10 +48,7 @@
 
 @font-face {
   font-family: Lora;
-  src:
-    local("Lora Italic"),
-    local("Lora-Italic"),
-    url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
+  src: local("Lora Italic"), local("Lora-Italic"), url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
@@ -135,10 +58,7 @@
 
 @font-face {
   font-family: Lora;
-  src:
-    local("Lora Bold"),
-    local("Lora-Bold"),
-    url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2");
+  src: local("Lora Bold"), local("Lora-Bold"), url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;

css/base/fonts.pcss.css

@@ -5,64 +5,6 @@
 
 @import "media-queries.pcss.css";
 
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Bold.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Italic.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Libre Bodoni';
-    src: url('../../fonts/LibreBodoni-Regular.woff2') format('woff2'),
-        url('../../fonts/LibreBodoni-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Source Sans 3';
-    src: url('../../fonts/SourceSans3-Italic.woff2') format('woff2'),
-        url('../../fonts/SourceSans3-Italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-    font-display: swap;
-}
-
-/*
- *old stuff
- */
-
 @font-face {
   font-family: metropolis;
   src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2");

css/base/variables.css

@@ -9,102 +9,157 @@
   Global CSS custom properties.
 */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 /* stylelint-disable */
 
 :root {
-  /*--font-serif: "Libre Bodoni", "georgia", serif;*/
+  --font-sans: "metropolis", sans-serif;
+  --font-serif: "Lora", "georgia", serif;
 
   /* Typography helpers. */
-
-  /* Layout helpers. */ /* Width to which the background color extends to. */ /* Inline padding on .container elements. */
-}
-
-@media (min-width: 75rem) {
-
-:root {
-    --container-padding: var(--sp2);
-}
-  }
-
-:root {
+  --font-size-base: 1rem;
+  --font-size-l: 1.125rem;
+  --font-size-s: 0.875rem;
+  --font-size-xs: 0.8125rem;
+  --font-size-xxs: 0.75rem;
+  --line-height-base: 1.6875rem;
+  --line-height-s: 1.125rem;
+
+  /* Layout helpers. */
+  --max-width: 84.375rem;
+  --max-bg-color: 98.125rem; /* Width to which the background color extends to. */
+  --sp: 1.125rem;
+  --content-left: 5.625rem;
+  --site-header-height-wide: var(--sp10);
+  --container-padding: var(--sp);
 
   /**
    * Grid helpers.
    *
    * These variables help authors apply widths and negative margins to break items out of
    * the grid, while still conforming to the larger grid system.
-   */ /* Unit must be specified here for calc() to work properly.*/ /* Count of grid-gaps. */ /* Width of the entire grid. */ /* Width of a grid column. */
-}
-
-@media (min-width: 43.75rem) {
-
-:root {
-    --grid-col-count: 14;
-    --grid-gap: var(--sp2);
-}
-  }
-
-@media (min-width: 62.5rem) {
-
-:root {
-    --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
-}
-  }
-
-@media (min-width: 75rem) {
-
-:root {
-    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
-}
-  }
-
-@media (min-width: 90rem) {
-
-:root {
-    --grid-full-width: calc(var(--max-width) - var(--sp4));
-}
-  }
-
-:root {
+   */
+  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
+  --grid-col-count: 6;
+  --grid-gap: var(--sp);
+  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
 
   /* Layout helpers */
+  --sp0-25: calc(0.25 * var(--sp));
+  --sp0-5: calc(0.5 * var(--sp));
+  --sp0-75: calc(0.75 * var(--sp));
+  --sp1: calc(1 * var(--sp));
+  --sp1-5: calc(1.5 * var(--sp));
+  --sp2: calc(2 * var(--sp));
+  --sp2-5: calc(2.5 * var(--sp));
+  --sp3: calc(3 * var(--sp));
+  --sp4: calc(4 * var(--sp));
+  --sp5: calc(5 * var(--sp));
+  --sp6: calc(6 * var(--sp));
+  --sp7: calc(7 * var(--sp));
+  --sp8: calc(8 * var(--sp));
+  --sp9: calc(9 * var(--sp));
+  --sp10: calc(10 * var(--sp));
+  --sp11: calc(11 * var(--sp));
+  --sp12: calc(12 * var(--sp));
 
   /**
    * Gray colors.
    *
    * Color number roughly corresponds to its luminosity.
-   */ /* Black */ /* Black 2 */ /* Gray Dark */ /* Gray medium */ /* Black 4 */ /* Gray medium 2 */ /* Gray light */ /* Gray light 1 */ /* Gray light 2 */
+   */
+  --color--gray-hue: 201;
+  --color--gray-saturation: 15%;
+  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
+  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
+  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
+  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
+  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
+  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
+  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
+  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
+  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
+  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%);
 
   /**
    * Primary colors.
    *
    * Color number roughly corresponds to its luminosity.
-   */ /* Blue dark */ /* Blue medium */ /* Blue bright */ /* Blue very bright */
+   */
+  --color--primary-hue: 202;
+  --color--primary-saturation: 79%;
+  --color--primary-lightness: 50;
+  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
+  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
+  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
+  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness))))));
 
   /**
    * Variables specific to text.
    */
+  --color-text-neutral-soft: var(--color--gray-45);
+  --color-text-neutral-medium: var(--color--gray-20);
+  --color-text-neutral-loud: var(--color--gray-5);
+
+  --color-text-primary-medium: var(--color--primary-40);
+  --color-text-primary-loud: var(--color--primary-30);
 
   /**
    * Named Colors.
-   */ /* Black */ /* White */ /* Red */ /* Gold */ /* Green */
+   */
+  --color--black: #000; /* Black */
+  --color--white: #fff; /* White */
+  --color--red: #e33f1e; /* Red */
+  --color--gold: #fdca40; /* Gold */
+  --color--green: #3fa21c;
 
   /* Header */
+  --header-height-wide-when-fixed: calc(6 * var(--sp));
 
   /* Width of slide out navigation */
+  --mobile-nav-width: 31.25rem;
 
   /* Border radius */
+  --border-radius: 0.1875rem; /* Inline padding on .container elements. */
+}
+
+@media (min-width: 75rem) {
+  :root {
+    --container-padding: var(--sp2);
+  }
+}
+
+/* Green */
+
+/* Width of a grid column. */
+
+@media (min-width: 43.75rem) {
+  :root {
+    --grid-col-count: 14;
+    --grid-gap: var(--sp2);
+  }
+}
+
+/* Blue very bright */
+
+@media (min-width: 62.5rem) {
+  :root {
+    --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+  }
+}
+
+/* Gray light 2 */
+
+@media (min-width: 75rem) {
+  :root {
+    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+  }
+}
+
+@media (min-width: 90rem) {
+  :root {
+    --grid-full-width: calc(var(--max-width) - var(--sp4));
+  }
 }

css/base/variables.pcss.css

@@ -9,7 +9,6 @@
 :root {
   --font-sans: "metropolis", sans-serif;
   --font-serif: "Lora", "georgia", serif;
-  /*--font-serif: "Libre Bodoni", "georgia", serif;*/
 
   /* Typography helpers. */
   --font-size-base: 16px;

css/components/action-links.css

@@ -8,51 +8,21 @@
  * @file
  * Styles for action links.
 */
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-/* Navigation related breakpoints */
-/* Grid related breakpoints */
-/* Grid shifts from 6 to 14 columns. */
-/* Width of the entire grid maxes out. */
-[dir="ltr"] .action-links {
-  margin-left: 0
-}
-[dir="rtl"] .action-links {
-  margin-right: 0
-}
-[dir="ltr"] .action-links {
-  margin-right: 0
-}
-[dir="rtl"] .action-links {
-  margin-left: 0
-}
-[dir="ltr"] .action-links {
-  padding-left: 0
-}
-[dir="rtl"] .action-links {
-  padding-right: 0
-}
-[dir="ltr"] .action-links {
-  padding-right: 0
-}
-[dir="rtl"] .action-links {
-  padding-left: 0
-}
 .action-links {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  list-style: none
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
 }
 .action-links li {
-    display: inline-block
-  }
+  display: inline-block;
+}
 .action-links li a {
-      color: var(--color-text-primary-medium);
-    }
+  color: var(--color-text-primary-medium);
+}
 .action-links-item {
   display: inline-block;
 }

css/components/ajax-progress.module.css

@@ -10,19 +10,6 @@
  * Visual styles for ajax-progress throbber.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .ajax-progress {
   display: inline-block;
 }
@@ -31,29 +18,15 @@
  * Throbber.
  */
 
-[dir="ltr"] .ajax-progress-throbber {
-  margin-left: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber {
-  margin-right: var(--sp0-5);
-}
-
-[dir="ltr"] .ajax-progress-throbber {
-  margin-right: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber {
-  margin-left: var(--sp0-5);
-}
-
 .ajax-progress-throbber {
   position: relative;
   display: inline-flex;
   align-content: center;
   height: 1.125rem;
-  margin-top: -0.1875rem;
-  margin-bottom: 0;
+  margin-block-start: -0.1875rem;
+  margin-block-end: 0;
+  margin-inline-start: var(--sp0-5);
+  margin-inline-end: var(--sp0-5);
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1.125rem;
@@ -66,16 +39,9 @@
   border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50);
 }
 
-[dir="ltr"] .ajax-progress-throbber .message {
-  padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .ajax-progress-throbber .message {
-  padding-right: var(--sp0-5);
-}
-
 .ajax-progress-throbber .message {
   display: inline-block;
+  padding-inline-start: var(--sp0-5);
   font-size: var(--font-size-s);
   font-weight: 400;
 }
@@ -84,44 +50,30 @@
  * Full screen throbber.
  */
 
-[dir="ltr"] .ajax-progress-fullscreen {
-  left: 50%;
-}
-
-[dir="rtl"] .ajax-progress-fullscreen {
-  right: 50%;
-}
-
 .ajax-progress-fullscreen {
   position: fixed;
   z-index: 1000;
-  top: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   width: 3.5rem;
   height: 3.5rem;
   margin: -1.75rem;
   border: 1px solid var(--color--gray-70);
   border-radius: 3.5rem;
   background-color: var(--color--white);
-  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1) /* LTR */
-}
-
-[dir="ltr"] .ajax-progress-fullscreen::before {
-    left: 50%;
-}
-
-[dir="rtl"] .ajax-progress-fullscreen::before {
-    right: 50%;
+  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
 }
 
 .ajax-progress-fullscreen::before {
-    position: absolute;
-    top: 50%;
-    width: 1.75rem;
-    height: 1.75rem;
-    margin: -0.875rem;
-    content: "";
-    border-width: 3px;
-  }
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.875rem;
+  content: "";
+  border-width: 3px;
+}
 
 [dir="rtl"] .ajax-progress-fullscreen {
   box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1);
@@ -144,12 +96,8 @@
  * have a large margin set.
  */
 
-html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber {
-  margin-left: 0;
-}
-
-html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber {
-  margin-right: 0;
+html.js .button:not(.js-hide) + .ajax-progress-throbber {
+  margin-inline-start: 0;
 }
 
 @keyframes olives-throbber {

css/components/autocomplete-loading.module.css

@@ -10,42 +10,22 @@
  * Visual styles for autocomplete input field.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] [type].form-autocomplete {
-  padding-right: var(--sp3);
-}
-
-[dir="rtl"] [type].form-autocomplete {
-  padding-left: var(--sp3);
-}
-
 [type].form-autocomplete {
+  padding-inline-end: var(--sp3);
   background-color: var(--color--white);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right var(--sp1) center  /* LTR */
+  background-position: right var(--sp1) center; /* LTR */
 }
 
-[type].form-autocomplete:disabled {
-    background-color: var(--color--gray-100);
-  }
+.form-autocomplete[type]:disabled {
+  background-color: var(--color--gray-100);
+}
 
-[type].form-autocomplete.ui-autocomplete-loading {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e");
-  }
+.form-autocomplete.ui-autocomplete-loading[type] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e");
+}
 
-[dir="rtl"] [type].form-autocomplete {
-    background-position: left var(--sp1) center;
-  }
+[dir="rtl"] .form-autocomplete[type] {
+  background-position: left var(--sp1) center;
+}

css/components/block.css

@@ -10,22 +10,8 @@
  * Block styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .block__title {
-  margin-top: 0;
-  margin-bottom: var(--sp);
+  margin-block: 0 var(--sp);
   letter-spacing: 0.02em;
   color: var(--color-text-neutral-soft);
   font-size: var(--font-size-s);

css/components/book.css

@@ -10,101 +10,46 @@
  * Book module styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .book-pager {
-  margin-left: 0;
-}
-
-[dir="rtl"] .book-pager {
-  margin-right: 0;
-}
-
-[dir="ltr"] .book-pager {
-  margin-right: 0;
-}
-
-[dir="rtl"] .book-pager {
-  margin-left: 0;
-}
-
-[dir="ltr"] .book-pager {
-  padding-left: 0;
-}
-
-[dir="rtl"] .book-pager {
-  padding-right: 0;
-}
-
-[dir="ltr"] .book-pager {
-  padding-right: 0;
-}
-
-[dir="rtl"] .book-pager {
-  padding-left: 0;
-}
-
 .book-pager {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 0 var(--sp);
-  padding-top: 0;
-  padding-bottom: var(--sp);
+  margin-block-start: 0 var(--sp);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0 var(--sp);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
-  border-bottom: solid 1px var(--color--primary-40);
+  border-block-end: solid 1px var(--color--primary-40);
 }
 
 .book-pager__item {
-  display: inline-block
+  display: inline-block;
 }
 
 @media (min-width: 31.25rem) {
-
-.book-pager__item {
-    flex: 0 0 33.33%
-}
+  .book-pager__item {
+    flex: 0 0 33.33%;
   }
-
-@media (min-width: 31.25rem) {
-
-.book-pager__item--center {
-    text-align: center
 }
-  }
 
 @media (min-width: 31.25rem) {
-
-[dir="ltr"] .book-pager__item--next {
-    margin-left: auto;
-  }
-
-[dir="rtl"] .book-pager__item--next {
-    margin-right: auto;
-  }
-
-[dir="ltr"] .book-pager__item--next {
-    text-align: right;
+  .book-pager__item--center {
+    text-align: center;
   }
+}
 
-[dir="rtl"] .book-pager__item--next {
-    text-align: left;
-  }
+@media (min-width: 31.25rem) {
+  .book-pager__item--next {
+    margin-inline-start: auto;
+    text-align: end;
   }
+}
 
 .book-pager__link {
   display: inline-flex;
   align-items: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-primary-medium);
   font-family: var(--font-serif);
@@ -112,124 +57,50 @@
   font-weight: 600;
 }
 
-[dir="ltr"] .book-pager__link--previous::before {
-    margin-right: 0.25em;
-}
-
-[dir="rtl"] .book-pager__link--previous::before {
-    margin-left: 0.25em;
-}
-
-[dir="ltr"] .book-pager__link--previous::before {
-    border-left: solid 3px currentColor;
-}
-
-[dir="rtl"] .book-pager__link--previous::before {
-    border-right: solid 3px currentColor;
-}
-
 .book-pager__link--previous::before {
-    display: block;
-    width: var(--sp0-5);
-    height: var(--sp0-5);
-    content: "";
-    transform: rotate(-45deg);
-    border-top: solid 3px currentColor;
-  }
-
-[dir="ltr"] .book-pager__link--next::after {
-    margin-left: 0.25em;
-}
-
-[dir="rtl"] .book-pager__link--next::after {
-    margin-right: 0.25em;
-}
-
-[dir="ltr"] .book-pager__link--next::after {
-    border-left: solid 3px currentColor;
-}
-
-[dir="rtl"] .book-pager__link--next::after {
-    border-right: solid 3px currentColor;
+  display: block;
+  width: var(--sp0-5);
+  height: var(--sp0-5);
+  margin-inline-end: 0.25em;
+  content: "";
+  transform: rotate(-45deg);
+  border-block-start: solid 0.1875rem currentColor;
+  border-inline-start: solid 0.1875rem currentColor;
 }
 
 .book-pager__link--next::after {
-    display: block;
-    width: var(--sp0-5);
-    height: var(--sp0-5);
-    content: "";
-    transform: rotate(135deg);
-    border-top: solid 3px currentColor;
-  }
-
-[dir="ltr"] .book-navigation__menu {
-  margin-left: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
-  margin-right: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
-  margin-right: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
-  margin-left: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
-  padding-left: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
-  padding-right: 0;
-}
-
-[dir="ltr"] .book-navigation__menu {
-  padding-right: 0;
-}
-
-[dir="rtl"] .book-navigation__menu {
-  padding-left: 0;
+  display: block;
+  width: var(--sp0-5);
+  height: var(--sp0-5);
+  margin-inline-start: 0.25em;
+  content: "";
+  transform: rotate(135deg);
+  border-block-start: solid 0.1875rem currentColor;
+  border-inline-start: solid 0.1875rem currentColor;
 }
 
 .book-navigation__menu {
-  margin-top: var(--sp2);
-  margin-bottom: var(--sp2);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: var(--sp2);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
-[dir="ltr"] .book-navigation__item {
-  padding-left: 0;
-}
-
-[dir="rtl"] .book-navigation__item {
-  padding-right: 0;
-}
-
-[dir="ltr"] .book-navigation__item {
-  padding-right: 0;
-}
-
-[dir="rtl"] .book-navigation__item {
-  padding-left: 0;
-}
-
 .book-navigation__item {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
 [dir="rtl"] .book-pager__link--previous::before {
-    transform: rotate(45deg);
-  }
+  transform: rotate(45deg);
+}
 
 [dir="rtl"] .book-pager__link--next::after {
-    transform: rotate(-135deg);
-  }
+  transform: rotate(-135deg);
+}

css/components/breadcrumb.css

@@ -10,243 +10,120 @@
  * Breadcrumb region.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .breadcrumb {
   position: relative;
   font-size: 0.875rem;
   font-weight: bold;
-  line-height: var(--sp1)
+  line-height: var(--sp1);
 
   /* Shadow on the right side of breadcrumbs for narrow screens. */
 }
 
-[dir="ltr"] .breadcrumb::after {
-    right: calc(var(--sp1)*-1)
-}
-
-[dir="rtl"] .breadcrumb::after {
-    left: calc(var(--sp1)*-1)
-}
-
 .breadcrumb::after {
-    position: absolute;
-    top: 0;
-    width: var(--sp3);
-    height: var(--sp2);
-    content: "";
-    background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%) /* LTR */
-  }
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: calc(var(--sp1) * -1);
+  width: var(--sp3);
+  height: var(--sp2);
+  content: "";
+  background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
+}
 
 @media (min-width: 62.5rem) {
-
-.breadcrumb::after {
-      content: none
+  .breadcrumb::after {
+    content: none;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.breadcrumb {
-    position: static
-}
+  .breadcrumb {
+    position: static;
   }
+}
 
 [dir="rtl"] .breadcrumb::after {
   background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
-[dir="ltr"] .breadcrumb__content {
-  margin-left: calc(var(--sp0-5)*-1)
-}
-
-[dir="rtl"] .breadcrumb__content {
-  margin-right: calc(var(--sp0-5)*-1)
-}
-
-[dir="ltr"] .breadcrumb__content {
-  margin-right: calc(var(--sp1)*-1)
-}
-
-[dir="rtl"] .breadcrumb__content {
-  margin-left: calc(var(--sp1)*-1)
-}
-
-[dir="ltr"] .breadcrumb__content {
-  padding-left: var(--sp0-5)
-}
-
-[dir="rtl"] .breadcrumb__content {
-  padding-right: var(--sp0-5)
-}
-
 .breadcrumb__content {
   overflow: auto;
-  margin-top: calc(var(--sp0-5)*-1);
-  margin-bottom: calc(var(--sp0-5)*-1);
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
-  -webkit-overflow-scrolling: touch
+  margin-block-start: calc(var(--sp0-5) * -1);
+  margin-block-end: calc(var(--sp0-5) * -1);
+  margin-inline-start: calc(var(--sp0-5) * -1);
+  margin-inline-end: calc(var(--sp1) * -1);
+  padding-block-start: var(--sp0-5);
+  padding-block-end: var(--sp0-5);
+  padding-inline-start: var(--sp0-5);
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .breadcrumb__content {
-    margin-right: 0
-  }
-
-[dir="rtl"] .breadcrumb__content {
-    margin-left: 0
-  }
+  .breadcrumb__content {
+    margin-inline-end: 0;
   }
-
-[dir="ltr"] .breadcrumb__list {
-  margin-left: calc(var(--sp1)*-1)
-}
-
-[dir="rtl"] .breadcrumb__list {
-  margin-right: calc(var(--sp1)*-1)
-}
-
-[dir="ltr"] .breadcrumb__list {
-  margin-right: calc(var(--sp1)*-1)
-}
-
-[dir="rtl"] .breadcrumb__list {
-  margin-left: calc(var(--sp1)*-1)
-}
-
-[dir="ltr"] .breadcrumb__list {
-  padding-left: var(--sp1)
-}
-
-[dir="rtl"] .breadcrumb__list {
-  padding-right: var(--sp1)
-}
-
-[dir="ltr"] .breadcrumb__list {
-  padding-right: 0
-}
-
-[dir="rtl"] .breadcrumb__list {
-  padding-left: 0
 }
 
 .breadcrumb__list {
   overflow-x: auto;
   width: max-content;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: var(--sp1);
+  margin-block: 0;
+  margin-inline-start: calc(var(--sp1) * -1);
+  margin-inline-end: calc(var(--sp1) * -1);
+  padding-block: 0 var(--sp1);
+  padding-inline-start: var(--sp1);
+  padding-inline-end: 0;
   list-style: none;
-  white-space: nowrap
+  white-space: nowrap;
 }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .breadcrumb__list {
-    margin-left: 0
-  }
-
-[dir="rtl"] .breadcrumb__list {
-    margin-right: 0
-  }
-
-[dir="ltr"] .breadcrumb__list {
-    margin-right: 0
-  }
-
-[dir="rtl"] .breadcrumb__list {
-    margin-left: 0
-  }
-
-[dir="ltr"] .breadcrumb__list {
-    padding-left: 0
-  }
-
-[dir="rtl"] .breadcrumb__list {
-    padding-right: 0
-  }
-
-.breadcrumb__list {
+  .breadcrumb__list {
     overflow: visible;
-    padding-bottom: 0;
-    white-space: normal
-}
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0;
+    white-space: normal;
   }
-
-.breadcrumb__item {
-  display: inline-block
 }
 
-[dir="ltr"] .breadcrumb__item:nth-child(n+2)::before {
-    margin-left: 1rem;
-    margin-right: 1.25rem
-}
-
-[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before {
-    margin-right: 1rem;
-    margin-left: 1.25rem
-}
-
-[dir="ltr"] .breadcrumb__item:nth-child(n+2)::before {
-    border-right: 2px solid var(--color--gray-45)
-}
-
-[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before {
-    border-left: 2px solid var(--color--gray-45)
+.breadcrumb__item {
+  display: inline-block;
 }
 
-.breadcrumb__item:nth-child(n+2)::before {
-    display: inline-block;
-    width: 0.5rem;
-    height: 0.5rem;
-    content: "";
-    transform: rotate(45deg); /* LTR */
-    border-top: 2px solid var(--color--gray-45);
-  }
-
-[dir="ltr"] .breadcrumb__item:last-child {
-    margin-right: var(--sp3)
+.breadcrumb__item:nth-child(n + 2)::before {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-inline: 1rem 1.25rem;
+  content: "";
+  transform: rotate(45deg); /* LTR */
+  border-block-start: 2px solid var(--color--gray-45);
+  border-inline-end: 2px solid var(--color--gray-45);
 }
 
-[dir="rtl"] .breadcrumb__item:last-child {
-    margin-left: var(--sp3)
+.breadcrumb__item:last-child {
+  margin-inline-end: var(--sp3);
 }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .breadcrumb__item:last-child {
-      margin-right: 0
+  .breadcrumb__item:last-child {
+    margin-inline-end: 0;
   }
+}
 
-[dir="rtl"] .breadcrumb__item:last-child {
-      margin-left: 0
-  }
-    }
-
-[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before {
+[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
   transform: rotate(-45deg);
 }
 
 .breadcrumb__link {
+  -webkit-text-decoration: none;
   text-decoration: none;
-  color: var(--color-text-primary-medium)
+  color: var(--color-text-primary-medium);
 }
 
 .breadcrumb__link:hover,
-  .breadcrumb__link:focus {
-    text-decoration: underline;
-  }
+.breadcrumb__link:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}

css/components/button.css

@@ -10,46 +10,17 @@
  * Buttons.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .button {
-  margin-left: 0
-}
-
-[dir="rtl"] .button {
-  margin-right: 0
-}
-
-[dir="ltr"] .button {
-  margin-right: var(--sp1)
-}
-
-[dir="rtl"] .button {
-  margin-left: var(--sp1)
-}
-
 .button {
   display: inline-block;
   height: var(--sp3);
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
-  padding-top: calc(var(--sp3)/2 - var(--line-height-s)/2);
-  padding-bottom: calc(var(--sp3)/2 - var(--line-height-s)/2);
-  padding-left: var(--sp1-5);
-  padding-right: var(--sp1-5);
+  margin-block: var(--sp1);
+  margin-inline-start: 0;
+  margin-inline-end: var(--sp1);
+  padding-block: calc((var(--sp3) - var(--line-height-s)) / 2);
+  padding-inline: var(--sp1-5);
   cursor: pointer;
   text-align: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-primary-medium);
   border: solid 2px currentColor;
@@ -60,87 +31,65 @@
   font-weight: 700;
   -webkit-appearance: none;
   appearance: none;
-  -webkit-font-smoothing: antialiased
+  -webkit-font-smoothing: antialiased;
 }
 
 .button:hover,
-  .button:focus {
-    text-decoration: none;
-    color: var(--color-text-primary-loud);
-    border: solid 2px currentColor;
-    background: none;
-    font-weight: 700;
-  }
+.button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-primary-loud);
+  border: solid 2px currentColor;
+  background: none;
+  font-weight: 700;
+}
 
 .button:focus {
-    outline: 2px solid var(--color--primary-60);
-    outline-offset: 2px;
-  }
+  outline: 2px solid var(--color--primary-60);
+  outline-offset: 2px;
+}
 
 .button:active {
-    color: var(--color-text-primary-medium);
-    border-color: currentColor;
-  }
+  color: var(--color-text-primary-medium);
+  border-color: currentColor;
+}
 
 .button:disabled,
-  .button.is-disabled {
-    cursor: default;
-    color: var(--color--gray-90);
-    border-color: var(--color--gray-90);
-  }
-
-.button {
+.button.is-disabled {
+  cursor: default;
+  color: var(--color--gray-90);
+  border-color: var(--color--gray-90);
+}
 
-  /*
+/*
     IE11 doesn't work properly on button elements so we only do
     inline-flex on modern browsers.
   */
-}
 
 @supports (display: inline-flex) {
-
-.button {
+  .button {
     display: inline-flex;
     align-items: center;
 
     /* Top padding accounts for font not being vertically centered within line-height. */
-    padding-top: 1px;
-    padding-bottom: 0;
-    padding-left: var(--sp1-5);
-    padding-right: var(--sp1-5);
-    line-height: var(--line-height-s)
-}
+    padding-block: 1px 0;
+    padding-inline: var(--sp1-5);
+    line-height: var(--line-height-s);
   }
-
-/* No margin if is part of a menu. */
-
-[dir="ltr"] .menu .button {
-  margin-left: 0
-}
-
-[dir="rtl"] .menu .button {
-  margin-right: 0
-}
-
-[dir="ltr"] .menu .button {
-  margin-right: 0
 }
 
-[dir="rtl"] .menu .button {
-  margin-left: 0
-}
+/* No margin if is part of a menu. */
 
 .menu .button {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 .button--small {
   height: var(--sp2-5);
-  padding-top: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
-  padding-bottom: calc(var(--sp2-5)/2 - var(--line-height-s)/2);
-  padding-left: var(--sp);
-  padding-right: var(--sp);
+  padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
+  padding-inline: var(--sp);
   font-size: var(--font-size-base);
   line-height: normal;
 }
@@ -148,56 +97,42 @@
 .button--primary {
   color: var(--color--white);
   border-color: var(--color--primary-40);
-  background-color: var(--color--primary-40)
+  background-color: var(--color--primary-40);
 }
 
 .button--primary:hover,
-  .button--primary:focus {
-    color: var(--color--white);
-    border-color: var(--color--primary-30);
-    background-color: var(--color--primary-30);
-  }
+.button--primary:focus {
+  color: var(--color--white);
+  border-color: var(--color--primary-30);
+  background-color: var(--color--primary-30);
+}
 
 .button--primary:active {
-    color: var(--color--white);
-    background-color: var(--color--primary-40);
-  }
+  color: var(--color--white);
+  background-color: var(--color--primary-40);
+}
 
 .button--primary:disabled,
-  .button--primary.is-disabled {
-    color: var(--color--white);
-    background-color: var(--color--gray-90);
-  }
+.button--primary.is-disabled {
+  color: var(--color--white);
+  background-color: var(--color--gray-90);
+}
 
 .button--icon-back {
   display: inline-flex;
-  align-items: center
-}
-
-[dir="ltr"] .button--icon-back::before {
-    margin-right: 0.5em
-}
-
-[dir="rtl"] .button--icon-back::before {
-    margin-left: 0.5em
-}
-
-[dir="ltr"] .button--icon-back::before {
-    border-left: solid 2px currentColor
-}
-
-[dir="rtl"] .button--icon-back::before {
-    border-right: solid 2px currentColor
+  align-items: center;
 }
 
 .button--icon-back::before {
-    display: block;
-    width: 0.5em;
-    height: 0.5em;
-    content: "";
-    transform: rotate(45deg); /* LTR */
-    border-bottom: solid 2px currentColor;
-  }
+  display: block;
+  width: 0.5em;
+  height: 0.5em;
+  margin-inline-end: 0.5em;
+  content: "";
+  transform: rotate(45deg); /* LTR */
+  border-block-end: solid 2px currentColor;
+  border-inline-start: solid 2px currentColor;
+}
 
 [dir="rtl"] .button--icon-back::before {
   transform: rotate(-45deg);

css/components/color-picker.css

@@ -11,6 +11,6 @@
  */
 
 [data-drupal-selector="olives-color-picker"] input[type="color"] {
-    margin-left: 0.8125rem;
-    vertical-align: bottom;
-  }
+  margin-left: 0.8125rem;
+  vertical-align: bottom;
+}

css/components/comments.css

@@ -10,286 +10,185 @@
  * Comment section and individual comments.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
+:root {
+  --comment-indentation: var(--sp2);
+  --comment-indentation--md: var(--sp4);
+}
 
 .comment--level-1 {
-  border-top: 2px solid var(--color--gray-95)
+  border-block-start: 2px solid var(--color--gray-95);
 }
 
 .comment--level-1 ~ .comment--level-1 {
-    margin-top: var(--sp2);
-  }
+  margin-block-start: var(--sp2);
+}
 
 .comments__title {
   display: flex;
   align-items: center;
-  margin-top: 0;
-}
-
-[dir="ltr"] .comments__count {
-  margin-left: var(--sp)
-}
-
-[dir="rtl"] .comments__count {
-  margin-right: var(--sp)
-}
-
-[dir="ltr"] .comments__count {
-  margin-right: var(--sp)
-}
-
-[dir="rtl"] .comments__count {
-  margin-left: var(--sp)
-}
-
-[dir="ltr"] .comments__count {
-  padding-left: 0.3125rem
-}
-
-[dir="rtl"] .comments__count {
-  padding-right: 0.3125rem
-}
-
-[dir="ltr"] .comments__count {
-  padding-right: 0.3125rem
-}
-
-[dir="rtl"] .comments__count {
-  padding-left: 0.3125rem
+  margin-block-start: 0;
 }
 
 .comments__count {
   position: relative;
   display: inline-block;
   min-width: 2.125rem;
-  margin-top: 0;
-  margin-bottom: var(--sp0-5);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block-start: 0;
+  margin-block-end: var(--sp0-5);
+  margin-inline-start: var(--sp);
+  margin-inline-end: var(--sp);
+  padding-block: 0;
+  padding-inline-start: 0.3125rem;
+  padding-inline-end: 0.3125rem;
   text-align: center;
   color: var(--color--white);
   border-radius: 2px;
   background-color: var(--color--primary-40);
   font-size: 0.6875rem;
-  line-height: 1.3125rem
-}
-
-[dir="ltr"] .comments__count::after {
-    left: 0.5rem
-}
-
-[dir="rtl"] .comments__count::after {
-    right: 0.5rem
-}
-
-[dir="ltr"] .comments__count::after {
-    border-right: 8px solid transparent
-}
-
-[dir="rtl"] .comments__count::after {
-    border-left: 8px solid transparent
+  line-height: 1.3125rem;
 }
 
 .comments__count::after {
-    position: absolute;
-    bottom: -0.4375rem;
-    width: 0;
-    height: 0;
-    content: "";
-    border-top: 7px solid var(--color--primary-40);
-  }
-
-.comment-form {
-  padding-bottom: var(--sp2);
-}
-
-[dir="ltr"] .add-comment__form {
-  padding-left: 0
-}
-
-[dir="rtl"] .add-comment__form {
-  padding-right: 0
+  position: absolute;
+  inset-block-end: -0.4375rem;
+  inset-inline-start: 0.5rem;
+  width: 0;
+  height: 0;
+  content: "";
+  border-block-start: 0.4375rem solid var(--color--primary-40);
+  border-inline-end: 0.5rem solid transparent;
 }
 
-[dir="ltr"] .comment {
-  padding-left: var(--sp3)
+.comment-form {
+  padding-block-end: var(--sp2);
 }
 
-[dir="rtl"] .comment {
-  padding-right: var(--sp3)
+.add-comment__form {
+  padding-inline-start: 0;
 }
 
 .comment {
   position: relative;
-  padding-top: var(--sp2)
+  padding-block-start: var(--sp2);
+  padding-inline-start: var(--sp3);
 }
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .comment {
-    padding-left: 0
-  }
-
-[dir="rtl"] .comment {
-    padding-right: 0
-  }
+  .comment {
+    padding-inline-start: 0;
   }
+}
 
 .comment__text-content {
-  font-size: 1rem
+  font-size: 1rem;
 }
 
 .comment__text-content blockquote {
-    font-size: 1.3125rem;
-    line-height: var(--sp2);
-  }
-
-.comment__text-content {
-
-  /* Override for .field:not(:last-child) */
+  font-size: 1.3125rem;
+  line-height: var(--sp2);
 }
 
+/* Override for .field:not(:last-child) */
+
 .comment__text-content:not(:last-child) {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}
 
 .comment__links {
-  margin-top: var(--sp);
-  margin-bottom: 0;
+  margin-block: var(--sp) 0;
 }
 
 .comment__links-link {
+  -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 0.875rem;
   font-weight: bold;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 .comment__links-link:hover {
-    text-decoration: underline;
-  }
-
-.add-comment__picture-wrapper {
-  top: calc(var(--line-height-base) + var(--sp0-5));
-}
-
-[dir="ltr"] .add-comment__picture,[dir="ltr"] 
-.comment__picture {
-  left: 0
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
-[dir="rtl"] .add-comment__picture,[dir="rtl"] 
-.comment__picture {
-  right: 0
+.add-comment__picture-wrapper {
+  inset-block-start: calc(var(--line-height-base) + var(--sp0-5));
 }
 
 .add-comment__picture,
 .comment__picture {
   position: absolute;
+  inset-inline-start: 0;
   overflow: hidden;
   width: var(--sp2);
   height: var(--sp2);
   border-radius: 50%;
-  background-color: var(--color--gray-95)
+  background-color: var(--color--gray-95);
 }
 
-.add-comment__picture *:not(img), .comment__picture *:not(img) {
-    display: inherit;
-    width: inherit;
-    height: inherit;
-  }
+.add-comment__picture *:not(img),
+.comment__picture *:not(img) {
+  display: inherit;
+  width: inherit;
+  height: inherit;
+}
 
-.add-comment__picture img, .comment__picture img {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: cover;
-    object-fit: cover
+.add-comment__picture img,
+.comment__picture img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 
-    /* @TODO: create image-style for profile's avatar to have image squared by default. */
-  }
+  /* @TODO: create image-style for profile's avatar to have image squared by default. */
+}
 
 @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-
-.add-comment__picture img, .comment__picture img {
-      position: absolute;
-      /* stylelint-disable csstools/use-logical */
-      top: 50%;
-      left: 50%;
-      /* stylelint-enable csstools/use-logical */
-      width: 100%;
-      height: auto;
-      transform: translate(-50%, -50%)
+  .add-comment__picture img,
+  .comment__picture img {
+    position: absolute;
+    /* stylelint-disable csstools/use-logical */
+    top: 50%;
+    left: 50%;
+    /* stylelint-enable csstools/use-logical */
+    width: 100%;
+    height: auto;
+    transform: translate(-50%, -50%);
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .add-comment__picture,[dir="ltr"] 
-.comment__picture {
-    left: calc(var(--sp5)*-1)
-  }
-
-[dir="rtl"] .add-comment__picture,[dir="rtl"] 
-.comment__picture {
-    right: calc(var(--sp5)*-1)
-  }
-
-.add-comment__picture,
-.comment__picture {
+  .add-comment__picture,
+  .comment__picture {
+    inset-inline-start: calc(-1 * var(--sp5));
     width: var(--sp3);
-    height: var(--sp3)
-}
+    height: var(--sp3);
   }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .indented .comment__picture {
-    left: calc(var(--sp4)*-1)
-  }
-
-[dir="rtl"] .indented .comment__picture {
-    right: calc(var(--sp4)*-1)
-  }
-
-.indented .comment__picture {
+  .indented .comment__picture {
+    inset-inline-start: calc(-1 * var(--sp4));
     width: var(--sp2);
-    height: var(--sp2)
-}
+    height: var(--sp2);
   }
-
-.comment__meta * {
-    display: inline;
-  }
-
-[dir="ltr"] .comment__author {
-  margin-right: var(--sp)
 }
 
-[dir="rtl"] .comment__author {
-  margin-left: var(--sp)
+.comment__meta * {
+  display: inline;
 }
 
 .comment__author {
+  margin-inline-end: var(--sp);
   font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 700;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 .comment__author a {
-    text-decoration: none;
-  }
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
 
 .comment__time {
   margin: 0;
@@ -299,97 +198,40 @@
   line-height: var(--sp);
 }
 
-[dir="ltr"] .indented {
-  margin-left: var(--sp2)
-}
-
-[dir="rtl"] .indented {
-  margin-right: var(--sp2)
-}
-
-[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-    left: calc(var(--sp2)*-1 - var(--sp))
-}
-
-[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-    right: calc(var(--sp2)*-1 - var(--sp))
-}
-
-[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-    border-left: solid 1px var(--color--gray-95)
+.indented {
+  margin-inline-start: var(--comment-indentation);
 }
 
-[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-    border-right: solid 1px var(--color--gray-95)
+.indented > .comment:not(:last-of-type, .has-children)::before {
+  position: absolute;
+  inset-block-start: var(--sp2);
+  inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
+  width: 0;
+  height: 100%;
+  content: "";
+  border-inline-start: solid 1px var(--color--gray-95);
 }
 
-.indented > .comment:not(:last-of-type):not(.has-children)::before {
-    position: absolute;
-    top: var(--sp2); /* Comment's padding-top */
-    width: 0;
-    height: 100%;
-    content: ""
-  }
-
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-      left: calc(var(--sp4)*-1 + var(--sp))
+  .indented > .comment:not(:last-of-type, .has-children)::before {
+    inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
   }
-
-[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before {
-      right: calc(var(--sp4)*-1 + var(--sp))
-  }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .indented {
-    margin-left: var(--sp4)
+  .indented {
+    margin-inline-start: var(--comment-indentation--md);
   }
-
-[dir="rtl"] .indented {
-    margin-right: var(--sp4)
-  }
-  }
-
-[dir="ltr"] .show-hide-btn {
-  margin-left: var(--sp3)
-}
-
-[dir="rtl"] .show-hide-btn {
-  margin-right: var(--sp3)
-}
-
-[dir="ltr"] .show-hide-btn {
-  margin-right: 0
-}
-
-[dir="rtl"] .show-hide-btn {
-  margin-left: 0
-}
-
-[dir="ltr"] .show-hide-btn {
-  padding-left: 0
-}
-
-[dir="rtl"] .show-hide-btn {
-  padding-right: 0
-}
-
-[dir="ltr"] .show-hide-btn {
-  padding-right: 0
-}
-
-[dir="rtl"] .show-hide-btn {
-  padding-left: 0
 }
 
 .show-hide-btn {
-  margin-top: var(--sp2);
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block-start: var(--sp2);
+  margin-block-end: 0;
+  margin-inline-start: var(--sp3);
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   cursor: pointer;
   color: var(--color-text-neutral-medium);
   border: 0;
@@ -398,24 +240,19 @@
   font-weight: 600;
   line-height: 1.125rem;
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
 .show-hide-btn[aria-expanded="true"]::after {
-    content: "\0020 -";
-  }
+  content: "\0020 -";
+}
 
 .show-hide-btn[aria-expanded="false"]::after {
-    content: "\0020 +";
-  }
+  content: "\0020 +";
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .show-hide-btn {
-    margin-left: 0
-  }
-
-[dir="rtl"] .show-hide-btn {
-    margin-right: 0
-  }
+  .show-hide-btn {
+    margin-inline-start: 0;
   }
+}

css/components/container-inline.module.css

@@ -16,12 +16,10 @@
 }
 
 .form-items-inline {
-  margin-top: -0.125em;
-  margin-bottom: -0.125em; /* 2px */
+  margin-block: -0.125em; /* 2px */
 }
 
 .form-items-inline > .form-item {
   display: inline-block;
-  margin-top: 0.125em;
-  margin-bottom: 0.125em;
+  margin-block: 0.125em;
 }

css/components/content-moderation.css

@@ -10,146 +10,85 @@
  * Styles for content moderation toolbar.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .entity-moderation-form {
-  padding-left: var(--sp)
-}
-
-[dir="rtl"] .entity-moderation-form {
-  padding-right: var(--sp)
-}
-
-[dir="ltr"] .entity-moderation-form {
-  padding-right: var(--sp)
-}
-
-[dir="rtl"] .entity-moderation-form {
-  padding-left: var(--sp)
-}
-
 .entity-moderation-form {
   flex-direction: column;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
   border: 1px solid var(--color--gray-95);
-  background-color: var(--color--gray-100)
+  background-color: var(--color--gray-100);
 }
 
 .entity-moderation-form select,
-  .entity-moderation-form input:not([type="submit"]) {
-    background-color: var(--color--white);
-  }
+.entity-moderation-form input:not([type="submit"]) {
+  background-color: var(--color--white);
+}
 
 @media (min-width: 43.75rem) {
-
-.entity-moderation-form {
-    flex-direction: row
-}
+  .entity-moderation-form {
+    flex-direction: row;
   }
-
-[dir="ltr"] .entity-moderation-form__item {
-  margin-right: var(--sp)
-}
-
-[dir="rtl"] .entity-moderation-form__item {
-  margin-left: var(--sp)
 }
 
 .entity-moderation-form__item {
-  flex-basis: 0
-}
-
-[dir="ltr"] .entity-moderation-form__item:last-child {
-    margin-right: 0
-}
-
-[dir="rtl"] .entity-moderation-form__item:last-child {
-    margin-left: 0
+  flex-basis: 0;
+  margin-inline-end: var(--sp);
 }
 
 .entity-moderation-form__item:last-child {
-    align-self: flex-start
-  }
+  align-self: flex-start;
+  margin-inline-end: 0;
+}
 
 @media (min-width: 43.75rem) {
-
-.entity-moderation-form__item:last-child {
-      align-self: flex-end
+  .entity-moderation-form__item:last-child {
+    align-self: flex-end;
   }
-    }
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-    margin-left: 0
 }
 
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-    margin-right: 0
+.layout--content-narrow .entity-moderation-form,
+.layout--pass--content-narrow > * .entity-moderation-form,
+.layout--content-medium .entity-moderation-form,
+.layout--pass--content-medium > * .entity-moderation-form {
+  width: 100%;
+  margin-inline-start: 0;
 }
 
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-    width: 100%
-  }
-
 @supports (width: max-content) {
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: max-content
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: max-content;
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
-  }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
-  }
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
-      margin-top: var(--sp2);
-      margin-bottom: var(--sp4)
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+    margin-block: var(--sp2) var(--sp4);
+    margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
   }
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
-  }
-    }
+}
 
 @media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: 0
-  }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: 0
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: 0;
   }
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11)
-  }
-    }
+}

css/components/details.css

@@ -10,57 +10,32 @@
  * Collapsible details.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
+:root {
+  --details-border-width: 1px;
+  --details-summary-transition: background-color 0.12s ease-in-out;
+}
 
 .olives-details {
   display: block;
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
+  margin-block: var(--sp1);
   color: inherit;
-  border: 1px solid var(--color--gray-95);
+  border: var(--details-border-width) solid var(--color--gray-95);
   border-radius: var(--border-radius);
   box-shadow: 0 1px 4px var(--color--gray-90);
 }
 
 /* Details summary styles */
 
-[dir="ltr"] .olives-details__summary {
-  padding-left: var(--sp2);
-}
-
-[dir="rtl"] .olives-details__summary {
-  padding-right: var(--sp2);
-}
-
-[dir="ltr"] .olives-details__summary {
-  padding-right: var(--sp1);
-}
-
-[dir="rtl"] .olives-details__summary {
-  padding-left: var(--sp1);
-}
-
 .olives-details__summary {
   position: relative;
-  padding-top: var(--sp1);
-  padding-bottom: var(--sp1);
+  padding-block: var(--sp1);
+  padding-inline-start: var(--sp2);
+  padding-inline-end: var(--sp1);
   list-style: none;
   cursor: pointer;
-  transition: background-color 0.12s ease-in-out;
+  transition: var(--details-summary-transition);
   word-wrap: break-word;
   -webkit-hyphens: auto;
-  -ms-hyphens: auto;
   hyphens: auto;
   color: inherit;
   background-color: var(--color--gray-100);
@@ -71,17 +46,10 @@
 
 /* Arrow icon */
 
-[dir="ltr"] .olives-details__summary::before {
-  left: var(--sp0-75);
-}
-
-[dir="rtl"] .olives-details__summary::before {
-  right: var(--sp0-75);
-}
-
 .olives-details__summary::before {
   position: absolute;
-  top: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sp0-75);
   display: block;
   width: 0.625rem;
   height: 0.625rem;
@@ -99,10 +67,7 @@
 
 .olives-details__summary::after {
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: calc(var(--details-border-width) * -1);
   content: "";
   pointer-events: none;
   opacity: 0;
@@ -139,44 +104,29 @@
 /* Rotate arrow icon of the details summary, when details expanded */
 
 .olives-details[open] > .olives-details__summary::before {
-  margin-top: -2px;
+  margin-block-start: -2px;
   transform: translateY(-50%) rotate(135deg);
 }
 
 /* Details content wrapper */
 
 .olives-details__wrapper {
-  margin: var(--sp1)
+  margin: var(--sp1);
 }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .olives-details__wrapper {
-    margin-left: var(--sp2);
-  }
-
-[dir="rtl"] .olives-details__wrapper {
-    margin-right: var(--sp2);
+  .olives-details__wrapper {
+    margin-block-start: var(--sp1-5);
+    margin-block-end: var(--sp1-5);
+    margin-inline-start: var(--sp2);
+    margin-inline-end: var(--sp2);
   }
-
-[dir="ltr"] .olives-details__wrapper {
-    margin-right: var(--sp2);
-  }
-
-[dir="rtl"] .olives-details__wrapper {
-    margin-left: var(--sp2);
-  }
-
-.olives-details__wrapper {
-    margin-top: var(--sp1-5);
-    margin-bottom: var(--sp1-5)
 }
-  }
 
 /* Description */
 
 .olives-details__description {
-  margin-bottom: var(--sp1);
+  margin-block-end: var(--sp1);
   color: var(--color-text-neutral-medium);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-s);

css/components/dropbutton.css

@@ -18,79 +18,46 @@
   --dropbutton--border-radius: var(--border-radius);
   --dropbutton--font-size: var(--font-size-s);
   --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
-  --dropbutton--text-hover-color: var(--color-text-primary-medium) /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
 }
 
 .dropbutton-wrapper.open {
-    position: relative;
-    z-index: 100; /* Ensure this appears above all other dropbuttons. */
-    filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
-  }
-
-[dir="ltr"] .dropbutton-widget {
-  padding-right: var(--dropbutton--height);
-}
-
-[dir="rtl"] .dropbutton-widget {
-  padding-left: var(--dropbutton--height);
+  position: relative;
+  z-index: 100; /* Ensure this appears above all other dropbuttons. */
+  filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
 }
 
 .dropbutton-widget {
   position: relative;
   width: max-content;
   height: var(--dropbutton--height);
-  border-radius: var(--dropbutton--border-radius)
-}
-
-[dir="ltr"] .dropbutton-single .dropbutton-widget {
-    padding-right: 0;
+  padding-inline-end: var(--dropbutton--height);
+  border-radius: var(--dropbutton--border-radius);
 }
 
-[dir="rtl"] .dropbutton-single .dropbutton-widget {
-    padding-left: 0;
+.dropbutton-single .dropbutton-widget {
+  padding-inline-end: 0;
 }
 
 .dropbutton-wrapper.open .dropbutton-widget {
-    border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0
-}
-
-[dir="ltr"] .dropbutton {
-  margin-left: 0;
-}
-
-[dir="rtl"] .dropbutton {
-  margin-right: 0;
-}
-
-[dir="ltr"] .dropbutton {
-  padding-left: 0;
-}
-
-[dir="rtl"] .dropbutton {
-  padding-right: 0;
+  border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
 }
 
 .dropbutton {
   height: var(--dropbutton--height);
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
   list-style: none;
   font-size: var(--dropbutton--font-size);
 }
 
 /* This is the button that expands/collapses the secondary options. */
 
-[dir="ltr"] .dropbutton-toggle button {
-  right: 0;
-}
-
-[dir="rtl"] .dropbutton-toggle button {
-  left: 0;
-}
-
 .dropbutton-toggle button {
   position: absolute;
   top: 0;
+  inset-inline-end: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -100,89 +67,80 @@
   cursor: pointer;
   border-color: transparent;
   border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
-  background: var(--dropbutton--active-bg-color)
+  background: var(--dropbutton--active-bg-color);
 }
 
 .dropbutton-toggle button:focus {
-    outline: solid 2px var(--dropbutton--outline-color);
-    outline-offset: -2px;
-  }
+  outline: solid 2px var(--dropbutton--outline-color);
+  outline-offset: -2px;
+}
 
 .dropbutton-toggle button::before {
-    display: block;
-    width: var(--sp0-5);
-    height: var(--sp0-5);
-    content: "";
-    transform: translateY(-25%) rotate(45deg);
-    border-right: solid 2px var(--dropbutton--outline-color);
-    border-bottom: solid 2px var(--dropbutton--outline-color)
-  }
-
-.dropbutton-wrapper.open .dropbutton-toggle button::before {
-      transform: translateY(25%) rotate(225deg)
-  }
+  display: block;
+  width: var(--sp0-5);
+  height: var(--sp0-5);
+  content: "";
+  transform: translateY(-25%) rotate(45deg);
+  border-right: solid 2px var(--dropbutton--outline-color);
+  border-bottom: solid 2px var(--dropbutton--outline-color);
+}
+
+.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) {
+  transform: translateY(25%) rotate(225deg);
+}
 
 [dir="rtl"] .dropbutton-toggle button {
-    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
-  }
+  border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+}
 
 /* This is the first <li> element in the list of actions. */
 
-[dir="ltr"] .dropbutton-action:first-child {
-    margin-right: 2px;
+.dropbutton-action:first-child {
+  margin-inline-end: 2px;
+  border: solid 1px transparent;
+  border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
+  background: var(--dropbutton--active-bg-color);
 }
 
 [dir="rtl"] .dropbutton-action:first-child {
-    margin-left: 2px;
+  border: solid 1px transparent;
+  border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
 }
 
-.dropbutton-action:first-child {
-    border: solid 1px transparent;
-    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
-    background: var(--dropbutton--active-bg-color)
-  }
-
-[dir="rtl"] .dropbutton-action:first-child {
-      border: solid 1px transparent;
-      border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
-    }
-
 .dropbutton-action a {
-    display: flex;
-    align-items: center;
-    margin-bottom: -2px; /* Account for borders. */
-    padding: 0 0.5625rem;
-    text-decoration: none;
-    color: var(--dropbutton--text-color);
-    font-weight: 600
-  }
+  display: flex;
+  align-items: center;
+  margin-bottom: -2px; /* Account for borders. */
+  padding: 0 0.5625rem;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--dropbutton--text-color);
+  font-weight: 600;
+}
 
 .dropbutton-action a:hover {
-      color: inherit;
-    }
+  color: inherit;
+}
 
 .dropbutton-action a:focus {
-      outline: solid 2px var(--dropbutton--outline-color);
-      outline-offset: -1px; /* Overlap parent container by 1px. */
-    }
-
-.dropbutton-action {
-
-  /* Special rules if there is only one action. */
+  outline: solid 2px var(--dropbutton--outline-color);
+  outline-offset: -1px; /* Overlap parent container by 1px. */
 }
 
+/* Special rules if there is only one action. */
+
 .dropbutton-single .dropbutton-action:first-child {
-      border-right: solid 1px transparent; /* LTR */
-      border-radius: var(--dropbutton--border-radius)
-    }
+  border-right: solid 1px transparent; /* LTR */
+  border-radius: var(--dropbutton--border-radius);
+}
 
 [dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
-        border: solid 1px transparent;
-      }
+  border: solid 1px transparent;
+}
 
 .dropbutton-single .dropbutton-action a {
-      justify-content: center;
-    }
+  justify-content: center;
+}
 
 /* These are the <li> elements other than the first. */
 
@@ -191,17 +149,17 @@
   width: calc(100% + var(--dropbutton--height));
   border-right: 1px solid var(--dropbutton--active-bg-color);
   border-left: 1px solid var(--dropbutton--active-bg-color);
-  background: var(--dropbutton--secondary-bg-color)
+  background: var(--dropbutton--secondary-bg-color);
 }
 
 .secondary-action:last-child {
-    border-bottom: 1px solid var(--dropbutton--active-bg-color);
-  }
+  border-bottom: 1px solid var(--dropbutton--active-bg-color);
+}
 
 .secondary-action a:hover {
-    color: var(--dropbutton--text-hover-color);
-  }
+  color: var(--dropbutton--text-hover-color);
+}
 
 .dropbutton-wrapper.open .secondary-action {
-    visibility: visible
+  visibility: visible;
 }

css/components/embedded-media.css

@@ -10,120 +10,46 @@
  * Embedded Media.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 figure {
   background: var(--color--gray-100);
 }
 
-[dir="ltr"] figcaption {
-  padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] figcaption {
-  padding-right: var(--sp0-5);
-}
-
-[dir="ltr"] figcaption {
-  padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] figcaption {
-  padding-left: var(--sp0-5);
-}
-
 figcaption {
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp0-5);
+  padding-inline-end: var(--sp0-5);
   color: var(--color-text-neutral-medium);
   background: var(--color--gray-100);
   font-family: var(--font-serif);
   font-size: 0.875rem;
   font-style: italic;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 @media (min-width: 31.25rem) {
-
-[dir="ltr"] figcaption {
-    padding-left: var(--sp);
-  }
-
-[dir="rtl"] figcaption {
-    padding-right: var(--sp);
-  }
-
-[dir="ltr"] figcaption {
-    padding-right: var(--sp);
-  }
-
-[dir="rtl"] figcaption {
-    padding-left: var(--sp);
-  }
-
-figcaption {
-    padding-top: var(--sp);
-    padding-bottom: var(--sp)
-}
+  figcaption {
+    padding-block: var(--sp);
+    padding-inline-start: var(--sp);
+    padding-inline-end: var(--sp);
   }
-
-[dir="ltr"] .align-right {
-  margin-left: 0;
-}
-
-[dir="rtl"] .align-right {
-  margin-right: 0;
-}
-
-[dir="ltr"] .align-right {
-  margin-right: 0;
-}
-
-[dir="rtl"] .align-right {
-  margin-left: 0;
 }
 
 .align-right {
   float: none; /* Override core's align.module.css. */
   max-width: 100%;
-  margin-top: var(--sp3);
-  margin-bottom: var(--sp3)
+  margin-block: var(--sp3);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .align-right {
-    margin-left: var(--sp);
-  }
-
-[dir="rtl"] .align-right {
-    margin-right: var(--sp);
-  }
-
-[dir="ltr"] .align-right {
-    margin-right: 0;
-  }
-
-[dir="rtl"] .align-right {
-    margin-left: 0;
-  }
-
-.align-right {
+  .align-right {
     float: right; /* LTR */
     max-width: 50%;
-    margin-top: var(--sp);
-    margin-bottom: var(--sp)
+    margin-block-start: var(--sp);
+    margin-block-end: var(--sp);
+    margin-inline-start: var(--sp);
+    margin-inline-end: 0;
 
     /**
      * Chromium and Webkit do not yet support flow relative logical properties,
@@ -133,117 +59,61 @@ figcaption {
      * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
      * @see https://github.com/csstools/postcss-plugins/issues/632
      */
-}
-    [dir="rtl"] .align-right {
-      float: left;
-    }
   }
+  [dir="rtl"] .align-right {
+    float: left;
+  }
+}
 
 /* Pull out of grid if nested in content narrow layout. */
 
-.layout--content-narrow .align-right,
-.layout--pass--content-narrow > * .align-right {
-  /* @todo this can be simplified. */
-}
+/* @todo this can be simplified. */
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
-  }
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
+}
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
-  }
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
-  }
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
   }
+}
 
 @media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
   }
-
-[dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
-  }
-  }
-
-[dir="ltr"] .align-left {
-  margin-left: 0;
-}
-
-[dir="rtl"] .align-left {
-  margin-right: 0;
-}
-
-[dir="ltr"] .align-left {
-  margin-right: 0;
-}
-
-[dir="rtl"] .align-left {
-  margin-left: 0;
 }
 
 .align-left {
   float: none; /* Override core's align.module.css. */
   max-width: 100%;
-  margin-top: var(--sp3);
-  margin-bottom: var(--sp3)
+  margin-block-start: var(--sp3);
+  margin-block-end: var(--sp3);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .align-left {
-    margin-left: 0;
-  }
-
-[dir="rtl"] .align-left {
-    margin-right: 0;
-  }
-
-[dir="ltr"] .align-left {
-    margin-right: var(--sp2);
-  }
-
-[dir="rtl"] .align-left {
-    margin-left: var(--sp2);
-  }
-
-.align-left {
+  .align-left {
     float: left; /* LTR */
     max-width: 50%;
-    margin-top: var(--sp);
-    margin-bottom: var(--sp) /* Extra right margins in case of aligning next to lists. */
+    margin-block-start: var(--sp);
+    margin-block-end: var(--sp);
+    margin-inline-start: 0;
+    margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */
 
     /**
      * Chromium and Webkit do not yet support flow relative logical properties,
@@ -253,32 +123,25 @@ figcaption {
      * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
      * @see https://github.com/csstools/postcss-plugins/issues/632
      */
-}
-    [dir="rtl"] .align-left {
-      float: right;
-    }
   }
+  [dir="rtl"] .align-left {
+    float: right;
+  }
+}
 
 /* Pull out of grid if nested in content narrow layout. */
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
-  }
+  .layout--content-narrow .align-left,
+  .layout--pass--content-narrow > * .align-left {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
+}
 
 .align-center img,
 .align-center video,
 .align-center audio {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .media-oembed-content {

css/components/feed.css

@@ -10,29 +10,17 @@
  * RSS feed.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .feed-icon {
   display: flex;
   align-items: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
-  color: var(--color-text-neutral-soft)
+  color: var(--color-text-neutral-soft);
 }
 
 .feed-icon:hover {
-    color: var(--color--primary-50);
-  }
+  color: var(--color--primary-50);
+}
 
 .feed-icon__label {
   flex-shrink: 0;
@@ -41,14 +29,6 @@
   font-weight: 600;
 }
 
-[dir="ltr"] .feed-icon__icon {
-  margin-left: var(--sp0-5)
-}
-
-[dir="rtl"] .feed-icon__icon {
-  margin-right: var(--sp0-5)
-}
-
 .feed-icon__icon {
   display: flex;
   flex-shrink: 0;
@@ -56,11 +36,12 @@
   justify-content: center;
   width: var(--sp1-5);
   height: var(--sp1-5);
+  margin-inline-start: var(--sp0-5);
   color: var(--color--white);
-  background-color: var(--color--primary-50)
+  background-color: var(--color--primary-50);
 }
 
 .feed-icon__icon svg {
-    vertical-align: top;
-    fill: currentColor;
-  }
+  vertical-align: top;
+  fill: currentColor;
+}

css/components/field.css

@@ -10,37 +10,23 @@
  * Visual styles for fields.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .field:not(:last-child) {
-  margin-bottom: var(--sp2);
+  margin-block-end: var(--sp2);
 }
 
 .node--view-mode-teaser .field {
-  margin-bottom: var(--sp)
+  margin-block-end: var(--sp);
 }
 
 .node--view-mode-teaser .field:last-child {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .field {
-    margin-bottom: var(--sp2)
-}
+  .node--view-mode-teaser .field {
+    margin-block-end: var(--sp2);
   }
+}
 
 .field__label {
   font-weight: bold;
@@ -48,7 +34,7 @@
 
 .field--label-inline .field__label,
 .field--label-inline .field__items {
-  float: left /* LTR */
+  float: left; /* LTR */
 
   /**
    * Chromium and Webkit do not yet support flow relative logical properties,
@@ -60,20 +46,15 @@
    */
 }
 
-[dir="rtl"] .field--label-inline .field__label,[dir="rtl"]  .field--label-inline .field__items {
-    float: right;
-  }
-
-[dir="ltr"] .field--label-inline .field__label,[dir="ltr"] 
-.field--label-inline > .field__item,[dir="ltr"] 
-.field--label-inline .field__items {
-  padding-right: 0.5em;
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  float: right;
 }
 
-[dir="rtl"] .field--label-inline .field__label,[dir="rtl"] 
-.field--label-inline > .field__item,[dir="rtl"] 
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
 .field--label-inline .field__items {
-  padding-left: 0.5em;
+  padding-inline-end: 0.5em;
 }
 
 .field--label-inline .field__label::after {

css/components/fieldset.css

@@ -10,57 +10,14 @@
  * Fieldset.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .fieldset {
-  margin-left: 0;
-}
-
-[dir="rtl"] .fieldset {
-  margin-right: 0;
-}
-
-[dir="ltr"] .fieldset {
-  margin-right: 0;
-}
-
-[dir="rtl"] .fieldset {
-  margin-left: 0;
-}
-
-[dir="ltr"] .fieldset {
-  padding-left: 0;
-}
-
-[dir="rtl"] .fieldset {
-  padding-right: 0;
-}
-
-[dir="ltr"] .fieldset {
-  padding-right: 0;
-}
-
-[dir="rtl"] .fieldset {
-  padding-left: 0;
-}
-
 .fieldset {
   min-width: 0;
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: var(--sp1);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   color: inherit;
   border: solid 2px var(--color--gray-45);
   border-radius: var(--border-radius);
@@ -85,19 +42,19 @@
   background-color: var(--color--gray-45);
   font-size: var(--font-size-l);
   font-weight: 700;
-  line-height: var(--line-height-base)
+  line-height: var(--line-height-base);
 }
 
 .fieldset__legend + * {
-    clear: left;
-  }
+  clear: left;
+}
 
 .fieldset__legend .fieldset__label.form-required::after {
-        background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
-      }
+  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+}
 
 .fieldset__legend--composite {
-  margin-top: 2px;
+  margin-block-start: 2px;
   color: inherit;
 }
 
@@ -109,26 +66,11 @@
   color: inherit;
 }
 
-[dir="ltr"] .fieldset__label {
-  padding-left: var(--sp1);
-}
-
-[dir="rtl"] .fieldset__label {
-  padding-right: var(--sp1);
-}
-
-[dir="ltr"] .fieldset__label {
-  padding-right: var(--sp1);
-}
-
-[dir="rtl"] .fieldset__label {
-  padding-left: var(--sp1);
-}
-
 .fieldset__label {
   display: block;
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp1);
+  padding-inline-end: var(--sp1);
   color: var(--color--white);
   line-height: var(--line-height-s);
 }
@@ -138,8 +80,7 @@
 }
 
 .fieldset__description {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-s);
 }
@@ -148,49 +89,32 @@
   color: var(--input--disabled-fg-color);
 }
 
-[dir="ltr"] .fieldset__error-message {
-  padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .fieldset__error-message {
-  padding-right: var(--sp1-5);
-}
-
 .fieldset__error-message {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
+  padding-inline-start: var(--sp1-5);
   color: var(--color--red);
   background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left top; /* LTR */
   background-size: var(--sp1) var(--sp1);
   font-size: var(--font-size-s);
-  line-height: var(--line-height-s)
+  line-height: var(--line-height-s);
 }
 
 @media screen and (-ms-high-contrast: active) {
-
-.fieldset__error-message {
-    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E")
-}
+  .fieldset__error-message {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
   }
+}
 
 [dir="rtl"] .fieldset__error-message {
   background-position: left top;
 }
 
-[dir="ltr"] .fieldset__wrapper {
-  padding-left: var(--sp);
-}
-
-[dir="rtl"] .fieldset__wrapper {
-  padding-right: var(--sp);
-}
-
 .fieldset__wrapper {
-  margin-top: 0;
-  padding-top: var(--sp);
-  padding-bottom: var(--sp);
+  margin-block-start: 0;
+  padding-block: var(--sp);
+  padding-inline-start: var(--sp);
 }
 
 .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
@@ -199,44 +123,14 @@
   border-bottom-left-radius: var(--border-radius);
 }
 
-[dir="ltr"] .fieldset__wrapper--group {
-  margin-left: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper--group {
-  margin-right: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper--group {
-  margin-right: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper--group {
-  margin-left: 0;
-}
-
 .fieldset__wrapper--group {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper > .container-inline {
-  padding-left: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper > .container-inline {
-  padding-right: 0;
-}
-
-[dir="ltr"] .fieldset__wrapper > .container-inline {
-  padding-right: 0;
-}
-
-[dir="rtl"] .fieldset__wrapper > .container-inline {
-  padding-left: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 .fieldset__wrapper > .container-inline {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }

css/components/footer.css

@@ -10,62 +10,36 @@
  * Footer regions.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .site-footer {
   position: relative; /* stack above left social bar */
   color: var(--color--gray-65);
-  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%)
-}
-
-[dir="ltr"] .site-footer .menu {
-    margin-left: 0
-}
-
-[dir="rtl"] .site-footer .menu {
-    margin-right: 0
+  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
 }
 
 .site-footer .menu {
-    list-style: none
-  }
-
-[dir="ltr"] .site-footer .menu ul {
-      margin-left: var(--sp)
+  margin-inline-start: 0;
+  list-style: none;
 }
 
-[dir="rtl"] .site-footer .menu ul {
-      margin-right: var(--sp)
+.site-footer .menu ul {
+  margin-inline-start: var(--sp);
 }
 
 .site-footer .menu li {
-      margin-bottom: var(--sp0-5);
-    }
+  margin-block-end: var(--sp0-5);
+}
 
 .site-footer a {
-    color: inherit
-  }
+  color: inherit;
+}
 
 .site-footer a:hover {
-      text-decoration: none;
-    }
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
 
 @media (min-width: 75rem) {
-  [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
-    border-left: solid var(--content-left) var(--color--black)
-  }
-  [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
-    border-right: solid var(--content-left) var(--color--black)
+  body:not(.is-always-mobile-nav) .site-footer {
+    border-inline-start: solid var(--content-left) var(--color--black);
   }
 }

css/components/form-boolean.css

@@ -10,19 +10,6 @@
  * Checkbox and radio input elements.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 input[type="checkbox"],
 input[type="radio"] {
   display: inline-block;
@@ -37,91 +24,92 @@ input[type="radio"] {
   background-position: 50% 50%;
   background-size: var(--sp1) var(--sp1);
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
-input[type="checkbox"]:focus, input[type="radio"]:focus {
-    border: solid 2px var(--color--primary-50);
-    outline: solid 2px var(--color--primary-50)
-  }
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
 
 @supports (outline-style: double) {
-
-input[type="checkbox"]:focus, input[type="radio"]:focus {
-      border-width: 1px;
-      outline-width: 6px;
-      outline-style: double;
-      outline-offset: -1px
-  }
-    }
-
-input[type="checkbox"]:hover, input[type="radio"]:hover {
-    border-color: var(--color--primary-60);
-  }
-
-input[type="checkbox"][disabled], input[type="radio"][disabled] {
-    background-color: var(--color--gray-100)
+  input[type="checkbox"]:focus,
+  input[type="radio"]:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
   }
+}
 
-input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover {
-      border-color: var(--color--gray-60);
-    }
+input[type="checkbox"]:hover,
+input[type="radio"]:hover {
+  border-color: var(--color--primary-60);
+}
 
-input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked {
-      border-width: 1px;
-    }
+input[type="checkbox"][disabled],
+input[type="radio"][disabled] {
+  background-color: var(--color--gray-100);
+}
 
-input[type="checkbox"]:checked, input[type="radio"]:checked {
-    border-width: 2px;
-  }
+input[type="checkbox"][disabled]:hover,
+input[type="radio"][disabled]:hover {
+  border-color: var(--color--gray-60);
+}
 
-input[type="checkbox"].error, input[type="radio"].error {
-    border: solid 2px var(--color--red)
-  }
+input[type="checkbox"][disabled]:checked,
+input[type="radio"][disabled]:checked {
+  border-width: 1px;
+}
 
-input[type="checkbox"].error:focus, input[type="radio"].error:focus {
-      outline-color: var(--color--red);
-      outline-offset: -2px;
-    }
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  border-width: 2px;
+}
 
-[dir="ltr"] input[type="checkbox"] + label,[dir="ltr"]  input[type="radio"] + label {
-    padding-left: var(--sp0-5)
+input.error[type="checkbox"],
+input.error[type="radio"] {
+  border: solid 2px var(--color--red);
 }
 
-[dir="rtl"] input[type="checkbox"] + label,[dir="rtl"]  input[type="radio"] + label {
-    padding-right: var(--sp0-5)
+input.error[type="checkbox"]:focus,
+input.error[type="radio"]:focus {
+  outline-color: var(--color--red);
+  outline-offset: -2px;
 }
 
-input[type="checkbox"] + label, input[type="radio"] + label {
-    display: inline-block;
-  }
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  padding-inline-start: var(--sp0-5);
+}
 
 input[type="checkbox"]:checked {
-    background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
-  }
+  background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
+}
 
 input[type="radio"] {
-  border-radius: 50%
+  border-radius: 50%;
 }
 
 input[type="radio"]:checked {
-    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
-    background-size: 1.0625rem;
-  }
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
+  background-size: 1.0625rem;
+}
 
 input[type="radio"]:focus {
-    border-width: 2px;
-    border-color: var(--color--primary-50);
-    outline-color: transparent;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
-  }
+  border-width: 2px;
+  border-color: var(--color--primary-50);
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
+}
 
-input[type="radio"].error:focus {
-    outline-color: transparent;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
-  }
+input.error[type="radio"]:focus {
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
+}
 
 .form-type-boolean {
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
+  margin-block: var(--sp1);
 }

css/components/form-select.css

@@ -10,126 +10,89 @@
  * Select input elements.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] select {
-  padding-left: var(--sp)
-}
-
-[dir="rtl"] select {
-  padding-right: var(--sp)
-}
-
-[dir="ltr"] select {
-  padding-right: var(--sp3)
-}
-
-[dir="rtl"] select {
-  padding-left: var(--sp3)
+:root {
+  --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
 }
 
 select {
   max-width: 100%;
   height: var(--sp3);
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp3);
   color: var(--color-text-neutral-loud);
   border: 1px solid var(--color--gray-60);
   border-radius: var(--border-radius);
   background-color: var(--color--white);
-  background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
+  background-image: var(--form-element-select-icon);
   background-repeat: no-repeat;
   background-position: right var(--sp) center; /* LTR */
   font-family: inherit;
   font-size: inherit;
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
 select:focus {
-    border: solid 2px var(--color--primary-50);
-    outline: solid 2px var(--color--primary-50)
-  }
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
 
 @supports (outline-style: double) {
-
-select:focus {
-      border-width: 1px;
-      outline-width: 6px;
-      outline-style: double;
-      outline-offset: -1px
+  select:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
   }
-    }
+}
 
 select[disabled] {
-    color: var(--color--gray-60);
-    background-color: var(--color--gray-100);
-  }
+  color: var(--color--gray-60);
+  background-color: var(--color--gray-100);
+}
 
 select.error {
-    border: solid 2px var(--color--red)
-  }
+  border: solid 2px var(--color--red);
+}
 
 select.error:focus {
-      outline-color: var(--color--red);
-    }
+  outline-color: var(--color--red);
+}
 
 select[multiple] {
-    height: auto;
-    padding: var(--sp0-5);
-    background-image: none;
-    line-height: 1 /* Needed by non-Chromium based MS Edge browsers. */
-  }
+  height: auto;
+  padding: var(--sp0-5);
+  background-image: none;
+  line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
+}
 
 select[multiple] option {
-      padding: var(--sp0-5);
-    }
+  padding: var(--sp0-5);
+}
 
 select.form-element--small {
-    height: var(--sp2-5);
-  }
-
-select {
-
-  /* Necessary to show chevron in forced colors mode in modern browsers. */
+  height: var(--sp2-5);
 }
 
-@media (forced-colors: active) {
+/* Necessary to show chevron in forced colors mode in modern browsers. */
 
-[dir="ltr"] select {
-    padding-right: var(--sp)
-  }
-
-[dir="rtl"] select {
-    padding-left: var(--sp)
-  }
-
-select {
+@media (forced-colors: active) {
+  select {
+    padding-inline-end: var(--sp);
     background-image: none;
     -webkit-appearance: listbox;
-    appearance: listbox /* Default <select> appearance value for modern browsers. */
+    appearance: listbox; /* Default <select> appearance value for modern browsers. */
 
     /* Lets browser set <select> appearance to whatever the browser's default is. */
-}
-    @supports ((-webkit-appearance: revert) or (appearance: revert)) {
-
-select {
+  }
+  @supports ((-webkit-appearance: revert) or (appearance: revert)) {
+    select {
       -webkit-appearance: revert;
-      appearance: revert
-}
+      appearance: revert;
     }
   }
+}
 
 [dir="rtl"] select {
   background-position: left var(--sp) center;

css/components/form-text.css

@@ -10,19 +10,6 @@
  * Text input elements.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 [type="color"],
 [type="date"],
 [type="datetime-local"],
@@ -49,96 +36,76 @@ textarea {
   font-family: inherit;
   font-size: inherit;
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
-[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus {
-    border: solid 2px var(--color--primary-50);
-    outline: solid 2px var(--color--primary-50)
-  }
+:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
 
 @supports (outline-style: double) {
-
-[type="color"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="file"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus {
-      border-width: 1px;
-      outline-width: 6px;
-      outline-style: double;
-      outline-offset: -1px
+  :is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
   }
-    }
-
-[type="color"][disabled], [type="date"][disabled], [type="datetime-local"][disabled], [type="email"][disabled], [type="file"][disabled], [type="month"][disabled], [type="number"][disabled], [type="password"][disabled], [type="search"][disabled], [type="tel"][disabled], [type="text"][disabled], [type="time"][disabled], [type="url"][disabled], [type="week"][disabled], textarea[disabled] {
-    color: var(--color--gray-60);
-    background-color: var(--color--gray-100);
-  }
-
-[type="color"].error, [type="date"].error, [type="datetime-local"].error, [type="email"].error, [type="file"].error, [type="month"].error, [type="number"].error, [type="password"].error, [type="search"].error, [type="tel"].error, [type="text"].error, [type="time"].error, [type="url"].error, [type="week"].error, textarea.error {
-    border: solid 2px var(--color--red)
-  }
-
-[type="color"].error:focus, [type="date"].error:focus, [type="datetime-local"].error:focus, [type="email"].error:focus, [type="file"].error:focus, [type="month"].error:focus, [type="number"].error:focus, [type="password"].error:focus, [type="search"].error:focus, [type="tel"].error:focus, [type="text"].error:focus, [type="time"].error:focus, [type="url"].error:focus, [type="week"].error:focus, textarea.error:focus {
-      outline-color: var(--color--red);
-      outline-offset: -2px;
-    }
-
-[type="color"].error + .ck-editor > .ck-editor__main, [type="date"].error + .ck-editor > .ck-editor__main, [type="datetime-local"].error + .ck-editor > .ck-editor__main, [type="email"].error + .ck-editor > .ck-editor__main, [type="file"].error + .ck-editor > .ck-editor__main, [type="month"].error + .ck-editor > .ck-editor__main, [type="number"].error + .ck-editor > .ck-editor__main, [type="password"].error + .ck-editor > .ck-editor__main, [type="search"].error + .ck-editor > .ck-editor__main, [type="tel"].error + .ck-editor > .ck-editor__main, [type="text"].error + .ck-editor > .ck-editor__main, [type="time"].error + .ck-editor > .ck-editor__main, [type="url"].error + .ck-editor > .ck-editor__main, [type="week"].error + .ck-editor > .ck-editor__main, textarea.error + .ck-editor > .ck-editor__main {
-      border: solid 2px var(--color--red);
-    }
-
-[type="color"].form-element--small, [type="date"].form-element--small, [type="datetime-local"].form-element--small, [type="email"].form-element--small, [type="file"].form-element--small, [type="month"].form-element--small, [type="number"].form-element--small, [type="password"].form-element--small, [type="search"].form-element--small, [type="tel"].form-element--small, [type="text"].form-element--small, [type="time"].form-element--small, [type="url"].form-element--small, [type="week"].form-element--small, textarea.form-element--small {
-    min-height: var(--sp2-5);
-  }
-
-@media (min-width: 31.25rem) {
+}
 
-[type="color"],
-[type="date"],
-[type="datetime-local"],
-[type="email"],
-[type="file"],
-[type="month"],
-[type="number"],
-[type="password"],
-[type="search"],
-[type="tel"],
-[type="text"],
-[type="time"],
-[type="url"],
-[type="week"],
-textarea {
-    width: auto
+[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  color: var(--color--gray-60);
+  background-color: var(--color--gray-100);
 }
-  }
 
-[type="date"] {
-  /* Ensure that date field isn't larger than other fields. */
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  border: solid 2px var(--color--red);
 }
 
-[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
-    padding-left: 0
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+  outline-color: var(--color--red);
+  outline-offset: -2px;
 }
 
-[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
-    padding-right: 0
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main {
+  border: solid 2px var(--color--red);
 }
 
-[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
-    padding-right: 0
+.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  min-height: var(--sp2-5);
 }
 
-[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
-    padding-left: 0
+@media (min-width: 31.25rem) {
+  [type="color"],
+  [type="date"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="file"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"],
+  textarea {
+    width: auto;
+  }
 }
 
+/* Ensure that date field isn't larger than other fields. */
+
 [type="date"]::-webkit-datetime-edit-fields-wrapper {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
 
 [type="file"] {
   height: auto;
-  padding-top: var(--sp0-75);
-  padding-bottom: var(--sp0-75);
+  padding-block: var(--sp0-75);
 }
 
 [type="color"] {

css/components/form-textarea.css

@@ -10,19 +10,6 @@
  * Textarea.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 textarea {
   display: block;
   width: 100%;

css/components/form.css

@@ -10,23 +10,6 @@
  * Main form and form item styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-:-ms-input-placeholder {
-  color: var(--color--gray-60);
-}
-
 ::placeholder {
   color: var(--color--gray-60);
 }
@@ -36,13 +19,11 @@
  */
 
 .form-item {
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
+  margin-block: var(--sp1);
 }
 
 .form-item__label--multiple-value-form {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -56,8 +37,7 @@
 
 tr .form-item,
 .container-inline .form-item {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
 }
 
 /**
@@ -66,21 +46,15 @@ tr .form-item,
 
 .form-item__label {
   display: block;
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
 }
 
-[dir="ltr"] .container-inline .form-item__label {
-  margin-right: 1em;
-}
-
-[dir="rtl"] .container-inline .form-item__label {
-  margin-left: 1em;
+.container-inline .form-item__label {
+  margin-inline-end: 1em;
 }
 
 .form-item__label--multiple-value-form {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
@@ -110,71 +84,59 @@ tr .form-item,
   display: inline-block;
   width: 0.5rem;
   height: 0.5rem;
-  margin-left: 0.3em;
-  margin-right: 0.3em;
+  margin-inline: 0.3em;
   content: "";
   vertical-align: text-top;
   /* Use a background image to prevent screen readers from announcing the text. */
   background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
-  background-size: 0.5rem 0.5rem
+  background-size: 0.5rem 0.5rem;
 }
 
 @media screen and (-ms-high-contrast: active) {
-
-.form-item__label.form-required::after,
-.fieldset__label.form-required::after,
-.required-mark::after {
-    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A")
-}
+  .form-item__label.form-required::after,
+  .fieldset__label.form-required::after,
+  .required-mark::after {
+    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
   }
+}
 
 /**
  * Form item description.
  */
 
 .form-item__description {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
   max-width: 60ch;
   font-size: var(--font-size-s);
   line-height: var(--line-height-s);
 }
 
 .field-multiple-table + .form-item__description {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 /**
  * Error message (Inline form errors).
  */
 
-[dir="ltr"] .form-item--error-message {
-  padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .form-item--error-message {
-  padding-right: var(--sp1-5);
-}
-
 .form-item--error-message {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
+  padding-inline-start: var(--sp1-5);
   color: var(--color--red);
   background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: left top; /* LTR */
   background-size: var(--sp1) var(--sp1);
   font-size: var(--font-size-s);
-  line-height: var(--line-height-s)
+  line-height: var(--line-height-s);
 }
 
 @media screen and (-ms-high-contrast: active) {
-
-.form-item--error-message {
-    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E")
-}
+  .form-item--error-message {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
   }
+}
 
 [dir="rtl"] .form-item--error-message {
   background-position: right top;
@@ -188,18 +150,15 @@ tr .form-item,
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
 }
 
 .form-actions .button,
 .form-actions .action-link {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
 }
 
 .form-actions .ajax-progress--throbber {
-  -ms-grid-row-align: center;
   align-self: center;
 }
 
@@ -221,16 +180,10 @@ tr .form-item,
   min-width: 1px;
 }
 
-[dir="ltr"] .form-item--editor-format .form-item__label,[dir="ltr"] 
-.form-item--editor-format .form-item__prefix,[dir="ltr"] 
-.form-item--editor-format .form-item__suffix {
-  margin-right: var(--sp0-5);
-}
-
-[dir="rtl"] .form-item--editor-format .form-item__label,[dir="rtl"] 
-.form-item--editor-format .form-item__prefix,[dir="rtl"] 
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
 .form-item--editor-format .form-item__suffix {
-  margin-left: var(--sp0-5);
+  margin-inline-end: var(--sp0-5);
 }
 
 .form-item--editor-format .form-item__description,
@@ -244,16 +197,16 @@ tr .form-item,
  */
 
 .form--inline > * {
-    display: inline-block;
-    margin-top: var(--sp0-5);
-    margin-bottom: 0;
-    vertical-align: top; /* Ensure proper alignment if description is present. */
-  }
+  display: inline-block;
+  margin-top: var(--sp0-5);
+  margin-bottom: 0;
+  vertical-align: top; /* Ensure proper alignment if description is present. */
+}
 
 .form--inline .form-item__label {
-    margin: 0;
-  }
+  margin: 0;
+}
 
 .form--inline .form-actions {
-    margin-top: var(--sp1-5);
-  }
+  margin-top: var(--sp1-5);
+}

css/components/forum.css

@@ -10,22 +10,9 @@
  * Forum specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .forum table {
-    width: 100%;
-  }
+  width: 100%;
+}
 
 .forum__name--link,
 .forum__last-reply a,

css/components/header-buttons-mobile.css

@@ -10,51 +10,28 @@
  * Header Mobile Buttons.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .mobile-buttons {
-  margin-left: auto
-}
-
-[dir="rtl"] .mobile-buttons {
-  margin-right: auto
-}
-
 .mobile-buttons {
-  margin-top: var(--sp0-5)
+  margin-block-start: var(--sp0-5);
+  margin-inline-start: auto;
 }
 
 @media (min-width: 31.25rem) {
-
-.mobile-buttons {
-    margin-top: var(--sp2)
-}
+  .mobile-buttons {
+    margin-block-start: var(--sp2);
   }
+}
 
 @media (min-width: 43.75rem) {
-
-.mobile-buttons {
-    margin-top: var(--sp4)
-}
+  .mobile-buttons {
+    margin-block-start: var(--sp4);
   }
+}
 
 @media (min-width: 75rem) {
-
-.mobile-buttons {
-    margin-top: var(--sp6)
-}
+  .mobile-buttons {
+    margin-block-start: var(--sp6);
   }
+}
 
 @media (min-width: 75rem) {
   body:not(.is-always-mobile-nav) .mobile-buttons {

css/components/header-navigation.css

@@ -10,47 +10,11 @@
  * Navigation in header.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .header-nav {
-  left: 100%
-}
-
-[dir="rtl"] .header-nav {
-  right: 100%
-}
-
-[dir="ltr"] .header-nav {
-  padding-left: var(--sp)
-}
-
-[dir="rtl"] .header-nav {
-  padding-right: var(--sp)
-}
-
-[dir="ltr"] .header-nav {
-  padding-right: var(--sp)
-}
-
-[dir="rtl"] .header-nav {
-  padding-left: var(--sp)
-}
-
 .header-nav {
   position: fixed;
   z-index: 501; /* Appear above overlay and contextual links in header. */
-  top: 0;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
   visibility: hidden;
   overflow: auto;
   /* Ensure that header nav not use additional space and force system branding
@@ -59,71 +23,56 @@
   width: 100%;
   max-width: var(--mobile-nav-width);
   height: 100%;
-  padding-top: 0;
-  padding-bottom: var(--sp);
+  padding-block: 0 var(--sp);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
   /* Create room for the "close" button. We cannot use margin because the
    * mobile navigation needs to slide beneath the button, but we also cannot
    * use padding because that would enable the button to scroll out of the
    * viewport on short screens. */
-  border-top: solid var(--color--white) calc(var(--sp3));
+  border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
   background-color: var(--color--white);
-  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1)
+  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
 }
 
 .header-nav.is-active {
-    visibility: visible;
-    transform: translateX(-100%) /* LTR */
-  }
+  visibility: visible;
+  transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */
+}
 
 [dir="rtl"] .header-nav.is-active {
-      transform: translateX(100%);
-    }
+  transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
+}
 
 @media (min-width: 31.25rem) {
-
-.header-nav {
-    border-top-width: calc(var(--sp5))
-}
+  .header-nav {
+    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
   }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .header-nav {
-    padding-left: var(--sp3)
+  .header-nav {
+    padding-block-end: var(--sp3);
+    padding-inline-start: var(--sp3);
+    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
   }
-
-[dir="rtl"] .header-nav {
-    padding-right: var(--sp3)
-  }
-
-.header-nav {
-    padding-bottom: var(--sp3);
-    border-top-width: calc(var(--sp7))
 }
-  }
 
 @media (min-width: 62.5rem) {
-
-.header-nav {
-    -ms-grid-column: 5;
-    -ms-grid-column-span: 9;
-    grid-column: 5 / 14
-}
+  .header-nav {
+    grid-column: 5 / 14;
   }
+}
 
-.header-nav {
-
-  /*
+/*
    * Ensure top border has the same color as the background when in forced colors.
    */
-}
 
 @media (forced-colors: active) {
-
-.header-nav {
-    border-top-color: canvas
-}
+  .header-nav {
+    border-top-color: canvas;
   }
+}
 
 /*
  * Only apply transition styles when JS is loaded. This
@@ -135,104 +84,62 @@ html.js .header-nav {
 }
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
-    padding-left: 0
-  }
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
-    padding-right: 0
-  }
-
-[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
-    padding-right: 0
-  }
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
-    padding-left: 0
-  }
-
-body:not(.is-always-mobile-nav) .header-nav {
+  body:not(.is-always-mobile-nav) .header-nav {
     position: static;
     display: flex;
     visibility: visible;
     overflow: visible;
-    -ms-grid-column: 5;
-    -ms-grid-column-span: 10;
     grid-column: 5 / 15;
     align-items: center;
     justify-content: flex-end;
     max-width: none;
     height: var(--header-height-wide-when-fixed);
-    margin-top: auto;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-block-start: auto;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
     transition: transform 0.2s;
     transform: none;
-    border-top: 0;
-    box-shadow: none
-}
+    border-block-start: 0;
+    box-shadow: none;
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] body.is-always-mobile-nav .header-nav {
-      padding-right: var(--sp)
-  }
-
-[dir="rtl"] body.is-always-mobile-nav .header-nav {
-      padding-left: var(--sp)
-  }
-
-body.is-always-mobile-nav .header-nav {
-      overflow: auto;
-      max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);
-      transition: transform 0.2s, visibility 0.2s;
-      border-top-width: calc(var(--sp11))
+  body.is-always-mobile-nav .header-nav {
+    overflow: auto;
+    max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
+    padding-inline-end: var(--sp);
+    transition: transform 0.2s, visibility 0.2s;
+    border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
   }
-    }
+}
 
 @media (min-width: 90rem) {
-
-[dir="ltr"] body.is-always-mobile-nav .header-nav {
-      padding-right: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
-  }
-
-[dir="rtl"] body.is-always-mobile-nav .header-nav {
-      padding-left: calc(100vw - var(--max-width) - var(--content-left) + var(--sp))
+  body.is-always-mobile-nav .header-nav {
+    max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
+    padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
   }
-
-body.is-always-mobile-nav .header-nav {
-      max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width)*7 + var(--grid-gap)*7)
-  }
-    }
-
-[dir="ltr"] .header-nav-overlay {
-  left: 0
-}
-
-[dir="rtl"] .header-nav-overlay {
-  right: 0
 }
 
 .header-nav-overlay {
   position: fixed;
   z-index: 101;
-  top: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   display: none;
   width: 100%;
   height: 100vh;
   opacity: 0.2;
-  background: var(--color--gray-5)
+  background: var(--color--gray-5);
 }
 
 @media (forced-colors: active) {
-
-.header-nav-overlay {
-    background: canvastext
-}
+  .header-nav-overlay {
+    background: canvastext;
   }
+}
 
 .is-overlay-active .header-nav-overlay {
-    display: block
+  display: block;
 }

css/components/header-search-narrow.css

@@ -10,296 +10,182 @@
  * Header Search Narrow Block.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .block-search-narrow {
-  margin-left: calc(var(--sp)*-1);
-  margin-right: calc(var(--sp)*-1);
-  margin-bottom: var(--sp2);
-  background: var(--color--black)
+  margin-inline: calc(-1 * var(--sp));
+  margin-block-end: var(--sp2);
+  background: var(--color--black);
 }
 
 .block-search-narrow .search-block-form {
-    display: flex;
-  }
-
-.block-search-narrow .form-item {
-    flex-grow: 1;
-    margin: 0;
-  }
-
-.block-search-narrow .form-actions {
-    margin: 0;
-  }
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
-    padding-left: var(--sp)
+  display: flex;
 }
 
-[dir="rtl"] .block-search-narrow input[type="search"] {
-    padding-right: var(--sp)
-}
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
-    padding-right: var(--sp)
+.block-search-narrow .form-item {
+  flex-grow: 1;
+  margin: 0;
 }
 
-[dir="rtl"] .block-search-narrow input[type="search"] {
-    padding-left: var(--sp)
+.block-search-narrow .form-actions {
+  margin: 0;
 }
 
 .block-search-narrow input[type="search"] {
-    width: calc(100% + var(--sp2));
-    height: calc(var(--sp)*3);
-    padding-top: 0;
-    padding-bottom: 0;
-    transition: background-size 0.4s;
-    color: var(--color--white);
-    border: solid 1px transparent;
-    background-color: transparent;
-    background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
-    background-repeat: no-repeat;
-    background-position: bottom left; /* LTR */
-    background-size: 0% 0.3125rem;
-    box-shadow: none;
-    font-family: var(--font-serif);
-    font-size: 1rem;
-    -webkit-appearance: none
-  }
+  width: calc(100% + var(--sp2));
+  height: calc(3 * var(--sp));
+  padding-block: 0;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  transition: background-size 0.4s;
+  color: var(--color--white);
+  border: solid 1px transparent;
+  background-color: transparent;
+  background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 0.3125rem;
+  box-shadow: none;
+  font-family: var(--font-serif);
+  font-size: 1rem;
+  -webkit-appearance: none;
+}
 
 .block-search-narrow input[type="search"]:focus {
-      outline: solid 4px transparent;
-      outline-offset: -4px;
-      background-size: 100% 0.3125rem;
-    }
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  background-size: 100% 0.3125rem;
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
-      padding-left: var(--sp2)
+  .block-search-narrow input[type="search"] {
+    height: calc(4 * var(--sp));
+    padding-inline-start: var(--sp2);
+    padding-inline-end: var(--sp2);
   }
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
-      padding-right: var(--sp2)
-  }
-
-[dir="ltr"] .block-search-narrow input[type="search"] {
-      padding-right: var(--sp2)
-  }
-
-[dir="rtl"] .block-search-narrow input[type="search"] {
-      padding-left: var(--sp2)
-  }
-
-.block-search-narrow input[type="search"] {
-      height: calc(var(--sp)*4)
-  }
-    }
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
-    margin-left: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
-    margin-right: 0
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
-    margin-right: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
-    margin-left: 0
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
-    padding-left: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
-    padding-right: 0
-}
-
-[dir="ltr"] .block-search-narrow .search-form__submit {
-    padding-right: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit {
-    padding-left: 0
 }
 
 .block-search-narrow .search-form__submit {
-    position: relative;
-    overflow: hidden;
-    -ms-grid-row-align: stretch;
-    align-self: stretch;
-    width: var(--sp3);
-    height: auto;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    cursor: pointer;
-    border-color: transparent;
-    background-color: transparent
-
-    /*
+  position: relative;
+  overflow: hidden;
+  align-self: stretch;
+  width: var(--sp3);
+  height: auto;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+
+  /*
       When in Windows high contrast mode, FF will not output either background
       images or SVGs that are nested directly within a <button> element, so we add a <span>.
     */
-  }
-
-[dir="ltr"] .block-search-narrow .search-form__submit .icon--search {
-      left: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
-      right: 0
 }
 
 .block-search-narrow .search-form__submit .icon--search {
-      position: absolute;
-      top: 0;
-      display: block;
-      width: 100%; /* Width of the SVG background image. */
-      height: 100%;
-      pointer-events: none;
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: auto
-    }
-
-[dir="ltr"] .block-search-narrow .search-form__submit .icon--search::after {
-        left: 0
-}
-
-[dir="rtl"] .block-search-narrow .search-form__submit .icon--search::after {
-        right: 0
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: block;
+  width: 100%; /* Width of the SVG background image. */
+  height: 100%;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto;
 }
 
 .block-search-narrow .search-form__submit .icon--search::after {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 0;
-        content: "";
-        transition: transform 0.2s;
-        transform: scaleX(0);
-        transform-origin: left; /* LTR */
-        border-top: solid 5px var(--color--primary-50);
-      }
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left; /* LTR */
+  border-block-start: solid 0.3125rem var(--color--primary-50);
+}
 
 @media (forced-colors: active) {
-
-.block-search-narrow .search-form__submit .icon--search {
-        background: buttontext;
-        -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-        -webkit-mask-repeat: no-repeat;
-        mask-repeat: no-repeat;
-        -webkit-mask-position: center;
-        mask-position: center
-    }
-      }
+  .block-search-narrow .search-form__submit .icon--search {
+    background: buttontext;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+}
 
 .block-search-narrow .search-form__submit:focus {
-      outline: solid 4px transparent;
-      outline-offset: -4px;
-      box-shadow: none
-    }
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  box-shadow: none;
+}
 
 .block-search-narrow .search-form__submit:focus span::after {
-        transform: scaleX(1);
-      }
+  transform: scaleX(1);
+}
 
 @media screen and (-ms-high-contrast: active) {
-
-.block-search-narrow .search-form__submit:focus {
-        border-bottom-width: var(--sp0-5)
-    }
-
-        .block-search-narrow .search-form__submit:focus span::after {
-          content: none;
-        }
-      }
-
-@media (min-width: 43.75rem) {
-
-.block-search-narrow .search-form__submit {
-      width: 5rem
+  .block-search-narrow .search-form__submit:focus {
+    border-bottom-width: var(--sp0-5);
   }
-    }
-
-@media screen and (-ms-high-contrast: active) {
 
-.block-search-narrow .search-form__submit {
-      /* IE11's high contrast show will not show the background image, so we show the text. */
+  .block-search-narrow .search-form__submit:focus span::after {
+    content: none;
   }
-      .block-search-narrow .search-form__submit .visually-hidden {
-        position: static;
-        overflow: visible;
-        clip: auto;
-        width: auto;
-        height: auto;
-        text-align: center;
-      }
-
-.block-search-narrow .search-form__submit {
+}
 
-      /* Edge's high contrast does show the background image, so we hide it. */
+@media (min-width: 43.75rem) {
+  .block-search-narrow .search-form__submit {
+    width: 5rem;
   }
-      .block-search-narrow .search-form__submit .icon--search {
-        display: none;
-      }
-    }
-
-.block-search-narrow {
-
-  /* 500px is the width of the primary nav at mobile. */
 }
 
-@media (min-width: 31.25rem) {
-
-[dir="ltr"] .block-search-narrow {
-    margin-left: 0
+@media screen and (-ms-high-contrast: active) {
+  /* IE11's high contrast show will not show the background image, so we show the text. */
+  .block-search-narrow .search-form__submit .visually-hidden {
+    position: static;
+    overflow: visible;
+    clip: auto;
+    width: auto;
+    height: auto;
+    text-align: center;
   }
 
-[dir="rtl"] .block-search-narrow {
-    margin-right: 0
+  /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-narrow .search-form__submit .icon--search {
+    display: none;
   }
+}
 
-[dir="ltr"] .block-search-narrow {
-    margin-right: 0
-  }
+/* 500px is the width of the primary nav at mobile. */
 
-[dir="rtl"] .block-search-narrow {
-    margin-left: 0
-  }
+@media (min-width: 31.25rem) {
+  .block-search-narrow {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
+}
 
 @media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .block-search-narrow {
-    display: none
-}
+  body:not(.is-always-mobile-nav) .block-search-narrow {
+    display: none;
   }
+}
 
 [dir="rtl"] .block-search-narrow input[type="search"] {
-    background-position: bottom right;
-  }
+  background-position: bottom right;
+}
 
 [dir="rtl"] .block-search-narrow .search-form__submit .icon--search::after {
-    transform-origin: right;
-  }
+  transform-origin: right;
+}

css/components/header-search-wide.css

@@ -10,77 +10,17 @@
  * Header Search Wide Block.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 /* Override contextual links so we can position against .site-header. */
 
 .block-search-wide.contextual-region {
   position: static;
 }
 
-[dir="ltr"] .block-search-wide__wrapper {
-  left: calc(var(--content-left)*-1);
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  right: calc(var(--content-left)*-1);
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
-  margin-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  margin-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
-  margin-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  margin-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
-  padding-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  padding-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
-  padding-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  padding-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper {
-  border-left: solid var(--content-left) var(--color--gray-20);
-}
-
-[dir="rtl"] .block-search-wide__wrapper {
-  border-right: solid var(--content-left) var(--color--gray-20);
-}
-
 .block-search-wide__wrapper {
   position: absolute;
   z-index: 1; /* Ensure left border shows above social region in IE11. */
-  top: 100%;
+  inset-block-start: 100%;
+  inset-inline-start: calc(-1 * var(--content-left));
   display: none;
   visibility: hidden;
   overflow: hidden;
@@ -88,212 +28,140 @@
   max-width: var(--max-bg-color);
   height: var(--sp8);
   max-height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   transition: all 0.2s;
-  background: var(--color--black)
+  border-inline-start: solid var(--content-left) var(--color--gray-20);
+  background: var(--color--black);
 }
 
 .block-search-wide__wrapper.is-active {
-    visibility: visible;
-    max-height: var(--sp8);
-  }
-
-.block-search-wide__wrapper form {
-    display: flex;
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 13;
-    grid-column: 1 / 14;
-  }
-
-[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
-    padding-left: var(--sp12);
-}
-
-[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
-    padding-right: var(--sp12);
-}
-
-[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
-    padding-right: 0;
+  visibility: visible;
+  max-height: var(--sp8);
 }
 
-[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
-    padding-left: 0;
+.block-search-wide__wrapper form {
+  display: flex;
+  grid-column: 1 / 14;
 }
 
 .block-search-wide__wrapper input[type="search"] {
-    width: calc(100% + var(--sp2));
-    height: var(--sp8);
-    padding-top: 0;
-    padding-bottom: 0;
-    transition: background-size 0.4s;
-    color: var(--color--white);
-    border: solid 1px transparent;
-    box-shadow: none;
-    font-family: var(--font-serif);
-    font-size: 2rem;
-    -webkit-appearance: none
-  }
-
-.block-search-wide__wrapper input[type="search"]:focus {
-      outline: solid 4px transparent;
-      outline-offset: -4px;
-    }
-
-.block-search-wide__wrapper .form-item-keys {
-    flex-grow: 1;
-    margin: 0;
-  }
-
-.block-search-wide__wrapper .form-actions {
-    display: flex;
-    margin: 0;
-  }
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
-    margin-left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
-    margin-right: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
-    margin-right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
-    margin-left: 0;
-}
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
-    padding-left: 0;
+  width: calc(100% + var(--sp2));
+  height: var(--sp8);
+  padding-block: 0;
+  padding-inline-start: var(--sp12);
+  padding-inline-end: 0;
+  transition: background-size 0.4s;
+  color: var(--color--white);
+  border: solid 1px transparent;
+  box-shadow: none;
+  font-family: var(--font-serif);
+  font-size: 2rem;
+  -webkit-appearance: none;
 }
 
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
-    padding-right: 0;
+.block-search-wide__wrapper input[type="search"]:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
 }
 
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
-    padding-right: 0;
+.block-search-wide__wrapper .form-item-keys {
+  flex-grow: 1;
+  margin: 0;
 }
 
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
-    padding-left: 0;
+.block-search-wide__wrapper .form-actions {
+  display: flex;
+  margin: 0;
 }
 
 .block-search-wide__wrapper .search-form__submit {
-    position: relative;
-    overflow: hidden;
-    -ms-grid-row-align: stretch;
-    align-self: stretch;
-    width: 6.25rem;
-    height: auto;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    cursor: pointer;
-    border-color: transparent;
-    background-color: transparent
-
-    /*
+  position: relative;
+  overflow: hidden;
+  align-self: stretch;
+  width: 6.25rem;
+  height: auto;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+
+  /*
       When in Windows high contrast mode, FF will not output either background
       images or SVGs that are nested directly within a <button> element, so we add a <span>.
     */
-  }
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {
-      right: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {
-      left: 0;
 }
 
 .block-search-wide__wrapper .search-form__submit .icon--search {
-      position: absolute;
-      top: 0;
-      display: block;
-      width: 1.5rem; /* Width of the SVG background image. */
-      height: 100%;
-      pointer-events: none;
-      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: contain
-    }
-
-[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
-        left: 0;
-}
-
-[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
-        right: 0;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: block;
+  width: 1.5rem; /* Width of the SVG background image. */
+  height: 100%;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
 .block-search-wide__wrapper .search-form__submit .icon--search::after {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 0;
-        content: "";
-        transition: transform 0.2s;
-        transform: scaleX(0);
-        transform-origin: left;
-        border-top: solid var(--sp0-5) var(--color--primary-50);
-      }
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left;
+  border-block-start: solid var(--sp0-5) var(--color--primary-50);
+}
 
 .block-search-wide__wrapper .search-form__submit:focus {
-      outline: solid 4px transparent;
-      outline-offset: -4px;
-      box-shadow: none
-    }
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  box-shadow: none;
+}
 
 .block-search-wide__wrapper .search-form__submit:focus span::after {
-        transform: scaleX(1);
-      }
-
-@media screen and (-ms-high-contrast: active) {
-
-.block-search-wide__wrapper .search-form__submit:focus {
-        border-bottom-width: var(--sp0-5)
-    }
-
-        .block-search-wide__wrapper .search-form__submit:focus span::after {
-          content: none;
-        }
-      }
+  transform: scaleX(1);
+}
 
 @media screen and (-ms-high-contrast: active) {
-
-.block-search-wide__wrapper .search-form__submit {
-      /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-wide__wrapper .search-form__submit:focus {
+    border-bottom-width: var(--sp0-5);
   }
-      .block-search-wide__wrapper .search-form__submit .icon--search {
-        display: none;
-      }
-    }
 
-[dir="ltr"] .block-search-wide__container {
-  padding-right: var(--sp2);
+  .block-search-wide__wrapper .search-form__submit:focus span::after {
+    content: none;
+  }
 }
 
-[dir="rtl"] .block-search-wide__container {
-  padding-left: var(--sp2);
+@media screen and (-ms-high-contrast: active) {
+  /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-wide__wrapper .search-form__submit .icon--search {
+    display: none;
+  }
 }
 
 .block-search-wide__container {
   max-width: var(--max-width);
+  padding-inline-end: var(--sp2);
 }
 
 .block-search-wide__grid {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: (1fr)[var(--grid-col-count)];
   grid-template-columns: repeat(var(--grid-col-count), 1fr);
   grid-column-gap: var(--grid-gap);
 }
@@ -301,13 +169,12 @@
 /* Override specificity from container-inline.module.css */
 
 .container-inline .block-search-wide__container {
-    display: block;
-  }
+  display: block;
+}
 
 .container-inline .block-search-wide__grid {
-    display: -ms-grid;
-    display: grid;
-  }
+  display: grid;
+}
 
 .block-search-wide__button {
   position: relative;
@@ -318,83 +185,71 @@
   color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
   border: 0;
   background: transparent;
-  -webkit-appearance: none
+  -webkit-appearance: none;
 }
 
 .block-search-wide__button:focus {
-    position: relative;
-    outline: 0
-  }
+  position: relative;
+  outline: 0;
+}
 
 .block-search-wide__button:focus::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 80%;
-      height: var(--sp3);
-      content: "";
-      transform: translate(-50%, -50%);
-      border: solid 2px var(--color--primary-50);
-      border-radius: 0.25rem;
-    }
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: var(--sp3);
+  content: "";
+  transform: translate(-50%, -50%);
+  border: solid 2px var(--color--primary-50);
+  border-radius: 0.25rem;
+}
 
 .block-search-wide__button[aria-expanded="true"] {
-    background: var(--color--black)
-  }
+  background: var(--color--black);
+}
 
 .block-search-wide__button[aria-expanded="true"]:focus::after {
-      border-color: var(--color--white);
-    }
+  border-color: var(--color--white);
+}
 
 .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
-      .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: var(--sp1-5);
-        height: 0;
-        content: "";
-        border-top: solid 2px var(--color--white);
-      }
-
-.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
-        transform: translate(-50%, -50%) rotate(-45deg);
-      }
-
 .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
-        transform: translate(-50%, -50%) rotate(45deg);
-      }
-
-.block-search-wide__button[aria-expanded="true"] svg {
-      display: none;
-    }
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--sp1-5);
+  height: 0;
+  content: "";
+  border-block-start: solid 2px var(--color--white);
+}
 
-[dir="ltr"] .block-search-wide__button svg {
-    margin-left: auto;
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
+  transform: translate(-50%, -50%) rotate(-45deg);
 }
 
-[dir="rtl"] .block-search-wide__button svg {
-    margin-right: auto;
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+  transform: translate(-50%, -50%) rotate(45deg);
 }
 
-[dir="ltr"] .block-search-wide__button svg {
-    margin-right: auto;
+.block-search-wide__button[aria-expanded="true"] svg {
+  display: none;
 }
 
-[dir="rtl"] .block-search-wide__button svg {
-    margin-left: auto;
+.block-search-wide__button svg {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 
 @media (forced-colors: active) {
+  .block-search-wide__button {
+    background: ButtonFace;
+  }
 
-.block-search-wide__button {
-    background: ButtonFace
-}
-
-    .block-search-wide__button path {
-      fill: ButtonText;
-    }
+  .block-search-wide__button path {
+    fill: ButtonText;
   }
+}
 
 /* Provide rudimentary access to site search if JS is disabled. */
 
@@ -410,25 +265,24 @@ html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
   background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
   background-repeat: no-repeat;
   background-position: bottom left; /* LTR */
-  background-size: 0% 0.625rem
+  background-size: 0% 0.625rem;
 }
 
 [dir] .block-search-wide__wrapper input[type="search"]:focus {
-    background-size: 100% var(--sp0-5);
-  }
+  background-size: 100% var(--sp0-5);
+}
 
 [dir="rtl"] .block-search-wide__wrapper input[type="search"] {
-    background-position: bottom right;
-  }
+  background-position: bottom right;
+}
 
 [dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
-    transform-origin: right;
-  }
+  transform-origin: right;
+}
 
 @media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
+  body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
   body:not(.is-always-mobile-nav) .block-search-wide__button {
-      display: block
+    display: block;
   }
-    }
+}

css/components/header-site-branding.css

@@ -10,95 +10,46 @@
  * Site branding in header.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .site-branding {
-  margin-left: calc(var(--container-padding)*-1);
-  margin-right: var(--sp)
-}
-
-[dir="rtl"] .site-branding {
-  margin-right: calc(var(--container-padding)*-1);
-  margin-left: var(--sp)
-}
-
-[dir="ltr"] .site-branding {
-  padding-left: var(--container-padding)
-}
-
-[dir="rtl"] .site-branding {
-  padding-right: var(--container-padding)
-}
-
-[dir="ltr"] .site-branding {
-  padding-right: var(--container-padding)
-}
-
-[dir="rtl"] .site-branding {
-  padding-left: var(--container-padding)
-}
-
 .site-branding {
   display: flex;
   flex-shrink: 1;
   align-items: flex-end;
-  min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
-  min-height: var(--sp3); /* Negative margin to break out of .container element. */
-  padding-top: 0;
-  padding-bottom: var(--sp0-5);
-  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%)
+  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
+  min-height: var(--sp3);
+  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
+  padding-block: 0 var(--sp0-5);
+  padding-inline-start: var(--container-padding);
+  padding-inline-end: var(--container-padding);
+  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
 }
 
 @media (min-width: 31.25rem) {
-
-.site-branding {
-    min-height: var(--sp4)
-}
+  .site-branding {
+    min-height: var(--sp4);
   }
+}
 
 @media (min-width: 43.75rem) {
-
-.site-branding {
-    min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
+  .site-branding {
+    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
     min-height: var(--sp6);
-    padding-bottom: var(--sp)
-}
+    padding-block-end: var(--sp);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.site-branding {
-    min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
-}
+  .site-branding {
+    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] .site-branding {
-    margin-left: calc(var(--container-padding)*-1)
-  }
-
-[dir="rtl"] .site-branding {
-    margin-right: calc(var(--container-padding)*-1)
-  }
-
-.site-branding {
+  .site-branding {
     min-height: var(--site-header-height-wide);
-    padding-top: 0;
-    padding-bottom: 0
-}
+    margin-inline-start: calc(-1 * var(--container-padding));
+    padding-block: 0;
   }
+}
 
 [dir="rtl"] .site-branding {
   background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -114,106 +65,82 @@
 
 .site-branding__inner {
   display: flex;
-  align-items: center
+  align-items: center;
 }
 
 .site-branding__inner a {
-    text-decoration: none;
-  }
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] .site-branding__inner {
-    padding-left: 0
-  }
-
-[dir="rtl"] .site-branding__inner {
-    padding-right: 0
-  }
-
-[dir="ltr"] .site-branding__inner {
-    padding-right: 0
-  }
-
-[dir="rtl"] .site-branding__inner {
-    padding-left: 0
-  }
-
-.site-branding__inner {
+  .site-branding__inner {
     height: var(--header-height-wide-when-fixed);
-    padding-top: var(--sp0-5);
-    padding-bottom: var(--sp0-5)
-}
+    padding-block: var(--sp0-5);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
+}
 
 .site-branding__logo {
   flex-shrink: 0;
-  max-width: 100%
+  max-width: 100%;
 }
 
 .site-branding__logo img {
-    width: auto;
-    max-width: 100%;
-    max-height: var(--sp2)
-  }
+  width: auto;
+  max-width: 100%;
+  max-height: var(--sp2);
+}
 
 @media (min-width: 31.25rem) {
-
-.site-branding__logo img {
-      max-height: var(--sp3)
+  .site-branding__logo img {
+    max-height: var(--sp3);
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-.site-branding__logo img {
-      max-height: var(--sp4)
+  .site-branding__logo img {
+    max-height: var(--sp4);
   }
-    }
+}
 
 @media (min-width: 75rem) {
-
-.site-branding__logo img {
-      max-height: calc(var(--header-height-wide-when-fixed) - var(--sp))
+  .site-branding__logo img {
+    max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
   }
-    }
+}
 
 .site-branding__text {
   color: var(--color--white);
   font-size: 1.125rem;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .site-branding__text a {
-    color: inherit;
-  }
+  color: inherit;
+}
 
 @media (min-width: 43.75rem) {
-
-.site-branding__text {
+  .site-branding__text {
     font-size: 1.75rem;
-    line-height: 1.75rem
-}
+    line-height: 1.75rem;
   }
+}
 
 @media (min-width: 75rem) {
-
-.site-branding__text {
+  .site-branding__text {
     letter-spacing: 0.02em;
     font-size: 2rem;
-    line-height: var(--sp2)
-}
+    line-height: var(--sp2);
   }
+}
 
 .site-branding--bg-gray .site-branding__text,
 .site-branding--bg-white .site-branding__text {
   color: var(--color--primary-50);
 }
 
-[dir="ltr"] .site-branding__logo + .site-branding__text {
-  margin-left: 0.75rem
-}
-
-[dir="rtl"] .site-branding__logo + .site-branding__text {
-  margin-right: 0.75rem
+.site-branding__logo + .site-branding__text {
+  margin-inline-start: 0.75rem;
 }

css/components/header-sticky-toggle.css

@@ -13,26 +13,12 @@
  * toggles fixing the header to the top of the viewport.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .sticky-header-toggle {
-  display: none
+  display: none;
 }
 
 @media (min-width: 75rem) {
-
-.sticky-header-toggle {
+  .sticky-header-toggle {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -43,31 +29,29 @@
     opacity: 0;
     border: 0;
     outline: 0;
-    background-color: var(--color--primary-50)
-}
+    background-color: var(--color--primary-50);
+  }
 
-    .sticky-header-toggle:focus {
-      cursor: pointer;
-      pointer-events: auto;
-      opacity: 1;
-      outline: solid 2px var(--color--white);
-      outline-offset: -4px;
-    }
+  .sticky-header-toggle:focus {
+    cursor: pointer;
+    pointer-events: auto;
+    opacity: 1;
+    outline: solid 2px var(--color--white);
+    outline-offset: -4px;
   }
+}
 
 @media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
-    visibility: visible
-}
+  body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
+    visibility: visible;
   }
+}
 
 @media (min-width: 75rem) {
-
-body.is-always-mobile-nav .sticky-header-toggle {
-    visibility: hidden
-}
+  body.is-always-mobile-nav .sticky-header-toggle {
+    visibility: hidden;
   }
+}
 
 .sticky-header-toggle__icon {
   --icon-bar-height: 0.1875rem;
@@ -77,21 +61,21 @@ body.is-always-mobile-nav .sticky-header-toggle {
   flex-direction: column;
   justify-content: space-between;
   width: var(--sp2);
-  height: calc(var(--icon-bar-height)*3 + var(--icon-bar-space)*2);
+  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
   /* Height = 3 bars + 2 spaces */
   transition: opacity 0.2s;
   pointer-events: none;
-  transform-style: preserve-3d
+  transform-style: preserve-3d;
 }
 
 .sticky-header-toggle__icon > span {
-    display: block;
-    width: 100%;
-    height: var(--icon-bar-height);
-    transition: transform 0.2s;
-    transform-origin: center;
-    background-color: var(--color--white);
-  }
+  display: block;
+  width: 100%;
+  height: var(--icon-bar-height);
+  transition: transform 0.2s;
+  transform-origin: center;
+  background-color: var(--color--white);
+}
 
 .is-fixed .sticky-header-toggle {
   cursor: pointer;
@@ -100,13 +84,13 @@ body.is-always-mobile-nav .sticky-header-toggle {
 }
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
-    transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
-  }
+  transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
+}
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
-    opacity: 0;
-  }
+  opacity: 0;
+}
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
-    transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
-  }
+  transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
+}

css/components/hero.css

@@ -10,79 +10,50 @@
  * Main Hero.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .hero__content {
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 6;
-  grid-column: 1 / 7
+  grid-column: 1 / 7;
 }
 
 @media (min-width: 43.75rem) {
-
-.hero__content { /* 700px */
-    -ms-grid-column: 3;
-    -ms-grid-column-span: 10;
-    grid-column: 3 / 13
-}
+  .hero__content {
+    /* 700px */
+    grid-column: 3 / 13;
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.hero__content {
-    -ms-grid-column: 3;
-    -ms-grid-column-span: 8;
-    grid-column: 3 / 11
-}
+  .hero__content {
+    grid-column: 3 / 11;
   }
+}
 
 .hero__img {
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 6;
   grid-column: 1 / 7;
-  margin-top: var(--sp2);
-  margin-bottom: var(--sp2)
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
 }
 
 .hero__img img {
-    width: 100%;
-  }
+  width: 100%;
+}
 
 @media (min-width: 31.25rem) {
-
-.hero__img {
-    margin-top: var(--sp3);
-    margin-bottom: var(--sp3)
-}
+  .hero__img {
+    margin-block-start: var(--sp3);
+    margin-block-end: var(--sp3);
   }
+}
 
 @media (min-width: 43.75rem) {
-
-.hero__img {
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 14;
+  .hero__img {
     grid-column: 1 / 15;
-    margin-top: var(--sp4);
-    margin-bottom: var(--sp4)
-}
+    margin-block-start: var(--sp4);
+    margin-block-end: var(--sp4);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.hero__img {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 12;
-    grid-column: 2 / 14
-}
+  .hero__img {
+    grid-column: 2 / 14;
   }
+}

css/components/links.css

@@ -10,68 +10,24 @@
  * Links component.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .links.inline {
-  margin-left: 0
-}
-
-[dir="rtl"] .links.inline {
-  margin-right: 0
-}
-
-[dir="ltr"] .links.inline {
-  padding-left: 0
-}
-
-[dir="rtl"] .links.inline {
-  padding-right: 0
-}
-
-[dir="ltr"] .links.inline {
-  padding-right: 0
-}
-
-[dir="rtl"] .links.inline {
-  padding-left: 0
-}
-
 .links.inline {
-  padding-top: 0;
-  padding-bottom: 0;
-  list-style: none
+  margin-inline-start: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
 }
 
 .links.inline > * {
-    display: inline
-  }
-
-[dir="ltr"] .links.inline > *:not(:last-child) {
-      padding-right: 1em
+  display: inline;
 }
 
-[dir="rtl"] .links.inline > *:not(:last-child) {
-      padding-left: 1em
+.links.inline > *:not(:last-child) {
+  padding-inline-end: 1em;
 }
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .node--type-book .links.inline {
-    text-align: right
-  }
-
-[dir="rtl"] .node--type-book .links.inline {
-    text-align: left
-  }
+  .node--type-book .links.inline {
+    text-align: end;
   }
+}

css/components/maintenance-page.css

@@ -10,37 +10,22 @@
  * Maintenance page.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 @media (min-width: 75rem) {
-
-.maintenance-page .site-header__initial {
-      flex-shrink: 0;
-      width: var(--content-left)
+  .maintenance-page .site-header__initial {
+    flex-shrink: 0;
+    width: var(--content-left);
   }
-    }
+}
 
 .maintenance-page .main-content {
-    min-height: 80vh;
-  }
+  min-height: 80vh;
+}
 
 .maintenance-page-icon {
   display: block;
-  margin-top: var(--sp3);
-  margin-bottom: var(--sp3)
+  margin-block: var(--sp3);
 }
 
 .maintenance-page-icon path {
-    fill: var(--color--primary-50);
-  }
+  fill: var(--color--primary-50);
+}

css/components/messages.css

@@ -10,231 +10,125 @@
  * Messages.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .messages-list {
-  padding-left: 0;
-}
-
-[dir="rtl"] .messages-list {
-  padding-right: 0;
-}
-
-[dir="ltr"] .messages-list {
-  padding-right: 0;
-}
-
-[dir="rtl"] .messages-list {
-  padding-left: 0;
+:root {
+  --messages-icon-size: 2rem;
 }
 
 .messages-list {
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp1);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: var(--sp1);
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
-[dir="ltr"] .messages {
-  padding-left: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
-  padding-right: var(--sp1-5);
-}
-
-[dir="ltr"] .messages {
-  padding-right: var(--sp1-5);
-}
-
-[dir="rtl"] .messages {
-  padding-left: var(--sp1-5);
-}
-
 .messages {
-  min-height: calc(2rem + var(--sp1)*2);
-  padding-top: var(--sp1);
-  padding-bottom: var(--sp1);
+  min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
+  padding-block: var(--sp1);
+  padding-inline-start: var(--sp1-5);
+  padding-inline-end: var(--sp1-5);
   color: var(--color--white);
   outline: solid 1px transparent;
-  background-color: var(--color--gray-5)
+  background-color: var(--color--gray-5);
 }
 
 .messages * {
-    color: inherit;
-  }
-
-.messages {
-
-  /* Additional specificity to override contrib modules. */
+  color: inherit;
 }
 
-.messages.messages-list__item {
-    background-image: none;
-  }
-
-[dir="ltr"] .messages__list {
-  margin-left: 0;
-}
-
-[dir="rtl"] .messages__list {
-  margin-right: 0;
-}
-
-[dir="ltr"] .messages__list {
-  margin-right: 0;
-}
-
-[dir="rtl"] .messages__list {
-  margin-left: 0;
-}
-
-[dir="ltr"] .messages__list {
-  padding-left: 0;
-}
+/* Additional specificity to override contrib modules. */
 
-[dir="rtl"] .messages__list {
-  padding-right: 0;
-}
-
-[dir="ltr"] .messages__list {
-  padding-right: 0;
-}
-
-[dir="rtl"] .messages__list {
-  padding-left: 0;
+.messages.messages-list__item {
+  background-image: none;
 }
 
 .messages__list {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
 .messages:not(.hidden) ~ .messages {
-  margin-top: var(--sp1);
+  margin-block-start: var(--sp1);
 }
 
 .messages__item + .messages__item {
-  margin-top: var(--sp0-5);
+  margin-block-start: var(--sp0-5);
 }
 
 .messages__container {
   display: flex;
 }
 
-[dir="ltr"] .messages__header {
-  margin-right: var(--sp1);
-}
-
-[dir="rtl"] .messages__header {
-  margin-left: var(--sp1);
-}
-
 .messages__header {
-  flex-shrink: 0
-}
-
-[dir="ltr"] .messages__header.no-icon {
-    margin-right: 0;
+  flex-shrink: 0;
+  margin-inline-end: var(--sp1);
 }
 
-[dir="rtl"] .messages__header.no-icon {
-    margin-left: 0;
+.messages__header.no-icon {
+  margin-inline-end: 0;
 }
 
 .messages__content {
   overflow: auto; /* Ensure large code blocks can be scrolled to. */
   flex: 1;
-  padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__button {
-  margin-left: var(--sp1);
-}
-
-[dir="rtl"] .messages__button {
-  margin-right: var(--sp1);
+  padding-block-start: 0.1875rem;
 }
 
 .messages__button {
   flex-shrink: 0;
-  padding-top: 0.1875rem;
-}
-
-[dir="ltr"] .messages__close {
-  padding-left: 0;
-}
-
-[dir="rtl"] .messages__close {
-  padding-right: 0;
-}
-
-[dir="ltr"] .messages__close {
-  padding-right: 0;
-}
-
-[dir="rtl"] .messages__close {
-  padding-left: 0;
+  margin-inline-start: var(--sp1);
+  padding-block-start: 0.1875rem;
 }
 
 .messages__close {
   position: relative;
   width: 1.5625rem;
   height: 1.5625rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   cursor: pointer;
   vertical-align: top;
   border: 0;
   background: none;
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
 .messages__close::before,
-  .messages__close::after {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: block;
-    width: 2.0625rem;
-    height: 0;
-    content: "";
-    border-top: solid 2px var(--color--gray-60);
-  }
+.messages__close::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 2.0625rem;
+  height: 0;
+  content: "";
+  border-top: solid 2px var(--color--gray-60);
+}
 
 .messages__close::before {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
+  transform: translate(-50%, -50%) rotate(45deg);
+}
 
 .messages__close::after {
-    transform: translate(-50%, -50%) rotate(-45deg);
-  }
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
 
 .messages__close:hover::before,
-    .messages__close:hover::after {
-      border-color: var(--color--white);
-    }
+.messages__close:hover::after {
+  border-color: var(--color--white);
+}
 
 .messages__close:focus {
-    outline: 2px solid var(--color--primary-60);
-    outline-offset: 2px;
-  }
+  outline: 2px solid var(--color--primary-60);
+  outline-offset: 2px;
+}
 
 .messages__icon svg {
   vertical-align: top;
@@ -264,14 +158,7 @@
   margin: 0;
 }
 
-[dir="ltr"] .js-form-managed-file .messages {
-  border-left: solid 6px var(--color--red);
-}
-
-[dir="rtl"] .js-form-managed-file .messages {
-  border-right: solid 6px var(--color--red);
-}
-
 .js-form-managed-file .messages {
-  margin-bottom: var(--sp1);
+  margin-block-end: var(--sp1);
+  border-inline-start: solid 0.375rem var(--color--red);
 }

css/components/navigation/menu-sidebar.css

@@ -10,90 +10,53 @@
  * Styles for menu placed in sidebar region.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .menu--sidebar {
-  list-style: none
+  list-style: none;
 }
 
 .menu--sidebar .menu {
-    list-style: none;
-  }
-
-.menu--sidebar .menu--level-1 {
-    margin: 0;
-  }
-
-[dir="ltr"] .menu--sidebar .menu__link {
-    padding-left: 0
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
-    padding-right: 0
+  list-style: none;
 }
 
-[dir="ltr"] .menu--sidebar .menu__link {
-    padding-right: 0
-}
-
-[dir="rtl"] .menu--sidebar .menu__link {
-    padding-left: 0
+.menu--sidebar .menu--level-1 {
+  margin: 0;
 }
 
 .menu--sidebar .menu__link {
-    position: relative;
-    display: block;
-    padding-top: var(--sp0-75);
-    padding-bottom: var(--sp0-75);
-    font-family: var(--font-serif);
-    font-size: 1.125rem
-
-    /* Bottom divider line. */
-  }
-
-[dir="ltr"] .menu--sidebar .menu__link::after {
-      left: 0
-}
+  position: relative;
+  display: block;
+  padding-block: var(--sp0-75);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
 
-[dir="rtl"] .menu--sidebar .menu__link::after {
-      right: 0
+  /* Bottom divider line. */
 }
 
 .menu--sidebar .menu__link::after {
-      position: absolute;
-      bottom: 0;
-      width: var(--sp4);
-      height: 0;
-      content: "";
-      border-top: solid 2px var(--color--gray-95);
-    }
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: var(--sp4);
+  height: 0;
+  content: "";
+  border-block-start: solid 2px var(--color--gray-95);
+}
 
 .menu--sidebar .menu__link--link {
-    text-decoration: none;
-    color: var(--color-text-neutral-loud);
-    font-weight: 600
-  }
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-neutral-loud);
+  font-weight: 600;
+}
 
 .menu--sidebar .menu__link--link:hover {
-      color: var(--color--primary-50);
-    }
+  color: var(--color--primary-50);
+}
 
-.menu--sidebar {
+/* No bottom divider line for last menu item. */
 
-  /* No bottom divider line for last menu item. */
+:is(.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child)::after {
+  content: none;
 }
-
-.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child::after, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child::after {
-      content: none;
-    }

css/components/navigation/nav-button-mobile.css

@@ -10,92 +10,41 @@
  * Nav Button Mobile.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .mobile-nav-button {
-  margin-left: auto
-}
-
-[dir="rtl"] .mobile-nav-button {
-  margin-right: auto
-}
-
-[dir="ltr"] .mobile-nav-button {
-  margin-right: -0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
-  margin-left: -0.375rem
-}
-
-[dir="ltr"] .mobile-nav-button {
-  padding-left: 0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
-  padding-right: 0.375rem
-}
-
-[dir="ltr"] .mobile-nav-button {
-  padding-right: 0.375rem
-}
-
-[dir="rtl"] .mobile-nav-button {
-  padding-left: 0.375rem
-}
-
 .mobile-nav-button {
   position: relative;
   z-index: 505; /* Appear above mobile nav. */
   display: flex;
   align-items: center;
-  -ms-grid-row-align: center;
   align-self: center;
   width: var(--sp2);
   height: var(--sp2);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-inline-start: auto;
+  margin-inline-end: -0.375rem;
+  padding-block: 0;
+  padding-inline-start: 0.375rem;
+  padding-inline-end: 0.375rem;
   cursor: pointer;
   border: none;
   background: transparent;
   -webkit-appearance: none;
-  appearance: none
+  appearance: none;
 }
 
 .mobile-nav-button:focus {
-    outline: solid 2px var(--color--primary-40);
-  }
+  outline: solid 2px var(--color--primary-40);
+}
 
 .mobile-nav-button:active {
-    color: inherit; /* Override Safari's default UA styles. */
-  }
+  color: inherit; /* Override Safari's default UA styles. */
+}
 
 @media (min-width: 31.25rem) {
-
-[dir="ltr"] .mobile-nav-button {
-    padding-left: var(--sp)
-  }
-
-[dir="rtl"] .mobile-nav-button {
-    padding-right: var(--sp)
-  }
-
-.mobile-nav-button {
+  .mobile-nav-button {
     display: inline-flex;
-    width: auto
-}
+    width: auto;
+    padding-inline-start: var(--sp);
   }
+}
 
 /* Text that says "menu". */
 
@@ -106,76 +55,59 @@
   clip: rect(1px, 1px, 1px, 1px);
   width: 1px;
   height: 1px;
-  word-wrap: normal
+  word-wrap: normal;
 }
 
 @media (min-width: 31.25rem) {
-
-[dir="ltr"] .mobile-nav-button__label {
-    margin-right: 0.75rem
-  }
-
-[dir="rtl"] .mobile-nav-button__label {
-    margin-left: 0.75rem
-  }
-
-.mobile-nav-button__label {
+  .mobile-nav-button__label {
     position: static;
     overflow: visible;
     clip: auto;
     width: auto;
     height: auto;
+    margin-inline-end: 0.75rem;
     letter-spacing: 0.05em;
     font-size: 0.875rem;
-    font-weight: 600
-}
+    font-weight: 600;
   }
+}
 
 .mobile-nav-button__icon {
   position: relative;
   display: block;
   width: var(--sp2);
   height: 0;
-  border-top: solid 3px var(--color--primary-50)
-}
-
-[dir="ltr"] .mobile-nav-button__icon::before,[dir="ltr"] 
-  .mobile-nav-button__icon::after {
-    left: 0
-}
-
-[dir="rtl"] .mobile-nav-button__icon::before,[dir="rtl"] 
-  .mobile-nav-button__icon::after {
-    right: 0
+  border-top: solid 3px var(--color--primary-50);
 }
 
 .mobile-nav-button__icon::before,
-  .mobile-nav-button__icon::after {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 0;
-    content: "";
-    transition: transform 0.2s;
-    border-top: solid 3px var(--color--primary-50);
-  }
+.mobile-nav-button__icon::after {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  border-top: solid 3px var(--color--primary-50);
+}
 
 .mobile-nav-button__icon::before {
-    transform: translateY(-0.6875rem);
-  }
+  transform: translateY(-0.6875rem);
+}
 
 .mobile-nav-button__icon::after {
-    transform: translateY(0.3125rem);
-  }
+  transform: translateY(0.3125rem);
+}
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
-  border-top-color: transparent
+  border-top-color: transparent;
 }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {
-    transform: translateY(-0.1875rem) rotate(-45deg);
-  }
+  transform: translateY(-0.1875rem) rotate(-45deg);
+}
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
-    transform: translateY(-0.1875rem) rotate(45deg);
-  }
+  transform: translateY(-0.1875rem) rotate(45deg);
+}

css/components/navigation/nav-primary-button.css

@@ -10,170 +10,126 @@
  * Button that expands second level nav when clicked.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .primary-nav__button-toggle {
-  padding-left: 0
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
-  padding-right: 0
-}
-
-[dir="ltr"] .primary-nav__button-toggle {
-  padding-right: 0
-}
-
-[dir="rtl"] .primary-nav__button-toggle {
-  padding-left: 0
-}
-
 .primary-nav__button-toggle {
   position: relative;
   overflow: hidden;
   width: var(--sp2);
   height: var(--sp2);
-  margin-top: var(--sp0-5); /* Visually align button with menu link text. */
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   cursor: pointer;
   text-indent: -62.4375rem;
   border: 0;
   background: transparent;
-  -webkit-appearance: none
+  -webkit-appearance: none;
 }
 
 .primary-nav__button-toggle:focus {
-    outline: auto 2px var(--color--primary-50);
-    outline-offset: 2px;
-  }
+  outline: auto 2px var(--color--primary-50);
+  outline-offset: 2px;
+}
 
 .primary-nav__button-toggle .icon--menu-toggle {
-    position: absolute;
-    /* stylelint-disable csstools/use-logical */
-    top: 50%;
-    left: 50%;
-    /* stylelint-enable csstools/use-logical */
-    width: 1rem;
-    height: 1rem;
-    transition: background-color 0.2s;
-    transform: translate(-50%, -50%);
-    border-radius: 2px
-  }
+  position: absolute;
+  /* stylelint-disable csstools/use-logical */
+  top: 50%;
+  left: 50%;
+  /* stylelint-enable csstools/use-logical */
+  width: 1rem;
+  height: 1rem;
+  transition: background-color 0.2s;
+  transform: translate(-50%, -50%);
+  border-radius: 2px;
+}
 
 .primary-nav__button-toggle .icon--menu-toggle::before,
-    .primary-nav__button-toggle .icon--menu-toggle::after {
-      position: absolute;
-      /* stylelint-disable csstools/use-logical */
-      top: 50%;
-      left: 50%;
-      /* stylelint-enable csstools/use-logical */
-      width: var(--sp);
-      height: 0;
-      content: "";
-      transform: translate(-50%, -50%);
-      /* Intentionally not using CSS logical properties. */
-      border-top: solid 3px var(--color--primary-50);
-    }
+.primary-nav__button-toggle .icon--menu-toggle::after {
+  position: absolute;
+  /* stylelint-disable csstools/use-logical */
+  top: 50%;
+  left: 50%;
+  /* stylelint-enable csstools/use-logical */
+  width: var(--sp);
+  height: 0;
+  content: "";
+  transform: translate(-50%, -50%);
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 3px var(--color--primary-50);
+}
 
 .primary-nav__button-toggle .icon--menu-toggle::after {
-      transition: opacity 0.2s;
-      transform: translate(-50%, -50%) rotate(90deg);
-    }
+  transition: opacity 0.2s;
+  transform: translate(-50%, -50%) rotate(90deg);
+}
 
 .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
-    opacity: 0;
-  }
-
-.primary-nav__button-toggle {
+  opacity: 0;
+}
 
-  /* aria-hidden attribute is removed by JS. Button is non-functional
+/* aria-hidden attribute is removed by JS. Button is non-functional
      until JS is enabled.
   */
-}
 
 .primary-nav__button-toggle[aria-hidden="true"] {
-    pointer-events: none;
-  }
+  pointer-events: none;
+}
 
 @media (min-width: 75rem) {
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
-      margin-right: calc(var(--sp2)*-1)
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
+    flex-shrink: 0;
+    align-self: stretch;
+    width: calc(var(--sp2) + 0.5rem);
+    height: auto;
+    margin-block-start: 0;
+    margin-inline-end: calc(-1 * var(--sp2));
   }
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
-      margin-left: calc(var(--sp2)*-1)
+
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
+    border: 0;
+    outline: 0;
   }
-    body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
-      flex-shrink: 0;
-      -ms-grid-row-align: stretch;
-      align-self: stretch;
-      width: calc(var(--sp2) + 0.5rem);
-      height: auto;
-      margin-top: 0
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
-        border: 0;
-        outline: 0
-      }
-
-        body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
-          border: solid 2px var(--color--primary-40);
-        }
-
-      body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
-        /* Necessary for Safari. */
-        color: currentColor;
-      }
-
-      body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
-        opacity: 0.8;
-      }
-
-      [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
-        left: 0.1875rem
+
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
+    border: solid 2px var(--color--primary-40);
+  }
+
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
+    /* Necessary for Safari. */
+    color: currentColor;
+  }
+
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after {
+    opacity: 0.8;
   }
 
-      [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
-        right: 0.1875rem
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
+    inset-inline-start: 0.1875rem;
+    width: 1.125rem;
+    transform: translateY(-50%);
+    border-radius: 0.25rem;
+    background-color: var(--color--white);
   }
 
-      body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
-        width: 1.125rem;
-        transform: translateY(-50%);
-        border-radius: 0.25rem;
-        background-color: var(--color--white)
-      }
-
-        body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before {
-          content: none;
-        }
-
-        body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after {
-          /* stylelint-disable csstools/use-logical */
-          top: calc(50% - 2px);
-          left: 0.1875rem;
-          /* stylelint-enable csstools/use-logical */
-          width: 0.5rem;
-          height: 0.5rem;
-          content: "";
-          transform: translateY(-50%) rotate(45deg);
-          opacity: 0.8;
-          /* Intentionally not using CSS logical properties. */
-          border-top: none;
-          border-right: solid 2px currentColor;
-          border-bottom: solid 2px currentColor;
-          background: transparent;
-        }
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before {
+    content: none;
   }
+
+  body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after {
+    /* stylelint-disable csstools/use-logical */
+    top: calc(50% - 2px);
+    left: 0.1875rem;
+    /* stylelint-enable csstools/use-logical */
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+    transform: translateY(-50%) rotate(45deg);
+    opacity: 0.8;
+    /* Intentionally not using CSS logical properties. */
+    border-top: none;
+    border-right: solid 2px currentColor;
+    border-bottom: solid 2px currentColor;
+    background: transparent;
+  }
+}

css/components/navigation/nav-primary-no-js.css

@@ -10,219 +10,139 @@
  * Styles for primary navigation when JavaScript is disabled.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
+:root {
+  --no-js-nav-column-width: 18.75rem;
+  --no-js-nav-column-gap: var(--sp2);
+}
 
-html:not(.js) {
-  /**
+/**
    * Mobile styles for primary navigation when JS is disabled.
    */
-}
 
 @media (max-width: 75rem) {
-    html:not(.js) .primary-nav__menu--level-1 {
-      column-width: 18.75rem;
-      grid-column-gap: var(--sp2);
-    }
-
-    html:not(.js) .primary-nav__menu-item {
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
-
-    html:not(.js) .site-header__inner__container {
-      flex-wrap: wrap;
-    }
-
-    html:not(.js) .mobile-buttons {
-      display: none;
-    }
-
-    html[dir="ltr"]:not(.js) .header-nav {
-      margin-left: var(--sp2);
-  }
-
-    html[dir="rtl"]:not(.js) .header-nav {
-      margin-right: var(--sp2);
+  html:not(.js) .primary-nav__menu--level-1 {
+    column-width: var(--no-js-nav-column-width);
+    column-gap: var(--no-js-nav-column-gap);
   }
 
-    html[dir="ltr"]:not(.js) .header-nav {
-      margin-right: var(--sp2);
+  html:not(.js) .primary-nav__menu-item {
+    page-break-inside: avoid;
+    break-inside: avoid;
   }
 
-    html[dir="rtl"]:not(.js) .header-nav {
-      margin-left: var(--sp2);
+  html:not(.js) .site-header__inner__container {
+    flex-wrap: wrap;
   }
 
-    html[dir="ltr"]:not(.js) .header-nav {
-      padding-left: var(--sp2);
+  html:not(.js) .mobile-buttons {
+    display: none;
   }
 
-    html[dir="rtl"]:not(.js) .header-nav {
-      padding-right: var(--sp2);
+  html:not(.js) .header-nav {
+    border: solid 1px var(--color--gray-95) !important;
   }
 
-    html[dir="ltr"]:not(.js) .header-nav {
-      padding-right: var(--sp2);
+  html:not(.js) .header-nav {
+    position: static;
+    visibility: visible;
+    flex-basis: 100%;
+    width: 100%;
+    max-width: none;
+    margin-block: var(--sp2) 0;
+    margin-inline-start: var(--sp2);
+    margin-inline-end: var(--sp2);
+    padding-block: var(--sp2) 0;
+    padding-inline-start: var(--sp2);
+    padding-inline-end: var(--sp2);
+    transform: none;
+    box-shadow: 0 0 36px var(--color--gray-90);
   }
 
-    html[dir="rtl"]:not(.js) .header-nav {
-      padding-left: var(--sp2);
+  html:not(.js) .primary-nav__menu--level-2 {
+    border-inline-start: 0;
   }
 
-    html:not(.js) .header-nav {
-      position: static;
-      visibility: visible;
-      flex-basis: 100%;
-      width: 100%;
-      max-width: none;
-      margin-top: var(--sp2);
-      margin-bottom: 0;
-      padding-top: var(--sp2);
-      padding-bottom: 0;
-      transform: none;
-      border: solid 1px var(--color--gray-95) !important;
-      box-shadow: 0 0 36px var(--color--gray-90);
-    }
-
-    html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
-      border-left: 0;
+  html:not(.js) .primary-nav__button-toggle {
+    display: none;
   }
-
-    html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {
-      border-right: 0;
-  }
-
-    html:not(.js) .primary-nav__button-toggle {
-      display: none;
-    }
-      html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
-      html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-        content: none;
-      }
+  html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
+  html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+    content: none;
   }
+}
 
 @media (min-width: 75rem) {
-
-html:not(.js) {
-    /**
+  /**
      * Styles for 'always on mobile navigation' when JS is disabled.
      */
-}
-      html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
-        column-width: 18.75rem;
-        grid-column-gap: var(--sp2);
-      }
-
-      html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
-        page-break-inside: avoid;
-        break-inside: avoid;
-      }
-
-      html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
-        flex-wrap: wrap;
-      }
-
-      html:not(.js) body.is-always-mobile-nav .mobile-buttons {
-        display: none;
-      }
-
-      html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
-        margin-left: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
+    column-width: var(--no-js-nav-column-width);
+    column-gap: var(--no-js-nav-column-gap);
   }
 
-      html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
-        margin-right: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
+    page-break-inside: avoid;
+    break-inside: avoid;
   }
 
-      html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
-        margin-right: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
+    flex-wrap: wrap;
   }
 
-      html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
-        margin-left: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .mobile-buttons {
+    display: none;
   }
 
-      html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
-        padding-left: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .header-nav {
+    border: solid 1px var(--color--gray-95) !important;
   }
 
-      html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
-        padding-right: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .header-nav {
+    position: static;
+    visibility: visible;
+    flex-basis: 100%;
+    width: 100%;
+    max-width: none;
+    margin-block: var(--sp2) 0;
+    margin-inline-start: var(--sp2);
+    margin-inline-end: var(--sp2);
+    padding-block: var(--sp2) 0;
+    padding-inline-start: var(--sp2);
+    padding-inline-end: var(--sp2);
+    transform: none;
+    box-shadow: 0 0 36px var(--color--gray-90);
   }
 
-      html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
-        padding-right: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
+    border-inline-start: 0;
   }
 
-      html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
-        padding-left: var(--sp2);
+  html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
+    display: none;
   }
-
-      html:not(.js) body.is-always-mobile-nav .header-nav {
-        position: static;
-        visibility: visible;
-        flex-basis: 100%;
-        width: 100%;
-        max-width: none;
-        margin-top: var(--sp2);
-        margin-bottom: 0;
-        padding-top: var(--sp2);
-        padding-bottom: 0;
-        transform: none;
-        border: solid 1px var(--color--gray-95) !important;
-        box-shadow: 0 0 36px var(--color--gray-90);
-      }
-
-      html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
-        border-left: 0;
+  html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
+  html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+    content: none;
   }
 
-      html[dir="rtl"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
-        border-right: 0;
-  }
-
-      html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
-        display: none;
-      }
-        html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
-        html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-          content: none;
-        }
-
-html:not(.js) {
-
-    /**
+  /**
      * Styles for traditional dropdown primary navigation when JS is disabled.
      */
-}
-        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
-        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
-          visibility: visible;
-          transform: translate(-50%, 0);
-          opacity: 1;
-        }
-    html:not(.js) body:not(.is-always-mobile-nav) {
-
-      /*
+  html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
+  html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
+    visibility: visible;
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
+
+  /*
        * Cannot combine the focus-within pseudo selector with other selectors,
        * because it will break IE11 and earlier versions of MS Edge.
        */
-    }
-        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
-        html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
-          visibility: visible;
-          transform: translate(-50%, 0);
-          opacity: 1;
-        }
+  html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
+  html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
+    visibility: visible;
+    transform: translate(-50%, 0);
+    opacity: 1;
   }
+}

css/components/navigation/nav-primary-wide.css

@@ -10,315 +10,203 @@
  * Nav Primary (wide widths).
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 @media (min-width: 75rem) {
-    body:not(.is-always-mobile-nav) .primary-nav__menu-item {
-      flex-wrap: nowrap /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
-    }
-        body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
-        body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
-          flex-basis: auto;
-        }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children {
-
-        /* Remove hover state if submenu exists. */
-      }
-        body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
-          content: none;
-        }
-
-    body:not(.is-always-mobile-nav) .primary-nav__menu-link {
-      letter-spacing: 0.02em;
-      font-size: 1rem;
-      line-height: var(--sp1-5)
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
-        position: relative;
-        outline: 0
-      }
-
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: calc(100% + var(--sp));
-          height: var(--sp3);
-          content: "";
-          transform: translate(-50%, -50%);
-          border: solid 2px var(--color--primary-50);
-          border-radius: 0.25rem;
-        }
-      [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-        padding-right: 0.5625rem;
-    }
-      [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-        padding-left: 0.5625rem;
-    }
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-        overflow: visible /* Necessary to view icon in IE11 */
-      }
-
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
-          width: calc(100% + var(--sp1-5));
-          content: "";
-        }
-
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
-          content: none;
-        }
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-
-        /* Chevron icon for desktop navigation. */
-      }
-        [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-          left: calc(100% - 0.1875rem);
-    }
-        [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-          right: calc(100% - 0.1875rem);
-    }
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-          position: absolute;
-          top: 50%;
-          width: 0.5rem;
-          height: 0.5rem;
-          margin-top: -2px;
-          transform: translateY(-50%) rotate(45deg);
-          /* Intentionally not using CSS logical properties. */
-          border-top: 0;
-          border-right: solid 2px currentColor;
-          border-bottom: solid 2px currentColor;
-        }
-
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
-          opacity: 1;
-        }
-
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
-      padding-left: 0;
-    }
-
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
-      padding-right: 0;
-    }
-
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
-      padding-right: 0;
-    }
-
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
-      padding-left: 0;
-    }
-
-    body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
-      padding-top: var(--sp2);
-      padding-bottom: var(--sp2)
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
-        transform-origin: center;
-        border-top-width: var(--sp0-5);
-      }
-
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
-      margin-right: var(--sp);
-    }
-
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
-      margin-left: var(--sp);
-    }
-
-    body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
-      display: flex;
-      align-items: stretch;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item {
+    flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
+  }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
+    flex-basis: auto;
+  }
 
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
-      margin-left: 0;
-    }
+  /* Remove hover state if submenu exists. */
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after {
+    content: none;
+  }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
-      margin-right: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link {
+    letter-spacing: 0.02em;
+    font-size: 1rem;
+    line-height: var(--sp1-5);
+  }
 
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
-      margin-right: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
+    position: relative;
+    outline: 0;
+  }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
-      margin-left: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(100% + var(--sp));
+    height: var(--sp3);
+    content: "";
+    transform: translate(-50%, -50%);
+    border: solid 2px var(--color--primary-50);
+    border-radius: 0.25rem;
+  }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+    overflow: visible; /* Necessary to view icon in IE11 */
+    padding-inline-end: 0.5625rem;
+  }
 
-    body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
-      position: relative; /* Anchor secondary menu */
-      display: flex;
-      align-items: center;
-      width: max-content;
-      max-width: 12.5rem;
-      margin-top: 0;
-      margin-bottom: 0
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before {
+    width: calc(100% + var(--sp1-5));
+    content: "";
+  }
 
-      [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
-        margin-right: var(--sp2);
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before {
+    content: none;
+  }
 
-      [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
-        margin-left: var(--sp2);
-    }
+  /* Chevron icon for desktop navigation. */
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: calc(100% - 0.1875rem);
+    width: 0.5rem;
+    height: 0.5rem;
+    margin-block-start: -2px;
+    transform: translateY(-50%) rotate(45deg);
+    /* Intentionally not using CSS logical properties. */
+    border-top: 0;
+    border-right: solid 2px currentColor;
+    border-bottom: solid 2px currentColor;
+  }
 
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      margin-left: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
+    opacity: 1;
+  }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      margin-right: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
+    padding-block: var(--sp2);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
 
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      padding-left: var(--sp2);
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after {
+    transform-origin: center;
+    border-top-width: var(--sp0-5);
+  }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      padding-right: var(--sp2);
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
+    display: flex;
+    align-items: stretch;
+    margin-inline-end: var(--sp);
+  }
 
-    [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      padding-right: var(--sp2);
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
+    position: relative; /* Anchor secondary menu */
+    display: flex;
+    align-items: center;
+    width: max-content;
+    max-width: 12.5rem;
+    margin-block: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      padding-left: var(--sp2);
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
+    margin-inline-end: var(--sp2);
+  }
 
-    body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
-      position: absolute;
-      z-index: 105; /* Appear above search container. */
-      top: calc(100% - var(--sp)*0.5);
-      left: 50%;
-      visibility: hidden;
-      overflow: auto;
-      width: 15.625rem;
-      /* Ensure that long level-2 menus will never overflow viewport (focused
+  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
+    position: absolute;
+    z-index: 105; /* Appear above search container. */
+    top: calc(100% - (0.5 * var(--sp)));
+    left: 50%;
+    visibility: hidden;
+    overflow: auto;
+    width: 15.625rem;
+    /* Ensure that long level-2 menus will never overflow viewport (focused
        * elements should always be in viewport per accessibility guidelines). */
-      max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
-      margin-top: 0;
-      padding-top: calc(var(--sp)*3);
-      padding-bottom: calc(var(--sp)*3);
-      transition: none;
-      transform: translate(-50%, -1.25rem);
-      opacity: 0;
-      /* Intentionally not using CSS logical properties. */
-      border-top: solid var(--color--primary-50) var(--sp0-5);
-      border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
-      border-bottom: solid 1px transparent;
-      border-left: solid 1px transparent;
-      border-radius: 0 0 2px 2px;
-      background: var(--color--white);
-      box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08)
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
-        visibility: visible;
-        margin-top: 0;
-        transform: translate(-50%, 0);
-        opacity: 1;
-      }
-
-    body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
-      display: block
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before {
-        top: 0;
-        left: calc(var(--sp0-5)*-1);
-        height: 100%;
-        transform: none;
-      }
-
-      [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
-        padding-left: 0;
-    }
-
-      [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
-        padding-right: 0;
-    }
+    max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp));
+    margin-block-start: 0;
+    margin-inline-start: 0;
+    padding-block: calc(3 * var(--sp));
+    padding-inline-start: var(--sp2);
+    padding-inline-end: var(--sp2);
+    transition: none;
+    transform: translate(-50%, -1.25rem);
+    opacity: 0;
+    /* Intentionally not using CSS logical properties. */
+    border-top: solid var(--color--primary-50) var(--sp0-5);
+    border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
+    border-bottom: solid 1px transparent;
+    border-left: solid 1px transparent;
+    border-radius: 0 0 2px 2px;
+    background: var(--color--white);
+    box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
+  }
 
-      [dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
-        padding-right: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
+    visibility: visible;
+    margin-block-start: 0;
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
 
-      [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
-        padding-left: 0;
-    }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
+    display: block;
+  }
 
-      body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
-        padding-top: var(--sp0-5);
-        padding-bottom: var(--sp0-5)
-      }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before {
+    top: 0;
+    left: calc(var(--sp0-5) * -1);
+    height: 100%;
+    transform: none;
+  }
 
-        body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
-          transform-origin: left; /* LTR */
-          border-top-width: 3px
-        }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
+    padding-block: var(--sp0-5);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
 
-          [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
-            transform-origin: right;
-          }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
+    transform-origin: left; /* LTR */
+    border-top-width: 3px;
+  }
 
-body:not(.is-always-mobile-nav) {
+  [dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after {
+    transform-origin: right;
+  }
 
-    /**
+  /**
      * Arrow is placed outside of submenu because the submenu has the
      * `overflow: hidden` CSS rule applied.
      */
-}
-    body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
-      position: absolute;
-      z-index: 105; /* Match level 2 menus. */
-      top: calc(100% - var(--sp));
-      left: 50%;
-      visibility: hidden;
-      width: 0;
-      height: 0;
-      transform: translate(-50%, -1.25rem);
-      opacity: 0;
-      /* Intentionally not using CSS logical properties. */
-      border-right: solid 10px transparent;
-      border-bottom: solid 10px var(--color--primary-50);
-      border-left: solid 10px transparent
-    }
-
-      body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
-        visibility: visible;
-        transform: translate(-50%, 0);
-        opacity: 1;
-      }
+  body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
+    position: absolute;
+    z-index: 105; /* Match level 2 menus. */
+    top: calc(100% - var(--sp));
+    left: 50%;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    transform: translate(-50%, -1.25rem);
+    opacity: 0;
+    /* Intentionally not using CSS logical properties. */
+    border-right: solid 10px transparent;
+    border-bottom: solid 10px var(--color--primary-50);
+    border-left: solid 10px transparent;
+  }
 
-body:not(.is-always-mobile-nav) {
+  body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
+    visibility: visible;
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
 
-    /**
+  /**
      * When ensuring that long menus don't overflow viewport, we can give a
      * little extra room when the toolbar is fixed (and is shorter).
      */
-}
-    body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
-      max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
-    }
+  body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
+    max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4));
   }
+}
 
 /*
  * Only apply transition styles to menu when JS is loaded. This
@@ -326,8 +214,8 @@ body:not(.is-always-mobile-nav) {
  */
 
 @media (min-width: 75rem) {
-    html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
-    html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
-      transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
-    }
+  html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
+  html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
+    transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
   }
+}

css/components/navigation/nav-primary.css

@@ -10,251 +10,134 @@
  * Nav Primary.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .primary-nav__menu {
   flex-wrap: wrap;
   list-style: none;
 }
 
 .primary-nav__menu-item {
-  margin-bottom: var(--sp0-5)
+  margin-block-end: var(--sp0-5);
 }
 
 .primary-nav__menu-item:last-child {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}
 
 .primary-nav__menu-item.primary-nav__menu-item--has-children {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between
-  }
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 
 .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
-    .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
-      /* Ensure that long text doesn't make the mobile expand button wrap. */
-      flex-basis: calc(100% - var(--sp3));
-    }
+.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
+  /* Ensure that long text doesn't make the mobile expand button wrap. */
+  flex-basis: calc(100% - var(--sp3));
+}
 
 .primary-nav__menu-link {
   flex-grow: 1;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-neutral-loud);
   font-size: 1.75rem;
   font-weight: bold;
-  line-height: var(--sp2)
+  line-height: var(--sp2);
 }
 
 .primary-nav__menu-link:hover {
-    color: inherit;
-  }
-
-.primary-nav__menu-link:focus {
-    outline: auto 2px var(--color--primary-50);
-    outline-offset: 2px;
-  }
-
-[dir="ltr"] .primary-nav__menu-link--nolink {
-  padding-left: 0;
+  color: inherit;
 }
 
-[dir="rtl"] .primary-nav__menu-link--nolink {
-  padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--nolink {
-  padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--nolink {
-  padding-left: 0;
+.primary-nav__menu-link:focus {
+  outline: auto 2px var(--color--primary-50);
+  outline-offset: 2px;
 }
 
 .primary-nav__menu-link--nolink {
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   color: var(--color-text-neutral-soft);
   font-weight: normal;
 }
 
-[dir="ltr"] .primary-nav__menu-link--button {
-  padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
-  padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
-  padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
-  padding-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu-link--button {
-  text-align: left;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button {
-  text-align: right;
-}
-
 .primary-nav__menu-link--button {
   position: relative;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   cursor: pointer;
+  text-align: start;
   border: 0;
-  background: transparent
+  background: transparent;
 
   /* Plus icon for mobile navigation. */
 }
 
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-    padding-right: var(--sp3);
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
-    padding-left: var(--sp3);
-}
-
-.primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */
-  }
-
-[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,[dir="ltr"] 
-    .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-      right: 0.5625rem;
-}
-
-[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,[dir="rtl"] 
-    .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-      left: 0.5625rem;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+  padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
 }
 
 .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
-    .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-      position: absolute;
-      top: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
-      width: 1.125rem;
-      height: 0;
-      content: "";
-      /* Intentionally not using CSS logical properties. */
-      border-top: solid 3px var(--color--primary-50);
-    }
-
 .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
-      transition: opacity 0.2s;
-      transform: rotate(90deg);
-    }
-
-.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
-      opacity: 0;
-    }
-
-[dir="ltr"] .primary-nav__menu-link-inner {
-  padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner {
-  padding-right: 0;
+  position: absolute;
+  inset-inline-end: 0.5625rem;
+  inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
+  width: 1.125rem;
+  height: 0;
+  content: "";
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 3px var(--color--primary-50);
 }
 
-[dir="ltr"] .primary-nav__menu-link-inner {
-  padding-right: 0;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+  transition: opacity 0.2s;
+  transform: rotate(90deg);
 }
 
-[dir="rtl"] .primary-nav__menu-link-inner {
-  padding-left: 0;
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
+  opacity: 0;
 }
 
 .primary-nav__menu-link-inner {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5)
-}
-
-[dir="ltr"] .primary-nav__menu-link-inner::after {
-    left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu-link-inner::after {
-    right: 0;
+  padding-block: var(--sp0-5);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 
 .primary-nav__menu-link-inner::after {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 0;
-    content: "";
-    transition: transform 0.2s;
-    transform: scaleX(0);
-    transform-origin: left;
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 5px var(--color--primary-50);
-  }
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left;
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 5px var(--color--primary-50);
+}
 
 .primary-nav__menu-link:hover .primary-nav__menu-link-inner::after {
-      transform: scaleX(1)
-  }
+  transform: scaleX(1);
+}
 
 /*
   Top level specific styles.
 */
 
-[dir="ltr"] .primary-nav__menu--level-1 {
-  margin-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
-  margin-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
-  margin-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
-  margin-left: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
-  padding-left: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
-  padding-right: 0;
-}
-
-[dir="ltr"] .primary-nav__menu--level-1 {
-  padding-right: 0;
-}
-
-[dir="rtl"] .primary-nav__menu--level-1 {
-  padding-left: 0;
-}
-
 .primary-nav__menu--level-1 {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 
 .primary-nav__menu-link--level-1 {
@@ -267,66 +150,32 @@
   Secondary menu specific styles.
 */
 
-[dir="ltr"] .primary-nav__menu--level-2 {
-  margin-left: calc(var(--sp)*-1);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
-  margin-right: calc(var(--sp)*-1);
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
-  padding-left: var(--sp2-5);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
-  padding-right: var(--sp2-5);
-}
-
-[dir="ltr"] .primary-nav__menu--level-2 {
-  border-left: solid var(--sp) var(--color--primary-50);
-}
-
-[dir="rtl"] .primary-nav__menu--level-2 {
-  border-right: solid var(--sp) var(--color--primary-50);
-}
-
 .primary-nav__menu--level-2 {
   visibility: hidden;
   overflow: hidden;
   flex-basis: 100%;
   max-height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: calc(-1 * var(--sp));
+  padding-inline-start: var(--sp2-5);
   transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
-  opacity: 0
+  opacity: 0;
+  border-inline-start: solid var(--sp) var(--color--primary-50);
 }
 
 .primary-nav__menu--level-2.is-active-menu-parent {
-    visibility: visible;
-    max-height: none;
-    margin-top: var(--sp1-5);
-    opacity: 1;
-  }
+  visibility: visible;
+  max-height: none;
+  margin-block-start: var(--sp1-5);
+  opacity: 1;
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .primary-nav__menu--level-2 {
-    margin-left: calc(var(--sp3)*-1);
-  }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
-    margin-right: calc(var(--sp3)*-1);
-  }
-
-[dir="ltr"] .primary-nav__menu--level-2 {
-    padding-left: var(--sp3);
-  }
-
-[dir="rtl"] .primary-nav__menu--level-2 {
-    padding-right: var(--sp3);
-  }
+  .primary-nav__menu--level-2 {
+    margin-inline-start: calc(-1 * var(--sp3));
+    padding-inline-start: var(--sp3);
   }
+}
 
 /*
  * Olives doesn't officially support nested tertiary submenus, but this
@@ -346,11 +195,11 @@
 }
 
 html:not(.js) .primary-nav__menu--level-2 {
-    visibility: visible;
-    max-height: none;
-    opacity: 1;
-  }
+  visibility: visible;
+  max-height: none;
+  opacity: 1;
+}
 
 [dir="rtl"] .primary-nav__menu-link-inner::after {
-      transform-origin: right;
-    }
+  transform-origin: right;
+}

css/components/navigation/nav-secondary.css

@@ -10,84 +10,36 @@
  * Secondary navigation styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .secondary-nav {
   letter-spacing: 0.02em;
   font-size: var(--font-size-s);
   font-weight: 600;
 }
 
-[dir="ltr"] .secondary-nav__menu {
-  margin-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
-  margin-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
-  margin-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
-  margin-left: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
-  padding-left: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
-  padding-right: 0;
-}
-
-[dir="ltr"] .secondary-nav__menu {
-  padding-right: 0;
-}
-
-[dir="rtl"] .secondary-nav__menu {
-  padding-left: 0;
-}
-
 .secondary-nav__menu {
   display: flex;
   align-items: center;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
 .secondary-nav__menu-item {
+  /* @todo should this be scoped to desktop nav? */
+  width: max-content;
+  max-width: 12.5rem;
   /* Parent element is set to flex-basis: 0. We
    * don't want text to wrap unless it goes over a
    * certain arbitrary width.
    */
-
-  /* @todo should this be scoped to desktop nav? */
-  width: max-content;
-  max-width: 12.5rem
-}
-
-[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
-    margin-right: var(--sp1-5);
 }
 
-[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
-    margin-left: var(--sp1-5);
+.secondary-nav__menu-item:not(:last-child) {
+  margin-inline-end: var(--sp1-5);
 }
 
 .secondary-nav__menu-link {
@@ -95,86 +47,66 @@
   display: inline-flex;
   align-items: center;
   height: var(--sp2);
+  -webkit-text-decoration: none;
   text-decoration: none;
-  color: inherit
+  color: inherit;
 }
 
 .secondary-nav__menu-link::after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 0;
-    content: "";
-    transition: opacity 0.2s, transform 0.2s;
-    transform: translateY(0.3125rem);
-    opacity: 0;
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 2px currentColor;
-  }
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: opacity 0.2s, transform 0.2s;
+  transform: translateY(0.3125rem);
+  opacity: 0;
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 2px currentColor;
+}
 
 .secondary-nav__menu-link:hover::after {
-      transform: translateY(0);
-      opacity: 0.8;
-    }
+  transform: translateY(0);
+  opacity: 0.8;
+}
 
 @media (min-width: 75rem) {
-    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
-      margin-left: var(--sp);
-  }
-    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
-      margin-right: var(--sp);
+  body:not(.is-always-mobile-nav) .secondary-nav {
+    position: relative;
+    display: flex;
+    margin-inline-start: var(--sp);
+    padding-inline-start: var(--sp2);
   }
-    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
-      padding-left: var(--sp2);
-  }
-    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
-      padding-right: var(--sp2);
-  }
-    body:not(.is-always-mobile-nav) .secondary-nav {
-      position: relative;
-      display: flex
-    }
 
-      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav::before {
-        left: 0;
+  body:not(.is-always-mobile-nav) .secondary-nav::before {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    width: 2px;
+    height: var(--sp2);
+    content: "";
+    transform: translateY(-50%);
+    background-color: var(--color--gray-90);
   }
 
-      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav::before {
-        right: 0;
+  body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
+    margin-inline-end: var(--sp2);
   }
-
-      body:not(.is-always-mobile-nav) .secondary-nav::before {
-        position: absolute;
-        top: 50%;
-        width: 2px;
-        height: var(--sp2);
-        content: "";
-        transform: translateY(-50%);
-        background-color: var(--color--gray-90);
-      }
-
-    [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
-      margin-right: var(--sp2);
+  body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
+    position: relative;
+    outline: 0;
   }
 
-    [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
-      margin-left: var(--sp2);
-  }
-      body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
-        position: relative;
-        outline: 0
-      }
-
-        body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: calc(100% + var(--sp));
-          height: var(--sp3);
-          content: "";
-          transform: translate(-50%, -50%);
-          border: solid 2px var(--color--primary-50);
-          border-radius: 0.25rem;
-        }
+  body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(100% + var(--sp));
+    height: var(--sp3);
+    content: "";
+    transform: translate(-50%, -50%);
+    border: solid 2px var(--color--primary-50);
+    border-radius: 0.25rem;
   }
+}

css/components/navigation/wide-nav-expand.css

@@ -10,26 +10,12 @@
  * Button which expands the navigation at wide viewport widths.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .wide-nav-expand {
-  display: none
+  display: none;
 }
 
 @media (min-width: 75rem) {
-
-.wide-nav-expand {
+  .wide-nav-expand {
     display: flex;
     visibility: hidden;
     flex-shrink: 0;
@@ -41,28 +27,26 @@
     pointer-events: auto;
     color: var(--color--white);
     border: 0;
-    background-color: var(--color--primary-50)
-}
+    background-color: var(--color--primary-50);
+  }
 
-    .wide-nav-expand:focus {
-      outline: solid 2px currentColor;
-      outline-offset: -4px;
-    }
+  .wide-nav-expand:focus {
+    outline: solid 2px currentColor;
+    outline-offset: -4px;
   }
+}
 
 @media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
-    visibility: visible
-}
+  body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
+    visibility: visible;
   }
+}
 
 @media (min-width: 75rem) {
-
-body.is-always-mobile-nav .wide-nav-expand {
-    visibility: hidden
-}
+  body.is-always-mobile-nav .wide-nav-expand {
+    visibility: hidden;
   }
+}
 
 .wide-nav-expand__icon {
   position: relative;
@@ -71,82 +55,60 @@ body.is-always-mobile-nav .wide-nav-expand {
   transition: opacity 0.2s;
   pointer-events: none;
   opacity: 0;
-  transform-style: preserve-3d
+  transform-style: preserve-3d;
 }
 
 .wide-nav-expand__icon > span {
-    display: block;
-    height: 0;
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 3px currentColor
-  }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
-      left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
-      right: 0
+  display: block;
+  height: 0;
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 3px currentColor;
 }
 
 .wide-nav-expand__icon > span:nth-child(1) {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 0;
-      transition: transform 0.2s;
-      background-color: currentColor;
-    }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
-      left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
-      right: 0
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  transition: transform 0.2s;
+  background-color: currentColor;
 }
 
 .wide-nav-expand__icon > span:nth-child(2) {
-      position: absolute;
-      top: 0.5625rem;
-      width: 100%;
-      height: 0;
-      transition: opacity 0.2s;
-      background-color: currentColor;
-    }
-
-[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
-      left: 0
-}
-
-[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
-      right: 0
+  position: absolute;
+  inset-block-start: 0.5625rem;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  transition: opacity 0.2s;
+  background-color: currentColor;
 }
 
 .wide-nav-expand__icon > span:nth-child(3) {
-      position: absolute;
-      top: auto;
-      bottom: 0;
-      width: 100%;
-      height: 0;
-      transition: transform 0.2s;
-      background-color: currentColor;
-    }
+  position: absolute;
+  inset-block: auto 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  transition: transform 0.2s;
+  background-color: currentColor;
+}
 
 .is-fixed .wide-nav-expand__icon {
   opacity: 1;
 }
 
 [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
-    top: 0.5625rem;
-    transform: rotate(-45deg);
-  }
+  inset-block-start: 0.5625rem;
+  transform: rotate(-45deg);
+}
 
 [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
-    opacity: 0;
-  }
+  opacity: 0;
+}
 
 [aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
-    top: 0.5625rem;
-    transform: rotate(45deg);
-  }
+  inset-block-start: 0.5625rem;
+  transform: rotate(45deg);
+}

css/components/node-preview-container.css

@@ -10,38 +10,10 @@
  * Node preview container styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .node-preview-container {
-  padding-left: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
-  padding-right: var(--sp0-5);
-}
-
-[dir="ltr"] .node-preview-container {
-  padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .node-preview-container {
-  padding-left: var(--sp0-5);
-}
-
 .node-preview-container {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
+  padding-inline-start: var(--sp0-5);
+  padding-inline-end: var(--sp0-5);
   background: var(--color--white);
   box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
 }
@@ -60,23 +32,8 @@
   align-items: center;
 }
 
-[dir="ltr"] .node-preview-backlink {
-  margin-left: 0;
-}
-
-[dir="rtl"] .node-preview-backlink {
-  margin-right: 0;
-}
-
-[dir="ltr"] .node-preview-backlink {
-  margin-right: auto;
-}
-
-[dir="rtl"] .node-preview-backlink {
-  margin-left: auto;
-}
-
 .node-preview-backlink {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp0-5);
+  margin-inline-start: 0;
+  margin-inline-end: auto;
 }

css/components/node-teaser.css

@@ -10,191 +10,127 @@
  * Node Teaser specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .node--view-mode-teaser {
   position: relative; /* Anchor after pseudo-element. */
-  margin-bottom: var(--sp1-5)
+  margin-block-end: var(--sp1-5);
 }
 
 .node--view-mode-teaser::after {
-    position: absolute;
-    bottom: 0;
-    width: var(--sp3);
-    height: 0;
-    content: "";
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 2px var(--color--gray-95);
-  }
+  position: absolute;
+  inset-block-end: 0;
+  width: var(--sp3);
+  height: 0;
+  content: "";
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 2px var(--color--gray-95);
+}
 
 .node--view-mode-teaser .node__meta {
-    margin-bottom: var(--sp)
-  }
+  margin-block-end: var(--sp);
+}
 
 .node--view-mode-teaser .node__meta a {
-      color: var(--color-text-primary-medium);
-      font-weight: bold;
-    }
+  color: var(--color-text-primary-medium);
+  font-weight: bold;
+}
 
 .node--view-mode-teaser .node__top-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin: 0
-  }
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .node__top-wrapper {
-      position: relative /* Anchor the image */
+  .node--view-mode-teaser .node__top-wrapper {
+    position: relative; /* Anchor the image */
   }
-    }
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
-    margin-right: var(--sp1)
-}
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
-    margin-left: var(--sp1)
 }
 
 .node--view-mode-teaser .primary-image {
-    flex-shrink: 0;
-    margin: 0;
-    margin-bottom: var(--sp1)
+  flex-shrink: 0;
+  margin: 0;
+  margin-block-end: var(--sp1);
+  margin-inline-end: var(--sp1);
 
-    /* Ensure title does not wrap under image until necessary. */
-  }
+  /* Ensure title does not wrap under image until necessary. */
+}
 
-.node--view-mode-teaser .primary-image + .node__title {
-      flex-basis: calc(100% - var(--sp)*4.5)
-    }
+:is(.node--view-mode-teaser .primary-image) + .node__title {
+  flex-basis: calc(100% - calc(4.5 * var(--sp)));
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .primary-image + .node__title {
-        flex-basis: auto
-    }
-      }
+  :is(.node--view-mode-teaser .primary-image) + .node__title {
+    flex-basis: auto;
+  }
+}
 
 .node--view-mode-teaser .primary-image a {
-      display: block;
-    }
-
-.node--view-mode-teaser .primary-image img {
-      width: calc(var(--sp)*3.5);
-      height: calc(var(--sp)*3.5);
-      -o-object-fit: cover;
-      object-fit: cover;
-      border-radius: 50%
-    }
-
-@media (min-width: 62.5rem) {
+  display: block;
+}
 
 .node--view-mode-teaser .primary-image img {
-        width: var(--grid-col-width);
-        height: var(--grid-col-width)
-    }
-      }
+  width: calc(3.5 * var(--sp));
+  height: calc(3.5 * var(--sp));
+  object-fit: cover;
+  border-radius: 50%;
+}
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
-      left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
-      right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-.node--view-mode-teaser .primary-image {
-      position: absolute;
-      top: 0;
-      margin: 0
-  }
-    }
-
-.node--view-mode-teaser .node__title {
-    margin: 0;
-    margin-bottom: var(--sp1);
-    color: var(--color-text-neutral-loud);
-    font-size: 1.5rem;
-    line-height: var(--line-height-base)
+  .node--view-mode-teaser .primary-image img {
+    width: var(--grid-col-width);
+    height: var(--grid-col-width);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .node__title {
-      font-size: var(--sp2);
-      line-height: var(--sp3)
+  .node--view-mode-teaser .primary-image {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+    margin: 0;
   }
-    }
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
-    margin-left: 0
 }
 
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
-    margin-right: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
-    margin-right: 0
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
-    margin-left: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
-    padding-left: 0
-}
-
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
-    padding-right: 0
-}
-
-[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
-    padding-right: 0
+.node--view-mode-teaser .node__title {
+  margin: 0;
+  margin-block-end: var(--sp1);
+  color: var(--color-text-neutral-loud);
+  font-size: 1.5rem;
+  line-height: var(--line-height-base);
 }
 
-[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
-    padding-left: 0
+@media (min-width: 62.5rem) {
+  .node--view-mode-teaser .node__title {
+    font-size: var(--sp2);
+    line-height: var(--sp3);
+  }
 }
 
 .node--view-mode-teaser .field--tag-ref {
-    margin-top: var(--sp1);
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    background-color: transparent
-  }
+  margin-block-start: var(--sp1);
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  background-color: transparent;
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser .field--tag-ref {
-      margin-top: var(--sp2)
+  .node--view-mode-teaser .field--tag-ref {
+    margin-block-start: var(--sp2);
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.node--view-mode-teaser {
-    margin-bottom: var(--sp3)
-}
+  .node--view-mode-teaser {
+    margin-block-end: var(--sp3);
   }
+}
 
 .views-row:last-child .node--view-mode-teaser {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }

css/components/node.css

@@ -10,86 +10,64 @@
  * Node specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .node__meta {
   display: flex;
   align-items: center;
-  margin-bottom: var(--sp1);
+  margin-block-end: var(--sp1);
   color: var(--color-text-neutral-soft);
   font-size: 0.875rem;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 .node__meta a {
-    font-weight: bold;
-  }
+  font-weight: bold;
+}
 
 @media (min-width: 31.25rem) {
-
-.node__meta {
-    margin-bottom: var(--sp2)
-}
+  .node__meta {
+    margin-block-end: var(--sp2);
   }
-
-[dir="ltr"] .node__author-image img {
-  margin-right: var(--sp0-5)
-}
-
-[dir="rtl"] .node__author-image img {
-  margin-left: var(--sp0-5)
 }
 
 .node__author-image img {
   width: var(--sp2-5);
   height: var(--sp2-5);
-  -o-object-fit: cover;
+  margin-inline-end: var(--sp0-5);
   object-fit: cover;
   border-radius: 50%;
 }
 
 .node__title a {
-    padding-bottom: 0.1875rem;
-    transition: background-size 0.2s, color 0.2s;
-    text-decoration: none;
-    color: var(--color-text-neutral-loud);
-    background-color: transparent;
-    background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
-    background-repeat: no-repeat;
-    background-position: bottom left; /* LTR */
-    background-size: 0 0.1875rem
-  }
+  padding-block-end: 0.1875rem;
+  transition: background-size 0.2s, color 0.2s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-neutral-loud);
+  background-color: transparent;
+  background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0 0.1875rem;
+}
 
 .node__title a:hover,
-    .node__title a:focus {
-      color: var(--color-text-primary-medium);
-    }
+.node__title a:focus {
+  color: var(--color-text-primary-medium);
+}
 
 [dir="rtl"] .node__title {
   background-position: bottom right;
 }
 
 .node__content {
-  padding-bottom: var(--sp1-5)
+  padding-block-end: var(--sp1-5);
 }
 
 @media (min-width: 62.5rem) {
-
-.node__content {
-    padding-bottom: var(--sp3)
-}
+  .node__content {
+    padding-block-end: var(--sp3);
   }
+}
 
 .node--unpublished {
   /* There is no variable for the color - #fff4f4. */

css/components/page-title.css

@@ -10,19 +10,6 @@
  * Page title.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .page-title {
   /*
     Necessary to properly display the star icon from core's shortcut

css/components/pager.css

@@ -10,51 +10,15 @@
  * Styles for pagination.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .pager__items {
-  margin-left: 0;
-}
-
-[dir="rtl"] .pager__items {
-  margin-right: 0;
-}
-
-[dir="ltr"] .pager__items {
-  padding-left: 0;
-}
-
-[dir="rtl"] .pager__items {
-  padding-right: 0;
-}
-
-[dir="ltr"] .pager__items {
-  padding-right: 0;
-}
-
-[dir="rtl"] .pager__items {
-  padding-left: 0;
-}
-
 .pager__items {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
   font-weight: bold;
 }
@@ -67,16 +31,15 @@
   height: var(--sp2-5);
   cursor: default;
   color: var(--color-text-neutral-soft);
-  background-color: var(--color--white)
+  background-color: var(--color--white);
 }
 
 @media (min-width: 31.25rem) {
-
-.pager__item {
+  .pager__item {
     width: var(--sp3);
-    height: var(--sp3)
-}
+    height: var(--sp3);
   }
+}
 
 [dir="rtl"] .pager__item--control {
   transform: scaleX(-1);
@@ -88,10 +51,10 @@
 }
 
 @media (forced-colors: active) {
-    .pager__item--control path {
-      fill: linktext;
-    }
+  .pager__item--control path {
+    fill: linktext;
   }
+}
 
 .pager__link {
   display: flex;
@@ -99,6 +62,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-neutral-soft);
 }

css/components/powered-by-block.css

@@ -10,58 +10,40 @@
  * Powered by block specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .block-system-powered-by-block {
   letter-spacing: 0.02em;
   font-size: 0.875rem;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 .block-system-powered-by-block a {
-    text-decoration: underline
-  }
-
-.block-system-powered-by-block a:hover,
-    .block-system-powered-by-block a:focus {
-      text-decoration: none;
-    }
-
-[dir="ltr"] .block-system-powered-by-block .drupal-logo {
-    margin-left: calc(var(--sp)/4)
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
-[dir="rtl"] .block-system-powered-by-block .drupal-logo {
-    margin-right: calc(var(--sp)/4)
+.block-system-powered-by-block a:hover,
+.block-system-powered-by-block a:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
 .block-system-powered-by-block .drupal-logo {
-    display: inline-block;
-    margin-top: calc(var(--sp)*-1/4);
-  }
+  display: inline-block;
+  margin-block-start: calc(-1 * var(--sp) / 4);
+  margin-inline-start: calc(var(--sp) / 4);
+}
 
 .block-system-powered-by-block svg {
-    width: 0.875rem; /* 14 */
-    height: 1.1875rem; /* 19 */
-    vertical-align: top;
-    fill: currentColor;
-  }
+  width: 0.875rem; /* 14 */
+  height: 1.1875rem; /* 19 */
+  vertical-align: top;
+  fill: currentColor;
+}
 
 .site-footer .block-system-powered-by-block a {
-    color: var(--color--white);
-  }
+  color: var(--color--white);
+}
 
 .site-footer .block-system-powered-by-block svg path {
-    fill: var(--color--white);
-  }
+  fill: var(--color--white);
+}

css/components/progress.css

@@ -10,19 +10,6 @@
  * Progress bar specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .progress__track {
   overflow: hidden;
   height: var(--sp);
@@ -35,10 +22,6 @@
   background-color: var(--color--primary-40);
 }
 
-[dir="ltr"] .progress__percentage {
-  margin-left: 1rem;
-}
-
-[dir="rtl"] .progress__percentage {
-  margin-right: 1rem;
+.progress__percentage {
+  margin-inline-start: 1rem;
 }

css/components/search-results.css

@@ -10,148 +10,102 @@
  * Search results specific styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .search-results {
-  padding-left: 0
-}
-
-[dir="rtl"] .search-results {
-  padding-right: 0
-}
-
-[dir="ltr"] .search-results {
-  padding-right: 0
-}
-
-[dir="rtl"] .search-results {
-  padding-left: 0
-}
-
 .search-results {
-  margin-bottom: var(--sp2);
-  padding-top: 0;
-  padding-bottom: 0;
-  list-style: none
+  margin-block-end: var(--sp2);
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
 }
 
 @media (min-width: 43.75rem) {
-
-.search-results {
-    margin-bottom: var(--sp3)
-}
+  .search-results {
+    margin-block-end: var(--sp3);
   }
-
-[dir="ltr"] .search-result__title {
-  margin-left: 0
-}
-
-[dir="rtl"] .search-result__title {
-  margin-right: 0
-}
-
-[dir="ltr"] .search-result__title {
-  margin-right: 0
-}
-
-[dir="rtl"] .search-result__title {
-  margin-left: 0
 }
 
 .search-result__title {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   color: var(--color-text-neutral-loud);
   font-size: 1.25rem;
-  line-height: var(--line-height-base)
+  line-height: var(--line-height-base);
 }
 
 .search-result__title a {
-    padding-bottom: 0.1875rem;
-    transition: background-size 0.2s, color 0.2s;
-    text-decoration: none;
-    background-color: transparent;
-    background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
-    background-repeat: no-repeat;
-    background-position: bottom left; /* LTR */
-    background-size: 0 0.1875rem
-  }
+  padding-block-end: 0.1875rem;
+  transition: background-size 0.2s, color 0.2s;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: transparent;
+  background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0 0.1875rem;
+}
 
 .search-result__title a:hover {
-      color: var(--color-text-primary-medium);
-    }
+  color: var(--color-text-primary-medium);
+}
 
 @media (min-width: 62.5rem) {
-
-.search-result__title {
-    margin-bottom: var(--sp1);
+  .search-result__title {
+    margin-block-end: var(--sp1);
     font-size: 1.875rem;
-    line-height: var(--sp3)
-}
+    line-height: var(--sp3);
   }
+}
 
 [dir="rtl"] .search-result__title a {
   background-position: bottom right;
 }
 
 .search-result__snippet {
-  padding-bottom: calc(var(--sp1-5) - 2px)
+  padding-block-end: calc(var(--sp1-5) - 2px);
 }
 
 @media (min-width: 62.5rem) {
-
-.search-result__snippet {
-    padding-bottom: var(--sp3)
-}
+  .search-result__snippet {
+    padding-block-end: var(--sp3);
   }
+}
 
 .search-result__meta {
   display: flex;
   align-items: center;
-  margin-bottom: var(--sp1);
+  margin-block-end: var(--sp1);
   color: var(--color-text-neutral-soft);
   font-size: 0.875rem;
-  line-height: var(--sp)
+  line-height: var(--sp);
 }
 
 .search-result__meta a {
-    color: var(--color-text-primary-medium);
-    font-weight: bold;
-  }
+  color: var(--color-text-primary-medium);
+  font-weight: bold;
+}
 
 .search-results__item {
   position: relative; /* Anchor after pseudo-element. */
-  margin-bottom: var(--sp1-5)
+  margin-block-end: var(--sp1-5);
 }
 
 .search-results__item::after {
-    position: absolute;
-    bottom: 0;
-    width: var(--sp3);
-    height: 0;
-    content: "";
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 2px var(--color--gray-95);
-  }
+  position: absolute;
+  inset-block-end: 0;
+  width: var(--sp3);
+  height: 0;
+  content: "";
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 2px var(--color--gray-95);
+}
 
 .search-results__item:last-child {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}
 
 @media (min-width: 62.5rem) {
-
-.search-results__item {
-    margin-bottom: var(--sp3)
-}
+  .search-results__item {
+    margin-block-end: var(--sp3);
   }
+}

css/components/site-header.css

@@ -10,43 +10,28 @@
  * Site header.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .site-header {
   position: relative;
   /**
    * Ensure mobile site header is always above other elements including
    * contextual links, and Tour.
    */
-  z-index: 101
+  z-index: 101;
 }
 
 @media (min-width: 75rem) {
-
-.site-header {
+  .site-header {
     /* Necessary to keep the content from jumping up when header transitions to fixed. */
     min-height: var(--site-header-height-wide);
-    border-bottom: solid 1px transparent /* Will show in Windows high contrast mode. */
-}
+    border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
   }
+}
 
 .site-header__initial {
   position: relative;
   z-index: 102;
   display: flex;
   align-items: flex-end;
-  -ms-grid-row-align: stretch;
   align-self: stretch;
   background-color: var(--color--primary-50);
 }
@@ -54,29 +39,29 @@
 .site-header__fixable {
   display: flex;
   align-items: flex-end;
-  transition: all 0.5s
+  transition: all 0.5s;
 }
 
 @media (min-width: 75rem) {
-      .site-header__fixable.is-fixed:not(.is-expanded) {
-        pointer-events: none;
-      }
-    }
+  .site-header__fixable.is-fixed:not(.is-expanded) {
+    pointer-events: none;
+  }
+}
 
 @media (min-width: 75rem) {
-    body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
-      position: fixed;
-      z-index: 102; /* Appear above body content that is position: relative */
-      top: calc(0px - var(--sp4));
-      max-width: var(--max-bg-color);
-    }
+  body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
+    position: fixed;
+    z-index: 102; /* Appear above body content that is position: relative */
+    inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
+    max-width: var(--max-bg-color);
+  }
 }
 
 .site-header__inner {
   position: relative;
   z-index: 1; /* Appear in front of Drupal's tabs. */
   flex-grow: 1;
-  width: calc(100vw - var(--content-left));
+  width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
   background: var(--color--white);
 }
 
@@ -86,42 +71,37 @@
  */
 
 @media (min-width: 75rem) {
-
-html.js body:not(.is-always-mobile-nav) .site-header__inner {
-    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s
-}
+  html.js body:not(.is-always-mobile-nav) .site-header__inner {
+    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
   }
+}
 
 @media (min-width: 75rem) {
-
-.site-header__fixable.is-expanded .site-header__inner {
-    box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08) /* LTR */
-}
+  .site-header__fixable.is-expanded .site-header__inner {
+    box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
-    box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08)
-}
+  [dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
+    box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
   }
+}
 
 /* Hide the desktop nav when it's fixed and not active. */
 
 @media (min-width: 75rem) {
-
-body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+  body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
     transform: translateX(-101%); /* LTR */
-    opacity: 0
-}
+    opacity: 0;
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
-    transform: translateX(101%)
-}
+  [dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+    transform: translateX(101%);
   }
+}
 
 .site-header__inner__container {
   display: flex;

css/components/skip-link.css

@@ -12,58 +12,36 @@
  * Allows keyboard users to quickly skip to the main content of the page.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .skip-link {
-  padding-left: var(--sp)
-}
-
-[dir="rtl"] .skip-link {
-  padding-right: var(--sp)
-}
-
-[dir="ltr"] .skip-link {
-  padding-right: var(--sp)
-}
-
-[dir="rtl"] .skip-link {
-  padding-left: var(--sp)
-}
-
 .skip-link {
   display: block;
   width: 100%;
   max-width: var(--max-bg-color);
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color--white);
   outline: 0;
-  background-color: var(--color--gray-5)
+  background-color: var(--color--gray-5);
 }
 
 .skip-link:hover {
-    text-decoration: underline;
-    color: var(--color--white);
-  }
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: var(--color--white);
+}
 
 .skip-link::after {
-    content: "\0020	➔";
-  }
+  content: "\0020	➔";
+}
+
+.skip-link.focusable:focus {
+  position: absolute !important;
+}
 
 .skip-link.focusable:focus {
-  position: absolute !important; /* Override position from module file. */
+  /* Override position from module file. */
   z-index: 503;
   width: 100%;
   height: 2.5rem;

css/components/table.css

@@ -10,163 +10,66 @@
  * User generated tables.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .forum table,
 .text-content table,
 .views-table,
 .draggable-table {
-  margin-top: var(--sp2);
-  margin-bottom: var(--sp2);
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
   border-spacing: 0;
   color: var(--color-text-neutral-medium);
   border: 0;
   border-collapse: collapse;
   font-family: var(--font-sans);
   font-size: 1rem;
-  line-height: var(--sp1-5)
+  line-height: var(--sp1-5);
 }
 
-[dir="ltr"] .forum table caption,[dir="ltr"]  .text-content table caption,[dir="ltr"]  .views-table caption,[dir="ltr"]  .draggable-table caption {
-    text-align: left
-}
-
-[dir="rtl"] .forum table caption,[dir="rtl"]  .text-content table caption,[dir="rtl"]  .views-table caption,[dir="rtl"]  .draggable-table caption {
-    text-align: right
-}
-
-.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {
-    margin-bottom: var(--sp1);
-    color: var(--color-text-neutral-medium);
-    font-family: var(--font-serif);
-    font-size: 0.875rem;
-    font-style: italic;
-    line-height: var(--sp);
-  }
-
-.forum table tr:last-child td, .text-content table tr:last-child td, .views-table tr:last-child td, .draggable-table tr:last-child td {
-        border-bottom: 0;
-      }
-
-[dir="ltr"] .forum table td,[dir="ltr"] 
-  .forum table th,[dir="ltr"] 
-  .text-content table td,[dir="ltr"] 
-  .text-content table th,[dir="ltr"] 
-  .views-table td,[dir="ltr"] 
-  .views-table th,[dir="ltr"] 
-  .draggable-table td,[dir="ltr"] 
-  .draggable-table th {
-    padding-left: 0
-}
-
-[dir="rtl"] .forum table td,[dir="rtl"] 
-  .forum table th,[dir="rtl"] 
-  .text-content table td,[dir="rtl"] 
-  .text-content table th,[dir="rtl"] 
-  .views-table td,[dir="rtl"] 
-  .views-table th,[dir="rtl"] 
-  .draggable-table td,[dir="rtl"] 
-  .draggable-table th {
-    padding-right: 0
-}
-
-[dir="ltr"] .forum table td,[dir="ltr"] 
-  .forum table th,[dir="ltr"] 
-  .text-content table td,[dir="ltr"] 
-  .text-content table th,[dir="ltr"] 
-  .views-table td,[dir="ltr"] 
-  .views-table th,[dir="ltr"] 
-  .draggable-table td,[dir="ltr"] 
-  .draggable-table th {
-    padding-right: var(--sp1)
-}
-
-[dir="rtl"] .forum table td,[dir="rtl"] 
-  .forum table th,[dir="rtl"] 
-  .text-content table td,[dir="rtl"] 
-  .text-content table th,[dir="rtl"] 
-  .views-table td,[dir="rtl"] 
-  .views-table th,[dir="rtl"] 
-  .draggable-table td,[dir="rtl"] 
-  .draggable-table th {
-    padding-left: var(--sp1)
-}
-
-.forum table td,
-  .forum table th,
-  .text-content table td,
-  .text-content table th,
-  .views-table td,
-  .views-table th,
-  .draggable-table td,
-  .draggable-table th {
-    padding-top: var(--sp1);
-    padding-bottom: var(--sp1);
-    vertical-align: top;
-  }
-
-[dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {
-    margin-left: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) caption {
+  margin-block-end: var(--sp1);
+  text-align: start;
+  color: var(--color-text-neutral-medium);
+  font-family: var(--font-serif);
+  font-size: 0.875rem;
+  font-style: italic;
+  line-height: var(--sp);
 }
 
-[dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {
-    margin-right: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) tr:last-child td {
+  border-block-end: 0;
 }
 
-[dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {
-    margin-right: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) td,
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+  padding-block: var(--sp1);
+  padding-inline-start: 0;
+  padding-inline-end: var(--sp1);
+  vertical-align: top;
 }
 
-[dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {
-    margin-left: 0
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  text-align: start;
+  letter-spacing: 0.02em;
+  color: var(--color-text-neutral-loud);
+  border-block-end: 2px solid var(--color--primary-50);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: var(--sp);
 }
 
-[dir="ltr"] .forum table th,[dir="ltr"]  .text-content table th,[dir="ltr"]  .views-table th,[dir="ltr"]  .draggable-table th {
-    text-align: left
+:is(.forum table, .text-content table, .views-table, .draggable-table) td {
+  white-space: normal;
+  border-block-end: 2px solid var(--color--gray-65);
 }
 
-[dir="rtl"] .forum table th,[dir="rtl"]  .text-content table th,[dir="rtl"]  .views-table th,[dir="rtl"]  .draggable-table th {
-    text-align: right
+:is(.forum table, .text-content table, .views-table, .draggable-table) th.checkbox,
+:is(.forum table, .text-content table, .views-table, .draggable-table) td.checkbox {
+  text-align: center;
 }
 
-.forum table th, .text-content table th, .views-table th, .draggable-table th {
-    margin-top: 0;
-    margin-bottom: 0;
-    letter-spacing: 0.02em;
-    color: var(--color-text-neutral-loud);
-    border-bottom: 2px solid var(--color--primary-50);
-    font-family: var(--font-sans);
-    font-size: 0.875rem;
-    line-height: var(--sp);
-  }
-
-.forum table td, .text-content table td, .views-table td, .draggable-table td {
-    white-space: normal;
-    border-bottom: 2px solid var(--color--gray-65);
-  }
-
-.forum table th.checkbox,
-  .forum table td.checkbox,
-  .text-content table th.checkbox,
-  .text-content table td.checkbox,
-  .views-table th.checkbox,
-  .views-table td.checkbox,
-  .draggable-table th.checkbox,
-  .draggable-table td.checkbox {
-    text-align: center;
-  }
-
 .draggable-table {
   width: 100%;
 }
@@ -182,7 +85,7 @@
 .sticky-header {
   z-index: 0;
   margin: 0;
-  border-bottom: 4px solid var(--color--primary-50);
+  border-block-end: 0.25rem solid var(--color--primary-50);
 }
 
 /* Properly align VBO checkboxes. */

css/components/tabledrag.css

@@ -10,19 +10,6 @@
  * Styles for tabledrag.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .draggable:hover {
   background-color: var(--color--gray-100);
 }
@@ -45,12 +32,8 @@ a.tabledrag-handle,
   height: 2.25rem;
 }
 
-[dir="ltr"] .draggable a.tabledrag-handle {
-  margin-left: 0;
-}
-
-[dir="rtl"] .draggable a.tabledrag-handle {
-  margin-right: 0;
+.draggable a.tabledrag-handle {
+  margin-inline-start: 0;
 }
 
 a.tabledrag-handle .handle {
@@ -65,25 +48,10 @@ a.tabledrag-handle .handle {
   background-position: 50% 5px;
 }
 
-[dir="ltr"] .touchevents .draggable td {
-  padding-left: 0;
-}
-
-[dir="rtl"] .touchevents .draggable td {
-  padding-right: 0;
-}
-
-[dir="ltr"] .touchevents .draggable td {
-  padding-right: var(--sp0-5);
-}
-
-[dir="rtl"] .touchevents .draggable td {
-  padding-left: var(--sp0-5);
-}
-
 .touchevents .draggable td {
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: 0;
+  padding-inline-end: var(--sp0-5);
 }
 
 .touchevents .draggable .menu-item__link {

css/components/tabs.css

@@ -4,30 +4,7 @@
  * https://www.drupal.org/node/3084859
  * @preserve
  */
-
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 /* Breakpoint where tabs switch between vertical and horizontal layouts. */
-
-[dir="ltr"] .tabs {
-  margin-left: 0
-}
-
-[dir="rtl"] .tabs {
-  margin-right: 0
-}
-
 .tabs {
   --tabs-height: var(--sp3);
   --tabs-padding-inline: var(--sp1-5);
@@ -46,270 +23,169 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */
+  margin: 0;
+  margin-inline-start: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */
   padding: 0;
-  list-style: none
+  list-style: none;
 }
-
 @media (min-width: 43.75rem) {
-
-.tabs {
+  .tabs {
     flex-direction: row;
-    flex-wrap: wrap
-}
+    flex-wrap: wrap;
   }
-
+}
 .tabs__tab {
   display: none;
   margin: 0;
-  margin-bottom: calc(var(--tabs-border-width)*-1)
+  margin-block-end: calc(-1 * var(--tabs-border-width));
 }
-
 .tabs__tab.is-active {
-    display: flex;
-  }
-
+  display: flex;
+}
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .tabs__tab {
-    margin-left: calc(var(--tabs-border-width)*-1)
-  }
-
-[dir="rtl"] .tabs__tab {
-    margin-right: calc(var(--tabs-border-width)*-1)
-  }
-
-.tabs__tab {
+  .tabs__tab {
     display: flex;
-    margin-bottom: 0
-}
+    margin-block-end: 0;
+    margin-inline-start: calc(-1 * var(--tabs-border-width));
   }
-
-.tabs__tab {
-
-  /* Show tabs when JavaScript disabled. */
 }
-
+/* Show tabs when JavaScript disabled. */
 html:not(.js) .tabs__tab {
-    display: flex
-}
-
-.tabs__tab {
-
-  /* Show tabs when tabs-expanded class is present. */
+  display: flex;
 }
-
+/* Show tabs when tabs-expanded class is present. */
 .tabs.is-expanded .tabs__tab {
-    display: flex
-}
-
-.tabs__tab {
-
-  /* Secondary tabs will always be expanded. */
+  display: flex;
 }
-
+/* Secondary tabs will always be expanded. */
 .tabs--secondary .tabs__tab {
-    display: block
+  display: block;
 }
-
 @media (min-width: 43.75rem) {
-
-.tabs--secondary .tabs__tab {
-      display: flex
+  .tabs--secondary .tabs__tab {
+    display: flex;
+  }
 }
-    }
-
 .tabs__link {
   display: flex;
   flex-grow: 1;
   align-items: center;
   height: var(--tabs-height);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: var(--tabs-padding-inline);
-  padding-right: var(--tabs-padding-inline);
+  padding-block: 0;
+  padding-inline: var(--tabs-padding-inline);
   transition: background-color var(--tabs-transition-duration);
+  -webkit-text-decoration: none;
   text-decoration: none;
   letter-spacing: var(--tabs-letter-spacing);
   color: var(--tabs-text-color);
   border: var(--tabs-border-width) solid var(--tabs-border-color);
   background-color: var(--tabs-background-color);
-  font-size: var(--tabs-font-size)
+  font-size: var(--tabs-font-size);
 }
-
 .tabs__link:hover {
-    color: var(--tabs-text-color-active);
-    background-color: var(--tabs-background-color-hover);
-  }
-
+  color: var(--tabs-text-color-active);
+  background-color: var(--tabs-background-color-hover);
+}
 .tabs__link:focus {
-    position: relative;
-    outline: solid 3px var(--tabs-highlight-color);
-    outline-offset: -3px;
-  }
-
+  position: relative;
+  outline: solid 3px var(--tabs-highlight-color);
+  outline-offset: -3px;
+}
 .tabs__link.is-active {
-    position: relative; /* Anchor ::after pseudo-element. */
-    color: var(--tabs-text-color-active);
-    font-weight: 600
+  position: relative; /* Anchor ::after pseudo-element. */
+  color: var(--tabs-text-color-active);
+  font-weight: 600;
 
-    /*
+  /*
      * We use ::after pseudo-element in place of border so edges do not appear
      * diagonally cut off due to other edges with transparent borders.
      */
-  }
-
-[dir="ltr"] .tabs__link.is-active::after {
-      left: calc(var(--tabs-border-width)*-1)
 }
-
-[dir="rtl"] .tabs__link.is-active::after {
-      right: calc(var(--tabs-border-width)*-1)
-}
-
-[dir="ltr"] .tabs__link.is-active::after {
-      border-left: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
-}
-
-[dir="rtl"] .tabs__link.is-active::after {
-      border-right: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
-}
-
 .tabs__link.is-active::after {
-      position: absolute;
-      top: calc(var(--tabs-border-width)*-1);
-      height: calc(100% + var(--tabs-border-width)*2);
-      content: ""
-    }
-
+  position: absolute;
+  inset-block-start: calc(-1 * var(--tabs-border-width));
+  inset-inline-start: calc(-1 * var(--tabs-border-width));
+  height: calc(100% + var(--tabs-border-width) * 2);
+  content: "";
+  border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+}
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .tabs__link.is-active::after {
-        border-left: 0
-  }
-
-[dir="rtl"] .tabs__link.is-active::after {
-        border-right: 0
+  .tabs__link.is-active::after {
+    inset-block: auto calc(-1 * var(--tabs-border-width));
+    width: calc(100% + 2 * var(--tabs-border-width));
+    height: 0;
+    border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+    border-inline-start: 0;
   }
-
-.tabs__link.is-active::after {
-        top: auto;
-        bottom: calc(var(--tabs-border-width)*-1);
-        width: calc(100% + var(--tabs-border-width)*2);
-        height: 0;
-        border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color)
-    }
-      }
-
-.tabs__link {
-
-  /* No regular borders or background color for secondary tab links. */
 }
-
+/* No regular borders or background color for secondary tab links. */
 @media (min-width: 43.75rem) {
-
-.tabs--secondary .tabs__link {
-      border-color: transparent;
-      background-color: transparent
+  .tabs--secondary .tabs__link {
+    border-color: transparent;
+    background-color: transparent;
+  }
 }
-    }
-
 /* Button that opens and closes primary tabs at narrow viewports. */
-
-[dir="ltr"] .tabs__trigger {
-  margin-left: calc(var(--tabs-border-width)*-1);
-  margin-right: 0
-}
-
-[dir="rtl"] .tabs__trigger {
-  margin-right: calc(var(--tabs-border-width)*-1);
-  margin-left: 0
-}
-
 .tabs__trigger {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--tabs-height);
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
+  margin-inline: calc(-1 * var(--tabs-border-width)) 0;
   cursor: pointer;
   border: solid var(--tabs-border-width) var(--tabs-border-color);
-  background-color: var(--tabs-background-color)
+  background-color: var(--tabs-background-color);
 }
-
 .tabs__trigger:hover {
-    background-color: var(--tabs-background-color-hover);
-  }
-
+  background-color: var(--tabs-background-color-hover);
+}
 .tabs__trigger:focus {
-    position: relative;
-    border-color: var(--tabs-highlight-color);
-    outline: none;
-  }
-
-.tabs__trigger {
-
-  /* Button will not work when JavaScript is disabled, so we hide it. */
+  position: relative;
+  border-color: var(--tabs-highlight-color);
+  outline: none;
 }
-
+/* Button will not work when JavaScript is disabled, so we hide it. */
 html:not(.js) .tabs__trigger {
-    display: none
+  display: none;
 }
-
 @media (min-width: 43.75rem) {
-
-.tabs__trigger {
-    display: none
-}
+  .tabs__trigger {
+    display: none;
   }
-
+}
 .tabs__trigger-icon {
   position: relative;
   display: block;
   width: var(--sp);
   height: 0.625rem;
-  margin-top: calc(var(--tabs-border-width)*-2)
-}
-
-[dir="ltr"] .tabs__trigger-icon > span {
-    left: 0
-}
-
-[dir="rtl"] .tabs__trigger-icon > span {
-    right: 0
+  margin-block-start: calc(-2 * var(--tabs-border-width));
 }
-
 .tabs__trigger-icon > span {
-    position: absolute;
-    display: block;
-    width: 100%;
-    transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
-    border-top: solid 2px var(--tabs-highlight-color)
-  }
-
+  position: absolute;
+  inset-inline-start: 0;
+  display: block;
+  width: 100%;
+  transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+  border-block-start: solid 2px var(--tabs-highlight-color);
+}
 .tabs__trigger-icon > span:nth-child(1) {
-      top: 0
-    }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {
-        top: calc(50% + 1px);
-        transform: rotate(45deg)
-    }
-
+  inset-block-start: 0;
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
+  inset-block-start: calc(50% + 1px);
+  transform: rotate(45deg);
+}
 .tabs__trigger-icon > span:nth-child(2) {
-      top: calc(50% + 1px)
-    }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {
-        opacity: 0
-    }
-
+  inset-block-start: calc(50% + 1px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
+  opacity: 0;
+}
 .tabs__trigger-icon > span:nth-child(3) {
-      top: calc(100% + 2px)
-    }
-
-.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {
-        top: calc(50% + 1px);
-        transform: rotate(-45deg)
-    }
+  inset-block-start: calc(100% + 2px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
+  inset-block-start: calc(50% + 1px);
+  transform: rotate(-45deg);
+}

css/components/tags.css

@@ -10,138 +10,57 @@
  * Tags field styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .field--tags {
   display: flex;
   font-family: var(--font-sans);
 }
 
-[dir="ltr"] .field--tags__label {
-  margin-right: calc(var(--sp1-5) - var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__label {
-  margin-left: calc(var(--sp1-5) - var(--sp0-5)/2);
-}
-
 .field--tags__label {
   margin: 0;
+  margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
   letter-spacing: 0.02em;
   color: var(--color-text-neutral-soft);
   font-size: var(--font-size-s);
   font-weight: 600;
-  line-height: 1.6
+  line-height: 1.6;
 }
 
 .field--tags__label::after {
-    content: ":";
-  }
+  content: ":";
+}
 
 @media (min-width: 43.75rem) {
-
-.field--tags__label {
-    line-height: 2
-}
+  .field--tags__label {
+    line-height: 2;
   }
-
-[dir="ltr"] .field--label-inline .field--tags__label {
-  padding-left: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
-  padding-right: 0;
-}
-
-[dir="ltr"] .field--label-inline .field--tags__label {
-  padding-right: 0;
-}
-
-[dir="rtl"] .field--label-inline .field--tags__label {
-  padding-left: 0;
 }
 
 .field--label-inline .field--tags__label {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-[dir="ltr"] .field--tags__items {
-  margin-left: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="rtl"] .field--tags__items {
-  margin-right: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="ltr"] .field--tags__items {
-  margin-right: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="rtl"] .field--tags__items {
-  margin-left: calc(var(--sp0-5)/2*-1);
-}
-
-[dir="ltr"] .field--tags__items {
-  padding-left: 0;
-}
-
-[dir="rtl"] .field--tags__items {
-  padding-right: 0;
-}
-
-[dir="ltr"] .field--tags__items {
-  padding-right: 0;
-}
-
-[dir="rtl"] .field--tags__items {
-  padding-left: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
 }
 
 .field--tags__items {
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--sp0-5)/2*-1);
-  margin-bottom: calc(var(--sp0-5)/2*-1);
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-block: calc((var(--sp0-5) / 2) * -1);
+  margin-inline-start: calc((var(--sp0-5) / 2) * -1);
+  margin-inline-end: calc((var(--sp0-5) / 2) * -1);
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   list-style: none;
 }
 
-[dir="ltr"] .field--tags__item {
-  margin-left: calc(var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__item {
-  margin-right: calc(var(--sp0-5)/2);
-}
-
-[dir="ltr"] .field--tags__item {
-  margin-right: calc(var(--sp0-5)/2);
-}
-
-[dir="rtl"] .field--tags__item {
-  margin-left: calc(var(--sp0-5)/2);
-}
-
 .field--tags__item {
   display: flex;
-  margin-top: calc(var(--sp0-5)/2);
-  margin-bottom: calc(var(--sp0-5)/2);
+  margin-block: calc(var(--sp0-5) / 2);
+  margin-inline-start: calc(var(--sp0-5) / 2);
+  margin-inline-end: calc(var(--sp0-5) / 2);
 }
 
-.field--tags__item:nth-last-child(n+2)::after {
+.field--tags__item:nth-last-child(n + 2)::after {
   content: ",";
   font-size: var(--font-size-base);
   line-height: 1.5;
@@ -151,6 +70,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
   letter-spacing: 0.02em;
   color: var(--color-text-primary-medium);
@@ -159,26 +79,11 @@
   line-height: 1.5;
 }
 
-[dir="ltr"] .node--view-mode-full .field--tags {
-    padding-left: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
-    padding-right: var(--sp2);
-}
-
-[dir="ltr"] .node--view-mode-full .field--tags {
-    padding-right: var(--sp2);
-}
-
-[dir="rtl"] .node--view-mode-full .field--tags {
-    padding-left: var(--sp2);
-}
-
 .node--view-mode-full .field--tags {
-    margin-top: var(--sp4);
-    margin-bottom: var(--sp4);
-    padding-top: var(--sp1-5);
-    padding-bottom: var(--sp1-5);
-    background-color: var(--color--gray-100);
-  }
+  margin-block-start: var(--sp4);
+  margin-block-end: var(--sp4);
+  padding-block: var(--sp1-5);
+  padding-inline-start: var(--sp2);
+  padding-inline-end: var(--sp2);
+  background-color: var(--color--gray-100);
+}

css/components/text-content.css

@@ -10,24 +10,11 @@
  * Text Content.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .text-content,
 .cke_editable {
   color: var(--color-text-neutral-medium);
   font-family: var(--font-serif);
-  line-height: var(--sp1-5)
+  line-height: var(--sp1-5);
 
   /*
     @todo
@@ -39,212 +26,164 @@
   */
 }
 
-.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
-    color: var(--color-text-primary-medium);
-    -webkit-text-decoration-color: currentColor;
-    text-decoration-color: currentColor;
-    text-decoration-thickness: 2px;
-    word-wrap: break-word
-  }
+.text-content a:where(:not(.button)),
+.cke_editable a:where(:not(.button)) {
+  color: var(--color-text-primary-medium);
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 2px;
+  overflow-wrap: break-word;
+}
 
 @supports (box-shadow: none) {
-
-.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
-      transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
-      text-decoration: none;
-      box-shadow: inset 0 -2px 0 0 var(--color--primary-50)
-  }
-
-      .text-content a:where(:not(.button)):hover, .cke_editable a:where(:not(.button)):hover {
-        text-decoration: underline;
-        color: var(--color--black);
-        box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
-        -webkit-text-decoration-color: var(--color--primary-80);
-        text-decoration-color: var(--color--primary-80);
-      }
-    }
-
-.text-content p, .cke_editable p {
-    margin-top: var(--sp);
-    margin-bottom: var(--sp)
+  .text-content a:where(:not(.button)),
+  .cke_editable a:where(:not(.button)) {
+    transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    box-shadow: inset 0 -2px 0 0 var(--color--primary-50);
   }
 
-.text-content p:first-child, .cke_editable p:first-child {
-      margin-top: 0;
-    }
-
-.text-content p:last-child, .cke_editable p:last-child {
-      margin-bottom: 0;
-    }
-
-@media (min-width: 43.75rem) {
-
-.text-content p, .cke_editable p {
-      margin-top: var(--sp2);
-      margin-bottom: var(--sp2)
-  }
-    }
-
-.text-content code, .cke_editable code {
-    background-color: var(--color--gray-100);
+  .text-content a:where(:not(.button)):hover,
+  .cke_editable a:where(:not(.button)):hover {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    color: var(--color--black);
+    box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+    text-decoration-color: var(--color--primary-80);
   }
-
-[dir="ltr"] .text-content pre code,[dir="ltr"]  .cke_editable pre code {
-    padding-left: var(--sp)
-}
-
-[dir="rtl"] .text-content pre code,[dir="rtl"]  .cke_editable pre code {
-    padding-right: var(--sp)
 }
 
-[dir="ltr"] .text-content pre code,[dir="ltr"]  .cke_editable pre code {
-    padding-right: var(--sp)
+.text-content p,
+.cke_editable p {
+  margin-block-start: var(--sp);
+  margin-block-end: var(--sp);
 }
 
-[dir="rtl"] .text-content pre code,[dir="rtl"]  .cke_editable pre code {
-    padding-left: var(--sp)
+.text-content p:first-child,
+.cke_editable p:first-child {
+  margin-block-start: 0;
 }
 
-.text-content pre code, .cke_editable pre code {
-    display: block;
-    overflow: auto;
-    padding-top: var(--sp);
-    padding-bottom: var(--sp);
-    color: var(--color-text-neutral-soft);
-  }
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {
-    margin-left: 0
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {
-    margin-right: 0
+.text-content p:last-child,
+.cke_editable p:last-child {
+  margin-block-end: 0;
 }
 
-[dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {
-    margin-right: 0
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {
-    margin-left: 0
-}
-
-[dir="ltr"] .text-content blockquote,[dir="ltr"]  .cke_editable blockquote {
-    padding-left: var(--sp2)
-}
-
-[dir="rtl"] .text-content blockquote,[dir="rtl"]  .cke_editable blockquote {
-    padding-right: var(--sp2)
-}
-
-.text-content blockquote, .cke_editable blockquote {
-    position: relative;
-    margin-top: var(--sp2);
-    margin-bottom: var(--sp2);
-    letter-spacing: -0.01em;
-    font-family: var(--font-serif);
-    font-size: 1.3125rem;
-    line-height: var(--sp2)
+@media (min-width: 43.75rem) {
+  .text-content p,
+  .cke_editable p {
+    margin-block-start: var(--sp2);
+    margin-block-end: var(--sp2);
   }
-
-[dir="ltr"] .text-content blockquote::before,[dir="ltr"]  .cke_editable blockquote::before {
-      left: 0
 }
 
-[dir="rtl"] .text-content blockquote::before,[dir="rtl"]  .cke_editable blockquote::before {
-      right: 0
+.text-content code,
+.cke_editable code {
+  background-color: var(--color--gray-100);
 }
 
-.text-content blockquote::before, .cke_editable blockquote::before {
-      position: absolute;
-      top: 0;
-      content: "\201C";
-      color: var(--color--primary-60);
-      font-size: 3.375rem;
-    }
-
-[dir="ltr"] .text-content blockquote::after,[dir="ltr"]  .cke_editable blockquote::after {
-      left: 0
+.text-content pre code,
+.cke_editable pre code {
+  display: block;
+  overflow: auto;
+  padding-block: var(--sp);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  color: var(--color-text-neutral-soft);
 }
 
-[dir="rtl"] .text-content blockquote::after,[dir="rtl"]  .cke_editable blockquote::after {
-      right: 0
+.text-content blockquote,
+.cke_editable blockquote {
+  position: relative;
+  margin-block: var(--sp2);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline-start: var(--sp2);
+  letter-spacing: -0.01em;
+  font-family: var(--font-serif);
+  font-size: 1.3125rem;
+  line-height: var(--sp2);
 }
 
-[dir="ltr"] .text-content blockquote::after,[dir="ltr"]  .cke_editable blockquote::after {
-      margin-left: 0.25rem
+.text-content blockquote::before,
+.cke_editable blockquote::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  content: "\201C";
+  color: var(--color--primary-60);
+  font-size: 3.375rem;
 }
 
-[dir="rtl"] .text-content blockquote::after,[dir="rtl"]  .cke_editable blockquote::after {
-      margin-right: 0.25rem
+.text-content blockquote::after,
+.cke_editable blockquote::after {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: var(--sp0-5);
+  height: calc(100% - 1.875rem);
+  margin-inline-start: 0.25rem;
+  content: "";
+  background: var(--color--gray-100);
 }
 
-.text-content blockquote::after, .cke_editable blockquote::after {
-      position: absolute;
-      bottom: 0;
-      width: var(--sp0-5);
-      height: calc(100% - 1.875rem);
-      content: "";
-      background: var(--color--gray-100);
-    }
-
 @media (min-width: 43.75rem) {
-
-.text-content blockquote, .cke_editable blockquote {
-      font-size: 2rem;
-      line-height: var(--sp3)
+  .text-content blockquote,
+  .cke_editable blockquote {
+    font-size: 2rem;
+    line-height: var(--sp3);
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.text-content blockquote, .cke_editable blockquote {
-      font-size: 2.5rem;
-      line-height: calc(var(--sp)*3.5)
+  .text-content blockquote,
+  .cke_editable blockquote {
+    font-size: 2.5rem;
+    line-height: calc(3.5 * var(--sp));
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-.text-content,
-.cke_editable {
+  .text-content,
+  .cke_editable {
     font-size: 1.125rem;
-    line-height: var(--sp2)
-}
+    line-height: var(--sp2);
   }
+}
 
 /**
  * Special colors for footer that has a dark background.
  */
 
 .site-footer .text-content {
-  color: inherit
+  color: inherit;
 }
 
 .site-footer .text-content * {
-    color: inherit;
-  }
+  color: inherit;
+}
 
 .site-footer .text-content a {
-    text-decoration: underline;
-    color: var(--color--white);
-    box-shadow: none
-  }
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: var(--color--white);
+  box-shadow: none;
+}
 
 .site-footer .text-content a:hover {
-      text-decoration: none;
-      color: var(--color--white);
-      box-shadow: none;
-    }
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color--white);
+  box-shadow: none;
+}
 
 /**
  * Decrease font-size for blockquote placed in sidebar region.
  */
 
 @media (min-width: 62.5rem) {
-
-.region--sidebar .text-content blockquote {
+  .region--sidebar .text-content blockquote {
     font-size: 1.5rem;
-    line-height: var(--sp2)
-}
+    line-height: var(--sp2);
   }
+}

css/components/ui-dialog.css

@@ -10,32 +10,21 @@
  * Styles for jQuery UI dialog.
  */
 
-[dir="ltr"] .ui-dialog .ui-dialog-buttonpane {
-    padding-left: 0.2em;
-}
-
-[dir="rtl"] .ui-dialog .ui-dialog-buttonpane {
-    padding-right: 0.2em;
-}
-
-[dir="ltr"] .ui-dialog .ui-dialog-buttonpane {
-    padding-right: 0.2em;
-}
-
-[dir="rtl"] .ui-dialog .ui-dialog-buttonpane {
-    padding-left: 0.2em;
+.ui-dialog .ui-dialog-buttonpane {
+  padding-inline-start: 0.2em;
+  padding-inline-end: 0.2em;
 }
 
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-      display: flex;
-      float: none;
-      flex-wrap: wrap;
-      grid-gap: 0.3125rem;
-    }
+  display: flex;
+  float: none;
+  flex-wrap: wrap;
+  gap: 0.3125rem;
+}
 
 .ui-dialog .ui-dialog-buttonpane button {
-      margin: 0;
-    }
+  margin: 0;
+}
 
 .ui-widget-overlay {
   z-index: 1259;

css/components/vertical-tabs.css

@@ -10,78 +10,52 @@
  * Vertical Tabs.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
+:root {
+  --vertical-tabs-menu-width: 15rem;
+  --vertical-tabs-menu-border-width: 1px;
+}
 
 @media (min-width: 62.5rem) {
-
-.vertical-tabs {
-    display: flex
-}
+  .vertical-tabs {
+    display: flex;
   }
-
-[dir="ltr"] .vertical-tabs__menu {
-  margin-left: 0
-}
-
-[dir="rtl"] .vertical-tabs__menu {
-  margin-right: 0
-}
-
-[dir="ltr"] .vertical-tabs__menu {
-  margin-right: 0
-}
-
-[dir="rtl"] .vertical-tabs__menu {
-  margin-left: 0
 }
 
 .vertical-tabs__menu {
   position: relative;
   align-self: flex-start;
   margin: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   list-style: none;
-  border-width: 1px;
+  border-width: var(--vertical-tabs-menu-border-width);
   border-style: solid;
-  border-color: var(--color--gray-95)
+  border-color: var(--color--gray-95);
 }
 
 @media (min-width: 62.5rem) {
-
-.vertical-tabs__menu {
-    width: 15rem;
-    border-width: 1px 0 1px 1px
-}
+  .vertical-tabs__menu {
+    width: var(--vertical-tabs-menu-width);
+    border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
   }
+}
 
 .vertical-tabs__panes {
-  margin-top: -1px
+  margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
 }
 
 @media (min-width: 62.5rem) {
-
-.vertical-tabs__panes {
-    width: calc(100% - 15rem);
-    margin-top: 0
-}
+  .vertical-tabs__panes {
+    width: calc(100% - var(--vertical-tabs-menu-width));
+    margin-block-start: 0;
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.vertical-tabs__pane {
-    min-height: 100%
-}
+  .vertical-tabs__pane {
+    min-height: 100%;
   }
+}
 
 .vertical-tabs__pane.olives-details {
   margin: 0;
@@ -93,63 +67,37 @@
   display: none;
 }
 
-.vertical-tabs__menu-item:nth-child(n+2) {
-  border-top: 1px solid var(--color--gray-95);
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
-  padding-left: var(--sp0-75)
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
-  padding-right: var(--sp0-75)
-}
-
-[dir="ltr"] .vertical-tabs__menu-item a {
-  padding-right: var(--sp0-75)
-}
-
-[dir="rtl"] .vertical-tabs__menu-item a {
-  padding-left: var(--sp0-75)
+.vertical-tabs__menu-item:nth-child(n + 2) {
+  border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
 }
 
 .vertical-tabs__menu-item a {
   display: block;
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp0-75);
+  padding-inline-end: var(--sp0-75);
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text-primary-loud);
-  background-color: var(--color--gray-95)
+  background-color: var(--color--gray-95);
 }
 
 .vertical-tabs__menu-item a:focus,
-  .vertical-tabs__menu-item a:hover,
-  .vertical-tabs__menu-item a:active {
-    background-color: var(--color--gray-100);
-  }
+.vertical-tabs__menu-item a:hover,
+.vertical-tabs__menu-item a:active {
+  background-color: var(--color--gray-100);
+}
 
 .vertical-tabs__menu-item.is-selected {
-  background-color: var(--color--white)
+  background-color: var(--color--white);
 }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
-    margin-right: -1px
-}
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
-    margin-left: -1px
-}
-
-[dir="ltr"] .vertical-tabs__menu-item.is-selected {
-    padding-right: 1px
-}
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected {
-    padding-left: 1px
-}
+  .vertical-tabs__menu-item.is-selected {
+    margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
+    padding-inline-end: var(--vertical-tabs-menu-border-width);
   }
+}
 
 .vertical-tabs__menu-item.is-selected a {
   background-color: transparent;

css/components/wide-image.css

@@ -10,106 +10,46 @@
  * Wide image component.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-[dir="ltr"] .wide-image {
-  margin-left: 0
-}
-
-[dir="rtl"] .wide-image {
-  margin-right: 0
-}
-
-[dir="ltr"] .wide-image {
-  margin-right: 0
-}
-
-[dir="rtl"] .wide-image {
-  margin-left: 0
-}
-
 .wide-image {
-  margin-top: var(--sp0-5);
-  margin-bottom: var(--sp2)
+  margin-block-start: var(--sp0-5);
+  margin-block-end: var(--sp2);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .wide-image {
+    width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+    margin-block: var(--sp2) var(--sp4);
+    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
-
-[dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-.wide-image {
-    width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
-    margin-top: var(--sp2);
-    margin-bottom: var(--sp4)
 }
-  }
 
 @media (min-width: 62.5rem) {
-
-[dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-[dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .wide-image {
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
   }
-
-.wide-image {
-    width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
 }
-  }
 
 /* Ensure that image doesn't overlap sidebar. */
 
 @media (min-width: 62.5rem) {
-
-.sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
-}
+  .sidebar-grid .wide-image {
+    width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
   }
+}
 
 @media (min-width: 81.25rem) {
-
-.sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
-}
+  .sidebar-grid .wide-image {
+    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
   }
-
-/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
-
-[dir="ltr"] .layout-builder .wide-image {
-  margin-left: 0
-}
-
-[dir="rtl"] .layout-builder .wide-image {
-  margin-right: 0
-}
-
-[dir="ltr"] .layout-builder .wide-image {
-  margin-right: 0
 }
 
-[dir="rtl"] .layout-builder .wide-image {
-  margin-left: 0
-}
+/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
 
 .layout-builder .wide-image {
   max-width: 100%;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }

css/layout/grid.css

@@ -10,34 +10,18 @@
  * Grid system.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .grid-full {
-  display: -ms-grid;
   display: grid;
-  -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
-  -ms-grid-columns: (minmax(0, 1fr))[var(--grid-col-count)];
   grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
-  grid-column-gap: var(--grid-gap)
+  grid-column-gap: var(--grid-gap);
 
   /* .grid-full classes nested 3 or more deep go full width. */
 }
 
 .grid-full .grid-full .grid-full {
-    display: block;
-  }
+  display: block;
+}
 
 /*
   If the .grid-full is nested within the following, apply the appropriate number of columns.
@@ -46,22 +30,18 @@
 */
 
 @media (min-width: 43.75rem) {
-
-.layout--content-narrow .grid-full,
-.layout--pass--content-narrow > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
-    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
-}
+  .layout--content-narrow .grid-full,
+  .layout--pass--content-narrow > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--content-narrow .grid-full,
-.layout--pass--content-narrow > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 6)];
-    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
-}
+  .layout--content-narrow .grid-full,
+  .layout--pass--content-narrow > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
   }
+}
 
 /*
   If the .grid-full is nested within the following, apply the appropriate number of columns.
@@ -70,19 +50,15 @@
 */
 
 @media (min-width: 43.75rem) {
-
-.layout--content-medium .grid-full,
-.layout--pass--content-medium > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 2)];
-    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
-}
+  .layout--content-medium .grid-full,
+  .layout--pass--content-medium > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--content-medium .grid-full,
-.layout--pass--content-medium > * .grid-full {
-    -ms-grid-columns: (minmax(0, 1fr))[calc(var(--grid-col-count) - 4)];
-    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
-}
+  .layout--content-medium .grid-full,
+  .layout--pass--content-medium > * .grid-full {
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
   }
+}

css/layout/layout-builder-fourcol-section.css

@@ -10,105 +10,66 @@
  * Provides the layout styles for four-column layout section.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout--fourcol-section {
   display: flex;
-  flex-wrap: wrap
+  flex-wrap: wrap;
 }
 
 .layout--fourcol-section > .layout__region {
-    flex: 1 0 100%;
-    margin-bottom: var(--grid-gap)
-  }
+  flex: 1 0 100%;
+  margin-block-end: var(--grid-gap);
+}
 
 @media (min-width: 43.75rem) {
-
-.layout--fourcol-section > .layout__region {
-      flex-basis: calc(50% - var(--grid-gap)*0.5);
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin-bottom: 0
+  .layout--fourcol-section > .layout__region {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-end: 0;
   }
-    }
-
-.layout--fourcol-section {
-
-  /* Two column layout. */
 }
 
-@media (min-width: 43.75rem) {
-    .layout--fourcol-section > .layout__region--first,
-    .layout--fourcol-section > .layout__region--second {
-      margin-bottom: var(--grid-gap);
-    }
-
-    [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] 
-    .layout--fourcol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap)*0.5)
-  }
+/* Two column layout. */
 
-    [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] 
-    .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap)*0.5)
+@media (min-width: 43.75rem) {
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--second {
+    margin-block-end: var(--grid-gap);
   }
 
-    [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] 
-    .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap)*0.5)
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--third {
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
   }
 
-    [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] 
-    .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap)*0.5)
+  .layout--fourcol-section > .layout__region--second,
+  .layout--fourcol-section > .layout__region--fourth {
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
   }
-  }
-
-.layout--fourcol-section {
-
-  /* Four column layout. */
 }
 
-@media (min-width: 62.5rem) {
-    .layout--fourcol-section > .layout__region {
-      flex-basis: calc(25% - var(--grid-gap)*0.75);
-    }
-
-    .layout--fourcol-section > .layout__region--first,
-    .layout--fourcol-section > .layout__region--second {
-      margin-bottom: 0;
-    }
+/* Four column layout. */
 
-    [dir="ltr"] .layout--fourcol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.5)
+@media (min-width: 62.5rem) {
+  .layout--fourcol-section > .layout__region {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.75));
   }
 
-    [dir="rtl"] .layout--fourcol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.5)
+  .layout--fourcol-section > .layout__region--first,
+  .layout--fourcol-section > .layout__region--second {
+    margin-block-end: 0;
   }
 
-    .layout--fourcol-section > .layout__region--second,
-    .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap)*0.5);
-      margin-right: calc(var(--grid-gap)*0.5);
-    }
-
-    [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap)*0.5)
+  .layout--fourcol-section > .layout__region--first {
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
   }
 
-    [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap)*0.5)
+  .layout--fourcol-section > .layout__region--second,
+  .layout--fourcol-section > .layout__region--third {
+    margin-inline: calc(var(--grid-gap) * 0.5);
   }
+
+  .layout--fourcol-section > .layout__region--fourth {
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
   }
+}

css/layout/layout-builder-threecol-section.css

@@ -10,85 +10,63 @@
  * Provides the layout styles for three-column layout section.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout--threecol-section {
   display: flex;
-  flex-wrap: wrap
+  flex-wrap: wrap;
 }
 
 .layout--threecol-section > .layout__region {
-    flex: 1 0 100%;
-    margin-bottom: var(--grid-gap)
-  }
+  flex: 1 0 100%;
+  margin-block-end: var(--grid-gap);
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--threecol-section > .layout__region {
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin-bottom: 0
+  .layout--threecol-section > .layout__region {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-end: 0;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-    [dir="ltr"] .layout--threecol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.5)
-  }
-    [dir="rtl"] .layout--threecol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.5)
+  .layout--threecol-section > .layout__region--first {
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
   }
 
-    .layout--threecol-section > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.5);
-      margin-right: calc(var(--grid-gap)*0.5);
-    }
-
-    [dir="ltr"] .layout--threecol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap)*0.5)
+  .layout--threecol-section > .layout__region--second {
+    margin-inline: calc(var(--grid-gap) * 0.5);
   }
 
-    [dir="rtl"] .layout--threecol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap)*0.5)
+  .layout--threecol-section > .layout__region--third {
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
+  }
+  .layout--threecol-section--25-50-25 > .layout__region--first,
+  .layout--threecol-section--25-50-25 > .layout__region--third {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.5));
   }
-    .layout--threecol-section--25-50-25 > .layout__region--first,
-    .layout--threecol-section--25-50-25 > .layout__region--third {
-      flex-basis: calc(25% - var(--grid-gap)*0.5);
-    }
 
-    .layout--threecol-section--25-50-25 > .layout__region--second {
-      flex-basis: calc(50% - var(--grid-gap));
-    }
-    .layout--threecol-section--25-25-50 > .layout__region--first,
-    .layout--threecol-section--25-25-50 > .layout__region--second {
-      flex-basis: calc(25% - var(--grid-gap)*0.5);
-    }
+  .layout--threecol-section--25-50-25 > .layout__region--second {
+    flex-basis: calc(50% - var(--grid-gap));
+  }
+  .layout--threecol-section--25-25-50 > .layout__region--first,
+  .layout--threecol-section--25-25-50 > .layout__region--second {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+  }
 
-    .layout--threecol-section--25-25-50 > .layout__region--third {
-      flex-basis: calc(50% - var(--grid-gap));
-    }
-    .layout--threecol-section--50-25-25 > .layout__region--first {
-      flex-basis: calc(50% - var(--grid-gap));
-    }
+  .layout--threecol-section--25-25-50 > .layout__region--third {
+    flex-basis: calc(50% - var(--grid-gap));
+  }
+  .layout--threecol-section--50-25-25 > .layout__region--first {
+    flex-basis: calc(50% - var(--grid-gap));
+  }
 
-    .layout--threecol-section--50-25-25 > .layout__region--second,
-    .layout--threecol-section--50-25-25 > .layout__region--third {
-      flex-basis: calc(25% - var(--grid-gap)*0.5);
-    }
-    .layout--threecol-section--33-34-33 > .layout__region--first,
-    .layout--threecol-section--33-34-33 > .layout__region--second,
-    .layout--threecol-section--33-34-33 > .layout__region--third {
-      flex-basis: calc(33.33% - var(--grid-gap)*0.667);
-    }
+  .layout--threecol-section--50-25-25 > .layout__region--second,
+  .layout--threecol-section--50-25-25 > .layout__region--third {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+  }
+  .layout--threecol-section--33-34-33 > .layout__region--first,
+  .layout--threecol-section--33-34-33 > .layout__region--second,
+  .layout--threecol-section--33-34-33 > .layout__region--third {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+  }
 }

css/layout/layout-builder-twocol-section.css

@@ -10,142 +10,68 @@
  * Provides the layout styles for two-column layout section.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout--twocol-section {
   display: flex;
-  flex-wrap: wrap
+  flex-wrap: wrap;
 }
 
 .layout--twocol-section > .layout__region {
-    flex: 1 0 100%;
-    margin-bottom: var(--grid-gap)
-  }
+  flex: 1 0 100%;
+  margin-block-end: var(--grid-gap);
+}
 
 @media (min-width: 43.75rem) {
-
-.layout--twocol-section > .layout__region {
-      flex-grow: 0;
-      flex-shrink: 0;
-      margin-bottom: 0
+  .layout--twocol-section > .layout__region {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-block-end: 0;
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-    [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.5)
-  }
-    [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.5)
-  }
-    .layout--twocol-section--50-50 > .layout__region--first {
-      flex-basis: calc(50% - var(--grid-gap)*0.5);
-    }
-
-    [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.5)
-  }
-
-    [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-right: calc(var(--grid-gap)*0.5)
-  }
-
-    .layout--twocol-section--50-50 > .layout__region--second {
-      flex-basis: calc(50% - var(--grid-gap)*0.5);
-    }
-    [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.3333)
-  }
-    [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.3333)
-  }
-    .layout--twocol-section--33-67 > .layout__region--first {
-      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
-    }
-
-    [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.6666)
-  }
-
-    [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-right: calc(var(--grid-gap)*0.6666)
+  .layout--twocol-section--50-50 > .layout__region--first {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    margin-inline-end: calc(var(--grid-gap) * 0.5);
   }
 
-    .layout--twocol-section--33-67 > .layout__region--second {
-      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
-    }
-    [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.6666)
+  .layout--twocol-section--50-50 > .layout__region--second {
+    flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+    margin-inline-start: calc(var(--grid-gap) * 0.5);
   }
-    [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.6666)
+  .layout--twocol-section--33-67 > .layout__region--first {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+    margin-inline-end: calc(var(--grid-gap) * 0.3333);
   }
-    .layout--twocol-section--67-33 > .layout__region--first {
-      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
-    }
 
-    [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.3333)
+  .layout--twocol-section--33-67 > .layout__region--second {
+    flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+    margin-inline-start: calc(var(--grid-gap) * 0.6666);
   }
-
-    [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-right: calc(var(--grid-gap)*0.3333)
-  }
-
-    .layout--twocol-section--67-33 > .layout__region--second {
-      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
-    }
-    [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.25)
-  }
-    [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.25)
+  .layout--twocol-section--67-33 > .layout__region--first {
+    flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+    margin-inline-end: calc(var(--grid-gap) * 0.6666);
   }
-    .layout--twocol-section--25-75 > .layout__region--first {
-      flex-basis: calc(25% - var(--grid-gap)*0.25);
-    }
 
-    [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.75)
+  .layout--twocol-section--67-33 > .layout__region--second {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+    margin-inline-start: calc(var(--grid-gap) * 0.3333);
   }
-
-    [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-right: calc(var(--grid-gap)*0.75)
+  .layout--twocol-section--25-75 > .layout__region--first {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+    margin-inline-end: calc(var(--grid-gap) * 0.25);
   }
 
-    .layout--twocol-section--25-75 > .layout__region--second {
-      flex-basis: calc(75% - var(--grid-gap)*0.75);
-    }
-    [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-right: calc(var(--grid-gap)*0.75)
-  }
-    [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-left: calc(var(--grid-gap)*0.75)
+  .layout--twocol-section--25-75 > .layout__region--second {
+    flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+    margin-inline-start: calc(var(--grid-gap) * 0.75);
   }
-    .layout--twocol-section--75-25 > .layout__region--first {
-      flex-basis: calc(75% - var(--grid-gap)*0.75);
-    }
-
-    [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-left: calc(var(--grid-gap)*0.25)
+  .layout--twocol-section--75-25 > .layout__region--first {
+    flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+    margin-inline-end: calc(var(--grid-gap) * 0.75);
   }
 
-    [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-right: calc(var(--grid-gap)*0.25)
+  .layout--twocol-section--75-25 > .layout__region--second {
+    flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+    margin-inline-start: calc(var(--grid-gap) * 0.25);
   }
-
-    .layout--twocol-section--75-25 > .layout__region--second {
-      flex-basis: calc(25% - var(--grid-gap)*0.25);
-    }
 }

css/layout/layout-content-medium.css

@@ -10,46 +10,25 @@
  * Grid system definition for the content wide layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout--content-medium,
 .layout--pass--content-medium > * {
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 6;
   grid-column: 1 / 7;
-  width: 100%
+  width: 100%;
 }
 
 @media (min-width: 43.75rem) {
-
-.layout--content-medium,
-.layout--pass--content-medium > * {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 12;
-    grid-column: 2 / 14
-}
+  .layout--content-medium,
+  .layout--pass--content-medium > * {
+    grid-column: 2 / 14;
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--content-medium,
-.layout--pass--content-medium > * {
-    -ms-grid-column: 3;
-    -ms-grid-column-span: 10;
-    grid-column: 3 / 13
-}
+  .layout--content-medium,
+  .layout--pass--content-medium > * {
+    grid-column: 3 / 13;
   }
+}
 
 /*
   If .layout--content-medium is nested within itself, or an element that's inheriting the
@@ -58,25 +37,19 @@
 */
 
 @media (min-width: 43.75rem) {
-
-.layout--pass--content-medium > * .layout--content-medium,
-  .layout--pass--content-medium > * .layout--pass--content-medium > *,
+  .layout--pass--content-medium > * .layout--content-medium,
   .layout--content-medium .layout--content-medium,
+  .layout--pass--content-medium > * .layout--pass--content-medium > *,
   .layout--content-medium .layout--pass--content-medium > * {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 12;
-      grid-column: 1 / 13
+    grid-column: 1 / 13;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--pass--content-medium > * .layout--content-medium,
-  .layout--pass--content-medium > * .layout--pass--content-medium > *,
+  .layout--pass--content-medium > * .layout--content-medium,
   .layout--content-medium .layout--content-medium,
+  .layout--pass--content-medium > * .layout--pass--content-medium > *,
   .layout--content-medium .layout--pass--content-medium > * {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 10;
-      grid-column: 1 / 11
+    grid-column: 1 / 11;
   }
-    }
+}

css/layout/layout-content-narrow.css

@@ -10,46 +10,25 @@
  * Grid system definition for the content narrow layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout--content-narrow,
 .layout--pass--content-narrow > * {
-  -ms-grid-column: 1;
-  -ms-grid-column-span: 6;
   grid-column: 1 / 7;
-  width: 100%
+  width: 100%;
 }
 
 @media (min-width: 43.75rem) {
-
-.layout--content-narrow,
-.layout--pass--content-narrow > * {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 12;
-    grid-column: 2 / 14
-}
+  .layout--content-narrow,
+  .layout--pass--content-narrow > * {
+    grid-column: 2 / 14;
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--content-narrow,
-.layout--pass--content-narrow > * {
-    -ms-grid-column: 3;
-    -ms-grid-column-span: 8;
-    grid-column: 3 / 11
-}
+  .layout--content-narrow,
+  .layout--pass--content-narrow > * {
+    grid-column: 3 / 11;
   }
+}
 
 /*
   If .layout--content-narrow is nested within any of the following, allocate the appropriate
@@ -61,36 +40,30 @@
 */
 
 @media (min-width: 43.75rem) {
-
-.layout--content-narrow .layout--content-narrow,
-  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--content-narrow .layout--content-narrow,
   .layout--pass--content-narrow > * .layout--content-narrow,
-  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
   .layout--content-medium .layout--content-narrow,
-  .layout--content-medium .layout--pass--content-narrow > *,
   .layout--pass--content-medium > * .layout--content-narrow,
+  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+  .layout--content-medium .layout--pass--content-narrow > *,
   .layout--pass--content-medium > * .layout--pass--content-narrow > * {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 12;
-      grid-column: 1 / 13
+    grid-column: 1 / 13;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout--content-narrow .layout--content-narrow,
-  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--content-narrow .layout--content-narrow,
   .layout--pass--content-narrow > * .layout--content-narrow,
-  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
   .layout--content-medium .layout--content-narrow,
-  .layout--content-medium .layout--pass--content-narrow > *,
   .layout--pass--content-medium > * .layout--content-narrow,
+  .layout--content-narrow .layout--pass--content-narrow > *,
+  .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+  .layout--content-medium .layout--pass--content-narrow > *,
   .layout--pass--content-medium > * .layout--pass--content-narrow > * {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 8;
-      grid-column: 1 / 9
+    grid-column: 1 / 9;
   }
-    }
+}
 
 /*
   Special grid-breaking treatment for text-content elements that
@@ -98,79 +71,55 @@
 */
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::before,[dir="ltr"]  .layout--content-narrow .text-content blockquote::before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote::before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote::before {
-          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .layout--content-narrow.text-content blockquote::before,
+  .layout--pass--content-narrow > *.text-content blockquote::before,
+  .layout--content-narrow .text-content blockquote::before,
+  .layout--pass--content-narrow > * .text-content blockquote::before {
+    inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
   }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::before,[dir="rtl"]  .layout--content-narrow .text-content blockquote::before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote::before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote::before {
-          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-        }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::after,[dir="ltr"]  .layout--content-narrow .text-content blockquote::after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote::after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote::after {
-          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .layout--content-narrow.text-content blockquote::after,
+  .layout--pass--content-narrow > *.text-content blockquote::after,
+  .layout--content-narrow .text-content blockquote::after,
+  .layout--pass--content-narrow > * .text-content blockquote::after {
+    inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+    width: var(--sp);
+    height: calc(100% - 2.8125rem);
+    margin-inline-start: 2px;
   }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::after,[dir="rtl"]  .layout--content-narrow .text-content blockquote::after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote::after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote::after {
-          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
-  }
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote::after,[dir="ltr"]  .layout--content-narrow .text-content blockquote::after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote::after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote::after {
-          margin-left: 2px
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote::after,[dir="rtl"]  .layout--content-narrow .text-content blockquote::after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote::after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote::after {
-          margin-right: 2px
-  }
-
-.layout--content-narrow.text-content blockquote::after, .layout--content-narrow .text-content blockquote::after, .layout--pass--content-narrow > *.text-content blockquote::after, .layout--pass--content-narrow > * .text-content blockquote::after {
-          width: var(--sp);
-          height: calc(100% - 2.8125rem)
-      }
-        }
+}
 
 @media (min-width: 43.75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"]  .layout--content-narrow .text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote {
-        padding-left: 0
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote,[dir="rtl"]  .layout--content-narrow .text-content blockquote,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote {
-        padding-right: 0
+  .layout--content-narrow.text-content blockquote,
+  .layout--pass--content-narrow > *.text-content blockquote,
+  .layout--content-narrow .text-content blockquote,
+  .layout--pass--content-narrow > * .text-content blockquote {
+    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+    margin-block: var(--sp3);
+    padding-inline-start: 0;
   }
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
-        margin-top: var(--sp3);
-        margin-bottom: var(--sp3)
-    }
-      }
+}
 
 @media (min-width: 43.75rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        margin-top: var(--sp3);
-        margin-bottom: var(--sp3)
-    }
-      }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+  .layout--content-narrow.text-content pre,
+  .layout--pass--content-narrow > *.text-content pre,
+  .layout--content-narrow .text-content pre,
+  .layout--pass--content-narrow > * .text-content pre {
+    margin-block: var(--sp3);
   }
+}
 
-[dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
+@media (min-width: 62.5rem) {
+  .layout--content-narrow.text-content pre,
+  .layout--pass--content-narrow > *.text-content pre,
+  .layout--content-narrow .text-content pre,
+  .layout--pass--content-narrow > * .text-content pre {
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
   }
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
-    }
-      }
+}
 
 /**
  * <pre> and <blockquote> elements should not break containers and overflow
@@ -178,12 +127,12 @@
  */
 
 .sidebar-grid .layout--content-narrow.text-content blockquote,
-      .sidebar-grid .layout--content-narrow.text-content pre,
-      .sidebar-grid .layout--content-narrow .text-content blockquote,
-      .sidebar-grid .layout--content-narrow .text-content pre,
-      .sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
-      .sidebar-grid .layout--pass--content-narrow > *.text-content pre,
-      .sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
-      .sidebar-grid .layout--pass--content-narrow > * .text-content pre {
-        width: auto;
-      }
+.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
+.sidebar-grid .layout--content-narrow .text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
+.sidebar-grid .layout--content-narrow.text-content pre,
+.sidebar-grid .layout--pass--content-narrow > *.text-content pre,
+.sidebar-grid .layout--content-narrow .text-content pre,
+.sidebar-grid .layout--pass--content-narrow > * .text-content pre {
+  width: auto;
+}

css/layout/layout-discovery-section-layout.css

@@ -10,33 +10,18 @@
  * Provides default layout styles for all layout sections.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .layout {
-  margin-bottom: var(--sp)
+  margin-block-end: var(--sp);
 }
 
 @media (min-width: 43.75rem) {
-
-.layout {
-    margin-bottom: var(--sp2)
-}
+  .layout {
+    margin-block-end: var(--sp2);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.layout {
-    margin-bottom: var(--sp3)
-}
+  .layout {
+    margin-block-end: var(--sp3);
   }
+}

css/layout/layout-footer.css

@@ -10,19 +10,6 @@
  * Grid system definition for the footer top and footer bottom layouts.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 /**
  * Creates stacking context ensuring that child elements can never appear in
  * front of mobile navigation.
@@ -34,43 +21,37 @@
 }
 
 .site-footer__inner {
-  padding-top: var(--sp2);
-  padding-bottom: var(--sp2)
+  padding-block: var(--sp2);
 }
 
 @media (min-width: 75rem) {
-
-.site-footer__inner {
-    padding-top: var(--sp4);
-    padding-bottom: calc(var(--sp)*13)
-}
+  .site-footer__inner {
+    padding-block: var(--sp4) calc(13 * var(--sp));
   }
+}
 
-.region--footer_top__inner > *, .region--footer_bottom__inner > * {
-    margin-bottom: var(--sp2)
-  }
+.region--footer_top__inner > *,
+.region--footer_bottom__inner > * {
+  margin-block-end: var(--sp2);
+}
 
 @media (min-width: 43.75rem) {
-
-.region--footer_top__inner > *, .region--footer_bottom__inner > * {
-      flex: 1;
-      margin-bottom: 0
-  }
-
-      [dir="ltr"] .region--footer_top__inner > *:not(:last-child),[dir="ltr"]  .region--footer_bottom__inner > *:not(:last-child) {
-        margin-right: var(--sp2);
+  .region--footer_top__inner > *,
+  .region--footer_bottom__inner > * {
+    flex: 1;
+    margin-block-end: 0;
   }
 
-      [dir="rtl"] .region--footer_top__inner > *:not(:last-child),[dir="rtl"]  .region--footer_bottom__inner > *:not(:last-child) {
-        margin-left: var(--sp2);
+  .region--footer_top__inner > *:not(:last-child),
+  .region--footer_bottom__inner > *:not(:last-child) {
+    margin-inline-end: var(--sp2);
   }
-    }
+}
 
 @media (min-width: 43.75rem) {
-
-.region--footer_top__inner,
-.region--footer_bottom__inner {
+  .region--footer_top__inner,
+  .region--footer_bottom__inner {
     display: flex;
-    flex-wrap: wrap
-}
+    flex-wrap: wrap;
   }
+}

css/layout/layout-sidebar.css

@@ -10,86 +10,50 @@
  * Special grid system for sidebar.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .sidebar-grid > .site-main {
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 6;
-    grid-column: 1 / 7;
-    align-self: flex-start
-  }
+  grid-column: 1 / 7;
+  align-self: flex-start;
+}
 
 @media (min-width: 43.75rem) {
-
-.sidebar-grid > .site-main {
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 14;
-      grid-column: 1 / 15
+  .sidebar-grid > .site-main {
+    grid-column: 1 / 15;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.sidebar-grid > .site-main {
-      display: -ms-grid;
-      display: grid;
-      -ms-grid-columns: (minmax(0, 1fr))[8];
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-      -ms-grid-column: 3;
-      -ms-grid-column-span: 8;
-      grid-column: 3 / 11
+  .sidebar-grid > .site-main {
+    display: grid;
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    grid-column: 3 / 11;
   }
 
-      .sidebar-grid > .site-main > .region--content-above,
-      .sidebar-grid > .site-main > .region--content {
-        -ms-grid-columns: (minmax(0, 1fr))[8];
-        grid-template-columns: repeat(8, minmax(0, 1fr));
-        -ms-grid-column: 1;
-        -ms-grid-column-span: 8;
-        grid-column: 1 / 9;
-      }
+  .sidebar-grid > .site-main > .region--content-above,
+  .sidebar-grid > .site-main > .region--content {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    grid-column: 1 / 9;
+  }
 
-      .sidebar-grid > .site-main .layout--content-narrow,
-      .sidebar-grid > .site-main .layout--pass--content-narrow > *,
-      .sidebar-grid > .site-main .layout--content-medium,
-      .sidebar-grid > .site-main .layout--pass--content-medium > * {
-        -ms-grid-column: 1;
-        -ms-grid-column-span: 8;
-        grid-column: 1 / 9;
-      }
-    }
+  .sidebar-grid > .site-main .layout--content-narrow,
+  .sidebar-grid > .site-main .layout--pass--content-narrow > *,
+  .sidebar-grid > .site-main .layout--content-medium,
+  .sidebar-grid > .site-main .layout--pass--content-medium > * {
+    grid-column: 1 / 9;
+  }
+}
 
 .sidebar-grid .region--sidebar {
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 6;
-    grid-column: 1 / 7
-  }
+  grid-column: 1 / 7;
+}
 
 @media (min-width: 43.75rem) {
-
-.sidebar-grid .region--sidebar {
-      -ms-grid-column: 3;
-      -ms-grid-column-span: 10;
-      grid-column: 3 / 13
+  .sidebar-grid .region--sidebar {
+    grid-column: 3 / 13;
   }
-    }
+}
 
 @media (min-width: 62.5rem) {
-
-.sidebar-grid .region--sidebar {
-      -ms-grid-column: 12;
-      -ms-grid-column-span: 3;
-      grid-column: 12 / 15
+  .sidebar-grid .region--sidebar {
+    grid-column: 12 / 15;
   }
-    }
+}

css/layout/layout-views-grid.css

@@ -14,19 +14,6 @@
  * they reach the --views-grid-item--min-width value.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .views-view-grid {
   --views-grid--layout-gap: var(--sp);
   --views-grid--column-count: 4; /* Will be overridden by an inline style. */
@@ -38,10 +25,8 @@
    * Calculated values.
    */
   --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
-  --views-grid--total-gap-width: calc(var(--views-grid--gap-count)*var(--views-grid--layout-gap));
-  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width))/var(--views-grid--column-count));
-
-  display: -ms-grid;
+  --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+  --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
 
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
@@ -49,14 +34,14 @@
 }
 
 .views-view-grid--vertical {
-  margin-bottom: calc(var(--views-grid--layout-gap)*-1); /* Offset the bottom row's padding. */
+  margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
   column-width: var(--views-grid-item--min-width);
   column-count: var(--views-grid--column-count);
-  grid-column-gap: var(--views-grid--layout-gap)
+  column-gap: var(--views-grid--layout-gap);
 }
 
 .views-view-grid--vertical .views-view-grid__item > * {
-      padding-bottom: var(--views-grid--layout-gap);
-      page-break-inside: avoid;
-      break-inside: avoid;
-    }
+  padding-block-end: var(--views-grid--layout-gap);
+  page-break-inside: avoid;
+  break-inside: avoid;
+}

css/layout/layout.css

@@ -10,24 +10,10 @@
  * Base Layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .container {
   width: 100%;
   max-width: var(--max-width);
-  padding-left: var(--container-padding);
-  padding-right: var(--container-padding)
+  padding-inline: var(--container-padding);
 
   /* This fixes an issue where if the toolbar is open in vertical mode, and
    * the mobile navigation is open, the "close" button gets pushed outside of
@@ -35,7 +21,7 @@
 }
 
 body.is-fixed .container {
-    width: 100%
+  width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
 }
 
 .page-wrapper {
@@ -56,36 +42,26 @@ body.is-fixed .container {
 /* Contains the social sidebar, and the primary content area. */
 
 @media (min-width: 75rem) {
-
-.layout-main {
+  .layout-main {
     display: flex;
     flex-direction: row-reverse;
-    flex-wrap: wrap
-}
+    flex-wrap: wrap;
   }
+}
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] .main-content {
-    margin-right: auto
-  }
-
-[dir="rtl"] .main-content {
-    margin-left: auto
+  .main-content {
+    width: calc(100% - var(--content-left));
+    margin-inline-end: auto;
   }
-
-.main-content {
-    width: calc(100% - var(--content-left))
 }
-  }
 
 .main-content__container {
-  padding-top: var(--sp3)
+  padding-block-start: var(--sp3);
 }
 
 @media (min-width: 43.75rem) {
-
-.main-content__container {
-    padding-top: var(--sp5)
-}
+  .main-content__container {
+    padding-block-start: var(--sp5);
   }
+}

css/layout/region-content-below.css

@@ -10,73 +10,37 @@
  * Content below region layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 @media (min-width: 43.75rem) {
-
-.region--content-below {
+  .region--content-below {
     display: flex;
-    flex-wrap: wrap
-}
-
-    [dir="ltr"] .region--content-below > * {
-      margin-right: var(--grid-gap)
-}
-
-    [dir="rtl"] .region--content-below > * {
-      margin-left: var(--grid-gap)
-}
-
-    .region--content-below > * {
-      flex-basis: calc(50% - var(--grid-gap)/2);
-      flex-grow: 1;
-      flex-shrink: 0
-    }
-
-      [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] 
-      .region--content-below > *:last-child {
-        margin-right: 0
-}
-
-      [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"] 
-      .region--content-below > *:last-child {
-        margin-left: 0
-}
+    flex-wrap: wrap;
   }
 
-@media (min-width: 43.75rem) {
-    .region--content-below > * {
-      flex-basis: calc(33.33% - var(--grid-gap)*0.667)
-    }
+  .region--content-below > * {
+    flex-basis: calc(50% - (var(--grid-gap) / 2));
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-inline-end: var(--grid-gap);
+  }
 
-      [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] 
-      .region--content-below > *:last-child {
-        margin-right: var(--grid-gap)
+  .region--content-below > *:nth-child(2n),
+  .region--content-below > *:last-child {
+    margin-inline-end: 0;
+  }
 }
 
-      [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"] 
-      .region--content-below > *:last-child {
-        margin-left: var(--grid-gap)
-}
+@media (min-width: 43.75rem) {
+  .region--content-below > * {
+    flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+  }
 
-      [dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"] 
-      .region--content-below > *:last-child {
-        margin-right: 0
-}
+  .region--content-below > *:nth-child(2n),
+  .region--content-below > *:last-child {
+    margin-inline-end: var(--grid-gap);
+  }
 
-      [dir="rtl"] .region--content-below > *:nth-child(3n),[dir="rtl"] 
-      .region--content-below > *:last-child {
-        margin-left: 0
-}
+  .region--content-below > *:nth-child(3n),
+  .region--content-below > *:last-child {
+    margin-inline-end: 0;
   }
+}

css/layout/region-content.css

@@ -10,33 +10,18 @@
  * Content region layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .region--content {
-  margin-bottom: var(--sp)
+  margin-block-end: var(--sp);
 }
 
 @media (min-width: 43.75rem) {
-
-.region--content {
-    margin-bottom: var(--sp2)
-}
+  .region--content {
+    margin-block-end: var(--sp2);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.region--content {
-    margin-bottom: var(--sp3)
-}
+  .region--content {
+    margin-block-end: var(--sp3);
   }
+}

css/layout/region-hero.css

@@ -10,19 +10,6 @@
  * Region default layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .region--hero > *:last-child {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}

css/layout/region-secondary-menu.css

@@ -10,37 +10,24 @@
  * Secondary menu region layout styling.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .region--secondary-menu {
   display: flex;
-  margin-top: var(--sp2);
-  margin-bottom: var(--sp2)
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
 }
 
 .region--secondary-menu > * {
-    margin-bottom: 0;
-  }
+  margin-block-end: 0;
+}
 
 @media (min-width: 75rem) {
-    body:not(.is-always-mobile-nav) .region--secondary-menu {
-      justify-content: flex-end;
-      margin: 0
+  body:not(.is-always-mobile-nav) .region--secondary-menu {
+    justify-content: flex-end;
+    margin: 0;
 
-      /* If the secondary nav is the first item within the header, it does not need left separator. */
-    }
-      body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
-        content: none;
-      }
+    /* If the secondary nav is the first item within the header, it does not need left separator. */
   }
+  body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
+    content: none;
+  }
+}

css/layout/region.css

@@ -10,33 +10,18 @@
  * Region default layout.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .region > * {
-  margin-bottom: var(--sp)
+  margin-block-end: var(--sp);
 }
 
 @media (min-width: 43.75rem) {
-
-.region > * {
-    margin-bottom: var(--sp2)
-}
+  .region > * {
+    margin-block-end: var(--sp2);
   }
+}
 
 @media (min-width: 62.5rem) {
-
-.region > * {
-    margin-bottom: var(--sp3)
-}
+  .region > * {
+    margin-block-end: var(--sp3);
   }
+}

css/layout/social-bar.css

@@ -11,132 +11,65 @@
  .
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 @media (min-width: 75rem) {
-
-.social-bar {
+  .social-bar {
     flex-shrink: 0;
     width: var(--content-left);
-    background-color: var(--color--gray-100)
-}
+    background-color: var(--color--gray-100);
   }
-
-[dir="ltr"] .social-bar__inner {
-  padding-left: var(--sp)
-}
-
-[dir="rtl"] .social-bar__inner {
-  padding-right: var(--sp)
-}
-
-[dir="ltr"] .social-bar__inner {
-  padding-right: var(--sp)
-}
-
-[dir="rtl"] .social-bar__inner {
-  padding-left: var(--sp)
 }
 
 .social-bar__inner {
   position: relative;
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5)
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
 }
 
 @media (min-width: 75rem) {
-
-[dir="ltr"] .social-bar__inner {
-    padding-left: 0
-}
-
-[dir="rtl"] .social-bar__inner {
-    padding-right: 0
-}
-
-[dir="ltr"] .social-bar__inner {
-    padding-right: 0
-}
-
-[dir="rtl"] .social-bar__inner {
-    padding-left: 0
-}
-
-.social-bar__inner {
+  .social-bar__inner {
     position: relative;
     width: var(--content-left);
-    padding-top: calc(var(--sp)*5);
-    padding-bottom: calc(var(--sp)*5)
-}
-
-    [dir="ltr"] .social-bar__inner.is-fixed {
-      left: 0
-}
-
-    [dir="rtl"] .social-bar__inner.is-fixed {
-      right: 0
-}
-
-    .social-bar__inner.is-fixed {
-      position: fixed;
-      top: var(--sp6);
-      height: calc(100vh - var(--sp)*6);
-    }
+    padding-block: calc(5 * var(--sp));
+    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
 
-.rotate > * {
-    margin-bottom: var(--sp2)
-  }
-
-@media (min-width: 75rem) {
-
-.rotate > * {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0
+  .social-bar__inner.is-fixed {
+    position: fixed;
+    inset-block-start: var(--sp6);
+    inset-inline-start: 0;
+    height: calc(100vh - 6 * var(--sp));
   }
-
-      [dir="ltr"] .rotate > *:not(:first-child) {
-        margin-right: var(--sp2)
 }
 
-      [dir="rtl"] .rotate > *:not(:first-child) {
-        margin-left: var(--sp2)
+.rotate > * {
+  margin-block-end: var(--sp2);
 }
-    }
 
 @media (min-width: 75rem) {
+  .rotate > * {
+    display: flex;
+    align-items: center;
+    margin-block-end: 0;
+  }
 
-[dir="ltr"] .rotate .contextual {
-      left: 100%;
-      right: auto
-}
-
-[dir="rtl"] .rotate .contextual {
-      right: 100%;
-      left: auto
+  .rotate > *:not(:first-child) {
+    margin-inline-end: var(--sp2);
+  }
 }
 
-.rotate .contextual {
-      transform: rotate(90deg); /* LTR */
-      transform-origin: top left /* LTR */
+@media (min-width: 75rem) {
+  .rotate .contextual {
+    inset-inline: 100% auto;
+    transform: rotate(90deg); /* LTR */
+    transform-origin: top left; /* LTR */
   }
 
-      .rotate .contextual .trigger {
-        float: left /* LTR */
+  .rotate .contextual .trigger {
+    float: left; /* LTR */
 
-        /**
+    /**
          * Chromium and Webkit do not yet support flow relative logical properties,
          * such as float: inline-end. However, PostCSS Logical does not compile this
          * value, so we accommodate by not using these.
@@ -144,47 +77,38 @@
          * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
          * @see https://github.com/csstools/postcss-plugins/issues/632
          */
-      }
-        [dir="rtl"] .rotate .contextual .trigger {
-          float: right;
-        }
-    }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .rotate {
-    left: 50%
-}
-
-[dir="rtl"] .rotate {
-    right: 50%
+  }
+  [dir="rtl"] .rotate .contextual .trigger {
+    float: right;
+  }
 }
 
-.rotate {
+@media (min-width: 75rem) {
+  .rotate {
     position: absolute;
+    inset-inline-start: 50%;
     display: flex;
     flex-direction: row-reverse;
     width: 100vh;
     transform: rotate(-90deg) translateX(-100%); /* LTR */
-    transform-origin: left /* LTR */
-}
-
-    @supports (width: max-content) {
+    transform-origin: left; /* LTR */
+  }
 
-.rotate {
-      width: max-content
-}
+  @supports (width: max-content) {
+    .rotate {
+      width: max-content;
     }
   }
+}
 
 @media (min-width: 75rem) {
-    [dir="rtl"] .rotate {
-      transform: rotate(90deg) translateX(100%);
-      transform-origin: right
-    }
+  [dir="rtl"] .rotate {
+    transform: rotate(90deg) translateX(100%);
+    transform-origin: right;
+  }
 
-      [dir="rtl"] .rotate .contextual {
-        transform: rotate(-90deg);
-        transform-origin: top right;
-      }
+  [dir="rtl"] .rotate .contextual {
+    transform: rotate(-90deg);
+    transform-origin: top right;
   }
+}

css/layout/views.css

@@ -10,30 +10,16 @@
  * Styles for views.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 .view > * {
-    margin-bottom: var(--sp2)
-  }
+  margin-block-end: var(--sp2);
+}
 
 .view > *:last-child {
-      margin-bottom: 0;
-    }
+  margin-block-end: 0;
+}
 
 @media (min-width: 43.75rem) {
-
-.view > * {
-      margin-bottom: var(--sp3)
+  .view > * {
+    margin-block-end: var(--sp3);
   }
-    }
+}

css/theme/filter.theme.css

@@ -10,25 +10,12 @@
  * Styling for the Filter module.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
 /**
  * Filter information under field.
  */
 
 .text-full > .form-item {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .form-element--editor-format {
@@ -36,8 +23,7 @@
 }
 
 .filter-wrapper {
-  margin-top: var(--sp1);
-  margin-bottom: var(--sp0-5);
+  margin-block: var(--sp1) var(--sp0-5);
 }
 
 .filter-wrapper .form-item {
@@ -46,9 +32,8 @@
 
 .filter-help {
   float: right; /* LTR */
-  padding-top: var(--sp0-5);
-  padding-bottom: var(--sp0-5);
-  font-size: var(--font-size-xxs)
+  padding-block: var(--sp0-5);
+  font-size: var(--font-size-xxs);
 
   /**
    * Chromium and Webkit do not yet support flow relative logical properties,
@@ -61,8 +46,8 @@
 }
 
 [dir="rtl"] .filter-help {
-    float: left;
-  }
+  float: left;
+}
 
 /**
  * Compose tips.
@@ -71,8 +56,7 @@
  */
 
 .compose-tips__item {
-  margin-top: var(--sp1-5);
-  margin-bottom: var(--sp1-5);
+  margin-block: var(--sp1-5);
 }
 
 /**
@@ -80,14 +64,13 @@
  */
 
 .filter-guidelines__item {
-  margin-top: var(--sp1);
+  margin-block-start: var(--sp1);
   font-size: var(--font-size-s);
   line-height: var(--line-height-s);
 }
 
 .filter-guidelines p {
-  margin-top: var(--sp0-25);
-  margin-bottom: 0;
+  margin-block: var(--sp0-25) 0;
 }
 
 /**
@@ -98,16 +81,14 @@
  */
 
 .filter-tips--long {
-  margin-bottom: var(--sp1-5);
+  margin-block-end: var(--sp1-5);
 }
 
 .filter-tips__item,
 .filter-tips--long p {
-  margin-top: var(--sp0-75);
-  margin-bottom: var(--sp0-75);
+  margin-block: var(--sp0-75);
 }
 
 .filter-tips__item--short {
-  margin-top: var(--sp0-25);
-  margin-bottom: 0;
+  margin-block: var(--sp0-25) 0;
 }