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/fieldset.css

@@ -0,0 +1,233 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Fieldset.
+ */
+
+[dir="ltr"] .fieldset {
+  margin-left: 0;
+}
+
+[dir="rtl"] .fieldset {
+  margin-right: 0;
+}
+
+[dir="ltr"] .fieldset {
+  margin-right: 0;
+}
+
+[dir="rtl"] .fieldset {
+  margin-left: 0;
+}
+
+[dir="ltr"] .fieldset {
+  padding-left: 0;
+}
+
+[dir="rtl"] .fieldset {
+  padding-right: 0;
+}
+
+[dir="ltr"] .fieldset {
+  padding-right: 0;
+}
+
+[dir="rtl"] .fieldset {
+  padding-left: 0;
+}
+
+.fieldset {
+  min-width: 0;
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  color: inherit;
+  border: solid 2px #5d7585;
+  border-radius: 0.1875rem;
+  background-color: #fff;
+}
+
+.fieldset--group {
+  width: 100%;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+
+_:-ms-fullscreen,
+.fieldset {
+  display: table;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.fieldset__legend {
+  float: left; /* Prevent sticking out of top of fieldset. */
+  width: 100%;
+  color: inherit;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  background-color: #5d7585;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.6875rem;
+}
+
+.fieldset__legend + * {
+  clear: left;
+}
+
+.fieldset__legend .fieldset__label.form-required:after {
+  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+}
+
+.fieldset__legend--composite {
+  margin-top: 2px;
+  color: inherit;
+}
+
+.fieldset__legend--invisible {
+  margin: 0;
+}
+
+.fieldset__legend--group {
+  color: inherit;
+}
+
+[dir="ltr"] .fieldset__label {
+  padding-left: 1.125rem;
+}
+
+[dir="rtl"] .fieldset__label {
+  padding-right: 1.125rem;
+}
+
+[dir="ltr"] .fieldset__label {
+  padding-right: 1.125rem;
+}
+
+[dir="rtl"] .fieldset__label {
+  padding-left: 1.125rem;
+}
+
+.fieldset__label {
+  display: block;
+  padding-top: 0.5625rem;
+  padding-bottom: 0.5625rem;
+  color: #fff;
+  line-height: 1.125rem;
+}
+
+.fieldset__label.is-disabled {
+  color: #5d7585;
+}
+
+.fieldset__description {
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+}
+
+.fieldset__description.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
+[dir="ltr"] .fieldset__error-message {
+  padding-left: 1.6875rem;
+}
+
+[dir="rtl"] .fieldset__error-message {
+  padding-right: 1.6875rem;
+}
+
+.fieldset__error-message {
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+  color: #e33f1e;
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left top; /* LTR */
+  background-size: 1.125rem 1.125rem;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .fieldset__error-message {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  }
+}
+
+[dir="rtl"] .fieldset__error-message {
+  background-position: left top;
+}
+
+.fieldset__wrapper {
+  padding: 1.125rem;
+}
+
+.fieldset__legend--invisible ~ .fieldset__wrapper {
+  margin-top: 0;
+  padding: 0;
+}
+
+.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
+  border: solid 2px #5d7585;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+[dir="ltr"] .fieldset__wrapper--group {
+  margin-left: 0;
+}
+
+[dir="rtl"] .fieldset__wrapper--group {
+  margin-right: 0;
+}
+
+[dir="ltr"] .fieldset__wrapper--group {
+  margin-right: 0;
+}
+
+[dir="rtl"] .fieldset__wrapper--group {
+  margin-left: 0;
+}
+
+.fieldset__wrapper--group {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+[dir="ltr"] .fieldset__wrapper > .container-inline {
+  padding-left: 0;
+}
+
+[dir="rtl"] .fieldset__wrapper > .container-inline {
+  padding-right: 0;
+}
+
+[dir="ltr"] .fieldset__wrapper > .container-inline {
+  padding-right: 0;
+}
+
+[dir="rtl"] .fieldset__wrapper > .container-inline {
+  padding-left: 0;
+}
+
+.fieldset__wrapper > .container-inline {
+  padding-top: 0;
+  padding-bottom: 0;
+}

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

@@ -0,0 +1,144 @@
+/**
+ * @file
+ * Fieldset.
+ */
+
+@import "../base/variables.pcss.css";
+
+.fieldset {
+  min-width: 0;
+  margin-block: var(--sp1);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  color: inherit;
+  border: solid 2px var(--color--gray-25);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+}
+
+.fieldset--group {
+  width: 100%;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+
+/* stylelint-disable-next-line selector-type-no-unknown */
+_:-ms-fullscreen,
+.fieldset {
+  display: table;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.fieldset__legend {
+  float: left; /* Prevent sticking out of top of fieldset. */
+  width: 100%;
+  color: inherit;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  background-color: var(--color--gray-25);
+  font-size: var(--font-size-l);
+  font-weight: 700;
+  line-height: var(--line-height-base);
+
+  & + * {
+    clear: left;
+  }
+
+  & .fieldset__label {
+    &.form-required {
+      &:after {
+        background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+      }
+    }
+  }
+}
+
+.fieldset__legend--composite {
+  margin-block-start: 2px;
+  color: inherit;
+}
+
+.fieldset__legend--invisible {
+  margin: 0;
+}
+
+.fieldset__legend--group {
+  color: inherit;
+}
+
+.fieldset__label {
+  display: block;
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp1);
+  padding-inline-end: var(--sp1);
+  color: var(--color--white);
+  line-height: var(--line-height-s);
+}
+
+.fieldset__label.is-disabled {
+  color: var(--color--gray-25);
+}
+
+.fieldset__description {
+  margin-block: var(--sp0-5);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+}
+
+.fieldset__description.is-disabled {
+  color: var(--input--disabled-fg-color);
+}
+
+.fieldset__error-message {
+  margin-block: var(--sp0-5);
+  padding-inline-start: var(--sp1-5);
+  color: var(--color--red);
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left top; /* LTR */
+  background-size: var(--sp1) var(--sp1);
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+
+  @media screen and (-ms-high-contrast: active) {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  }
+}
+
+[dir="rtl"] .fieldset__error-message {
+  background-position: left top;
+}
+
+.fieldset__wrapper {
+  padding: var(--sp);
+}
+
+.fieldset__legend--invisible ~ .fieldset__wrapper {
+  margin-block-start: 0;
+  padding: 0;
+}
+
+.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
+  border: solid 2px var(--color--gray-25);
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
+
+.fieldset__wrapper--group {
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.fieldset__wrapper > .container-inline {
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}

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-boolean.css

@@ -0,0 +1,133 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  width: 1.6875rem;
+  height: 1.6875rem;
+  margin: 0;
+  vertical-align: middle;
+  border: 1px solid #7e96a7;
+  border-radius: 0.1875rem;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 1.125rem 1.125rem;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  border: solid 2px #2494db;
+  outline: solid 2px #2494db;
+}
+
+@supports (outline-style: double) {
+
+  input[type="checkbox"]:focus,
+  input[type="radio"]:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
+  }
+}
+
+input[type="checkbox"]:hover,
+input[type="radio"]:hover {
+  border-color: #53b0eb;
+}
+
+input[type="checkbox"][disabled],
+input[type="radio"][disabled] {
+  background-color: #f1f4f7;
+}
+
+input[type="checkbox"][disabled]:hover,
+input[type="radio"][disabled]:hover {
+  border-color: #7e96a7;
+}
+
+input[type="checkbox"][disabled]:checked,
+input[type="radio"][disabled]:checked {
+  border-width: 1px;
+}
+
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  border-width: 2px;
+}
+
+input.error[type="checkbox"],
+input.error[type="radio"] {
+  border: solid 2px #e33f1e;
+}
+
+input.error[type="checkbox"]:focus,
+input.error[type="radio"]:focus {
+  outline-color: #e33f1e;
+  outline-offset: -2px;
+}
+
+/* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
+
+input.error[type="checkbox"]::-ms-check,
+input.error[type="radio"]::-ms-check {
+  border: 1px solid #e33f1e;
+}
+
+[dir="ltr"] input[type="checkbox"] + label,
+[dir="ltr"] input[type="radio"] + label {
+  padding-left: 0.5625rem;
+}
+
+[dir="rtl"] input[type="checkbox"] + label,
+[dir="rtl"] input[type="radio"] + label {
+  padding-right: 0.5625rem;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+}
+
+input[type="checkbox"]:checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
+}
+
+input[type="radio"] {
+  border-radius: 50%;
+}
+
+input[type="radio"]:checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
+  background-size: 1.0625rem;
+}
+
+input[type="radio"]:focus {
+  border-width: 2px;
+  border-color: #2494db;
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px #2494db;
+}
+
+input.error[type="radio"]:focus {
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e;
+}
+
+.form-type-boolean {
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+}

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

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+@import "../base/variables.pcss.css";
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  width: var(--sp1-5);
+  height: var(--sp1-5);
+  margin: 0;
+  vertical-align: middle;
+  border: 1px solid var(--color--gray-30);
+  border-radius: 3px;
+  background-color: var(--color--white);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: var(--sp1) var(--sp1);
+  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;
+    }
+  }
+
+  &:hover {
+    border-color: var(--color--blue-70);
+  }
+
+  &[disabled] {
+    background-color: var(--color--gray-90);
+
+    &:hover {
+      border-color: var(--color--gray-30);
+    }
+
+    &:checked {
+      border-width: 1px;
+    }
+  }
+
+  &:checked {
+    border-width: 2px;
+  }
+
+  &.error {
+    border: solid 2px var(--color--red);
+
+    &:focus {
+      outline-color: var(--color--red);
+      outline-offset: -2px;
+    }
+  }
+
+  /* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
+  &.error::-ms-check {
+    border: 1px solid var(--color--red);
+  }
+
+  & + label {
+    display: inline-block;
+    padding-inline-start: var(--sp0-5);
+  }
+}
+
+input[type="checkbox"] {
+  &:checked {
+    background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
+  }
+}
+
+input[type="radio"] {
+  border-radius: 50%;
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
+    background-size: 17px;
+  }
+
+  &:focus {
+    border-width: 2px;
+    border-color: var(--color--blue-50);
+    outline-color: transparent;
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-50);
+  }
+
+  &.error:focus {
+    outline-color: transparent;
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
+  }
+}
+
+.form-type-boolean {
+  margin-block: var(--sp1);
+}

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/form.css

@@ -0,0 +1,252 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+:-ms-input-placeholder {
+  color: #7e96a7;
+}
+
+::placeholder {
+  color: #7e96a7;
+}
+
+/* IE 10 and 11 needs this set as important. */
+
+:-ms-input-placeholder {
+  color: #7e96a7 !important;
+}
+
+/**
+ * General form item.
+ */
+
+.form-item {
+  margin-top: 1.125rem;
+  margin-bottom: 1.125rem;
+}
+
+.form-item__label--multiple-value-form {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+/**
+ * When a table row or a container-inline has a single form item, prevent it
+ * from adding unnecessary extra spacing.
+ * If it has multiple form items, allow spacing between them, overriding Classy.
+ */
+
+tr .form-item,
+.container-inline .form-item {
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+}
+
+/**
+ * Form element label.
+ */
+
+.form-item__label {
+  display: block;
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+}
+
+[dir="ltr"] .container-inline .form-item__label {
+  margin-right: 1em;
+}
+
+[dir="rtl"] .container-inline .form-item__label {
+  margin-left: 1em;
+}
+
+.form-item__label--multiple-value-form {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.form-item__label[for] {
+  cursor: pointer;
+}
+
+.form-item__label.option {
+  display: inline;
+  font-weight: normal;
+}
+
+/* Label states. */
+
+.form-item__label.is-disabled {
+  cursor: default;
+  color: #afb8be;
+}
+
+/* Form required star icon */
+
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after,
+.required-mark::after {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.3em;
+  margin-left: 0.3em;
+  content: "";
+  vertical-align: text-top;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 0.5rem 0.5rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .form-item__label.form-required::after,
+  .fieldset__label.form-required::after,
+  .required-mark::after {
+    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+  }
+}
+
+/**
+ * Form item description.
+ */
+
+.form-item__description {
+  max-width: 60ch;
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+.field-multiple-table + .form-item__description {
+  margin-top: 0;
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+
+[dir="ltr"] .form-item--error-message {
+  padding-left: 1.6875rem;
+}
+
+[dir="rtl"] .form-item--error-message {
+  padding-right: 1.6875rem;
+}
+
+.form-item--error-message {
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+  color: #e33f1e;
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left top; /* LTR */
+  background-size: 1.125rem 1.125rem;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+
+@media screen and (-ms-high-contrast: active) {
+
+  .form-item--error-message {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  }
+}
+
+[dir="rtl"] .form-item--error-message {
+  background-position: right top;
+}
+
+/**
+ * Form actions.
+ */
+
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+}
+
+.form-actions .button,
+.form-actions .action-link {
+  margin-top: 0.5625rem;
+  margin-bottom: 0.5625rem;
+}
+
+.form-actions .ajax-progress--throbber {
+  -ms-grid-row-align: center;
+  align-self: center;
+}
+
+/**
+ * Custom label placement for editor filter format select.
+ */
+
+.form-item--editor-format {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 100%;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix,
+.form-item--editor-format .form-element--editor-format {
+  min-width: 1px;
+}
+
+[dir="ltr"] .form-item--editor-format .form-item__label,
+[dir="ltr"] .form-item--editor-format .form-item__prefix,
+[dir="ltr"] .form-item--editor-format .form-item__suffix {
+  margin-right: 0.5625rem;
+}
+
+[dir="rtl"] .form-item--editor-format .form-item__label,
+[dir="rtl"] .form-item--editor-format .form-item__prefix,
+[dir="rtl"] .form-item--editor-format .form-item__suffix {
+  margin-left: 0.5625rem;
+}
+
+.form-item--editor-format .form-item__description,
+.form-item--editor-format .form-item--error-message {
+  flex: 0 1 100%;
+  min-width: 1px;
+}
+
+/**
+ * Inline forms.
+ */
+
+.form--inline > * {
+  display: inline-block;
+  margin-top: 0.5625rem;
+  margin-bottom: 0;
+  vertical-align: top; /* Ensure proper alignment if description is present. */
+}
+
+.form--inline .form-item__label {
+  margin: 0;
+}
+
+.form--inline .form-actions {
+  margin-top: 1.6875rem;
+}

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

@@ -0,0 +1,198 @@
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+@import "../base/variables.pcss.css";
+
+::placeholder {
+  color: var(--color--gray-30);
+}
+
+/* IE 10 and 11 needs this set as important. */
+:-ms-input-placeholder {
+  color: var(--color--gray-30) !important;
+}
+
+/**
+ * General form item.
+ */
+.form-item {
+  margin-block: var(--sp1);
+}
+
+.form-item__label--multiple-value-form {
+  margin-block: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+/**
+ * When a table row or a container-inline has a single form item, prevent it
+ * from adding unnecessary extra spacing.
+ * If it has multiple form items, allow spacing between them, overriding Classy.
+ */
+tr .form-item,
+.container-inline .form-item {
+  margin-block: var(--sp0-5);
+}
+
+/**
+ * Form element label.
+ */
+.form-item__label {
+  display: block;
+  margin-block: var(--sp0-5);
+}
+
+.container-inline .form-item__label {
+  margin-inline-end: 1em;
+}
+
+.form-item__label--multiple-value-form {
+  margin-block: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.form-item__label[for] {
+  cursor: pointer;
+}
+
+.form-item__label.option {
+  display: inline;
+  font-weight: normal;
+}
+
+/* Label states. */
+.form-item__label.is-disabled {
+  cursor: default;
+  color: var(--color--gray-45);
+}
+
+/* Form required star icon */
+.form-item__label.form-required::after,
+.fieldset__label.form-required::after,
+.required-mark::after {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-inline: 0.3em;
+  content: "";
+  vertical-align: text-top;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 0.5rem 0.5rem;
+
+  @media screen and (-ms-high-contrast: active) {
+    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+  }
+}
+
+/**
+ * Form item description.
+ */
+.form-item__description {
+  margin-block: var(--sp0-5);
+  max-width: 60ch;
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+}
+
+.field-multiple-table + .form-item__description {
+  margin-block-start: 0;
+}
+
+/**
+ * Error message (Inline form errors).
+ */
+.form-item--error-message {
+  margin-block: var(--sp0-5);
+  padding-inline-start: var(--sp1-5);
+  color: var(--color--red);
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: left top; /* LTR */
+  background-size: var(--sp1) var(--sp1);
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+
+  @media screen and (-ms-high-contrast: active) {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
+  }
+}
+
+[dir="rtl"] .form-item--error-message {
+  background-position: right top;
+}
+
+/**
+ * Form actions.
+ */
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-block: var(--sp0-5);
+}
+
+.form-actions .button,
+.form-actions .action-link {
+  margin-block: var(--sp0-5);
+}
+
+.form-actions .ajax-progress--throbber {
+  align-self: center;
+}
+
+/**
+ * Custom label placement for editor filter format select.
+ */
+.form-item--editor-format {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 100%;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix,
+.form-item--editor-format .form-element--editor-format {
+  min-width: 1px;
+}
+
+.form-item--editor-format .form-item__label,
+.form-item--editor-format .form-item__prefix,
+.form-item--editor-format .form-item__suffix {
+  margin-inline-end: var(--sp0-5);
+}
+
+.form-item--editor-format .form-item__description,
+.form-item--editor-format .form-item--error-message {
+  flex: 0 1 100%;
+  min-width: 1px;
+}
+
+/**
+ * Inline forms.
+ */
+.form--inline {
+  & > * {
+    display: inline-block;
+    margin-top: var(--sp0-5);
+    margin-bottom: 0;
+    vertical-align: top; /* Ensure proper alignment if description is present. */
+  }
+
+  & .form-item__label {
+    margin: 0;
+  }
+
+  & .form-actions {
+    margin-top: var(--sp1-5);
+  }
+}

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;
+    }
+  }
+}