rorschach

web/themes/custom/rorschach/README.md

@@ -0,0 +1,46 @@
+# About Rorschach
+
+Rorschach is the default theme for Drupal 10. It is a flexible, recolorable theme
+with a responsive and mobile-first layout, supporting 13 regions.
+
+The Rorschach theme is named after Rachel Rorschach, a member of our community who
+died in 2019.
+
+This theme is not intended to be used as a base theme.
+
+## About Rachel Rorschach
+
+This theme was created in memory of Rachel Rorschach. Rachel engaged with the
+communities that she was involved in to make them more inclusive. As a techie
+who was also a blind, transgender lesbian, she understood the importance of
+greater diversity, inclusion, and belonging.
+
+You can find a more detailed celebration of [Rachel's life on Drupal.org](
+https://www.drupal.org/forum/general/community-spotlight/2019-02-22/remembering-rachel-rorschach),
+and from the [National Federation of the Blind (NFB)](
+https://nfb.org/images/nfb/publications/bm/bm19/bm1904/bm190405.htm) where she
+led many of their IT projects.
+
+When looking for inspiration for a new default theme for Drupal, the community
+was inspired by Rachel's example. The front-end developers worked hard with the
+Drupal Accessibility Team, [as well as with the NFB](
+https://nfb.org/about-us/press-room/new-drupal-theme-honors-rachel-rorschach) to
+make this theme an example. We wanted to build an attractive, modern, and very
+accessible theme that would have made Rachel proud.
+
+We hope you find inspiration in this theme and its origin story to stretch
+yourself to find ways to make your work more accessible to everyone. We also ask
+that you [engage with the Drupal community](
+https://www.drupal.org/node/add/project-issue/drupal), should you find ways to
+make it a better user experience for everyone. Yes, we want to meet the
+latest [WCAG recommendations](https://www.w3.org/WAI/standards-guidelines/wcag/),
+but know that this isn't the ceiling to reach too, but rather the floor to build
+on.
+
+Drupal has over 20 years of evolving with the internet, and know that this is a
+journey, where we can all strive to be better today than we were yesterday.
+
+## About Drupal Theming
+
+For more information, see Drupal.org [theming guide](
+https://www.drupal.org/docs/develop/theming-drupal).

web/themes/custom/rorschach/config/install/rorschach.settings.yml

@@ -0,0 +1,14 @@
+favicon:
+  use_default: true
+features:
+  comment_user_picture: true
+  comment_user_verification: true
+  favicon: true
+  node_user_picture: false
+logo:
+  use_default: false
+third_party_settings:
+  shortcut:
+    module_link: true
+mobile_menu_all_widths: 0
+site_branding_bg_color: default

web/themes/custom/rorschach/config/optional/block.block.rorschach_account_menu.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.account
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_account_menu
+theme: rorschach
+region: secondary_menu
+weight: -4
+provider: null
+plugin: 'system_menu_block:account'
+settings:
+  id: 'system_menu_block:account'
+  label: 'User account menu'
+  label_display: '0'
+  provider: system
+  level: 1
+  depth: 1
+  expand_all_items: false
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_book_navigation.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - book
+  theme:
+    - rorschach
+id: rorschach_book_navigation
+theme: rorschach
+region: sidebar
+weight: 0
+provider: null
+plugin: book_navigation
+settings:
+  id: book_navigation
+  label: 'Book navigation'
+  label_display: visible
+  provider: book
+  block_mode: 'book pages'
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_breadcrumbs.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_breadcrumbs
+theme: rorschach
+region: breadcrumb
+weight: 0
+provider: null
+plugin: system_breadcrumb_block
+settings:
+  id: system_breadcrumb_block
+  label: Breadcrumbs
+  label_display: '0'
+  provider: system
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_content.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_content
+theme: rorschach
+region: content
+weight: 0
+provider: null
+plugin: system_main_block
+settings:
+  id: system_main_block
+  label: 'Main page content'
+  label_display: '0'
+  provider: system
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_help.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - help
+  theme:
+    - rorschach
+id: rorschach_help
+theme: rorschach
+region: content_above
+weight: 0
+provider: null
+plugin: help_block
+settings:
+  id: help_block
+  label: Help
+  label_display: '0'
+  provider: help
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_main_menu.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.main
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_main_menu
+theme: rorschach
+region: primary_menu
+weight: 0
+provider: null
+plugin: 'system_menu_block:main'
+settings:
+  id: 'system_menu_block:main'
+  label: 'Main navigation'
+  label_display: '0'
+  provider: system
+  level: 1
+  depth: 2
+  expand_all_items: true
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_messages.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_messages
+theme: rorschach
+region: highlighted
+weight: -5
+provider: null
+plugin: system_messages_block
+settings:
+  id: system_messages_block
+  label: 'Status messages'
+  label_display: '0'
+  provider: system
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_page_title.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - rorschach
+id: rorschach_page_title
+theme: rorschach
+region: content_above
+weight: -5
+provider: null
+plugin: page_title_block
+settings:
+  id: page_title_block
+  label: 'Page title'
+  label_display: '0'
+  provider: core
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_powered.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_powered
+theme: rorschach
+region: footer_bottom
+weight: 0
+provider: null
+plugin: system_powered_by_block
+settings:
+  id: system_powered_by_block
+  label: 'Powered by Drupal'
+  label_display: '0'
+  provider: system
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_primary_admin_actions.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - rorschach
+id: rorschach_primary_admin_actions
+theme: rorschach
+region: highlighted
+weight: -5
+provider: null
+plugin: local_actions_block
+settings:
+  id: local_actions_block
+  label: 'Primary admin actions'
+  label_display: '0'
+  provider: core
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_primary_local_tasks.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - rorschach
+id: rorschach_primary_local_tasks
+theme: rorschach
+region: highlighted
+weight: -4
+provider: null
+plugin: local_tasks_block
+settings:
+  id: local_tasks_block
+  label: 'Primary tabs'
+  label_display: '0'
+  provider: core
+  primary: true
+  secondary: false
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_search_form_narrow.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - search
+  theme:
+    - rorschach
+id: rorschach_search_form_narrow
+theme: rorschach
+region: primary_menu
+weight: -4
+provider: null
+plugin: search_form_block
+settings:
+  id: search_form_block
+  label: 'Search form (narrow)'
+  label_display: '0'
+  provider: search
+  page_id: ''
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_search_form_wide.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - search
+  theme:
+    - rorschach
+id: rorschach_search_form_wide
+theme: rorschach
+region: secondary_menu
+weight: -5
+provider: null
+plugin: search_form_block
+settings:
+  id: search_form_block
+  label: 'Search form (wide)'
+  label_display: '0'
+  provider: search
+  page_id: ''
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_secondary_local_tasks.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - rorschach
+id: rorschach_secondary_local_tasks
+theme: rorschach
+region: highlighted
+weight: -2
+provider: null
+plugin: local_tasks_block
+settings:
+  id: local_tasks_block
+  label: 'Secondary tabs'
+  label_display: '0'
+  provider: core
+  primary: false
+  secondary: true
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_site_branding.yml

@@ -0,0 +1,22 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - rorschach
+id: rorschach_site_branding
+theme: rorschach
+region: header
+weight: 0
+provider: null
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Site branding'
+  label_display: '0'
+  provider: system
+  use_site_logo: true
+  use_site_name: true
+  use_site_slogan: false
+visibility: {  }

web/themes/custom/rorschach/config/optional/block.block.rorschach_syndicate.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+  theme:
+    - rorschach
+id: rorschach_syndicate
+theme: rorschach
+region: social
+weight: 0
+provider: null
+plugin: node_syndicate_block
+settings:
+  id: node_syndicate_block
+  label: 'RSS feed'
+  label_display: '0'
+  provider: node
+  block_count: 10
+visibility: {  }

web/themes/custom/rorschach/config/optional/core.date_format.rorschach_medium.yml

@@ -0,0 +1,10 @@
+langcode: en
+status: true
+dependencies:
+  enforced:
+    theme:
+      - rorschach
+id: rorschach_medium
+label: 'Rorschach Medium'
+locked: false
+pattern: 'j  F,  Y'

web/themes/custom/rorschach/config/schema/rorschach.schema.yml

@@ -1,5 +1,23 @@
-# Schema for the configuration files of the rorschach theme.
+# Schema for the configuration files of the Olivero theme.
 
 rorschach.settings:
   type: theme_settings
-  label: 'rorschach settings'
+  label: 'rorschach settings'
+  mapping:
+    third_party_settings:
+      type: mapping
+      label: 'Third party settings'
+      mapping:
+        shortcut:
+          type: mapping
+          label: 'Shortcut'
+          mapping:
+            module_link:
+              type: boolean
+              label: 'Module Link'
+    mobile_menu_all_widths:
+      type: integer
+      label: "Mobile menu all widths"
+    site_branding_bg_color:
+      type: string
+      label: "Site branding background color"

web/themes/custom/rorschach/css/base/base.css

@@ -0,0 +1,185 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Generic base elements.
+ */
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: metropolis, sans-serif;
+  font-size: 100%;
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1.6875rem;
+}
+
+body {
+  margin: 0;
+  color: #313637;
+  background-color: #f7f9fa;
+  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 */
+}
+
+body.is-fixed {
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+}
+
+[dir="rtl"] body {
+  background-position: top right;
+}
+
+a {
+  color: #0d77b5;
+}
+
+a:hover {
+  color: #2494db;
+}
+
+a:focus {
+  outline: solid 2px currentColor;
+  outline-offset: 2px;
+}
+
+button {
+  font-family: inherit;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+audio {
+  display: block;
+  max-width: 100%;
+}
+
+h1 {
+  letter-spacing: -0.01em;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  h1 {
+    font-size: 3.75rem;
+    line-height: 4.5rem;
+  }
+}
+
+h2 {
+  letter-spacing: -0.01em;
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  h2 {
+    font-size: 2.25rem;
+    line-height: 3.375rem;
+  }
+}
+
+h3 {
+  font-size: 1.25rem;
+  line-height: 1.6875rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  h3 {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+}
+
+h4 {
+  font-size: 1.125rem;
+  line-height: 1.6875rem;
+}
+
+h5 {
+  font-size: 1rem;
+  line-height: 1.6875rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+  color: #0d1214;
+  font-family: metropolis, sans-serif;
+  font-weight: bold;
+}
+
+@media (min-width: 43.75rem) {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 2.25rem;
+    margin-bottom: 2.25rem;
+  }
+}
+
+[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;
+  list-style-type: disc;
+  list-style-image: none;
+}

web/themes/custom/rorschach/css/base/base.pcss.css

@@ -0,0 +1,140 @@
+/**
+ * @file
+ * Generic base elements.
+ */
+
+@import "variables.pcss.css";
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 100%;
+  font-weight: normal;
+  font-style: normal;
+  line-height: var(--line-height-base);
+}
+
+body {
+  margin: 0;
+  color: var(--color--gray-10);
+  background-color: var(--color--gray-95);
+  background-image: url("../../images/background.svg");
+  background-position: top left; /* LTR */
+
+  &.is-fixed {
+    position: fixed;
+    overflow: hidden;
+    width: 100%;
+  }
+}
+
+[dir="rtl"] body {
+  background-position: top right;
+}
+
+a {
+  color: var(--color--blue-20);
+
+  &:hover {
+    color: var(--color--blue-50);
+  }
+
+  &:focus {
+    outline: solid 2px currentColor;
+    outline-offset: 2px;
+  }
+}
+
+button {
+  font-family: inherit;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+audio {
+  display: block;
+  max-width: 100%;
+}
+
+h1 {
+  letter-spacing: -0.01em;
+  font-size: 28px;
+  line-height: var(--sp2);
+
+  @media (--md) {
+    font-size: 60px;
+    line-height: var(--sp4);
+  }
+}
+
+h2 {
+  letter-spacing: -0.01em;
+  font-size: 24px;
+  line-height: var(--sp2);
+
+  @media (--md) {
+    font-size: 36px;
+    line-height: var(--sp3);
+  }
+}
+
+h3 {
+  font-size: 20px;
+  line-height: var(--sp1-5);
+
+  @media (--md) {
+    font-size: 24px;
+    line-height: var(--sp2);
+  }
+}
+
+h4 {
+  font-size: 18px;
+  line-height: var(--sp1-5);
+}
+
+h5 {
+  font-size: 16px;
+  line-height: var(--sp1-5);
+}
+
+h6 {
+  font-size: 14px;
+  line-height: var(--sp);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block: var(--sp);
+  color: var(--color--gray-0);
+  font-family: var(--font-sans);
+  font-weight: bold;
+
+  @media (--md) {
+    margin-block: var(--sp2);
+  }
+}
+
+ul {
+  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;
+}

web/themes/custom/rorschach/css/base/fonts.css

@@ -0,0 +1,83 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Base Fonts.
+ */
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* lora-regular - latin */
+
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Regular"),
+    local("Lora-Regular"),
+    url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* lora-italic - latin */
+
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Italic"),
+    local("Lora-Italic"),
+    url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* lora-700 - latin */
+
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Bold"),
+    local("Lora-Bold"),
+    url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-700.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

web/themes/custom/rorschach/css/base/fonts.pcss.css

@@ -0,0 +1,73 @@
+/**
+ * @file
+ * Base Fonts.
+ */
+
+@import "variables.pcss.css";
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src:
+    url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
+    url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* lora-regular - latin */
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Regular"),
+    local("Lora-Regular"),
+    url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+/* lora-italic - latin */
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Italic"),
+    local("Lora-Italic"),
+    url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+/* lora-700 - latin */
+@font-face {
+  font-family: Lora;
+  src:
+    local("Lora Bold"),
+    local("Lora-Bold"),
+    url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"),
+    url("../../fonts/lora/lora-v14-latin-700.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

web/themes/custom/rorschach/css/base/utility.css

@@ -0,0 +1,59 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Utility classes.
+ */
+
+/*
+  ie11-autorow
+
+  IE11 does not automatically place new rows, which leads to overlapping
+  content. We can work around this (when we know that each grid item is
+  going to span the full width) by setting each child to a new row.
+*/
+
+.ie11-autorow > *:nth-child(1) {
+  -ms-grid-row: 1;
+}
+
+.ie11-autorow > *:nth-child(2) {
+  -ms-grid-row: 2;
+}
+
+.ie11-autorow > *:nth-child(3) {
+  -ms-grid-row: 3;
+}
+
+.ie11-autorow > *:nth-child(4) {
+  -ms-grid-row: 4;
+}
+
+.ie11-autorow > *:nth-child(5) {
+  -ms-grid-row: 5;
+}
+
+.ie11-autorow > *:nth-child(6) {
+  -ms-grid-row: 6;
+}
+
+.ie11-autorow > *:nth-child(7) {
+  -ms-grid-row: 7;
+}
+
+.ie11-autorow > *:nth-child(8) {
+  -ms-grid-row: 8;
+}
+
+.ie11-autorow > *:nth-child(9) {
+  -ms-grid-row: 9;
+}
+
+.ie11-autorow > *:nth-child(10) {
+  -ms-grid-row: 10;
+}

web/themes/custom/rorschach/css/base/utility.pcss.css

@@ -0,0 +1,55 @@
+/**
+ * @file
+ * Utility classes.
+ */
+
+@import "../base/variables.pcss.css";
+
+/*
+  ie11-autorow
+
+  IE11 does not automatically place new rows, which leads to overlapping
+  content. We can work around this (when we know that each grid item is
+  going to span the full width) by setting each child to a new row.
+*/
+.ie11-autorow > * {
+  &:nth-child(1) {
+    -ms-grid-row: 1;
+  }
+
+  &:nth-child(2) {
+    -ms-grid-row: 2;
+  }
+
+  &:nth-child(3) {
+    -ms-grid-row: 3;
+  }
+
+  &:nth-child(4) {
+    -ms-grid-row: 4;
+  }
+
+  &:nth-child(5) {
+    -ms-grid-row: 5;
+  }
+
+  &:nth-child(6) {
+    -ms-grid-row: 6;
+  }
+
+  &:nth-child(7) {
+    -ms-grid-row: 7;
+  }
+
+  &:nth-child(8) {
+    -ms-grid-row: 8;
+  }
+
+  &:nth-child(9) {
+    -ms-grid-row: 9;
+  }
+
+  &:nth-child(10) {
+    -ms-grid-row: 10;
+  }
+}

web/themes/custom/rorschach/css/base/variables.css

@@ -0,0 +1,110 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * 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. */
+
+/*
+  Custom CSS properties.
+
+  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+*/
+
+:root {
+
+  /* Typography */
+
+  /* Layout */
+
+  /* Drupal administrative toolbar heights and width. */
+
+  /*
+    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.
+
+    Note we cannot change the values of these custom properties within media queries,
+    as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
+    which does not support that functionality. Therefore, we need a separate custom
+    property for each breakpoint. 😭
+  */
+
+  /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+
+  /* Grid gap across various breakpoints. */
+
+  /* Column counts at various breakpoints. */
+
+  /* Count of grid-gaps at various breakpoints. */
+
+  /* Width of the entire grid at various breakpoints. */
+
+  /* Width of a grid column at various breakpoints */
+
+  /* Layout helpers */
+
+  /* Black */
+
+  /* Black 1 */
+
+  /* Black 2 */
+
+  /* Black 3 */
+
+  /* Gray Dark */
+
+  /* Gray Dark 2 */
+
+  /* Gray medium */
+
+  /* Gray medium 1 */
+
+  /* Gray medium 2 */
+
+  /* Black 4 */
+
+  /* Gray light */
+
+  /* Gray light 1 */
+
+  /* Gray light 2 */
+
+  /* Blue dark */
+
+  /* Blue dark 2 */
+
+  /* Blue medium */
+
+  /* Blue bright */
+
+  /* Blue bright 5 */
+
+  /* White */
+
+  /* Red */
+
+  /* Gold */
+
+  /* Green */
+
+  /* Header */
+
+  /* Width of slide out navigation */
+
+  /* Border radius */
+}

web/themes/custom/rorschach/css/base/variables.pcss.css

@@ -0,0 +1,155 @@
+/*
+  Media query breakpoints.
+  Processed by postcss/postcss-custom-media.
+*/
+
+@custom-media --sm (min-width: 500px);
+@custom-media --md (min-width: 700px);
+@custom-media --lg (min-width: 1000px);
+@custom-media --xl (min-width: 1300px);
+
+/* Navigation related breakpoints */
+@custom-media --nav-md (min-width: 500px);
+@custom-media --nav (min-width: 1200px);
+@custom-media --max-nav (max-width: 1200px);
+
+/* Grid related breakpoints */
+@custom-media --grid-md (min-width: 700px);   /* Grid shifts from 6 to 14 columns. */
+@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */
+
+/*
+  Custom CSS properties.
+
+  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+*/
+:root {
+  --font-sans: "metropolis", sans-serif;
+  --font-serif: "Lora", "georgia", serif;
+
+  /* Typography */
+  --font-size-base: 16px;
+  --font-size-l: 18px;
+  --font-size-s: 14px;
+  --font-size-xs: 13px;
+  --font-size-xxs: 12px;
+  --line-height-base: 27px;
+  --line-height-s: 18px;
+
+  /* Layout */
+  --max-width: 1350px;
+  --max-bg-color: 1570px;
+  --sp: 18px;
+  --content-left: 90px;
+  --container-padding: var(--sp);
+  --container-padding-nav: var(--sp2);
+  --site-header-height-wide: var(--sp10);
+
+  /* Drupal administrative toolbar heights and width. */
+  --toolbar-height: 39px;
+  --toolbar-tray-height: 40px;
+  --toolbar-tray-vertical-width: 239px;
+
+  /*
+    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.
+
+    Note we cannot change the values of these custom properties within media queries,
+    as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
+    which does not support that functionality. Therefore, we need a separate custom
+    property for each breakpoint. 😭
+  */
+
+  --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+
+  /* Grid gap across various breakpoints. */
+  --grid-gap: var(--sp);
+  --grid-gap--md: var(--sp2);
+  --grid-gap--lg: var(--grid-gap--md);
+  --grid-gap--nav: var(--grid-gap--md);
+  --grid-gap--max: var(--grid-gap--md);
+
+  /* Column counts at various breakpoints. */
+  --grid-col-count: 6;
+  --grid-col-count--md: 14;
+  --grid-col-count--lg: var(--grid-col-count--md);
+  --grid-col-count--nav: var(--grid-col-count--md);
+  --grid-col-count--max: var(--grid-col-count--md);
+
+  /* Count of grid-gaps at various breakpoints. */
+  --grid-gap-count: calc(var(--grid-col-count) - 1);
+  --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
+  --grid-gap-count--lg: var(--grid-gap-count--md);
+  --grid-gap-count--nav: var(--grid-gap-count--md);
+  --grid-gap-count--max: var(--grid-gap-count--md);
+
+  /* Width of the entire grid at various breakpoints. */
+  --grid-full-width: calc(100vw - var(--sp2));
+  --grid-full-width--md: var(--grid-full-width);
+  --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
+  --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+  --grid-full-width--max: calc(var(--max-width) - var(--sp4));
+
+  /* Width of a grid column at various breakpoints */
+  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
+  --grid-col-width--md: calc((var(--grid-full-width--md) - (var(--grid-gap-count--md) * var(--grid-gap--md))) / var(--grid-col-count--md));
+  --grid-col-width--lg: calc((var(--grid-full-width--lg) - (var(--grid-gap-count--lg) * var(--grid-gap--lg))) / var(--grid-col-count--lg));
+  --grid-col-width--nav: calc((var(--grid-full-width--nav) - (var(--grid-gap-count--nav) * var(--grid-gap--nav))) / var(--grid-col-count--nav));
+  --grid-col-width--max: calc((var(--grid-full-width--max) - (var(--grid-gap-count--max) * var(--grid-gap--max))) / var(--grid-col-count--max));
+
+  /* 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));
+  --color--black: #000; /* Black */
+  --color--gray-0: #0d1214; /* Black 1 */
+  --color--gray-5: #0c0d0e;
+  --color--gray-8: #171e23;
+  --color--gray-10: #313637; /* Black 2 */
+  --color--gray-20: #6e7172; /* Black 3 */
+  --color--gray-25: #5d7585; /* Gray Dark */
+  --color--gray-28: #7d919d; /* Gray Dark 2 */
+  --color--gray-30: #7e96a7; /* Gray medium */
+  --color--gray-40: #98abb9; /* Gray medium 1 */
+  --color--gray-45: #afb8be; /* Gray medium 2 */
+  --color--gray-50: #9ea0a1; /* Black 4 */
+  --color--gray-70: #d7e1e8; /* Gray light */
+  --color--gray-75: #e3e3e5;
+  --color--gray-80: #e7edf1; /* Gray light 1 */
+  --color--gray-90: #f1f4f7;
+  --color--gray-95: #f7f9fa; /* Gray light 2 */
+  --color--blue-10: #0f6292;
+  --color--blue-20: #0d77b5; /* Blue dark */
+  --color--blue-30: #3d92c4; /* Blue dark 2 */
+  --color--blue-50: #2494db; /* Blue medium */
+  --color--blue-70: #53b0eb; /* Blue bright */
+  --color--blue-90: #ddeffb; /* Blue bright 5 */
+  --color--white: #fff; /* White */
+  --color--red: #e33f1e; /* Red */
+  --color--gold: #fdca40; /* Gold */
+  --color--green: #3fa21c; /* Green */
+
+  /* Header */
+  --header-height-wide-when-fixed: calc(6 * var(--sp));
+
+  /* Width of slide out navigation */
+  --mobile-nav-width: 500px;
+
+  /* Border radius */
+  --border-radius: 3px;
+}

web/themes/custom/rorschach/css/components/action-links.css

@@ -0,0 +1,50 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Styles for action links.
+*/
+[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;
+}
+.action-links li {
+  display: inline-block;
+}
+.action-links li a {
+  color: #0d77b5;
+}
+.action-links-item {
+  display: inline-block;
+}

web/themes/custom/rorschach/css/components/action-links.pcss.css

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Styles for action links.
+*/
+@import "../base/variables.pcss.css";
+
+.action-links {
+  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;
+
+  & li {
+    display: inline-block;
+
+    & a {
+      color: var(--color--blue-20);
+    }
+  }
+}
+
+.action-links-item {
+  display: inline-block;
+}

web/themes/custom/rorschach/css/components/ajax-progress.module.css

@@ -0,0 +1,150 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for ajax-progress throbber.
+ */
+
+.ajax-progress {
+  display: inline-block;
+}
+
+/**
+ * Throbber.
+ */
+
+[dir="ltr"] .ajax-progress-throbber {
+  margin-left: 0.5625rem;
+}
+
+[dir="rtl"] .ajax-progress-throbber {
+  margin-right: 0.5625rem;
+}
+
+[dir="ltr"] .ajax-progress-throbber {
+  margin-right: 0.5625rem;
+}
+
+[dir="rtl"] .ajax-progress-throbber {
+  margin-left: 0.5625rem;
+}
+
+.ajax-progress-throbber {
+  position: relative;
+  display: inline-flex;
+  align-content: center;
+  height: 1.125rem;
+  margin-top: -0.1875rem;
+  margin-bottom: 0;
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1.125rem;
+}
+
+.ajax-progress-throbber .throbber {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-width: 2px;
+  border-color: #2494db transparent #2494db #2494db;
+}
+
+[dir="ltr"] .ajax-progress-throbber .message {
+  padding-left: 0.5625rem;
+}
+
+[dir="rtl"] .ajax-progress-throbber .message {
+  padding-right: 0.5625rem;
+}
+
+.ajax-progress-throbber .message {
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+/**
+ * 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%;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: -1.75rem;
+  border: 1px solid #afb8be;
+  border-radius: 3.5rem;
+  background-color: #fff;
+  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%;
+}
+
+.ajax-progress-fullscreen:before {
+  position: absolute;
+  top: 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);
+}
+
+/**
+ * Common styles for all kinds of throbbers.
+ */
+
+.ajax-progress-throbber .throbber,
+.ajax-progress-fullscreen:before {
+  animation: olivero-throbber 0.75s linear infinite;
+  border-style: solid dotted solid solid;
+  border-color: #2494db transparent #2494db #2494db;
+  border-radius: 50%;
+}
+
+/**
+ * Remove margin from ajax throbbers following buttons because buttons already
+ * 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;
+}
+
+@keyframes olivero-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

web/themes/custom/rorschach/css/components/ajax-progress.module.pcss.css

@@ -0,0 +1,102 @@
+/**
+ * @file
+ * Visual styles for ajax-progress throbber.
+ */
+
+@import "../base/variables.pcss.css";
+
+.ajax-progress {
+  display: inline-block;
+}
+
+/**
+ * Throbber.
+ */
+.ajax-progress-throbber {
+  position: relative;
+  display: inline-flex;
+  align-content: center;
+  height: 1.125rem;
+  margin-block-start: -3px;
+  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;
+}
+
+.ajax-progress-throbber .throbber {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-width: 2px;
+  border-color: var(--color--blue-50) transparent var(--color--blue-50) var(--color--blue-50);
+}
+
+.ajax-progress-throbber .message {
+  display: inline-block;
+  padding-inline-start: var(--sp0-5);
+  font-size: var(--font-size-s);
+  font-weight: 400;
+}
+
+/**
+ * Full screen throbber.
+ */
+.ajax-progress-fullscreen {
+  position: fixed;
+  z-index: 1000;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: -1.75rem;
+  border: 1px solid var(--color--gray-45);
+  border-radius: 3.5rem;
+  background-color: var(--color--white);
+  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
+
+  &:before {
+    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);
+}
+
+/**
+ * Common styles for all kinds of throbbers.
+ */
+.ajax-progress-throbber .throbber,
+.ajax-progress-fullscreen:before {
+  animation: olivero-throbber 0.75s linear infinite;
+  border-style: solid dotted solid solid;
+  border-color: var(--color--blue-50) transparent var(--color--blue-50) var(--color--blue-50);
+  border-radius: 50%;
+}
+
+/**
+ * Remove margin from ajax throbbers following buttons because buttons already
+ * have a large margin set.
+ */
+html.js .button:not(.js-hide) + .ajax-progress-throbber {
+  margin-inline-start: 0;
+}
+
+@keyframes olivero-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

web/themes/custom/rorschach/css/components/autocomplete-loading.module.css

@@ -0,0 +1,70 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for autocomplete input field.
+ */
+
+:root { /* 18 18 */
+}
+
+html[dir="ltr"].js .form-autocomplete {
+  padding-right: 3.375rem;
+}
+
+html[dir="rtl"].js .form-autocomplete {
+  padding-left: 3.375rem;
+}
+
+html.js .form-autocomplete {
+  background-color: #fff;
+  background-image: url("../../images/magnifying-glass.svg");
+  background-repeat: no-repeat;
+  background-position: right 18px center;  /* LTR */
+}
+
+html.js .form-autocomplete:disabled {
+  background-color: #f1f4f7;
+}
+
+html.js .form-autocomplete.ui-autocomplete-loading {
+  background: url("../../images/throbber.svg") no-repeat right 1.125rem center;
+}
+
+html.js[dir="rtl"] .form-autocomplete {
+  background-color: #fff;
+  background-image: url("../../images/magnifying-glass.svg");
+  background-repeat: no-repeat;
+  background-position: left 18px center;
+}
+
+html.js[dir="rtl"] .form-autocomplete:disabled {
+  background-color: #f1f4f7;
+}
+
+html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {
+  background: url("../../images/throbber.svg") no-repeat left 1.125rem center;
+}
+
+/* IE11 does not animate inline SVG. */
+
+/* rtl:begin:ignore */
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
+  background: url("../../images/throbber.gif") no-repeat right 1.125rem center / 1.125rem 1.125rem;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
+  background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem;
+}

web/themes/custom/rorschach/css/components/autocomplete-loading.module.pcss.css

@@ -0,0 +1,59 @@
+/**
+ * @file
+ * Visual styles for autocomplete input field.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --autocomplete-search-icon-url: url("../../images/magnifying-glass.svg");
+  --autocomplete-throbber-icon-url: url("../../images/throbber.svg");
+  --autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");
+  --autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */
+  --autocomplete-icon-right-offset: var(--sp1);
+}
+
+html.js .form-autocomplete {
+  padding-inline-end: var(--sp3);
+  background-color: var(--color--white);
+  background-image: var(--autocomplete-search-icon-url);
+  background-repeat: no-repeat;
+  background-position: right var(--autocomplete-icon-right-offset) center;  /* LTR */
+
+  &:disabled {
+    background-color: var(--color--gray-90);
+  }
+
+  &.ui-autocomplete-loading {
+    background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
+  }
+}
+
+html.js[dir="rtl"] .form-autocomplete {
+  background-color: var(--color--white);
+  background-image: var(--autocomplete-search-icon-url);
+  background-repeat: no-repeat;
+  background-position: left var(--autocomplete-icon-right-offset) center;
+
+  &:disabled {
+    background-color: var(--color--gray-90);
+  }
+
+  &.ui-autocomplete-loading {
+    background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;
+  }
+}
+
+/* IE11 does not animate inline SVG. */
+/* rtl:begin:ignore */
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
+  background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
+  background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
+}

web/themes/custom/rorschach/css/components/block.css

@@ -0,0 +1,24 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Block styling.
+ */
+
+.block__title {
+  margin-top: 0;
+  margin-bottom: 1.125rem;
+  letter-spacing: 0.02em;
+  color: #6e7172;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+.site-footer .block__title {
+  color: #9ea0a1;
+}

web/themes/custom/rorschach/css/components/block.pcss.css

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Block styling.
+ */
+
+@import "../base/variables.pcss.css";
+
+.block__title {
+  margin-block: 0 var(--sp);
+  letter-spacing: 0.02em;
+  color: var(--color--gray-20);
+  font-size: var(--font-size-s);
+  line-height: var(--sp);
+}
+
+.site-footer .block__title {
+  color: var(--color--gray-50);
+}

web/themes/custom/rorschach/css/components/book.css

@@ -0,0 +1,222 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Book module styling.
+ */
+
+[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 1.125rem;
+  padding-top: 0;
+  padding-bottom: 1.125rem;
+  list-style: none;
+  border-bottom: solid 1px #0d77b5;
+}
+
+.book-pager__item {
+  display: inline-block;
+}
+
+@media (min-width: 31.25rem) {
+
+  .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;
+  }
+
+  [dir="rtl"] .book-pager__item--next {
+    text-align: left;
+  }
+}
+
+.book-pager__link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: #0d77b5;
+  font-family: Lora, georgia, serif;
+  font-size: 1.125rem;
+  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 0.1875rem currentColor;
+}
+
+[dir="rtl"] .book-pager__link--previous:before {
+  border-right: solid 0.1875rem currentColor;
+}
+
+.book-pager__link--previous:before {
+  display: block;
+  width: 0.5625rem;
+  height: 0.5625rem;
+  content: "";
+  transform: rotate(-45deg);
+  border-top: solid 0.1875rem 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 0.1875rem currentColor;
+}
+
+[dir="rtl"] .book-pager__link--next:after {
+  border-right: solid 0.1875rem currentColor;
+}
+
+.book-pager__link--next:after {
+  display: block;
+  width: 0.5625rem;
+  height: 0.5625rem;
+  content: "";
+  transform: rotate(135deg);
+  border-top: solid 0.1875rem 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;
+}
+
+.book-navigation__menu {
+  margin-top: 2.25rem;
+  margin-bottom: 2.25rem;
+  padding-top: 0;
+  padding-bottom: 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;
+  list-style: none;
+}
+
+[dir="rtl"] .book-pager__link--previous:before {
+  transform: rotate(45deg);
+}
+
+[dir="rtl"] .book-pager__link--next:after {
+  transform: rotate(-135deg);
+}

web/themes/custom/rorschach/css/components/book.pcss.css

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Book module styling.
+ */
+
+@import "../base/variables.pcss.css";
+
+.book-pager {
+  display: flex;
+  flex-wrap: wrap;
+  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-block-end: solid 1px var(--color--blue-20);
+}
+
+.book-pager__item {
+  display: inline-block;
+
+  @media (--sm) {
+    flex: 0 0 33.33%;
+  }
+}
+
+.book-pager__item--center {
+  @media (--sm) {
+    text-align: center;
+  }
+}
+
+.book-pager__item--next {
+  @media (--sm) {
+    margin-inline-start: auto;
+    text-align: end;
+  }
+}
+
+.book-pager__link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color--blue-20);
+  font-family: var(--font-serif);
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.book-pager__link--previous {
+  &:before {
+    display: block;
+    width: var(--sp0-5);
+    height: var(--sp0-5);
+    margin-inline-end: 0.25em;
+    content: "";
+    transform: rotate(-45deg);
+    border-block-start: solid 3px currentColor;
+    border-inline-start: solid 3px currentColor;
+  }
+}
+
+.book-pager__link--next {
+  &:after {
+    display: block;
+    width: var(--sp0-5);
+    height: var(--sp0-5);
+    margin-inline-start: 0.25em;
+    content: "";
+    transform: rotate(135deg);
+    border-block-start: solid 3px currentColor;
+    border-inline-start: solid 3px currentColor;
+  }
+}
+
+.book-navigation__menu {
+  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;
+}
+
+.book-navigation__item {
+  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);
+  }
+
+  & .book-pager__link--next:after {
+    transform: rotate(-135deg);
+  }
+}

web/themes/custom/rorschach/css/components/breadcrumb.css

@@ -0,0 +1,239 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+.breadcrumb {
+  position: relative;
+  font-size: 0.875rem;
+  font-weight: bold;
+  line-height: 1.125rem;
+
+  /* Shadow on the right side of breadcrumbs for narrow screens. */
+}
+
+[dir="ltr"] .breadcrumb:after {
+  right: -1.125rem;
+}
+
+[dir="rtl"] .breadcrumb:after {
+  left: -1.125rem;
+}
+
+.breadcrumb:after {
+  position: absolute;
+  top: 0;
+  width: 3.375rem;
+  height: 2.25rem;
+  content: "";
+  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
+}
+
+@media (min-width: 62.5rem) {
+
+  .breadcrumb:after {
+    content: none;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  .breadcrumb {
+    position: static;
+  }
+}
+
+[dir="rtl"] .breadcrumb:after {
+  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+[dir="ltr"] .breadcrumb__content {
+  margin-left: -0.5625rem;
+}
+
+[dir="rtl"] .breadcrumb__content {
+  margin-right: -0.5625rem;
+}
+
+[dir="ltr"] .breadcrumb__content {
+  margin-right: -1.125rem;
+}
+
+[dir="rtl"] .breadcrumb__content {
+  margin-left: -1.125rem;
+}
+
+[dir="ltr"] .breadcrumb__content {
+  padding-left: 0.5625rem;
+}
+
+[dir="rtl"] .breadcrumb__content {
+  padding-right: 0.5625rem;
+}
+
+.breadcrumb__content {
+  overflow: auto;
+  margin-top: -0.5625rem;
+  margin-bottom: -0.5625rem;
+  padding-top: 0.5625rem;
+  padding-bottom: 0.5625rem;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 62.5rem) {
+
+  [dir="ltr"] .breadcrumb__content {
+    margin-right: 0;
+  }
+
+  [dir="rtl"] .breadcrumb__content {
+    margin-left: 0;
+  }
+}
+
+[dir="ltr"] .breadcrumb__list {
+  margin-left: -1.125rem;
+}
+
+[dir="rtl"] .breadcrumb__list {
+  margin-right: -1.125rem;
+}
+
+[dir="ltr"] .breadcrumb__list {
+  margin-right: -1.125rem;
+}
+
+[dir="rtl"] .breadcrumb__list {
+  margin-left: -1.125rem;
+}
+
+[dir="ltr"] .breadcrumb__list {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] .breadcrumb__list {
+  padding-right: 1.125rem;
+}
+
+[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: 1.125rem;
+  list-style: none;
+  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 {
+    overflow: visible;
+    padding-bottom: 0;
+    white-space: normal;
+  }
+}
+
+.breadcrumb__item {
+  display: inline-block;
+}
+
+[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
+  margin-right: 1.25rem;
+  margin-left: 1rem;
+}
+
+[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 #5d7585;
+}
+
+[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
+  border-left: 2px solid #5d7585;
+}
+
+.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 #5d7585;
+}
+
+[dir="ltr"] .breadcrumb__item:last-child {
+  margin-right: 3.375rem;
+}
+
+[dir="rtl"] .breadcrumb__item:last-child {
+  margin-left: 3.375rem;
+}
+
+@media (min-width: 62.5rem) {
+
+  [dir="ltr"] .breadcrumb__item:last-child {
+    margin-right: 0;
+  }
+
+  [dir="rtl"] .breadcrumb__item:last-child {
+    margin-left: 0;
+  }
+}
+
+[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
+  transform: rotate(-45deg);
+}
+
+.breadcrumb__link {
+  text-decoration: none;
+  color: #0d77b5;
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+  text-decoration: underline;
+}

web/themes/custom/rorschach/css/components/breadcrumb.pcss.css

@@ -0,0 +1,111 @@
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+@import "../base/variables.pcss.css";
+
+.breadcrumb {
+  position: relative;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: var(--sp1);
+
+  /* Shadow on the right side of breadcrumbs for narrow screens. */
+  &:after {
+    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 (--lg) {
+      content: none;
+    }
+  }
+
+  @media (--lg) {
+    position: static;
+  }
+}
+
+[dir="rtl"] .breadcrumb:after {
+  background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.breadcrumb__content {
+  overflow: auto;
+  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 (--lg) {
+    margin-inline-end: 0;
+  }
+}
+
+.breadcrumb__list {
+  overflow-x: auto;
+  width: max-content;
+  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;
+
+  @media (--lg) {
+    overflow: visible;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0;
+    white-space: normal;
+  }
+}
+
+.breadcrumb__item {
+  display: inline-block;
+
+  &:nth-child(n+2):before {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-inline: 16px 20px;
+    content: "";
+    transform: rotate(45deg); /* LTR */
+    border-block-start: 2px solid var(--color--gray-25);
+    border-inline-end: 2px solid var(--color--gray-25);
+  }
+
+  &:last-child {
+    margin-inline-end: var(--sp3);
+
+    @media (--lg) {
+      margin-inline-end: 0;
+    }
+  }
+}
+
+[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
+  transform: rotate(-45deg);
+}
+
+.breadcrumb__link {
+  text-decoration: none;
+  color: var(--color--blue-20);
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}

web/themes/custom/rorschach/css/components/button.css

@@ -0,0 +1,191 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Buttons.
+ */
+
+[dir="ltr"] .button {
+  margin-left: 0;
+}
+
+[dir="rtl"] .button {
+  margin-right: 0;
+}
+
+[dir="ltr"] .button {
+  margin-right: 1.125rem;
+}
+
+[dir="rtl"] .button {
+  margin-left: 1.125rem;
+}
+
+.button {
+  display: inline-block;
+  height: 3.375rem;
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+  padding-top: 1.125rem;
+  padding-right: 1.6875rem;
+  padding-bottom: 1.125rem;
+  padding-left: 1.6875rem;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  color: #0d77b5;
+  border: solid 2px #0d77b5;
+  border-radius: 0.1875rem;
+  background-color: #fff;
+  font-family: metropolis, sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.button:hover,
+.button:focus {
+  text-decoration: none;
+  color: #0f6292;
+  border: solid 2px #0f6292;
+  background: none;
+  font-weight: 700;
+}
+
+.button:focus {
+  outline: 2px solid #53b0eb;
+  outline-offset: 2px;
+}
+
+.button:active {
+  color: #0d77b5;
+  border-color: #0d77b5;
+}
+
+.button:disabled,
+.button.is-disabled {
+  cursor: default;
+  color: #d7e1e8;
+  border-color: #d7e1e8;
+}
+
+/*
+    IE11 doesn't work properly on button elements so we only do
+    inline-flex on modern browsers.
+  */
+
+@supports (display: inline-flex) {
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+
+    /* Top padding accounts for font not being vertically centered within line-height. */
+    padding-top: 1px;
+    padding-right: 1.6875rem;
+    padding-bottom: 0;
+    padding-left: 1.6875rem;
+    line-height: 1.125rem;
+  }
+}
+
+/* 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;
+}
+
+.menu .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.button--small {
+  height: 2.8125rem;
+  padding-top: 0.84375rem;
+  padding-right: 1.125rem;
+  padding-bottom: 0.84375rem;
+  padding-left: 1.125rem;
+  font-size: 1rem;
+  line-height: normal;
+}
+
+.button--primary {
+  color: #fff;
+  background-color: #0d77b5;
+}
+
+.button--primary:hover,
+.button--primary:focus {
+  color: #fff;
+  border-color: #0f6292;
+  background-color: #0f6292;
+}
+
+.button--primary:active {
+  color: #fff;
+  background-color: #0d77b5;
+}
+
+.button--primary:disabled,
+.button--primary.is-disabled {
+  color: #fff;
+  background-color: #d7e1e8;
+}
+
+.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;
+}
+
+.button--icon-back:before {
+  display: block;
+  width: 0.5em;
+  height: 0.5em;
+  content: "";
+  transform: rotate(45deg); /* LTR */
+  border-bottom: solid 2px currentColor;
+}
+
+[dir="rtl"] .button--icon-back:before {
+  transform: rotate(-45deg);
+}
+
+.shepherd-cancel-icon {
+  font-size: 1.5em;
+}

web/themes/custom/rorschach/css/components/button.pcss.css

@@ -0,0 +1,130 @@
+/**
+ * @file
+ * Buttons.
+ */
+
+@import "../base/variables.pcss.css";
+
+.button {
+  display: inline-block;
+  height: var(--sp3);
+  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;
+  text-decoration: none;
+  color: var(--color--blue-20);
+  border: solid 2px var(--color--blue-20);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-l);
+  font-weight: 700;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: var(--color--blue-10);
+    border: solid 2px var(--color--blue-10);
+    background: none;
+    font-weight: 700;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color--blue-70);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    color: var(--color--blue-20);
+    border-color: var(--color--blue-20);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    cursor: default;
+    color: var(--color--gray-70);
+    border-color: var(--color--gray-70);
+  }
+
+  /*
+    IE11 doesn't work properly on button elements so we only do
+    inline-flex on modern browsers.
+  */
+  @supports (display: inline-flex) {
+    display: inline-flex;
+    align-items: center;
+
+    /* Top padding accounts for font not being vertically centered within line-height. */
+    padding-block: 1px 0;
+    padding-inline: var(--sp1-5);
+    line-height: var(--line-height-s);
+  }
+}
+
+/* No margin if is part of a menu. */
+.menu .button {
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.button--small {
+  height: var(--sp2-5);
+  padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
+  padding-inline: var(--sp);
+  font-size: var(--font-size-base);
+  line-height: normal;
+}
+
+.button--primary {
+  color: var(--color--white);
+  background-color: var(--color--blue-20);
+
+  &:hover,
+  &:focus {
+    color: var(--color--white);
+    border-color: var(--color--blue-10);
+    background-color: var(--color--blue-10);
+  }
+
+  &:active {
+    color: var(--color--white);
+    background-color: var(--color--blue-20);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    color: var(--color--white);
+    background-color: var(--color--gray-70);
+  }
+}
+
+.button--icon-back {
+  display: inline-flex;
+  align-items: center;
+
+  &:before {
+    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);
+}
+
+.shepherd-cancel-icon {
+  font-size: 1.5em;
+}

web/themes/custom/rorschach/css/components/cke-dialog.css

@@ -0,0 +1,20 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * CKE Dialogs.
+ */
+
+select.cke_dialog_ui_input_select {
+  -webkit-appearance: menulist;
+  appearance: menulist;
+}
+
+select.cke_dialog_ui_input_select::-ms-expand {
+  display: block;
+}

web/themes/custom/rorschach/css/components/cke-dialog.pcss.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * CKE Dialogs.
+ */
+
+select.cke_dialog_ui_input_select {
+  appearance: menulist;
+
+  &::-ms-expand {
+    display: block;
+  }
+}

web/themes/custom/rorschach/css/components/comments.css

@@ -0,0 +1,407 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Comment section and individual comments.
+ */
+
+.comment--level-1 {
+  border-top: 2px solid #e7edf1;
+}
+
+.comment--level-1 ~ .comment--level-1 {
+  margin-top: 2.25rem;
+}
+
+.comments__title {
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+}
+
+[dir="ltr"] .comments__count {
+  margin-left: 1.125rem;
+}
+
+[dir="rtl"] .comments__count {
+  margin-right: 1.125rem;
+}
+
+[dir="ltr"] .comments__count {
+  margin-right: 1.125rem;
+}
+
+[dir="rtl"] .comments__count {
+  margin-left: 1.125rem;
+}
+
+[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;
+}
+
+.comments__count {
+  position: relative;
+  display: inline-block;
+  min-width: 2.125rem;
+  margin-top: 0;
+  margin-bottom: 0.5625rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: center;
+  color: #fff;
+  border-radius: 2px;
+  background-color: #0d77b5;
+  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: 0.5rem solid transparent;
+}
+
+[dir="rtl"] .comments__count:after {
+  border-left: 0.5rem solid transparent;
+}
+
+.comments__count:after {
+  position: absolute;
+  bottom: -0.4375rem;
+  width: 0;
+  height: 0;
+  content: "";
+  border-top: 0.4375rem solid #0d77b5;
+}
+
+.comment-form {
+  padding-bottom: 2.25rem;
+}
+
+[dir="ltr"] .add-comment__form {
+  padding-left: 0;
+}
+
+[dir="rtl"] .add-comment__form {
+  padding-right: 0;
+}
+
+[dir="ltr"] .comment {
+  padding-left: 3.375rem;
+}
+
+[dir="rtl"] .comment {
+  padding-right: 3.375rem;
+}
+
+.comment {
+  position: relative;
+  padding-top: 2.25rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .comment {
+    padding-left: 0;
+  }
+
+  [dir="rtl"] .comment {
+    padding-right: 0;
+  }
+}
+
+.comment__text-content {
+  font-size: 1rem;
+}
+
+.comment__text-content blockquote {
+  font-size: 1.3125rem;
+  line-height: 2.25rem;
+}
+
+/* Override for .field:not(:last-child) */
+
+.comment__text-content:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.comment__links {
+  margin-top: 1.125rem;
+  margin-bottom: 0;
+}
+
+.comment__links-link {
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: bold;
+  line-height: 1.125rem;
+}
+
+.comment__links-link:hover {
+  text-decoration: underline;
+}
+
+.add-comment__picture-wrapper {
+  top: 2.25rem;
+}
+
+[dir="ltr"] .add-comment__picture,
+[dir="ltr"] .comment__picture {
+  left: 0;
+}
+
+[dir="rtl"] .add-comment__picture,
+[dir="rtl"] .comment__picture {
+  right: 0;
+}
+
+.add-comment__picture,
+.comment__picture {
+  position: absolute;
+  overflow: hidden;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background-color: #e7edf1;
+}
+
+.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%;
+  object-fit: cover;
+
+  /* @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%);
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .add-comment__picture,
+  [dir="ltr"] .comment__picture {
+    left: -5.625rem;
+  }
+
+  [dir="rtl"] .add-comment__picture,
+  [dir="rtl"] .comment__picture {
+    right: -5.625rem;
+  }
+
+  .add-comment__picture,
+  .comment__picture {
+    width: 3.375rem;
+    height: 3.375rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .indented .comment__picture {
+    left: -4.5rem;
+  }
+
+  [dir="rtl"] .indented .comment__picture {
+    right: -4.5rem;
+  }
+
+  .indented .comment__picture {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.comment__meta * {
+  display: inline;
+}
+
+[dir="ltr"] .comment__author {
+  margin-right: 1.125rem;
+}
+
+[dir="rtl"] .comment__author {
+  margin-left: 1.125rem;
+}
+
+.comment__author {
+  font-family: metropolis, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.125rem;
+}
+
+.comment__author a {
+  text-decoration: none;
+}
+
+.comment__time {
+  margin: 0;
+  color: #6e7172;
+  font-family: metropolis, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+[dir="ltr"] .indented {
+  margin-left: 2.25rem;
+}
+
+[dir="rtl"] .indented {
+  margin-right: 2.25rem;
+}
+
+[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
+  left: -3.375rem;
+}
+
+[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
+  right: -3.375rem;
+}
+
+[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
+  border-left: solid 1px #e7edf1;
+}
+
+[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
+  border-right: solid 1px #e7edf1;
+}
+
+.indented > .comment:not(:last-of-type):not(.has-children):before {
+  position: absolute;
+  top: 2.25rem; /* 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: -3.375rem;
+  }
+
+  [dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
+    right: -3.375rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .indented {
+    margin-left: 4.5rem;
+  }
+
+  [dir="rtl"] .indented {
+    margin-right: 4.5rem;
+  }
+}
+
+[dir="ltr"] .show-hide-btn {
+  margin-left: 3.375rem;
+}
+
+[dir="rtl"] .show-hide-btn {
+  margin-right: 3.375rem;
+}
+
+[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: 2.25rem;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  cursor: pointer;
+  color: #313637;
+  border: 0;
+  background: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.show-hide-btn[aria-expanded="true"]:after {
+  content: "\0020 -";
+}
+
+.show-hide-btn[aria-expanded="false"]:after {
+  content: "\0020 +";
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .show-hide-btn {
+    margin-left: 0;
+  }
+
+  [dir="rtl"] .show-hide-btn {
+    margin-right: 0;
+  }
+}

web/themes/custom/rorschach/css/components/comments.pcss.css

@@ -0,0 +1,233 @@
+/**
+ * @file
+ * Comment section and individual comments.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --comment-indentation: var(--sp2);
+  --comment-indentation--md: var(--sp4);
+}
+
+.comment--level-1 {
+  border-block-start: 2px solid var(--color--gray-80);
+
+  & ~ .comment--level-1 {
+    margin-block-start: var(--sp2);
+  }
+}
+
+.comments__title {
+  display: flex;
+  align-items: center;
+  margin-block-start: 0;
+}
+
+.comments__count {
+  position: relative;
+  display: inline-block;
+  min-width: 34px;
+  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: 5px;
+  padding-inline-end: 5px;
+  text-align: center;
+  color: var(--color--white);
+  border-radius: 2px;
+  background-color: var(--color--blue-20);
+  font-size: 11px;
+  line-height: 21px;
+
+  &:after {
+    position: absolute;
+    inset-block-end: -7px;
+    inset-inline-start: 8px;
+    width: 0;
+    height: 0;
+    content: "";
+    border-block-start: 7px solid var(--color--blue-20);
+    border-inline-end: 8px solid transparent;
+  }
+}
+
+.comment-form {
+  padding-block-end: var(--sp2);
+}
+
+.add-comment__form {
+  padding-inline-start: 0;
+}
+
+.comment {
+  position: relative;
+  padding-block-start: var(--sp2);
+  padding-inline-start: var(--sp3);
+
+  @media (--grid-md) {
+    padding-inline-start: 0;
+  }
+}
+
+.comment__text-content {
+  font-size: 16px;
+
+  & blockquote {
+    font-size: 21px;
+    line-height: var(--sp2);
+  }
+
+  /* Override for .field:not(:last-child) */
+  &:not(:last-child) {
+    margin-block-end: 0;
+  }
+}
+
+.comment__links {
+  margin-block: var(--sp) 0;
+}
+
+.comment__links-link {
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: var(--sp);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.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-80);
+
+  & *:not(img) {
+    display: inherit;
+    width: inherit;
+    height: inherit;
+  }
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    /* @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) {
+      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 (--grid-md) {
+    inset-inline-start: calc(-1 * var(--sp5));
+    width: var(--sp3);
+    height: var(--sp3);
+  }
+}
+
+.indented .comment__picture {
+  @media (--grid-md) {
+    inset-inline-start: calc(-1 * var(--sp4));
+    width: var(--sp2);
+    height: var(--sp2);
+  }
+}
+
+.comment__meta {
+  & * {
+    display: inline;
+  }
+}
+
+.comment__author {
+  margin-inline-end: var(--sp);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: var(--sp);
+
+  & a {
+    text-decoration: none;
+  }
+}
+
+.comment__time {
+  margin: 0;
+  color: var(--color--gray-20);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: var(--sp);
+}
+
+.indented {
+  margin-inline-start: var(--comment-indentation);
+
+  & > .comment:not(:last-of-type):not(.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-80);
+
+    @media (--md) {
+      inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
+    }
+  }
+
+  @media (--md) {
+    margin-inline-start: var(--comment-indentation--md);
+  }
+}
+
+.show-hide-btn {
+  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--gray-10);
+  border: 0;
+  background: none;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+  appearance: none;
+
+  &[aria-expanded="true"]:after {
+    content: "\0020 -";
+  }
+
+  &[aria-expanded="false"]:after {
+    content: "\0020 +";
+  }
+
+  @media (--grid-md) {
+    margin-inline-start: 0;
+  }
+}

web/themes/custom/rorschach/css/components/container-inline.module.css

@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+  display: inline-block;
+}
+
+.form-items-inline {
+  margin-top: -0.125em;
+  margin-bottom: -0.125em; /* 2px */
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-top: 0.125em;
+  margin-bottom: 0.125em;
+}

web/themes/custom/rorschach/css/components/container-inline.module.pcss.css

@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline div,
+.container-inline label {
+  display: inline-block;
+}
+
+.form-items-inline {
+  margin-block: -0.125em; /* 2px */
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-block: 0.125em;
+}

web/themes/custom/rorschach/css/components/content-moderation.css

@@ -0,0 +1,205 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for content moderation toolbar.
+ */
+
+[dir="ltr"] .entity-moderation-form {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] .entity-moderation-form {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] .entity-moderation-form {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .entity-moderation-form {
+  padding-left: 1.125rem;
+}
+
+.entity-moderation-form {
+  flex-direction: column;
+  border: 1px solid #e7edf1;
+  background-color: #f7f9fa;
+}
+
+.entity-moderation-form select,
+.entity-moderation-form input:not([type="submit"]) {
+  background-color: #fff;
+}
+
+@media (min-width: 43.75rem) {
+
+  .entity-moderation-form {
+    flex-direction: row;
+  }
+}
+
+[dir="ltr"] .entity-moderation-form__item {
+  margin-right: 1.125rem;
+}
+
+[dir="rtl"] .entity-moderation-form__item {
+  margin-left: 1.125rem;
+}
+
+.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;
+}
+
+.entity-moderation-form__item:last-child {
+  align-self: flex-start;
+}
+
+@media (min-width: 43.75rem) {
+
+  .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%;
+}
+
+@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;
+  }
+}
+
+@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: -14.28571vw;
+  }
+
+  [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: -14.28571vw;
+  }
+
+  .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(100vw - 2.25rem);
+    margin-top: 2.25rem;
+    margin-bottom: 4.5rem;
+  }
+}
+
+@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(-7.14286vw - -0.06696rem);
+  }
+
+  [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(-7.14286vw - -0.06696rem);
+  }
+
+  .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(85.71429vw - 3.05357rem);
+  }
+}
+
+@media (min-width: 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(-7.14286vw - -0.62946rem);
+  }
+
+  [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(-7.14286vw - -0.62946rem);
+  }
+
+  .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(85.71429vw - 9.80357rem);
+  }
+}
+
+@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: 60.91071rem;
+  }
+}

web/themes/custom/rorschach/css/components/content-moderation.pcss.css

@@ -0,0 +1,72 @@
+/**
+ * @file
+ * Styles for content moderation toolbar.
+ */
+
+@import "../base/variables.pcss.css";
+
+.entity-moderation-form {
+  flex-direction: column;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  border: 1px solid var(--color--gray-80);
+  background-color: var(--color--gray-95);
+
+  & select,
+  & input:not([type="submit"]) {
+    background-color: var(--color--white);
+  }
+
+  @media (--md) {
+    flex-direction: row;
+  }
+}
+
+.entity-moderation-form__item {
+  flex-basis: 0;
+  margin-inline-end: var(--sp);
+
+  &:last-child {
+    align-self: flex-start;
+    margin-inline-end: 0;
+
+    @media (--md) {
+      align-self: flex-end;
+    }
+  }
+}
+
+.layout--content-narrow,
+.layout--pass--content-narrow > *,
+.layout--content-medium,
+.layout--pass--content-medium > * {
+  & .entity-moderation-form {
+    width: 100%;
+    margin-inline-start: 0;
+
+    @supports (width: max-content) {
+      width: max-content;
+    }
+
+    @media (--grid-md) {
+      width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
+      margin-block: var(--sp2) var(--sp4);
+      margin-inline-start: calc(-2 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+    }
+
+    @media (--lg) {
+      width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
+      margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
+    }
+
+    @media (--nav) {
+      width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
+      margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
+    }
+
+    @media (--grid-max) {
+      width: calc(10 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
+      margin-inline-start: 0;
+    }
+  }
+}

web/themes/custom/rorschach/css/components/details.css

@@ -0,0 +1,254 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Collapsible details.
+ */
+
+.olivero-details {
+  display: block;
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+  color: inherit;
+  border: 1px solid #e7edf1;
+  border-radius: 0.1875rem;
+  box-shadow: 0 1px 4px #d7e1e8;
+}
+
+/* Details summary styles */
+
+[dir="ltr"] .olivero-details__summary {
+  padding-left: 2.25rem;
+}
+
+[dir="rtl"] .olivero-details__summary {
+  padding-right: 2.25rem;
+}
+
+[dir="ltr"] .olivero-details__summary {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .olivero-details__summary {
+  padding-left: 1.125rem;
+}
+
+.olivero-details__summary {
+  position: relative;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+  list-style: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease-in-out;
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  color: inherit;
+  background-color: #f7f9fa;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.125rem;
+}
+
+/* Arrow icon */
+
+[dir="ltr"] .olivero-details__summary:before,
+[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title:before {
+  left: 0.84375rem;
+}
+
+[dir="rtl"] .olivero-details__summary:before,
+[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
+  right: 0.84375rem;
+}
+
+.olivero-details__summary:before,
+.collapse-processed > .olivero-details__summary .details-title:before {
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  content: "";
+  transform: translateY(-50%) rotate(45deg); /* LTR */
+  border-top: solid 2px currentColor;
+  border-right: solid 2px currentColor;
+}
+
+[dir="rtl"] .olivero-details__summary:before,
+[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
+  transform: translateY(-50%) rotate(-135deg);
+}
+
+/* Pseudo-selector to manage focus styles */
+
+.olivero-details__summary:after,
+.collapse-processed > .olivero-details__summary .details-title:after {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  content: "";
+  pointer-events: none;
+  opacity: 0;
+  border-radius: 0.1875rem;
+  box-shadow: inset 0 0 0 2px #53b0eb;
+}
+
+/* Hide the marker */
+
+.olivero-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Disable default outline for summary, since we have own implementation */
+
+.olivero-details__summary:focus {
+  outline: solid 2px transparent;
+  outline-offset: -4px;
+}
+
+/* Details summary, hover state */
+
+.olivero-details__summary:hover {
+  background-color: #e7edf1;
+}
+
+/* Details summary, focus and active states */
+
+.olivero-details__summary:focus:after,
+.olivero-details__summary:active:after,
+.collapse-processed > .olivero-details__summary .details-title:focus:after,
+.collapse-processed > .olivero-details__summary .details-title:active:after {
+  opacity: 1;
+}
+
+/* Rotate arrow icon of the details summary, when details expanded */
+
+.olivero-details[open] > .olivero-details__summary::before,
+.collapse-processed[open] > .olivero-details__summary .details-title::before {
+  margin-top: -2px;
+  transform: translateY(-50%) rotate(135deg);
+}
+
+/* Collapse processed for non-supporting browsers like IE or Edge */
+
+[dir="ltr"] .collapse-processed > .olivero-details__summary {
+  padding-left: 0;
+}
+
+[dir="rtl"] .collapse-processed > .olivero-details__summary {
+  padding-right: 0;
+}
+
+[dir="ltr"] .collapse-processed > .olivero-details__summary {
+  padding-right: 0;
+}
+
+[dir="rtl"] .collapse-processed > .olivero-details__summary {
+  padding-left: 0;
+}
+
+.collapse-processed > .olivero-details__summary {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.collapse-processed > .olivero-details__summary:before {
+  content: none;
+}
+
+.collapse-processed > .olivero-details__summary:after {
+  content: none;
+}
+
+[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
+  padding-left: 2.25rem;
+}
+
+[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
+  padding-right: 2.25rem;
+}
+
+[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
+  padding-left: 1.125rem;
+}
+
+.collapse-processed > .olivero-details__summary .details-title {
+  position: relative;
+  display: block;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+  transition: background-color 0.12s ease-in-out;
+  text-decoration: none;
+  color: inherit;
+  background-color: #f7f9fa;
+}
+
+.collapse-processed > .olivero-details__summary .details-title:focus {
+  outline: solid 2px transparent;
+}
+
+.collapse-processed > .olivero-details__summary .details-title:hover {
+  background-color: #e7edf1;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .collapse-processed > .olivero-details__summary .details-title::after {
+    top: -0.3125rem;
+    right: -0.3125rem;
+    bottom: -0.3125rem;
+    left: -0.3125rem;
+    border: 2px dotted;
+  }
+}
+
+/* Details content wrapper */
+
+.olivero-details__wrapper {
+  margin: 1.125rem;
+}
+
+@media (min-width: 62.5rem) {
+
+  [dir="ltr"] .olivero-details__wrapper {
+    margin-left: 2.25rem;
+  }
+
+  [dir="rtl"] .olivero-details__wrapper {
+    margin-right: 2.25rem;
+  }
+
+  [dir="ltr"] .olivero-details__wrapper {
+    margin-right: 2.25rem;
+  }
+
+  [dir="rtl"] .olivero-details__wrapper {
+    margin-left: 2.25rem;
+  }
+
+  .olivero-details__wrapper {
+    margin-top: 1.6875rem;
+    margin-bottom: 1.6875rem;
+  }
+}
+
+/* Description */
+
+.olivero-details__description {
+  margin-bottom: 1.125rem;
+  color: #313637;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+}

web/themes/custom/rorschach/css/components/details.pcss.css

@@ -0,0 +1,165 @@
+/**
+ * @file
+ * Collapsible details.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --details-border-width: 1px;
+  --details-summary-transition: background-color 0.12s ease-in-out;
+}
+
+.olivero-details {
+  display: block;
+  margin-block: var(--sp1);
+  color: inherit;
+  border: var(--details-border-width) solid var(--color--gray-80);
+  border-radius: var(--border-radius);
+  box-shadow: 0 1px 4px var(--color--gray-70);
+}
+
+/* Details summary styles */
+.olivero-details__summary {
+  position: relative;
+  padding-block: var(--sp1);
+  padding-inline-start: var(--sp2);
+  padding-inline-end: var(--sp1);
+  list-style: none;
+  cursor: pointer;
+  transition: var(--details-summary-transition);
+  word-wrap: break-word;
+  hyphens: auto;
+  color: inherit;
+  background-color: var(--color--gray-95);
+  font-size: var(--line-height-s);
+  font-weight: 700;
+  line-height: var(--sp1);
+}
+
+/* Arrow icon */
+.olivero-details__summary:before,
+.collapse-processed > .olivero-details__summary .details-title:before {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sp0-75);
+  display: block;
+  width: 10px;
+  height: 10px;
+  content: "";
+  transform: translateY(-50%) rotate(45deg); /* LTR */
+  border-top: solid 2px currentColor;
+  border-right: solid 2px currentColor;
+}
+
+[dir="rtl"] {
+  & .olivero-details__summary:before,
+  & .collapse-processed > .olivero-details__summary .details-title:before {
+    transform: translateY(-50%) rotate(-135deg);
+  }
+}
+
+/* Pseudo-selector to manage focus styles */
+.olivero-details__summary:after,
+.collapse-processed > .olivero-details__summary .details-title:after {
+  position: absolute;
+  inset: calc(var(--details-border-width) * -1);
+  content: "";
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 0 0 2px var(--color--blue-70);
+}
+
+/* Hide the marker */
+.olivero-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Disable default outline for summary, since we have own implementation */
+.olivero-details__summary:focus {
+  outline: solid 2px transparent;
+  outline-offset: -4px;
+}
+
+/* Details summary, hover state */
+.olivero-details__summary:hover {
+  background-color: var(--color--gray-80);
+}
+
+/* Details summary, focus and active states */
+.olivero-details__summary:focus:after,
+.olivero-details__summary:active:after,
+.collapse-processed > .olivero-details__summary .details-title:focus:after,
+.collapse-processed > .olivero-details__summary .details-title:active:after {
+  opacity: 1;
+}
+
+/* Rotate arrow icon of the details summary, when details expanded */
+.olivero-details[open] > .olivero-details__summary::before,
+.collapse-processed[open] > .olivero-details__summary .details-title::before {
+  margin-block-start: -2px;
+  transform: translateY(-50%) rotate(135deg);
+}
+
+/* Collapse processed for non-supporting browsers like IE or Edge */
+.collapse-processed > .olivero-details__summary {
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+
+  &:before {
+    content: none;
+  }
+
+  &:after {
+    content: none;
+  }
+}
+
+.collapse-processed > .olivero-details__summary .details-title {
+  position: relative;
+  display: block;
+  padding-block: var(--sp1);
+  padding-inline-start: var(--sp2);
+  padding-inline-end: var(--sp1);
+  transition: var(--details-summary-transition);
+  text-decoration: none;
+  color: inherit;
+  background-color: var(--color--gray-95);
+}
+
+.collapse-processed > .olivero-details__summary .details-title:focus {
+  outline: solid 2px transparent;
+}
+
+.collapse-processed > .olivero-details__summary .details-title:hover {
+  background-color: var(--color--gray-80);
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .collapse-processed > .olivero-details__summary .details-title::after {
+    inset: -5px;
+    border: 2px dotted;
+  }
+}
+
+/* Details content wrapper */
+.olivero-details__wrapper {
+  margin: var(--sp1);
+
+  @media (--lg) {
+    margin-block-start: var(--sp1-5);
+    margin-block-end: var(--sp1-5);
+    margin-inline-start: var(--sp2);
+    margin-inline-end: var(--sp2);
+  }
+}
+
+/* Description */
+.olivero-details__description {
+  margin-block-end: var(--sp1);
+  color: var(--color--gray-10);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+}

web/themes/custom/rorschach/css/components/dropbutton.css

@@ -0,0 +1,195 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Dropbutton styles.
+ */
+
+.dropbutton-wrapper.open {
+  position: relative;
+  z-index: 100; /* Ensure this appears above all other dropbuttons. */
+  filter: drop-shadow(0 2px 2px #e3e3e5);
+}
+
+[dir="ltr"] .dropbutton-widget {
+  padding-right: 1.6875rem;
+}
+
+[dir="rtl"] .dropbutton-widget {
+  padding-left: 1.6875rem;
+}
+
+.dropbutton-widget {
+  position: relative;
+  width: 12.5rem;
+  height: 1.6875rem;
+  border-radius: 0.1875rem;
+}
+
+@supports (width: max-content) {
+
+  .dropbutton-widget {
+    width: max-content;
+  }
+}
+
+[dir="ltr"] .dropbutton-single .dropbutton-widget {
+  padding-right: 0;
+}
+
+[dir="rtl"] .dropbutton-single .dropbutton-widget {
+  padding-left: 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;
+}
+
+.dropbutton {
+  height: 1.6875rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+[dir="ltr"] .dropbutton-toggle button {
+  right: 0;
+}
+
+[dir="rtl"] .dropbutton-toggle button {
+  left: 0;
+}
+
+.dropbutton-toggle button {
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6875rem;
+  height: 1.6875rem;
+  padding: 0;
+  cursor: pointer;
+  border-color: transparent;
+  border-radius: 0 0.1875rem 0.1875rem 0; /* LTR */
+  background: #e3e3e5;
+}
+
+.dropbutton-toggle button:focus {
+  outline: solid 2px #0d77b5;
+  outline-offset: -2px;
+}
+
+.dropbutton-toggle button:before {
+  display: block;
+  width: 0.5625rem;
+  height: 0.5625rem;
+  content: "";
+  transform: translateY(-25%) rotate(45deg);
+  border-right: solid 2px #0d77b5;
+  border-bottom: solid 2px #0d77b5;
+}
+
+[dir="rtl"] .dropbutton-toggle button {
+  border-radius: 0.1875rem 0 0 0.1875rem;
+}
+
+[dir="ltr"] .dropbutton-action:first-child {
+  margin-right: 2px;
+}
+
+[dir="rtl"] .dropbutton-action:first-child {
+  margin-left: 2px;
+}
+
+.dropbutton-action:first-child {
+  border: solid 1px transparent;
+  border-radius: 0.1875rem 0 0 0.1875rem; /* LTR */
+  background: #e3e3e5;
+}
+
+.dropbutton-action a {
+  display: flex;
+  align-items: center;
+  margin-bottom: -2px; /* Account for borders. */
+  padding: 0 0.5625rem;
+  text-decoration: none;
+  color: #313637;
+  font-weight: 600;
+}
+
+.dropbutton-action a:focus {
+  border: solid 2px #0d77b5;
+  outline: 0;
+
+  /* Negate specific IE rules. */
+}
+
+@supports (outline-offset: -2px) {
+
+  .dropbutton-action a:focus {
+    border: 0;
+    outline: solid 2px #0d77b5;
+    outline-offset: -1px; /* Overlap parent container by 1px. */
+  }
+}
+
+.dropbutton-single .dropbutton-action:first-child {
+  border-right: solid 1px transparent; /* LTR */
+  border-radius: 0.1875rem;
+}
+
+.dropbutton-single .dropbutton-action a {
+  justify-content: center;
+}
+
+[dir="rtl"] .dropbutton-action:first-child {
+  border: solid 1px transparent;
+  border-radius: 0 0.1875rem 0.1875rem 0;
+}
+
+[dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
+  border: solid 1px transparent;
+}
+
+.secondary-action {
+  visibility: hidden;
+  width: calc(100% + 1.6875rem);
+  border-right: 1px solid #e3e3e5;
+  border-left: 1px solid #e3e3e5;
+  background: #fff;
+}
+
+.secondary-action:last-child {
+  border-bottom: 1px solid #e3e3e5;
+}
+
+.dropbutton-wrapper.open .dropbutton-toggle button:before {
+  transform: translateY(25%) rotate(225deg);
+}
+
+.dropbutton-wrapper.open .dropbutton-widget {
+  border-radius: 0.1875rem 0.1875rem 0 0;
+}
+
+.dropbutton-wrapper.open .secondary-action {
+  visibility: visible;
+}

web/themes/custom/rorschach/css/components/dropbutton.pcss.css

@@ -0,0 +1,157 @@
+/**
+ * @file
+ * Dropbutton styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --dropbutton--height: var(--sp1-5);
+  --dropbutton--bg-color: var(--color--gray-75);
+  --dropbutton--border-color: var(--color--blue-20);
+}
+
+.dropbutton-wrapper.open {
+  position: relative;
+  z-index: 100; /* Ensure this appears above all other dropbuttons. */
+  filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
+}
+
+.dropbutton-widget {
+  position: relative;
+  width: 200px;
+  height: var(--dropbutton--height);
+  padding-inline-end: var(--dropbutton--height);
+  border-radius: var(--border-radius);
+
+  @supports (width: max-content) {
+    width: max-content;
+  }
+}
+
+.dropbutton-single .dropbutton-widget {
+  padding-inline-end: 0;
+}
+
+.dropbutton {
+  height: var(--dropbutton--height);
+  margin-block: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+  list-style: none;
+  font-size: var(--font-size-s);
+}
+
+.dropbutton-toggle button {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dropbutton--height);
+  height: var(--dropbutton--height);
+  padding: 0;
+  cursor: pointer;
+  border-color: transparent;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
+  background: var(--dropbutton--bg-color);
+
+  &:focus {
+    outline: solid 2px var(--dropbutton--border-color);
+    outline-offset: -2px;
+  }
+
+  &:before {
+    display: block;
+    width: var(--sp0-5);
+    height: var(--sp0-5);
+    content: "";
+    transform: translateY(-25%) rotate(45deg);
+    border-right: solid 2px var(--dropbutton--border-color);
+    border-bottom: solid 2px var(--dropbutton--border-color);
+  }
+}
+
+[dir="rtl"] .dropbutton-toggle button {
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+}
+
+.dropbutton-action {
+  &:first-child {
+    margin-inline-end: 2px;
+    border: solid 1px transparent;
+    border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
+    background: var(--dropbutton--bg-color);
+  }
+
+  & a {
+    display: flex;
+    align-items: center;
+    margin-bottom: -2px; /* Account for borders. */
+    padding: 0 9px;
+    text-decoration: none;
+    color: var(--color--gray-10);
+    font-weight: 600;
+
+    &:focus {
+      border: solid 2px var(--dropbutton--border-color);
+      outline: 0;
+
+      /* Negate specific IE rules. */
+      @supports (outline-offset: -2px) {
+        border: 0;
+        outline: solid 2px var(--dropbutton--border-color);
+        outline-offset: -1px; /* Overlap parent container by 1px. */
+      }
+    }
+  }
+}
+
+.dropbutton-single .dropbutton-action {
+  &:first-child {
+    border-right: solid 1px transparent; /* LTR */
+    border-radius: var(--border-radius);
+  }
+
+  & a {
+    justify-content: center;
+  }
+}
+
+[dir="rtl"] {
+  & .dropbutton-action:first-child {
+    border: solid 1px transparent;
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
+
+  & .dropbutton-single .dropbutton-action:first-child {
+    border: solid 1px transparent;
+  }
+}
+
+.secondary-action {
+  visibility: hidden;
+  width: calc(100% + var(--dropbutton--height));
+  border-right: 1px solid var(--dropbutton--bg-color);
+  border-left: 1px solid var(--dropbutton--bg-color);
+  background: var(--color--white);
+
+  &:last-child {
+    border-bottom: 1px solid var(--dropbutton--bg-color);
+  }
+}
+
+.dropbutton-wrapper.open {
+  & .dropbutton-toggle button:before {
+    transform: translateY(25%) rotate(225deg);
+  }
+
+  & .dropbutton-widget {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+
+  & .secondary-action {
+    visibility: visible;
+  }
+}

web/themes/custom/rorschach/css/components/embedded-media.css

@@ -0,0 +1,298 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Embedded Media.
+ */
+
+figure {
+  background: #f7f9fa;
+}
+
+[dir="ltr"] figcaption {
+  padding-left: 0.5625rem;
+}
+
+[dir="rtl"] figcaption {
+  padding-right: 0.5625rem;
+}
+
+[dir="ltr"] figcaption {
+  padding-right: 0.5625rem;
+}
+
+[dir="rtl"] figcaption {
+  padding-left: 0.5625rem;
+}
+
+figcaption {
+  padding-top: 0.5625rem;
+  padding-bottom: 0.5625rem;
+  color: #313637;
+  background: #f7f9fa;
+  font-family: Lora, georgia, serif;
+  font-size: 0.875rem;
+  font-style: italic;
+  line-height: 1.125rem;
+}
+
+@media (min-width: 31.25rem) {
+
+  [dir="ltr"] figcaption {
+    padding-left: 1.125rem;
+  }
+
+  [dir="rtl"] figcaption {
+    padding-right: 1.125rem;
+  }
+
+  [dir="ltr"] figcaption {
+    padding-right: 1.125rem;
+  }
+
+  [dir="rtl"] figcaption {
+    padding-left: 1.125rem;
+  }
+
+  figcaption {
+    padding-top: 1.125rem;
+    padding-bottom: 1.125rem;
+  }
+}
+
+[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: 3.375rem;
+  margin-bottom: 3.375rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .align-right {
+    float: right;
+  }
+
+  [dir="rtl"] .align-right {
+    float: left;
+  }
+
+  [dir="ltr"] .align-right {
+    margin-left: 1.125rem;
+  }
+
+  [dir="rtl"] .align-right {
+    margin-right: 1.125rem;
+  }
+
+  [dir="ltr"] .align-right {
+    margin-right: 0;
+  }
+
+  [dir="rtl"] .align-right {
+    margin-left: 0;
+  }
+
+  .align-right {
+    max-width: 50%;
+    margin-top: 1.125rem;
+    margin-bottom: 1.125rem;
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-right,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-right {
+    margin-right: -7.14286vw;
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-right,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-right {
+    margin-left: -7.14286vw;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-right,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-right {
+    margin-right: calc(-14.28571vw - -0.13393rem);
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-right,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-right {
+    margin-left: calc(-14.28571vw - -0.13393rem);
+  }
+}
+
+@media (min-width: 75rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-right,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-right {
+    margin-right: calc(-21.42857vw - -1.88839rem);
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-right,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-right {
+    margin-left: calc(-21.42857vw - -1.88839rem);
+  }
+}
+
+@media (min-width: 90rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-right,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-right {
+    margin-right: -17.59821rem;
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-right,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-right {
+    margin-left: -17.59821rem;
+  }
+}
+
+[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: 3.375rem;
+  margin-bottom: 3.375rem;
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .align-left {
+    float: left;
+  }
+
+  [dir="rtl"] .align-left {
+    float: right;
+  }
+
+  [dir="ltr"] .align-left {
+    margin-left: 0;
+  }
+
+  [dir="rtl"] .align-left {
+    margin-right: 0;
+  }
+
+  [dir="ltr"] .align-left {
+    margin-right: 2.25rem;
+  }
+
+  [dir="rtl"] .align-left {
+    margin-left: 2.25rem;
+  }
+
+  .align-left {
+    max-width: 50%;
+    margin-top: 1.125rem;
+    margin-bottom: 1.125rem; /* Extra right margins in case of aligning next to lists. */
+  }
+}
+
+/* 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: -7.14286vw;
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-left,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-left {
+    margin-right: -7.14286vw;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-left,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-left {
+    margin-left: calc(-7.14286vw - -0.06696rem);
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-left,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-left {
+    margin-right: calc(-7.14286vw - -0.06696rem);
+  }
+}
+
+@media (min-width: 75rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-left,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-left {
+    margin-left: calc(-7.14286vw - -0.62946rem);
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-left,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-left {
+    margin-right: calc(-7.14286vw - -0.62946rem);
+  }
+}
+
+@media (min-width: 90rem) {
+
+  [dir="ltr"] .layout--content-narrow .align-left,
+  [dir="ltr"] .layout--pass--content-narrow > * .align-left {
+    margin-left: -5.86607rem;
+  }
+
+  [dir="rtl"] .layout--content-narrow .align-left,
+  [dir="rtl"] .layout--pass--content-narrow > * .align-left {
+    margin-right: -5.86607rem;
+  }
+}
+
+.align-center img,
+.align-center video,
+.align-center audio {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.media-oembed-content {
+  display: block;
+  max-width: 100%;
+}

web/themes/custom/rorschach/css/components/embedded-media.pcss.css

@@ -0,0 +1,114 @@
+/**
+ * @file
+ * Embedded Media.
+ */
+
+@import "../base/variables.pcss.css";
+
+figure {
+  background: var(--color--gray-95);
+}
+
+figcaption {
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp0-5);
+  padding-inline-end: var(--sp0-5);
+  color: var(--color--gray-10);
+  background: var(--color--gray-95);
+  font-family: var(--font-serif);
+  font-size: 14px;
+  font-style: italic;
+  line-height: var(--sp);
+
+  @media (--sm) {
+    padding-block: var(--sp);
+    padding-inline-start: var(--sp);
+    padding-inline-end: var(--sp);
+  }
+}
+
+.align-right {
+  float: none; /* Override core's align.module.css. */
+  max-width: 100%;
+  margin-block: var(--sp3);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+
+  @media (--grid-md) {
+    float: inline-end;
+    max-width: 50%;
+    margin-block-start: var(--sp);
+    margin-block-end: var(--sp);
+    margin-inline-start: var(--sp);
+    margin-inline-end: 0;
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+.layout--content-narrow .align-right,
+.layout--pass--content-narrow > * .align-right {
+  @media (--grid-md) {
+    margin-inline-end: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+  }
+
+  @media (--lg) {
+    margin-inline-end: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+  }
+
+  @media (--nav) {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
+  }
+
+  @media (--grid-max) {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+  }
+}
+
+.align-left {
+  float: none; /* Override core's align.module.css. */
+  max-width: 100%;
+  margin-block-start: var(--sp3);
+  margin-block-end: var(--sp3);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+
+  @media (--grid-md) {
+    float: inline-start;
+    max-width: 50%;
+    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. */
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+.layout--content-narrow .align-left,
+.layout--pass--content-narrow > * .align-left {
+  @media (--grid-md) {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+  }
+
+  @media (--lg) {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+  }
+
+  @media (--nav) {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
+  }
+
+  @media (--grid-max) {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+  }
+}
+
+.align-center img,
+.align-center video,
+.align-center audio {
+  margin-inline: auto;
+}
+
+.media-oembed-content {
+  display: block;
+  max-width: 100%;
+}

web/themes/custom/rorschach/css/components/feed.css

@@ -0,0 +1,53 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * RSS feed.
+ */
+
+.feed-icon {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #5d7585;
+}
+
+.feed-icon:hover {
+  color: #2494db;
+}
+
+.feed-icon__label {
+  flex-shrink: 0;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+[dir="ltr"] .feed-icon__icon {
+  margin-left: 0.5625rem;
+}
+
+[dir="rtl"] .feed-icon__icon {
+  margin-right: 0.5625rem;
+}
+
+.feed-icon__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.6875rem;
+  height: 1.6875rem;
+  color: #fff;
+  background-color: #2494db;
+}
+
+.feed-icon__icon svg {
+  vertical-align: top;
+  fill: currentColor;
+}

web/themes/custom/rorschach/css/components/feed.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * RSS feed.
+ */
+
+@import "../base/variables.pcss.css";
+
+.feed-icon {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color--gray-25);
+
+  &:hover {
+    color: var(--color--blue-50);
+  }
+}
+
+.feed-icon__label {
+  flex-shrink: 0;
+  letter-spacing: 0.08em;
+  font-size: var(--font-size-xxs);
+  font-weight: 600;
+}
+
+.feed-icon__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  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--blue-50);
+
+  & svg {
+    vertical-align: top;
+    fill: currentColor;
+  }
+}

web/themes/custom/rorschach/css/components/field.css

@@ -0,0 +1,60 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+.field:not(:last-child) {
+  margin-bottom: 2.25rem;
+}
+
+.node--view-mode-teaser .field {
+  margin-bottom: 1.125rem;
+}
+
+.node--view-mode-teaser .field:last-child {
+  margin-bottom: 0;
+}
+
+@media (min-width: 62.5rem) {
+
+  .node--view-mode-teaser .field {
+    margin-bottom: 2.25rem;
+  }
+}
+
+.field__label {
+  font-weight: bold;
+}
+
+[dir="ltr"] .field--label-inline .field__label,
+[dir="ltr"] .field--label-inline .field__items {
+  float: left;
+}
+
+[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__item,
+[dir="rtl"] .field--label-inline .field__items {
+  padding-left: 0.5em;
+}
+
+.field--label-inline .field__label::after {
+  content: ":";
+}

web/themes/custom/rorschach/css/components/field.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+@import "../base/variables.pcss.css";
+
+.field:not(:last-child) {
+  margin-block-end: var(--sp2);
+}
+
+.node--view-mode-teaser .field {
+  margin-block-end: var(--sp);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+
+  @media (--lg) {
+    margin-block-end: var(--sp2);
+  }
+}
+
+.field__label {
+  font-weight: bold;
+}
+
+.field--label-inline .field__label,
+.field--label-inline .field__items {
+  float: inline-start;
+}
+
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  padding-inline-end: 0.5em;
+}
+
+.field--label-inline .field__label::after {
+  content: ":";
+}

web/themes/custom/rorschach/css/components/footer.css

@@ -0,0 +1,58 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Footer regions.
+ */
+
+.site-footer {
+  position: relative; /* stack above left social bar */
+  color: #9ea0a1;
+  background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%);
+}
+
+[dir="ltr"] .site-footer .menu {
+  margin-left: 0;
+}
+
+[dir="rtl"] .site-footer .menu {
+  margin-right: 0;
+}
+
+.site-footer .menu {
+  list-style: none;
+}
+
+[dir="ltr"] .site-footer .menu ul {
+  margin-left: 1.125rem;
+}
+
+[dir="rtl"] .site-footer .menu ul {
+  margin-right: 1.125rem;
+}
+
+.site-footer .menu li {
+  margin-bottom: 0.5625rem;
+}
+
+.site-footer a {
+  color: inherit;
+}
+
+.site-footer a:hover {
+  text-decoration: none;
+}
+
+@media (min-width: 75rem) {
+  [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
+    border-left: solid 5.625rem #000;
+  }
+  [dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
+    border-right: solid 5.625rem #000;
+  }
+}

web/themes/custom/rorschach/css/components/footer.pcss.css

@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Footer regions.
+ */
+
+@import "../base/variables.pcss.css";
+
+.site-footer {
+  position: relative; /* stack above left social bar */
+  color: var(--color--gray-50);
+  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-8) 100%);
+
+  & .menu {
+    margin-inline-start: 0;
+    list-style: none;
+
+    & ul {
+      margin-inline-start: var(--sp);
+    }
+
+    & li {
+      margin-block-end: var(--sp0-5);
+    }
+  }
+
+  & a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+@media (--nav) {
+  body:not(.is-always-mobile-nav) .site-footer {
+    border-inline-start: solid var(--content-left) var(--color--black);
+  }
+}

web/themes/custom/rorschach/css/components/form-select.css

@@ -0,0 +1,148 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Select input elements.
+ */
+
+[dir="ltr"] select {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] select {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] select {
+  padding-right: 3.375rem;
+}
+
+[dir="rtl"] select {
+  padding-left: 3.375rem;
+}
+
+select {
+  max-width: 100%;
+  height: 3.375rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: #0d1214;
+  border: 1px solid #7e96a7;
+  border-radius: 0.1875rem;
+  background-color: #fff;
+  background-image: url("../../images/chevron-down.svg");
+  background-repeat: no-repeat;
+  background-position: right 18px center; /* LTR */
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select:focus {
+  border: solid 2px #2494db;
+  outline: solid 2px #2494db;
+}
+
+@supports (outline-style: double) {
+
+  select:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
+  }
+}
+
+/* Hides default chevron within Internet Explorer. */
+
+select::-ms-expand {
+  display: none;
+}
+
+select[disabled] {
+  color: #7e96a7;
+  background-color: #f1f4f7;
+}
+
+select.error {
+  border: solid 2px #e33f1e;
+}
+
+select.error:focus {
+  outline-color: #e33f1e;
+}
+
+select[multiple] {
+  height: auto;
+  padding: 0.5625rem;
+  background-image: none;
+  line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
+}
+
+select[multiple] option {
+  padding: 0.5625rem;
+}
+
+select.form-element--small {
+  height: 2.8125rem;
+}
+
+/* Necessary to show chevron in forced colors mode in modern browsers. */
+
+@media (forced-colors: active) {
+
+  [dir="ltr"] select {
+    padding-right: 1.125rem;
+  }
+
+  [dir="rtl"] select {
+    padding-left: 1.125rem;
+  }
+
+  select {
+    background-image: none;
+    -webkit-appearance: listbox;
+    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 {
+      -webkit-appearance: revert;
+      appearance: revert;
+    }
+  }
+}
+
+/* Necessary for Internet Explorer to show chevron. */
+
+@media screen and (-ms-high-contrast: active) {
+
+  [dir="ltr"] select {
+    padding-right: 0;
+  }
+
+  [dir="rtl"] select {
+    padding-left: 0;
+  }
+
+  select {
+
+    /* Re-enable default chevron for Internet Explorer. */
+  }
+  select::-ms-expand {
+    display: block;
+  }
+}
+
+[dir="rtl"] select {
+  background-position: left 18px center;
+}

web/themes/custom/rorschach/css/components/form-select.pcss.css

@@ -0,0 +1,99 @@
+/**
+ * @file
+ * Select input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --form-element-select-icon: url("../../images/chevron-down.svg");
+}
+
+select {
+  max-width: 100%;
+  height: var(--sp3);
+  padding-block: 0;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp3);
+  color: var(--color--gray-0);
+  border: 1px solid var(--color--gray-30);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  background-image: var(--form-element-select-icon);
+  background-repeat: no-repeat;
+  background-position: right var(--sp) center; /* LTR */
+  font-family: inherit;
+  font-size: inherit;
+  appearance: none;
+
+  &:focus {
+    border: solid 2px var(--color--blue-50);
+    outline: solid 2px var(--color--blue-50);
+
+    @supports (outline-style: double) {
+      border-width: 1px;
+      outline-width: 6px;
+      outline-style: double;
+      outline-offset: -1px;
+    }
+  }
+
+  /* Hides default chevron within Internet Explorer. */
+  &::-ms-expand {
+    display: none;
+  }
+
+  &[disabled] {
+    color: var(--color--gray-30);
+    background-color: var(--color--gray-90);
+  }
+
+  &.error {
+    border: solid 2px var(--color--red);
+
+    &:focus {
+      outline-color: var(--color--red);
+    }
+  }
+
+  &[multiple] {
+    height: auto;
+    padding: var(--sp0-5);
+    background-image: none;
+    line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
+
+    & option {
+      padding: var(--sp0-5);
+    }
+  }
+
+  &.form-element--small {
+    height: var(--sp2-5);
+  }
+
+  /* Necessary to show chevron in forced colors mode in modern browsers. */
+  @media (forced-colors: active) {
+    padding-inline-end: var(--sp);
+    background-image: none;
+    appearance: listbox; /* Default <select> appearance value for modern browsers. */
+
+    /* Lets browser set <select> appearance to whatever the browser's default is. */
+    @supports (appearance: revert) {
+      appearance: revert;
+    }
+  }
+
+  /* Necessary for Internet Explorer to show chevron. */
+  @media screen and (-ms-high-contrast: active) {
+    padding-inline-end: 0;
+
+    /* Re-enable default chevron for Internet Explorer. */
+    &::-ms-expand {
+      display: block;
+    }
+  }
+}
+
+[dir="rtl"] select {
+  background-position: left var(--sp) center;
+}

web/themes/custom/rorschach/css/components/form-text.css

@@ -0,0 +1,248 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Text input elements.
+ */
+
+[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: 100%;
+  max-width: 100%;
+  min-height: 3.375rem;
+  padding: 0 1.125rem;
+  color: #0d1214;
+  border: 1px solid #7e96a7;
+  border-radius: 0.1875rem;
+  background-color: #fff;
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-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 #2494db;
+  outline: solid 2px #2494db;
+}
+
+@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;
+  }
+}
+
+[type="color"]::-ms-clear,
+[type="date"]::-ms-clear,
+[type="datetime-local"]::-ms-clear,
+[type="email"]::-ms-clear,
+[type="file"]::-ms-clear,
+[type="month"]::-ms-clear,
+[type="number"]::-ms-clear,
+[type="password"]::-ms-clear,
+[type="search"]::-ms-clear,
+[type="tel"]::-ms-clear,
+[type="text"]::-ms-clear,
+[type="time"]::-ms-clear,
+[type="url"]::-ms-clear,
+[type="week"]::-ms-clear,
+textarea::-ms-clear {
+  display: none;
+}
+
+[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: #7e96a7;
+  background-color: #f1f4f7;
+}
+
+.error[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"],
+textarea.error {
+  border: solid 2px #e33f1e;
+}
+
+.error[type="color"]:focus,
+.error[type="date"]:focus,
+.error[type="datetime-local"]:focus,
+.error[type="email"]:focus,
+.error[type="file"]:focus,
+.error[type="month"]:focus,
+.error[type="number"]:focus,
+.error[type="password"]:focus,
+.error[type="search"]:focus,
+.error[type="tel"]:focus,
+.error[type="text"]:focus,
+.error[type="time"]:focus,
+.error[type="url"]:focus,
+.error[type="week"]:focus,
+textarea.error:focus {
+  outline-color: #e33f1e;
+  outline-offset: -2px;
+}
+
+.error[type="color"] + .ck-editor > .ck-editor__main,
+.error[type="date"] + .ck-editor > .ck-editor__main,
+.error[type="datetime-local"] + .ck-editor > .ck-editor__main,
+.error[type="email"] + .ck-editor > .ck-editor__main,
+.error[type="file"] + .ck-editor > .ck-editor__main,
+.error[type="month"] + .ck-editor > .ck-editor__main,
+.error[type="number"] + .ck-editor > .ck-editor__main,
+.error[type="password"] + .ck-editor > .ck-editor__main,
+.error[type="search"] + .ck-editor > .ck-editor__main,
+.error[type="tel"] + .ck-editor > .ck-editor__main,
+.error[type="text"] + .ck-editor > .ck-editor__main,
+.error[type="time"] + .ck-editor > .ck-editor__main,
+.error[type="url"] + .ck-editor > .ck-editor__main,
+.error[type="week"] + .ck-editor > .ck-editor__main,
+textarea.error + .ck-editor > .ck-editor__main {
+  border: solid 2px #e33f1e;
+}
+
+.form-element--small[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"],
+textarea.form-element--small {
+  min-height: 2.8125rem;
+}
+
+@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. */
+
+[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-left: 0;
+}
+
+[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-right: 0;
+}
+
+[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-right: 0;
+}
+
+[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-left: 0;
+}
+
+[type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+[type="file"] {
+  height: auto;
+  padding-top: 0.84375rem;
+  padding-bottom: 0.84375rem;
+}
+
+[type="color"] {
+  width: 3.375rem;
+  padding: 0;
+}

web/themes/custom/rorschach/css/components/form-text.pcss.css

@@ -0,0 +1,94 @@
+/**
+ * @file
+ * Text input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+[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: 100%;
+  max-width: 100%;
+  min-height: var(--sp3);
+  padding: 0 var(--sp);
+  color: var(--color--gray-0);
+  border: 1px solid var(--color--gray-30);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  font-family: inherit;
+  font-size: inherit;
+  appearance: none;
+
+  &:focus {
+    border: solid 2px var(--color--blue-50);
+    outline: solid 2px var(--color--blue-50);
+
+    @supports (outline-style: double) {
+      border-width: 1px;
+      outline-width: 6px;
+      outline-style: double;
+      outline-offset: -1px;
+    }
+  }
+
+  &::-ms-clear {
+    display: none;
+  }
+
+  &[disabled] {
+    color: var(--color--gray-30);
+    background-color: var(--color--gray-90);
+  }
+
+  &.error {
+    border: solid 2px var(--color--red);
+
+    &:focus {
+      outline-color: var(--color--red);
+      outline-offset: -2px;
+    }
+    & + .ck-editor > .ck-editor__main {
+      border: solid 2px var(--color--red);
+    }
+  }
+
+  &.form-element--small {
+    min-height: var(--sp2-5);
+  }
+
+  @media (--sm) {
+    width: auto;
+  }
+}
+
+[type="date"] {
+  /* Ensure that date field isn't larger than other fields. */
+  &::-webkit-datetime-edit-fields-wrapper {
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+}
+
+[type="file"] {
+  height: auto;
+  padding-block: var(--sp0-75);
+}
+
+[type="color"] {
+  width: var(--sp3);
+  padding: 0;
+}

web/themes/custom/rorschach/css/components/form-textarea.css

@@ -0,0 +1,18 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Textarea.
+ */
+
+textarea {
+  display: block;
+  width: 100%;
+  min-height: 9rem;
+  padding: 1.125rem;
+}

web/themes/custom/rorschach/css/components/form-textarea.pcss.css

@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Textarea.
+ */
+
+@import "../base/variables.pcss.css";
+
+textarea {
+  display: block;
+  width: 100%;
+  min-height: var(--sp8);
+  padding: var(--sp);
+}

web/themes/custom/rorschach/css/components/forum.css

@@ -0,0 +1,22 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Forum specific styles.
+ */
+
+.forum table {
+  width: 100%;
+}
+
+.forum__name--link,
+.forum__last-reply a,
+.forum__title a {
+  color: #0d77b5;
+  font-weight: bold;
+}

web/themes/custom/rorschach/css/components/forum.pcss.css

@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Forum specific styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+.forum {
+  & table {
+    width: 100%;
+  }
+}
+
+.forum__name--link,
+.forum__last-reply a,
+.forum__title a {
+  color: var(--color--blue-20);
+  font-weight: bold;
+}

web/themes/custom/rorschach/css/components/header-buttons-mobile.css

@@ -0,0 +1,50 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Header Mobile Buttons.
+ */
+
+[dir="ltr"] .mobile-buttons {
+  margin-left: auto;
+}
+
+[dir="rtl"] .mobile-buttons {
+  margin-right: auto;
+}
+
+.mobile-buttons {
+  margin-top: 0.5625rem;
+}
+
+@media (min-width: 31.25rem) {
+
+  .mobile-buttons {
+    margin-top: 2.25rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  .mobile-buttons {
+    margin-top: 4.5rem;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  .mobile-buttons {
+    margin-top: 6.75rem;
+  }
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .mobile-buttons {
+    display: none;
+  }
+}

web/themes/custom/rorschach/css/components/header-buttons-mobile.pcss.css

@@ -0,0 +1,29 @@
+/**
+ * @file
+ * Header Mobile Buttons.
+ */
+
+@import "../base/variables.pcss.css";
+
+.mobile-buttons {
+  margin-block-start: var(--sp0-5);
+  margin-inline-start: auto;
+
+  @media (--sm) {
+    margin-block-start: var(--sp2);
+  }
+
+  @media (--md) {
+    margin-block-start: var(--sp4);
+  }
+
+  @media (--nav) {
+    margin-block-start: var(--sp6);
+  }
+}
+
+@media (--nav) {
+  body:not(.is-always-mobile-nav) .mobile-buttons {
+    display: none;
+  }
+}

web/themes/custom/rorschach/css/components/header-navigation.css

@@ -0,0 +1,285 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Navigation in header.
+ */
+
+[dir="ltr"] .header-nav {
+  left: 100%;
+}
+
+[dir="rtl"] .header-nav {
+  right: 100%;
+}
+
+[dir="ltr"] .header-nav {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] .header-nav {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] .header-nav {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .header-nav {
+  padding-left: 1.125rem;
+}
+
+.header-nav {
+  position: fixed;
+  z-index: 501; /* Appear above overlay and contextual links in header. */
+  top: 0;
+  visibility: hidden;
+  overflow: auto;
+  /**
+   * Ensure that header nav not use additional space and force system branding
+   * block text to unnecessarily wrap.
+   */
+  flex-basis: 0;
+  flex-grow: 1; /* Necessary for IE11. */
+  width: 100%;
+  max-width: 31.25rem;
+  height: 100%;
+  padding-top: 0;
+  padding-bottom: 1.125rem;
+  /**
+   * 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 #fff 3.375rem;
+  background-color: #fff;
+  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
+}
+
+.header-nav.is-active {
+  visibility: visible;
+  transform: translateX(-100%); /* LTR */
+}
+
+@supports (flex-basis: max-content) {
+
+  .header-nav {
+    flex-basis: max-content;
+  }
+}
+
+@media (min-width: 31.25rem) {
+
+  .header-nav {
+    border-top-width: 90px;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .header-nav {
+    padding-left: 3.375rem;
+  }
+
+  [dir="rtl"] .header-nav {
+    padding-right: 3.375rem;
+  }
+
+  .header-nav {
+    padding-bottom: 3.375rem;
+    border-top-width: 126px;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  .header-nav {
+    -ms-grid-column: 5;
+    -ms-grid-column-span: 9;
+    grid-column: 5 / 14;
+  }
+}
+
+/*
+   * Ensure top border has the same color as the background when in forced colors.
+   */
+
+@media (forced-colors: active) {
+
+  .header-nav {
+    border-top-color: canvas;
+  }
+}
+
+/*
+ * Only apply transition styles when JS is loaded. This
+ * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
+ */
+
+html.js .header-nav {
+  transition: visibility 0.2s, transform 0.2s;
+}
+
+/* Toolbar is fixed, and tray is vertical. */
+
+body.toolbar-vertical .header-nav {
+  border-top-width: 93px;
+}
+
+@media (min-width: 31.25rem) {
+
+  body.toolbar-vertical .header-nav {
+    border-top-width: 129px;
+  }
+}
+
+/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
+
+@media (min-width: 43.75rem) {
+
+  body.toolbar-vertical .header-nav,
+  body.toolbar-horizontal.toolbar-fixed .header-nav {
+    border-top-width: 165px;
+  }
+}
+
+/* Toolbar is horizontal fixed, and tray is open. */
+
+@media (min-width: 43.75rem) {
+
+  body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
+    border-top-width: 205px;
+  }
+}
+
+@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 {
+    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: 6.75rem;
+    margin-top: auto;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: transform 0.2s;
+    transform: none;
+    border-top: 0;
+    box-shadow: none;
+  }
+}
+
+/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
+
+@media (min-width: 75rem) {
+
+  body.is-always-mobile-nav.toolbar-vertical .header-nav,
+  body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav {
+    border-top-width: 237px;
+  }
+}
+
+/* Toolbar is horizontal fixed, and tray is open. */
+
+@media (min-width: 75rem) {
+
+  body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
+    border-top-width: 277px;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  [dir="ltr"] body.is-always-mobile-nav .header-nav {
+    padding-right: 1.125rem;
+  }
+
+  [dir="rtl"] body.is-always-mobile-nav .header-nav {
+    padding-left: 1.125rem;
+  }
+
+  body.is-always-mobile-nav .header-nav {
+    overflow: auto;
+    max-width: calc(50vw - 4.40625rem);
+    transition: transform 0.2s, visibility 0.2s;
+    border-top-width: 198px;
+  }
+}
+
+@media (min-width: 90rem) {
+
+  [dir="ltr"] body.is-always-mobile-nav .header-nav {
+    padding-right: calc(100vw - 88.875rem);
+  }
+
+  [dir="rtl"] body.is-always-mobile-nav .header-nav {
+    padding-left: calc(100vw - 88.875rem);
+  }
+
+  body.is-always-mobile-nav .header-nav {
+    max-width: calc(100vw - 48.9375rem);
+  }
+}
+
+[dir="rtl"] .header-nav.is-active {
+  transform: translateX(100%);
+}
+
+[dir="ltr"] .header-nav-overlay {
+  left: 0;
+}
+
+[dir="rtl"] .header-nav-overlay {
+  right: 0;
+}
+
+.header-nav-overlay {
+  position: fixed;
+  z-index: 101;
+  top: 0;
+  display: none;
+  width: 100%;
+  height: 100vh;
+  opacity: 0.2;
+  background: #0d77b5;
+}
+
+@media (forced-colors: active) {
+
+  .header-nav-overlay {
+    background: canvastext;
+  }
+}
+
+.is-overlay-active .header-nav-overlay {
+  display: block;
+}

web/themes/custom/rorschach/css/components/header-navigation.pcss.css

@@ -0,0 +1,176 @@
+/**
+ * @file
+ * Navigation in header.
+ */
+
+@import "../base/variables.pcss.css";
+
+.header-nav {
+  position: fixed;
+  z-index: 501; /* Appear above overlay and contextual links in header. */
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  visibility: hidden;
+  overflow: auto;
+  /**
+   * Ensure that header nav not use additional space and force system branding
+   * block text to unnecessarily wrap.
+   */
+  flex-basis: 0;
+  flex-grow: 1; /* Necessary for IE11. */
+  width: 100%;
+  max-width: var(--mobile-nav-width);
+  height: 100%;
+  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-block-start: solid var(--color--white) var(--sp3);
+  background-color: var(--color--white);
+  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
+
+  &.is-active {
+    visibility: visible;
+    transform: translateX(-100%); /* LTR */
+  }
+
+  @supports (flex-basis: max-content) {
+    flex-basis: max-content;
+  }
+
+  @media (--sm) {
+    border-top-width: var(--sp5);
+  }
+
+  @media (--md) {
+    padding-block-end: var(--sp3);
+    padding-inline-start: var(--sp3);
+    border-top-width: var(--sp7);
+  }
+
+  @media (--lg) {
+    grid-column: 5 / 14;
+  }
+
+  /*
+   * Ensure top border has the same color as the background when in forced colors.
+   */
+  @media (forced-colors: active) {
+    border-top-color: canvas;
+  }
+}
+
+/*
+ * Only apply transition styles when JS is loaded. This
+ * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
+ */
+html.js .header-nav {
+  transition: visibility 0.2s, transform 0.2s;
+}
+
+/* Toolbar is fixed, and tray is vertical. */
+body.toolbar-vertical .header-nav {
+  border-top-width: calc(var(--toolbar-height) + var(--sp3));
+
+  @media (--sm) {
+    border-top-width: calc(var(--toolbar-height) + var(--sp5));
+  }
+}
+
+/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
+body.toolbar-vertical .header-nav,
+body.toolbar-horizontal.toolbar-fixed .header-nav {
+  @media (--md) {
+    border-top-width: calc(var(--toolbar-height) + var(--sp7));
+  }
+}
+
+/* Toolbar is horizontal fixed, and tray is open. */
+body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
+  @media (--md) {
+    border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp7));
+  }
+}
+
+body:not(.is-always-mobile-nav) .header-nav {
+  @media (--nav) {
+    position: static;
+    display: flex;
+    visibility: visible;
+    overflow: visible;
+    grid-column: 5 / 15;
+    align-items: center;
+    justify-content: flex-end;
+    max-width: none;
+    height: var(--header-height-wide-when-fixed);
+    margin-block-start: auto;
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    transition: transform 0.2s;
+    transform: none;
+    border-block-start: 0;
+    box-shadow: none;
+  }
+}
+
+body.is-always-mobile-nav {
+  /* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
+  &.toolbar-vertical .header-nav,
+  &.toolbar-horizontal.toolbar-fixed .header-nav {
+    @media (--nav) {
+      border-top-width: calc(var(--toolbar-height) + var(--sp11));
+    }
+  }
+
+  /* Toolbar is horizontal fixed, and tray is open. */
+  &.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
+    @media (--nav) {
+      border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp11));
+    }
+  }
+
+  & .header-nav {
+    @media (--nav) {
+      overflow: auto;
+      max-width: calc((7 * (var(--grid-col-width--nav) + var(--grid-gap--nav))));
+      padding-inline-end: var(--sp);
+      transition: transform 0.2s, visibility 0.2s;
+      border-top-width: var(--sp11);
+    }
+
+    @media (--grid-max) {
+      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width--max) + var(--grid-gap--max)))));
+      padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
+    }
+  }
+}
+
+[dir="rtl"] .header-nav.is-active {
+  transform: translateX(100%);
+}
+
+.header-nav-overlay {
+  position: fixed;
+  z-index: 101;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: none;
+  width: 100%;
+  height: 100vh;
+  opacity: 0.2;
+  background: var(--color--blue-20);
+
+  @media (forced-colors: active) {
+    background: canvastext;
+  }
+
+  @nest .is-overlay-active & {
+    display: block;
+  }
+}

web/themes/custom/rorschach/css/components/header-search-narrow.css

@@ -0,0 +1,300 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Header Search Narrow Block.
+ */
+
+.block-search-narrow {
+  margin-right: -1.125rem;
+  margin-bottom: 2.25rem;
+  margin-left: -1.125rem;
+  background: #000;
+}
+
+.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: 1.125rem;
+}
+
+[dir="rtl"] .block-search-narrow input[type="search"] {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] .block-search-narrow input[type="search"] {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .block-search-narrow input[type="search"] {
+  padding-left: 1.125rem;
+}
+
+.block-search-narrow input[type="search"] {
+  width: calc(100% + 2.25rem);
+  height: 3.375rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  transition: background-size 0.4s;
+  color: #fff;
+  border: solid 1px transparent;
+  background-color: transparent;
+  background-image: linear-gradient(#2494db, #2494db); /* 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: Lora, georgia, serif;
+  font-size: 1rem;
+  -webkit-appearance: none;
+}
+
+.block-search-narrow input[type="search"]::-ms-clear {
+  width: 2.5rem;
+  opacity: 0.5;
+}
+
+.block-search-narrow input[type="search"]:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  background-size: 100% 0.3125rem;
+
+  /*
+        We normally indicate focus by animating background-image width. This isn't
+        available in IE11 when in Windows high contrast mode.
+      */
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .block-search-narrow input[type="search"]:focus {
+    border-bottom-width: 5px;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  [dir="ltr"] .block-search-narrow input[type="search"] {
+    padding-left: 2.25rem;
+  }
+
+  [dir="rtl"] .block-search-narrow input[type="search"] {
+    padding-right: 2.25rem;
+  }
+
+  [dir="ltr"] .block-search-narrow input[type="search"] {
+    padding-right: 2.25rem;
+  }
+
+  [dir="rtl"] .block-search-narrow input[type="search"] {
+    padding-left: 2.25rem;
+  }
+
+  .block-search-narrow input[type="search"] {
+    height: 4.5rem;
+  }
+}
+
+[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: 3.375rem;
+  height: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 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;
+}
+
+.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 0.3125rem #2494db;
+}
+
+@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:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+
+.block-search-narrow .search-form__submit:focus span:after {
+  transform: scaleX(1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .block-search-narrow .search-form__submit:focus {
+    border-bottom-width: 9px;
+  }
+
+  .block-search-narrow .search-form__submit:focus span:after {
+    content: none;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  .block-search-narrow .search-form__submit {
+    width: 5rem;
+  }
+}
+
+@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;
+  }
+
+  /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-narrow .search-form__submit .icon--search {
+    display: none;
+  }
+}
+
+/* 500px is the width of the primary nav at mobile. */
+
+@media (min-width: 31.25rem) {
+
+  [dir="ltr"] .block-search-narrow {
+    margin-left: 0;
+  }
+
+  [dir="rtl"] .block-search-narrow {
+    margin-right: 0;
+  }
+
+  [dir="ltr"] .block-search-narrow {
+    margin-right: 0;
+  }
+
+  [dir="rtl"] .block-search-narrow {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  body:not(.is-always-mobile-nav) .block-search-narrow {
+    display: none;
+  }
+}
+
+[dir="rtl"] .block-search-narrow input[type="search"] {
+  background-position: bottom right;
+}
+
+[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
+  transform-origin: right;
+}

web/themes/custom/rorschach/css/components/header-search-narrow.pcss.css

@@ -0,0 +1,186 @@
+/**
+ * @file
+ * Header Search Narrow Block.
+ */
+
+@import "../base/variables.pcss.css";
+
+.block-search-narrow {
+  margin-inline: calc(-1 * var(--sp));
+  margin-block-end: var(--sp2);
+  background: var(--color--black);
+
+  & .search-block-form {
+    display: flex;
+  }
+
+  & .form-item {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  & .form-actions {
+    margin: 0;
+  }
+
+  & input[type="search"] {
+    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--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
+    background-repeat: no-repeat;
+    background-position: bottom left; /* LTR */
+    background-size: 0% 5px;
+    box-shadow: none;
+    font-family: var(--font-serif);
+    font-size: 16px;
+    -webkit-appearance: none;
+
+    &::-ms-clear {
+      width: 40px;
+      opacity: 0.5;
+    }
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+      background-size: 100% 5px;
+
+      /*
+        We normally indicate focus by animating background-image width. This isn't
+        available in IE11 when in Windows high contrast mode.
+      */
+      @media screen and (-ms-high-contrast: active) {
+        border-bottom-width: 5px;
+      }
+    }
+
+    @media (--md) {
+      height: calc(4 * var(--sp));
+      padding-inline-start: var(--sp2);
+      padding-inline-end: var(--sp2);
+    }
+  }
+
+  & .search-form__submit {
+    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>.
+    */
+    & .icon--search {
+      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("../../images/search--white.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: auto;
+
+      &:after {
+        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 5px var(--color--blue-50);
+      }
+
+      @media (forced-colors: active) {
+        background: buttontext;
+        mask-image: url("../../images/search--white.svg");
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
+    }
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+      box-shadow: none;
+
+      & span:after {
+        transform: scaleX(1);
+      }
+
+      @media screen and (-ms-high-contrast: active) {
+        border-bottom-width: var(--sp0-5);
+
+        & span:after {
+          content: none;
+        }
+      }
+    }
+
+    @media (--md) {
+      width: 80px;
+    }
+
+    @media screen and (-ms-high-contrast: active) {
+      /* IE11's high contrast show will not show the background image, so we show the text. */
+      & .visually-hidden {
+        position: static;
+        overflow: visible;
+        clip: auto;
+        width: auto;
+        height: auto;
+        text-align: center;
+      }
+
+      /* Edge's high contrast does show the background image, so we hide it. */
+      & .icon--search {
+        display: none;
+      }
+    }
+  }
+
+  /* 500px is the width of the primary nav at mobile. */
+  @media (min-width: 500px) {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+}
+
+body:not(.is-always-mobile-nav) .block-search-narrow {
+  @media (--nav) {
+    display: none;
+  }
+}
+
+[dir="rtl"] .block-search-narrow {
+  & input[type="search"] {
+    background-position: bottom right;
+  }
+
+  & .search-form__submit .icon--search:after {
+    transform-origin: right;
+  }
+}

web/themes/custom/rorschach/css/components/header-search-wide.css

@@ -0,0 +1,445 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Header Search Wide Block.
+ */
+
+/* Override contextual links so we can position against .site-header. */
+
+.block-search-wide.contextual-region {
+  position: static;
+}
+
+[dir="ltr"] .block-search-wide__wrapper {
+  left: 0;
+}
+
+[dir="rtl"] .block-search-wide__wrapper {
+  right: 0;
+}
+
+[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 5.625rem #313637;
+}
+
+[dir="rtl"] .block-search-wide__wrapper {
+  border-right: solid 5.625rem #313637;
+}
+
+.block-search-wide__wrapper {
+  position: absolute;
+  z-index: 1; /* Ensure left border shows above social region in IE11. */
+  top: 100%;
+  display: none;
+  visibility: hidden;
+  overflow: hidden;
+  width: 100vw;
+  max-width: 98.125rem;
+  height: 9rem;
+  max-height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  transition: all 0.2s;
+  background: #000;
+}
+
+.block-search-wide__wrapper.is-active {
+  visibility: visible;
+  max-height: 9rem;
+}
+
+.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: 13.5rem;
+}
+
+[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
+  padding-right: 13.5rem;
+}
+
+[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
+  padding-right: 0;
+}
+
+[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
+  padding-left: 0;
+}
+
+.block-search-wide__wrapper input[type="search"] {
+  width: calc(100% + 2.25rem);
+  height: 9rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  transition: background-size 0.4s;
+  color: #fff;
+  border: solid 1px transparent;
+  box-shadow: none;
+  font-family: Lora, georgia, serif;
+  font-size: 2rem;
+  -webkit-appearance: none;
+}
+
+.block-search-wide__wrapper input[type="search"]::-ms-clear {
+  width: 2.5rem;
+  opacity: 0.5;
+}
+
+.block-search-wide__wrapper input[type="search"]:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+
+  /*
+        We normally indicate focus by animating background-image width. This isn't
+        available in IE11 when in Windows high contrast mode.
+      */
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .block-search-wide__wrapper input[type="search"]:focus {
+    border-bottom-width: 9px;
+  }
+}
+
+.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;
+}
+
+[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
+  padding-right: 0;
+}
+
+[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
+  padding-right: 0;
+}
+
+[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
+  padding-left: 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;
+
+  /*
+      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;
+}
+
+.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 0.5625rem #2494db;
+}
+
+.block-search-wide__wrapper .search-form__submit:focus {
+  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: 9px;
+  }
+
+  .block-search-wide__wrapper .search-form__submit:focus span:after {
+    content: none;
+  }
+}
+
+@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-wide__wrapper .search-form__submit .visually-hidden {
+    position: static;
+    overflow: visible;
+    clip: auto;
+    width: auto;
+    height: auto;
+    text-align: center;
+  }
+
+  /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-wide__wrapper .search-form__submit .icon--search {
+    display: none;
+  }
+}
+
+[dir="ltr"] .block-search-wide__container {
+  padding-right: 2.25rem;
+}
+
+[dir="rtl"] .block-search-wide__container {
+  padding-left: 2.25rem;
+}
+
+.block-search-wide__container {
+  max-width: 84.375rem;
+}
+
+.block-search-wide__grid {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[14];
+  grid-template-columns: repeat(14, 1fr);
+  grid-column-gap: 2.25rem;
+}
+
+/* Override specificity from container-inline.module.css */
+
+.container-inline .block-search-wide__container {
+  display: block;
+}
+
+.container-inline .block-search-wide__grid {
+  display: -ms-grid;
+  display: grid;
+}
+
+.block-search-wide__button {
+  position: relative;
+  display: none;
+  width: 3.375rem;
+  height: 6.75rem;
+  cursor: pointer;
+  color: #0d1214; /* Affects SVG search icon. */
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+}
+
+.block-search-wide__button:focus {
+  position: relative;
+  outline: 0;
+}
+
+.block-search-wide__button:focus:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 3.375rem;
+  content: "";
+  transform: translate(-50%, -50%);
+  border: solid 2px #2494db;
+  border-radius: 0.25rem;
+}
+
+.block-search-wide__button[aria-expanded="true"] {
+  background: #000;
+}
+
+.block-search-wide__button[aria-expanded="true"]:focus:after {
+  border-color: #fff;
+}
+
+.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: 1.6875rem;
+  height: 0;
+  content: "";
+  border-top: solid 2px #fff;
+}
+
+.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;
+}
+
+[dir="ltr"] .block-search-wide__button svg {
+  margin-left: auto;
+}
+
+[dir="rtl"] .block-search-wide__button svg {
+  margin-right: auto;
+}
+
+[dir="ltr"] .block-search-wide__button svg {
+  margin-right: auto;
+}
+
+[dir="rtl"] .block-search-wide__button svg {
+  margin-left: auto;
+}
+
+@media (forced-colors: active) {
+
+  .block-search-wide__button {
+    background: ButtonFace;
+  }
+
+  .block-search-wide__button path {
+    fill: ButtonText;
+  }
+}
+
+/* Provide rudimentary access to site search if JS is disabled. */
+
+html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
+  visibility: visible;
+  max-height: 9rem;
+}
+
+/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
+
+[dir] .block-search-wide__wrapper input[type="search"] {
+  background-color: transparent;
+  background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 0.625rem;
+}
+
+[dir] .block-search-wide__wrapper input[type="search"]:focus {
+  background-size: 100% 0.5625rem;
+}
+
+[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
+  background-position: bottom right;
+}
+
+[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
+  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__button {
+    display: block;
+  }
+}

web/themes/custom/rorschach/css/components/header-search-wide.pcss.css

@@ -0,0 +1,305 @@
+/**
+ * @file
+ * Header Search Wide Block.
+ */
+
+@import "../base/variables.pcss.css";
+
+/* Override contextual links so we can position against .site-header. */
+.block-search-wide.contextual-region {
+  position: static;
+}
+
+.block-search-wide__wrapper {
+  position: absolute;
+  z-index: 1; /* Ensure left border shows above social region in IE11. */
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  display: none;
+  visibility: hidden;
+  overflow: hidden;
+  width: 100vw;
+  max-width: var(--max-bg-color);
+  height: var(--sp8);
+  max-height: 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;
+  border-inline-start: solid var(--content-left) var(--color--gray-10);
+  background: var(--color--black);
+
+  &.is-active {
+    visibility: visible;
+    max-height: var(--sp8);
+  }
+
+  & form {
+    display: flex;
+    grid-column: 1 / 14;
+  }
+
+  & input[type="search"] {
+    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: 32px;
+    -webkit-appearance: none;
+
+    &::-ms-clear {
+      width: 40px;
+      opacity: 0.5;
+    }
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+
+      /*
+        We normally indicate focus by animating background-image width. This isn't
+        available in IE11 when in Windows high contrast mode.
+      */
+      @media screen and (-ms-high-contrast: active) {
+        border-bottom-width: var(--sp0-5);
+      }
+    }
+  }
+
+  & .form-item-keys {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  & .form-actions {
+    display: flex;
+    margin: 0;
+  }
+
+  & .search-form__submit {
+    position: relative;
+    overflow: hidden;
+    align-self: stretch;
+    width: 100px;
+    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>.
+    */
+    & .icon--search {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      display: block;
+      width: 24px; /* Width of the SVG background image. */
+      height: 100%;
+      pointer-events: none;
+      background-image: url("../../images/search--white.svg");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+
+      &:after {
+        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--blue-50);
+      }
+    }
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+      box-shadow: none;
+
+      & span:after {
+        transform: scaleX(1);
+      }
+
+      @media screen and (-ms-high-contrast: active) {
+        border-bottom-width: var(--sp0-5);
+
+        & span:after {
+          content: none;
+        }
+      }
+    }
+
+    @media screen and (-ms-high-contrast: active) {
+      /* IE11's high contrast show will not show the background image, so we show the text. */
+      & .visually-hidden {
+        position: static;
+        overflow: visible;
+        clip: auto;
+        width: auto;
+        height: auto;
+        text-align: center;
+      }
+
+      /* Edge's high contrast does show the background image, so we hide it. */
+      & .icon--search {
+        display: none;
+      }
+    }
+  }
+}
+
+.block-search-wide__container {
+  max-width: var(--max-width);
+  padding-inline-end: var(--sp2);
+}
+
+.block-search-wide__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
+  grid-column-gap: var(--grid-gap--md);
+}
+
+/* Override specificity from container-inline.module.css */
+.container-inline {
+  & .block-search-wide__container {
+    display: block;
+  }
+
+  & .block-search-wide__grid {
+    display: grid;
+  }
+}
+
+.block-search-wide__button {
+  position: relative;
+  display: none;
+  width: var(--sp3);
+  height: var(--sp6);
+  cursor: pointer;
+  color: var(--color--gray-0); /* Affects SVG search icon. */
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+
+  &:focus {
+    position: relative;
+    outline: 0;
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 80%;
+      height: var(--sp3);
+      content: "";
+      transform: translate(-50%, -50%);
+      border: solid 2px var(--color--blue-50);
+      border-radius: 4px;
+    }
+  }
+
+  &[aria-expanded="true"] {
+    background: var(--color--black);
+
+    &:focus:after {
+      border-color: var(--color--white);
+    }
+
+    & .block-search-wide__button-close {
+      &:before,
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: var(--sp1-5);
+        height: 0;
+        content: "";
+        border-block-start: solid 2px var(--color--white);
+      }
+
+      &:before {
+        transform: translate(-50%, -50%) rotate(-45deg);
+      }
+
+      &:after {
+        transform: translate(-50%, -50%) rotate(45deg);
+      }
+    }
+
+    & svg {
+      display: none;
+    }
+  }
+
+  & svg {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+
+  @media (forced-colors: active) {
+    background: ButtonFace;
+
+    & path {
+      fill: ButtonText;
+    }
+  }
+}
+
+/* Provide rudimentary access to site search if JS is disabled. */
+html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
+  visibility: visible;
+  max-height: var(--sp8);
+}
+
+/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
+[dir] .block-search-wide__wrapper input[type="search"] {
+  background-color: transparent;
+  background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 10px;
+
+  &:focus {
+    background-size: 100% var(--sp0-5);
+  }
+}
+
+[dir="rtl"] .block-search-wide__wrapper {
+  & input[type="search"] {
+    background-position: bottom right;
+  }
+
+  & .search-form__submit .icon--search:after {
+    transform-origin: right;
+  }
+}
+
+body:not(.is-always-mobile-nav) {
+  & .block-search-wide__wrapper,
+  & .block-search-wide__button {
+    @media (--nav) {
+      display: block;
+    }
+  }
+}

web/themes/custom/rorschach/css/components/header-site-branding.css

@@ -0,0 +1,231 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Site branding in header.
+ */
+
+[dir="ltr"] .site-branding {
+  margin-right: 1.125rem;
+  margin-left: -1.125rem;
+}
+
+[dir="rtl"] .site-branding {
+  margin-right: -1.125rem;
+  margin-left: 1.125rem;
+}
+
+[dir="ltr"] .site-branding {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] .site-branding {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] .site-branding {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .site-branding {
+  padding-left: 1.125rem;
+}
+
+.site-branding {
+  display: flex;
+  flex-shrink: 1;
+  align-items: flex-end;
+  min-width: calc(33.33333vw + 0.75rem);
+  min-height: 3.375rem;
+  padding-top: 0;
+  padding-bottom: 0.5625rem;
+
+  /* @todo - #0d7ab8 isn't currently a variable. */
+  background-image: linear-gradient(160deg, #2494db 0%, #0d7ab8 78.66%);
+}
+
+@media (min-width: 31.25rem) {
+
+  .site-branding {
+    min-height: 4.5rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  .site-branding {
+    min-height: 6.75rem;
+    padding-bottom: 1.125rem;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  .site-branding {
+    min-width: calc(14.28571vw + 0.99107rem);
+  }
+}
+
+@media (min-width: 75rem) {
+
+  [dir="ltr"] .site-branding {
+    margin-left: -2.25rem;
+  }
+
+  [dir="rtl"] .site-branding {
+    margin-right: -2.25rem;
+  }
+
+  [dir="ltr"] .site-branding {
+    padding-left: 2.25rem;
+  }
+
+  [dir="rtl"] .site-branding {
+    padding-right: 2.25rem;
+  }
+
+  [dir="ltr"] .site-branding {
+    padding-right: 2.25rem;
+  }
+
+  [dir="rtl"] .site-branding {
+    padding-left: 2.25rem;
+  }
+
+  .site-branding {
+    min-width: calc(14.28571vw + 0.99107rem);
+    min-height: 11.25rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (min-width: 90rem) {
+
+  .site-branding {
+    min-width: 13.98214rem;
+  }
+}
+
+[dir="rtl"] .site-branding {
+  background-image: linear-gradient(-160deg, #2494db 0%, #0d7ab8 78.66%);
+}
+
+.site-branding--bg-gray {
+  background: #f7f9fa;
+}
+
+.site-branding--bg-white {
+  background: #fff;
+}
+
+.site-branding__inner {
+  display: flex;
+  align-items: center;
+}
+
+.site-branding__inner a {
+  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 {
+    height: 6.75rem;
+    padding-top: 0.5625rem;
+    padding-bottom: 0.5625rem;
+  }
+}
+
+.site-branding__logo {
+  flex-shrink: 0;
+  max-width: 100%;
+}
+
+.site-branding__logo img {
+  width: auto;
+  max-width: 100%;
+  max-height: 2.25rem;
+}
+
+@media (min-width: 31.25rem) {
+
+  .site-branding__logo img {
+    max-height: 3.375rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  .site-branding__logo img {
+    max-height: 4.5rem;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  .site-branding__logo img {
+    max-height: 5.625rem;
+  }
+}
+
+.site-branding__text {
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+
+.site-branding__text a {
+  color: inherit;
+}
+
+@media (min-width: 43.75rem) {
+
+  .site-branding__text {
+    font-size: 1.75rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  .site-branding__text {
+    letter-spacing: 0.02em;
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+}
+
+.site-branding--bg-gray .site-branding__text,
+.site-branding--bg-white .site-branding__text {
+  color: #2494db;
+}
+
+[dir="ltr"] .site-branding__logo + .site-branding__text {
+  margin-left: 0.75rem;
+}
+
+[dir="rtl"] .site-branding__logo + .site-branding__text {
+  margin-right: 0.75rem;
+}

web/themes/custom/rorschach/css/components/header-site-branding.pcss.css

@@ -0,0 +1,128 @@
+/**
+ * @file
+ * Site branding in header.
+ */
+
+@import "../base/variables.pcss.css";
+
+.site-branding {
+  display: flex;
+  flex-shrink: 1;
+  align-items: flex-end;
+  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding));
+  min-height: var(--sp3);
+  margin-inline: calc(-1 * var(--container-padding)) var(--sp);
+  padding-block: 0 var(--sp0-5);
+  padding-inline-start: var(--container-padding);
+  padding-inline-end: var(--container-padding);
+
+  /* @todo - #0d7ab8 isn't currently a variable. */
+  background-image: linear-gradient(160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
+
+  @media (--sm) {
+    min-height: var(--sp4);
+  }
+
+  @media (--md) {
+    min-height: var(--sp6);
+    padding-block-end: var(--sp);
+  }
+
+  @media (--lg) {
+    min-width: calc((2 * var(--grid-col-width--lg)) + (2 * var(--grid-gap--lg)) + var(--container-padding));
+  }
+
+  @media (--nav) {
+    min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
+    min-height: var(--site-header-height-wide);
+    margin-inline-start: calc(-1 * var(--container-padding-nav));
+    padding-block: 0;
+    padding-inline-start: var(--container-padding-nav);
+    padding-inline-end: var(--container-padding-nav);
+  }
+
+  @media (--grid-max) {
+    min-width: calc((2 * var(--grid-col-width--max)) + (2 * var(--grid-gap--max)) + var(--container-padding-nav));
+  }
+}
+
+[dir="rtl"] .site-branding {
+  background-image: linear-gradient(-160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
+}
+
+.site-branding--bg-gray {
+  background: var(--color--gray-95);
+}
+
+.site-branding--bg-white {
+  background: var(--color--white);
+}
+
+.site-branding__inner {
+  display: flex;
+  align-items: center;
+
+  & a {
+    text-decoration: none;
+  }
+
+  @media (--nav) {
+    height: var(--header-height-wide-when-fixed);
+    padding-block: var(--sp0-5);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+}
+
+.site-branding__logo {
+  flex-shrink: 0;
+  max-width: 100%;
+
+  & img {
+    width: auto;
+    max-width: 100%;
+    max-height: var(--sp2);
+
+    @media (--sm) {
+      max-height: var(--sp3);
+    }
+
+    @media (--md) {
+      max-height: var(--sp4);
+    }
+
+    @media (--nav) {
+      max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
+    }
+  }
+}
+
+.site-branding__text {
+  color: var(--color--white);
+  font-size: 18px;
+  font-weight: bold;
+
+  & a {
+    color: inherit;
+  }
+
+  @media (--md) {
+    font-size: 28px;
+    line-height: 28px;
+  }
+
+  @media (--nav) {
+    letter-spacing: 0.02em;
+    font-size: 32px;
+    line-height: var(--sp2);
+  }
+}
+
+.site-branding--bg-gray .site-branding__text,
+.site-branding--bg-white .site-branding__text {
+  color: var(--color--blue-50);
+}
+
+.site-branding__logo + .site-branding__text {
+  margin-inline-start: 12px;
+}

web/themes/custom/rorschach/css/components/header-sticky-toggle.css

@@ -0,0 +1,145 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Sticky Header Toggle Button.
+ *
+ * This button shows on the left hand side of the header (in LTR layouts), and
+ * toggles fixing the header to the top of the viewport.
+ */
+
+.sticky-header-toggle {
+  display: none;
+}
+
+@media (min-width: 75rem) {
+
+  .sticky-header-toggle {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 5.625rem;
+    height: 6.75rem;
+    pointer-events: none;
+    opacity: 0;
+    border: 0;
+    outline: 0;
+    background-color: #2494db;
+  }
+
+  .sticky-header-toggle:focus {
+    cursor: pointer;
+    pointer-events: auto;
+    opacity: 1;
+    outline: solid 2px #fff;
+    outline-offset: -4px;
+  }
+}
+
+@media (min-width: 75rem) {
+
+  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;
+  }
+}
+
+.sticky-header-toggle__icon {
+  position: relative;
+  width: 2.25rem;
+  height: 1.3125rem;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.sticky-header-toggle__icon > span {
+  display: block;
+  height: 0;
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 3px #fff;
+}
+
+[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
+  left: 0;
+}
+
+[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {
+  right: 0;
+}
+
+.sticky-header-toggle__icon > span:nth-child(1) {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 0;
+  transition: transform 0.2s;
+  background-color: #fff;
+}
+
+[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
+  left: 0;
+}
+
+[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {
+  right: 0;
+}
+
+.sticky-header-toggle__icon > span:nth-child(2) {
+  position: absolute;
+  top: 0.5625rem;
+  width: 100%;
+  height: 0;
+  transition: opacity 0.2s;
+  background-color: #fff;
+}
+
+[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
+  left: 0;
+}
+
+[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {
+  right: 0;
+}
+
+.sticky-header-toggle__icon > span:nth-child(3) {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  transition: transform 0.2s;
+  background-color: #fff;
+}
+
+.is-fixed .sticky-header-toggle {
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 1;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
+  top: 0.5625rem;
+  transform: rotate(-45deg);
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
+  opacity: 0;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
+  top: 0.5625rem;
+  transform: rotate(45deg);
+}

web/themes/custom/rorschach/css/components/header-sticky-toggle.pcss.css

@@ -0,0 +1,115 @@
+/**
+ * @file
+ * Sticky Header Toggle Button.
+ *
+ * This button shows on the left hand side of the header (in LTR layouts), and
+ * toggles fixing the header to the top of the viewport.
+ */
+
+@import "../base/variables.pcss.css";
+
+.sticky-header-toggle {
+  display: none;
+
+  @media (--nav) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--content-left);
+    height: var(--sp6);
+    pointer-events: none;
+    opacity: 0;
+    border: 0;
+    outline: 0;
+    background-color: var(--color--blue-50);
+
+    &:focus {
+      cursor: pointer;
+      pointer-events: auto;
+      opacity: 1;
+      outline: solid 2px var(--color--white);
+      outline-offset: -4px;
+    }
+  }
+}
+
+body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
+  @media (--nav) {
+    visibility: visible;
+  }
+}
+
+body.is-always-mobile-nav .sticky-header-toggle {
+  @media (--nav) {
+    visibility: hidden;
+  }
+}
+
+.sticky-header-toggle__icon {
+  position: relative;
+  width: var(--sp2);
+  height: 21px;
+  transition: opacity 0.2s;
+  pointer-events: none;
+  transform-style: preserve-3d;
+
+  & > span {
+    display: block;
+    height: 0;
+    /* Intentionally not using CSS logical properties. */
+    border-top: solid 3px var(--color--white);
+
+    &:nth-child(1) {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 0;
+      transition: transform 0.2s;
+      background-color: var(--color--white);
+    }
+
+    &:nth-child(2) {
+      position: absolute;
+      inset-block-start: 9px;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 0;
+      transition: opacity 0.2s;
+      background-color: var(--color--white);
+    }
+
+    &:nth-child(3) {
+      position: absolute;
+      inset-block: auto 0;
+      inset-inline-start: 0;
+      width: 100%;
+      height: 0;
+      transition: transform 0.2s;
+      background-color: var(--color--white);
+    }
+  }
+}
+
+.is-fixed .sticky-header-toggle {
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 1;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon {
+  & > span:nth-child(1) {
+    inset-block-start: 9px;
+    transform: rotate(-45deg);
+  }
+
+  & > span:nth-child(2) {
+    opacity: 0;
+  }
+
+  & > span:nth-child(3) {
+    inset-block-start: 9px;
+    transform: rotate(45deg);
+  }
+}

web/themes/custom/rorschach/css/components/hero.css

@@ -0,0 +1,75 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Main Hero.
+ */
+
+.hero__content {
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 6;
+  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;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  .hero__content {
+    -ms-grid-column: 3;
+    -ms-grid-column-span: 8;
+    grid-column: 3 / 11;
+  }
+}
+
+.hero__img {
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 6;
+  grid-column: 1 / 7;
+  margin-top: 2.25rem;
+  margin-bottom: 2.25rem;
+}
+
+.hero__img img {
+  width: 100%;
+}
+
+@media (min-width: 31.25rem) {
+
+  .hero__img {
+    margin-top: 3.375rem;
+    margin-bottom: 3.375rem;
+  }
+}
+
+@media (min-width: 43.75rem) {
+
+  .hero__img {
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 14;
+    grid-column: 1 / 15;
+    margin-top: 4.5rem;
+    margin-bottom: 4.5rem;
+  }
+}
+
+@media (min-width: 62.5rem) {
+
+  .hero__img {
+    -ms-grid-column: 2;
+    -ms-grid-column-span: 12;
+    grid-column: 2 / 14;
+  }
+}

web/themes/custom/rorschach/css/components/hero.pcss.css

@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Main Hero.
+ */
+
+@import "../base/variables.pcss.css";
+
+.hero__content {
+  grid-column: 1 / 7;
+
+  @media (--grid-md) { /* 700px */
+    grid-column: 3 / 13;
+  }
+
+  @media (--lg) {
+    grid-column: 3 / 11;
+  }
+}
+
+.hero__img {
+  grid-column: 1 / 7;
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
+
+  & img {
+    width: 100%;
+  }
+
+  @media (--sm) {
+    margin-block-start: var(--sp3);
+    margin-block-end: var(--sp3);
+  }
+
+  @media (--grid-md) {
+    grid-column: 1 / 15;
+    margin-block-start: var(--sp4);
+    margin-block-end: var(--sp4);
+  }
+
+  @media (--lg) {
+    grid-column: 2 / 14;
+  }
+}

web/themes/custom/rorschach/css/components/links.css

@@ -0,0 +1,64 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Links component.
+ */
+
+[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;
+}
+
+.links.inline > * {
+  display: inline;
+}
+
+[dir="ltr"] .links.inline > *:not(:last-child) {
+  padding-right: 1em;
+}
+
+[dir="rtl"] .links.inline > *:not(:last-child) {
+  padding-left: 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;
+  }
+}

web/themes/custom/rorschach/css/components/links.pcss.css

@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Links component.
+ */
+
+@import "../base/variables.pcss.css";
+
+.links.inline {
+  margin-inline-start: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
+
+  & > * {
+    display: inline;
+
+    &:not(:last-child) {
+      padding-inline-end: 1em;
+    }
+  }
+}
+
+.node--type-book .links.inline {
+  @media (--md) {
+    text-align: end;
+  }
+}

web/themes/custom/rorschach/css/components/maintenance-page.css

@@ -0,0 +1,29 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Maintenance page.
+ */
+
+@media (min-width: 75rem) {
+
+  .maintenance-page .site-header__initial {
+    flex-shrink: 0;
+    width: 5.625rem;
+  }
+}
+
+.maintenance-page .main-content {
+  min-height: 80vh;
+}
+
+.maintenance-page-icon {
+  display: block;
+  margin-top: 3.375rem;
+  margin-bottom: 3.375rem;
+}

web/themes/custom/rorschach/css/components/maintenance-page.pcss.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Maintenance page.
+ */
+
+@import "../base/variables.pcss.css";
+
+.maintenance-page {
+  & .site-header__initial {
+    @media (--nav) {
+      flex-shrink: 0;
+      width: var(--content-left);
+    }
+  }
+
+  & .main-content {
+    min-height: 80vh;
+  }
+}
+.maintenance-page-icon {
+  display: block;
+  margin-block: var(--sp3);
+}

web/themes/custom/rorschach/css/components/messages.css

@@ -0,0 +1,261 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Messages.
+ */
+
+[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;
+}
+
+.messages-list {
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  list-style: none;
+}
+
+[dir="ltr"] .messages {
+  padding-left: 1.6875rem;
+}
+
+[dir="rtl"] .messages {
+  padding-right: 1.6875rem;
+}
+
+[dir="ltr"] .messages {
+  padding-right: 1.6875rem;
+}
+
+[dir="rtl"] .messages {
+  padding-left: 1.6875rem;
+}
+
+.messages {
+  min-height: 4.25rem;
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+  color: #fff;
+  outline: solid 1px transparent;
+  background-color: #0d1214;
+}
+
+.messages * {
+  color: inherit;
+}
+
+/* Additional specificity to override contrib modules. */
+
+.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;
+}
+
+[dir="rtl"] .messages__list {
+  padding-right: 0;
+}
+
+[dir="ltr"] .messages__list {
+  padding-right: 0;
+}
+
+[dir="rtl"] .messages__list {
+  padding-left: 0;
+}
+
+.messages__list {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  list-style: none;
+}
+
+.messages:not(.hidden) ~ .messages {
+  margin-top: 1.125rem;
+}
+
+.messages__item + .messages__item {
+  margin-top: 0.5625rem;
+}
+
+.messages__container {
+  display: flex;
+}
+
+[dir="ltr"] .messages__header {
+  margin-right: 1.125rem;
+}
+
+[dir="rtl"] .messages__header {
+  margin-left: 1.125rem;
+}
+
+.messages__header {
+  flex-shrink: 0;
+}
+
+[dir="ltr"] .messages__header.no-icon {
+  margin-right: 0;
+}
+
+[dir="rtl"] .messages__header.no-icon {
+  margin-left: 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: 1.125rem;
+}
+
+[dir="rtl"] .messages__button {
+  margin-right: 1.125rem;
+}
+
+.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;
+}
+
+.messages__close {
+  position: relative;
+  width: 1.5625rem;
+  height: 1.5625rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  cursor: pointer;
+  vertical-align: top;
+  border: 0;
+  background: none;
+  -webkit-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 #7e96a7;
+}
+
+.messages__close:before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.messages__close:after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.messages__close:hover::before,
+.messages__close:hover::after {
+  border-color: #fff;
+}
+
+.messages__close:focus {
+  outline: 2px solid #53b0eb;
+  outline-offset: 2px;
+}
+
+.messages__icon svg {
+  vertical-align: top;
+}
+
+.messages--error .messages__icon svg {
+  fill: #e33f1e;
+}
+
+.messages--warning .messages__icon svg {
+  fill: #fdca40;
+}
+
+.messages--status .messages__icon svg {
+  fill: #3fa21c;
+}
+
+.messages--info .messages__icon svg {
+  fill: #53b0eb;
+}
+
+.messages a {
+  color: #fff;
+}
+
+.messages pre {
+  margin: 0;
+}
+
+[dir="ltr"] .js-form-managed-file .messages {
+  border-left: solid 0.375rem #e33f1e;
+}
+
+[dir="rtl"] .js-form-managed-file .messages {
+  border-right: solid 0.375rem #e33f1e;
+}
+
+.js-form-managed-file .messages {
+  margin-bottom: 1.125rem;
+}

web/themes/custom/rorschach/css/components/messages.pcss.css

@@ -0,0 +1,159 @@
+/**
+ * @file
+ * Messages.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  --messages-icon-size: 32px;
+}
+
+.messages-list {
+  margin-block: var(--sp1);
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
+}
+
+.messages {
+  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-0);
+
+  & * {
+    color: inherit;
+  }
+
+  /* Additional specificity to override contrib modules. */
+  &.messages-list__item {
+    background-image: none;
+  }
+}
+
+.messages__list {
+  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-block-start: var(--sp1);
+}
+
+.messages__item + .messages__item {
+  margin-block-start: var(--sp0-5);
+}
+
+.messages__container {
+  display: flex;
+}
+
+.messages__header {
+  flex-shrink: 0;
+  margin-inline-end: var(--sp1);
+
+  &.no-icon {
+    margin-inline-end: 0;
+  }
+}
+
+.messages__content {
+  overflow: auto; /* Ensure large code blocks can be scrolled to. */
+  flex: 1;
+  padding-block-start: 3px;
+}
+
+.messages__button {
+  flex-shrink: 0;
+  margin-inline-start: var(--sp1);
+  padding-block-start: 3px;
+}
+
+.messages__close {
+  position: relative;
+  width: 25px;
+  height: 25px;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  cursor: pointer;
+  vertical-align: top;
+  border: 0;
+  background: none;
+  appearance: none;
+
+  &:before,
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 33px;
+    height: 0;
+    content: "";
+    border-top: solid 2px var(--color--gray-30);
+  }
+
+  &:before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &:after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      border-color: var(--color--white);
+    }
+  }
+
+  &:focus {
+    outline: 2px solid var(--color--blue-70);
+    outline-offset: 2px;
+  }
+}
+
+.messages__icon svg {
+  vertical-align: top;
+}
+
+.messages--error .messages__icon svg {
+  fill: var(--color--red);
+}
+
+.messages--warning .messages__icon svg {
+  fill: var(--color--gold);
+}
+
+.messages--status .messages__icon svg {
+  fill: var(--color--green);
+}
+
+.messages--info .messages__icon svg {
+  fill: var(--color--blue-70);
+}
+
+.messages a {
+  color: var(--color--white);
+}
+
+.messages pre {
+  margin: 0;
+}
+
+.js-form-managed-file .messages {
+  margin-block-end: var(--sp1);
+  border-inline-start: solid 6px var(--color--red);
+}

web/themes/custom/rorschach/css/components/navigation/menu-sidebar.css

@@ -0,0 +1,84 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for menu placed in sidebar region.
+ */
+
+.menu--sidebar {
+  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;
+}
+
+[dir="ltr"] .menu--sidebar .menu__link {
+  padding-right: 0;
+}
+
+[dir="rtl"] .menu--sidebar .menu__link {
+  padding-left: 0;
+}
+
+.menu--sidebar .menu__link {
+  position: relative;
+  display: block;
+  padding-top: 0.84375rem;
+  padding-bottom: 0.84375rem;
+  font-family: Lora, georgia, serif;
+  font-size: 1.125rem;
+
+  /* Bottom divider line. */
+}
+
+[dir="ltr"] .menu--sidebar .menu__link:after {
+  left: 0;
+}
+
+[dir="rtl"] .menu--sidebar .menu__link:after {
+  right: 0;
+}
+
+.menu--sidebar .menu__link:after {
+  position: absolute;
+  bottom: 0;
+  width: 4.5rem;
+  height: 0;
+  content: "";
+  border-top: solid 2px #e7edf1;
+}
+
+.menu--sidebar .menu__link--link {
+  text-decoration: none;
+  color: #0d1214;
+  font-weight: 600;
+}
+
+.menu--sidebar .menu__link--link:hover {
+  color: #2494db;
+}
+
+/* No bottom divider line for last menu item. */
+
+.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;
+}

web/themes/custom/rorschach/css/components/navigation/menu-sidebar.pcss.css

@@ -0,0 +1,57 @@
+/**
+ * @file
+ * Styles for menu placed in sidebar region.
+ */
+
+@import "../../base/variables.pcss.css";
+
+.menu--sidebar {
+  list-style: none;
+
+  & .menu {
+    list-style: none;
+  }
+
+  & .menu--level-1 {
+    margin: 0;
+  }
+
+  & .menu__link {
+    position: relative;
+    display: block;
+    padding-block: var(--sp0-75);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    font-family: var(--font-serif);
+    font-size: 18px;
+
+    /* Bottom divider line. */
+    &:after {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      width: var(--sp4);
+      height: 0;
+      content: "";
+      border-block-start: solid 2px var(--color--gray-80);
+    }
+  }
+
+  & .menu__link--link {
+    text-decoration: none;
+    color: var(--color--gray-0);
+    font-weight: 600;
+
+    &:hover {
+      color: var(--color--blue-50);
+    }
+  }
+
+  /* No bottom divider line for last menu item. */
+  & .menu__item--level-1:last-child > .menu__link:last-child,
+  & .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child {
+    &:after {
+      content: none;
+    }
+  }
+}