1st

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,100 @@
+# How to sub-theme Olivero.
+Technically Olivero does not support sub-theming, in this document I'll walk you through copying a Olivero into a new theme and making changes to the CSS and JavaScript.
+
+## Why no sub-theming of Olivero?
+Olivero isn't quite stable in Drupal 9. We're still making lots of changes to the markup, which can screw up any CSS overrides that you have in place. Even after reaching stable, we likely won't support sub-theming immediately because of various non-critical technical debt issues that we want to fix.
+
+## Steps to copy Olivero into a new theme.
+Instead of sub-theming, we're going to copy the core theme into a new theme.
+
+You can do this using manual steps or by using the included script.
+
+<details>
+ <summary><strong>Use the provided script to copy the theme</strong></summary>
+ <hr>
+ 
+### Run the build script.
+
+Note, this is  only tested on MacOS, and is heavily reliant on code from Stack Overflow. Contributions are welcome!
+
+1. Copy this repository into the Drupal's `/themes/` directory.
+2. Rename this directory into the your themes name.
+3. Use the terminal to `cd` into the theme's directory.
+4. run `sh ./build.sh` to start the process to generate the theme.
+5. Enter the name of the theme when prompted (example: `Mytheme`).
+ <hr>
+</details>
+
+<details>
+ <summary><strong>Manually copy theme and rename files</strong></summary>
+ <hr>
+ 
+   ### Copy the theme directory.
+
+   1. Copy the `/core/themes/olivero` directory into the `/themes/` directory.
+   2. Rename the files in the new theme.
+      1. Change the directory name from `olivero` to the new theme name (in these example, we'll use `coco`). So rename the `olivero` directory to `coco` (Coco is my dogs name).
+      2. Rename the `olivero.info.yml` file to `coco.info.yml`
+      3. Rename `olivero.breakpoints.yml` file to `coco.breakpoints.yml`
+      4. Rename `olivero.libraries.yml` file to `coco.libraries.yml`
+      5. Rename `olivero.theme` file to `coco.theme`
+      6. Rename all of the `olivero` config within the theme's `config` directory to `coco`. For example, rename `block.block.olivero_account_menu.yml` to `block.block.coco_account_menu.yml`. There are a number of files in there to rename.
+      7. Rename `/src/OliveroPreRender.php` to `/src/CocoPreRender.php`.
+   3. Do a global search and replace for the name. When you search and replace, be case-sensitive
+      1. Search and replace `Olivero` with `Coco`.
+      2. Search and replace `olivero` with `coco`.
+   4. Within the `coco.info.yml` file, replace `experimental: true` with `core_version_requirement: ^9`.
+   5. Move all of the "block" config files (starting with "block") from `config/install` to `config/optional`.
+   6. Move the `core.date_format.coco_medium.info.yml` from `config/install` to `config/optional`.
+
+
+   ### Copy the CSS and JavaScript compilation scripts.
+   Copy all of the files this repository into the new theme. These scripts will enable you to make change in the source files and have them compile down to regular CSS and JS.
+
+   The most important files are:
+
+   * `package.json` file
+   * `yarn.lock` file
+   * `scripts/` directory - this contains the CSS and JS compilation scripts.
+
+ <hr>
+</details>
+
+### Enable the new theme.
+You should now see the new theme listed under `appearance > themes`. Install the new theme and set it to be the default.
+
+It should look exactly like the default core Olivero theme.
+
+### Install Node dependencies.
+First make sure you have [Node](https://nodejs.org/en/download/), and [Yarn](https://classic.yarnpkg.com/en/docs/install/) installed.
+
+Then run `yarn install` to install the dependencies.
+
+### Make a change to the CSS styles.
+Within the theme you'll notice both regular `*.css` files and also `*.pcss.css` files. The files that you want to modify are the `*.pcss.css` files. These PostCSS files will be made into browser-compatible CSS by running the compilation scripts.
+
+1. Open up the `/css/base/variables.pcss.css`.
+2. Change some of the blue color's hex values down near line 132.
+3. To generate the CSS run `yarn build:css`.
+
+Note you can also watch CSS by running `yarn watch:css`.
+
+See the scripts section within the `package.json` file for more commands.
+
+### Make a change to the JavaScript.
+Similar to CSS, there are two JavaScript files for each file:
+
+* `*.es6.js` - These are the files that you will modify. They are written using modern JavaScript.
+* `*.js` - These are the IE11 compatible JavaScript files generated by running the compilation scripts. Do not directly modify these files.
+
+You compile changes to the JavaScript files by running `yarn watch:js` and `yarn build:js`.
+
+### How to remove IE11 (and Opera Mini support).
+Internet Explorer 11 and Opera Mini do not support CSS Variables (aka CSS Custom properties). This results in making new features (such as dark mode) very hard to implement. To remove support for these browsers.
+
+1. Remove `"last 1 Explorer version",` from line 95 in `package.json`.
+2. Remove `"last 1 OperaMini version",` from line 99 in `package.json`.
+3. Search the codebase and remove instances of importing the `variables.pcss.css` file. Examples:
+   1. `@import "../base/variables.pcss.css";` from `css/components/action-links.pcss.css`
+   2. `@import "../../base/variables.pcss.css";` from `css/components/navigation/nav-button-mobile.pcss.css`
+4. Run `yarn build` to regenerate the compiled CSS and JavaScript.

build.sh

@@ -0,0 +1,46 @@
+#!/bin/sh
+echo ""
+echo ""
+echo "👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇"
+echo "This is a barebones script. It does bulk renames without any regard to whether"
+echo "the renamed file is valid. If you use any of the following, it will fail:"
+echo ""
+echo " - JavaScript reserved words"
+echo " - PHP reserved words"
+echo " - Spaces or non-standard characters"
+echo " - hyphens or underscores"
+echo ""
+echo "👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆"
+echo ""
+
+read -p "Enter the name of the theme (example: Mytheme): " THEMENAME
+
+# Convert themename to lower case.
+THEMENAME_LOWER=$(echo "$THEMENAME" | tr '[:upper:]' '[:lower:]')
+
+# Copy Olivero theme from core.
+cp -r ../../core/themes/olivero/* ./
+DIRS=("./" "config/install/" "config/optional/" "config/schema/")
+
+# Rename all filenames to use new themename.
+for DIR in "${DIRS[@]}"
+do
+  for file in $DIR*olivero* ; do mv $file ${file//olivero/$THEMENAME_LOWER} ; done
+done
+
+# Rename the prerender file by ensuring that only the first letter of the theme is capitalized.
+THEMENAME_FIRST_LETTER_CAPS="$(tr '[:lower:]' '[:upper:]' <<< ${THEMENAME_LOWER:0:1})${THEMENAME_LOWER:1}"
+mv src/OliveroPreRender.php src/${THEMENAME_FIRST_LETTER_CAPS}PreRender.php
+
+# Rename all occurrances of "Olivero" within the theme (both lower case and normal).
+grep -rl olivero . --exclude=\*.{sh,md} --exclude-dir={node_modules,scripts,.git} | xargs sed -i "" -e "s/olivero/$THEMENAME_LOWER/g"
+grep -rl Olivero . --exclude=\*.{sh,md} --exclude-dir={node_modules,scripts,.git} | xargs sed -i "" -e "s/Olivero/$THEMENAME/g"
+
+# Add core_version_requirement to *.info.yml and remove `package: Core`, and `experimental: true`
+sed -i .bak 's/package: Core/core_version_requirement: ^9/g' *.info.yml
+sed -i .bak 's/experimental: true//g' *.info.yml
+rm *.bak
+
+# Move make configuration optional (this is needed if Olivero is already enabled).
+mv ./config/install/block* ./config/optional/
+mv ./config/install/core* ./config/optional/

config/install/olivera.settings.yml

@@ -0,0 +1,15 @@
+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
+base_primary_color: '#1b9ae4'

config/optional/block.block.olivera_account_menu.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.account
+  module:
+    - system
+  theme:
+    - olivera
+id: olivera_account_menu
+theme: olivera
+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: {  }

config/optional/block.block.olivera_book_navigation.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - book
+  theme:
+    - olivera
+id: olivera_book_navigation
+theme: olivera
+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: {  }

config/optional/block.block.olivera_breadcrumbs.yml

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

config/optional/block.block.olivera_content.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - olivera
+id: olivera_content
+theme: olivera
+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: {  }

config/optional/block.block.olivera_help.yml

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

config/optional/block.block.olivera_main_menu.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.main
+  module:
+    - system
+  theme:
+    - olivera
+id: olivera_main_menu
+theme: olivera
+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: {  }

config/optional/block.block.olivera_messages.yml

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

config/optional/block.block.olivera_page_title.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - olivera
+id: olivera_page_title
+theme: olivera
+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: {  }

config/optional/block.block.olivera_powered.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - olivera
+id: olivera_powered
+theme: olivera
+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: {  }

config/optional/block.block.olivera_primary_admin_actions.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - olivera
+id: olivera_primary_admin_actions
+theme: olivera
+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: {  }

config/optional/block.block.olivera_primary_local_tasks.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - olivera
+id: olivera_primary_local_tasks
+theme: olivera
+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: {  }

config/optional/block.block.olivera_search_form_narrow.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - search
+  theme:
+    - olivera
+id: olivera_search_form_narrow
+theme: olivera
+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: {  }

config/optional/block.block.olivera_search_form_wide.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - search
+  theme:
+    - olivera
+id: olivera_search_form_wide
+theme: olivera
+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: {  }

config/optional/block.block.olivera_secondary_local_tasks.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - olivera
+id: olivera_secondary_local_tasks
+theme: olivera
+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: {  }

config/optional/block.block.olivera_site_branding.yml

@@ -0,0 +1,22 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - olivera
+id: olivera_site_branding
+theme: olivera
+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: {  }

config/optional/block.block.olivera_syndicate.yml

@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+  theme:
+    - olivera
+id: olivera_syndicate
+theme: olivera
+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: {  }

config/optional/core.date_format.olivera_medium.yml

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

config/schema/olivera.schema.yml

@@ -0,0 +1,26 @@
+# Schema for the configuration files of the Olivera theme.
+
+olivera.settings:
+  type: theme_settings
+  label: 'olivera 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'
+    base_primary_color:
+      type: color_hex
+      label: 'Base Primary Color'

css/base/base.css

@@ -0,0 +1,158 @@
+/*
+ * 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: var(--font-sans);
+  font-size: 100%;
+  font-weight: normal;
+  font-style: normal;
+  line-height: var(--line-height-base);
+}
+
+body {
+  margin: 0;
+  color: var(--color-text-neutral-medium);
+  background-color: var(--color--gray-100);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
+  background-position: top left; /* LTR */
+}
+
+body.is-fixed {
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+}
+
+[dir="rtl"] body {
+  background-position: top right;
+}
+
+a {
+  color: var(--color-text-primary-medium);
+}
+
+a:hover {
+  color: var(--color--primary-50);
+}
+
+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: var(--sp2);
+}
+
+@media (min-width: 43.75rem) {
+  h1 {
+    font-size: 3.75rem;
+    line-height: var(--sp4);
+  }
+}
+
+h2 {
+  letter-spacing: -0.01em;
+  font-size: 1.5rem;
+  line-height: var(--sp2);
+}
+
+@media (min-width: 43.75rem) {
+  h2 {
+    font-size: 2.25rem;
+    line-height: var(--sp3);
+  }
+}
+
+h3 {
+  font-size: 1.25rem;
+  line-height: var(--sp1-5);
+}
+
+@media (min-width: 43.75rem) {
+  h3 {
+    font-size: 1.5rem;
+    line-height: var(--sp2);
+  }
+}
+
+h4 {
+  font-size: 1.125rem;
+  line-height: var(--sp1-5);
+}
+
+h5 {
+  font-size: 1rem;
+  line-height: var(--sp1-5);
+}
+
+h6 {
+  font-size: 0.875rem;
+  line-height: var(--sp);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block: var(--sp);
+  color: var(--color-text-neutral-loud);
+  font-family: var(--font-sans);
+  font-weight: bold;
+}
+
+@media (min-width: 43.75rem) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    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;
+}

css/base/base.pcss.css

@@ -0,0 +1,140 @@
+/**
+ * @file
+ * Generic base elements.
+ */
+
+@import "media-queries.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-text-neutral-medium);
+  background-color: var(--color--gray-100);
+  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-text-primary-medium);
+
+  &:hover {
+    color: var(--color--primary-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-text-neutral-loud);
+  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;
+}

css/base/fonts.css

@@ -0,0 +1,65 @@
+/*
+ * 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");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
+  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");
+  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");
+  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");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

css/base/fonts.pcss.css

@@ -0,0 +1,64 @@
+/**
+ * @file
+ * Base Fonts.
+ */
+
+@import "media-queries.pcss.css";
+
+@font-face {
+  font-family: metropolis;
+  src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: metropolis;
+  src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
+  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");
+  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");
+  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");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

css/base/media-queries.css

@@ -0,0 +1,19 @@
+/*
+ * 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. */

css/base/media-queries.pcss.css

@@ -0,0 +1,18 @@
+/*
+ * 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. */

css/base/variables.css

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

css/base/variables.pcss.css

@@ -0,0 +1,142 @@
+/*
+  Global CSS custom properties.
+*/
+
+@import "./media-queries.pcss.css";
+
+/* stylelint-disable */
+
+:root {
+  --font-sans: "metropolis", sans-serif;
+  --font-serif: "Lora", "georgia", serif;
+
+  /* Typography helpers. */
+  --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 helpers. */
+  --max-width: 1350px;
+  --max-bg-color: 1570px; /* Width to which the background color extends to. */
+  --sp: 18px;
+  --content-left: 90px;
+  --site-header-height-wide: var(--sp10);
+  --container-padding: var(--sp); /* Inline padding on .container elements. */
+
+  @media (--nav) {
+    --container-padding: var(--sp2);
+  }
+
+  /**
+   * 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.
+   */
+  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
+  --grid-col-count: 6;
+  --grid-gap: var(--sp);
+  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */
+
+  @media (--md) {
+    --grid-col-count: 14;
+    --grid-gap: var(--sp2);
+  }
+
+  @media (--lg) {
+    --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+  }
+
+  @media (--nav) {
+    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+  }
+
+  @media (--grid-max) {
+    --grid-full-width: calc(var(--max-width) - var(--sp4));
+  }
+
+  /* Layout helpers */
+  --sp0-25: calc(0.25 * var(--sp));
+  --sp0-5: calc(0.5 * var(--sp));
+  --sp0-75: calc(0.75 * var(--sp));
+  --sp1: calc(1 * var(--sp));
+  --sp1-5: calc(1.5 * var(--sp));
+  --sp2: calc(2 * var(--sp));
+  --sp2-5: calc(2.5 * var(--sp));
+  --sp3: calc(3 * var(--sp));
+  --sp4: calc(4 * var(--sp));
+  --sp5: calc(5 * var(--sp));
+  --sp6: calc(6 * var(--sp));
+  --sp7: calc(7 * var(--sp));
+  --sp8: calc(8 * var(--sp));
+  --sp9: calc(9 * var(--sp));
+  --sp10: calc(10 * var(--sp));
+  --sp11: calc(11 * var(--sp));
+  --sp12: calc(12 * var(--sp));
+
+  /**
+   * Gray colors.
+   *
+   * Color number roughly corresponds to its luminosity.
+   */
+  --color--gray-hue: 201;
+  --color--gray-saturation: 15%;
+  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
+  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
+  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
+  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
+  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
+  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
+  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
+  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
+  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
+  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */
+
+  /**
+   * Primary colors.
+   *
+   * Color number roughly corresponds to its luminosity.
+   */
+  --color--primary-hue: 202;
+  --color--primary-saturation: 79%;
+  --color--primary-lightness: 50;
+  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
+  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
+  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
+  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
+  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */
+
+  /**
+   * Variables specific to text.
+   */
+  --color-text-neutral-soft: var(--color--gray-45);
+  --color-text-neutral-medium: var(--color--gray-20);
+  --color-text-neutral-loud: var(--color--gray-5);
+
+  --color-text-primary-medium: var(--color--primary-40);
+  --color-text-primary-loud: var(--color--primary-30);
+
+  /**
+   * Named Colors.
+   */
+  --color--black: #000; /* Black */
+  --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;
+}

css/components/action-links.css

@@ -0,0 +1,28 @@
+/*
+ * 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.
+*/
+.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;
+}
+.action-links li {
+  display: inline-block;
+}
+.action-links li a {
+  color: var(--color-text-primary-medium);
+}
+.action-links-item {
+  display: inline-block;
+}

css/components/action-links.pcss.css

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Styles for action links.
+*/
+@import "../base/media-queries.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-text-primary-medium);
+    }
+  }
+}
+
+.action-links-item {
+  display: inline-block;
+}

css/components/ajax-progress.module.css

@@ -0,0 +1,111 @@
+/*
+ * 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.
+ */
+
+.ajax-progress-throbber {
+  position: relative;
+  display: inline-flex;
+  align-content: center;
+  height: 1.125rem;
+  margin-block-start: -0.1875rem;
+  margin-block-end: 0;
+  margin-inline-start: var(--sp0-5);
+  margin-inline-end: var(--sp0-5);
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1.125rem;
+}
+
+.ajax-progress-throbber .throbber {
+  width: 1.125rem;
+  height: 1.125rem;
+  border-width: 2px;
+  border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-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-70);
+  border-radius: 3.5rem;
+  background-color: var(--color--white);
+  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
+}
+
+.ajax-progress-fullscreen::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: olivera-throbber 0.75s linear infinite;
+  border-style: solid dotted solid solid;
+  border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-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 olivera-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

css/components/ajax-progress.module.pcss.css

@@ -0,0 +1,102 @@
+/**
+ * @file
+ * Visual styles for ajax-progress throbber.
+ */
+
+@import "../base/media-queries.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--primary-50) transparent var(--color--primary-50) var(--color--primary-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-70);
+  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: olivera-throbber 0.75s linear infinite;
+  border-style: solid dotted solid solid;
+  border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-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 olivera-throbber {
+  0% {
+    transform: rotateZ(0);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}

css/components/autocomplete-loading.module.css

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+[type].form-autocomplete {
+  padding-inline-end: var(--sp3);
+  background-color: var(--color--white);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e  %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right var(--sp1) center; /* LTR */
+}
+
+.form-autocomplete[type]:disabled {
+  background-color: var(--color--gray-100);
+}
+
+.form-autocomplete.ui-autocomplete-loading[type] {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e  %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e  %3cg transform='translate(5 5)'%3e    %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e  %3c/g%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .form-autocomplete[type] {
+  background-position: left var(--sp1) center;
+}

css/components/autocomplete-loading.module.pcss.css

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Visual styles for autocomplete input field.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+[type].form-autocomplete {
+  padding-inline-end: var(--sp3);
+  background-color: var(--color--white);
+  background-image: url("../../images/magnifying-glass.svg");
+  background-repeat: no-repeat;
+  background-position: right var(--sp1) center;  /* LTR */
+
+  &:disabled {
+    background-color: var(--color--gray-100);
+  }
+
+  &.ui-autocomplete-loading {
+    background-image: url("../../images/throbber.svg");
+  }
+
+  &:dir(rtl) {
+    background-position: left var(--sp1) center;
+  }
+}

css/components/block.css

@@ -0,0 +1,23 @@
+/*
+ * 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-block: 0 var(--sp);
+  letter-spacing: 0.02em;
+  color: var(--color-text-neutral-soft);
+  font-size: var(--font-size-s);
+  line-height: var(--sp);
+}
+
+.site-footer .block__title {
+  color: var(--color--gray-65);
+}

css/components/block.pcss.css

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

css/components/book.css

@@ -0,0 +1,106 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Book module styling.
+ */
+
+.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--primary-40);
+}
+
+.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) {
+  .book-pager__item--next {
+    margin-inline-start: auto;
+    text-align: end;
+  }
+}
+
+.book-pager__link {
+  display: inline-flex;
+  align-items: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-primary-medium);
+  font-family: var(--font-serif);
+  font-size: 1.125rem;
+  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 0.1875rem currentColor;
+  border-inline-start: solid 0.1875rem currentColor;
+}
+
+.book-pager__link--next::after {
+  display: block;
+  width: var(--sp0-5);
+  height: var(--sp0-5);
+  margin-inline-start: 0.25em;
+  content: "";
+  transform: rotate(135deg);
+  border-block-start: solid 0.1875rem currentColor;
+  border-inline-start: solid 0.1875rem currentColor;
+}
+
+.book-navigation__menu {
+  margin-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);
+}
+
+[dir="rtl"] .book-pager__link--next::after {
+  transform: rotate(-135deg);
+}

css/components/book.pcss.css

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Book module styling.
+ */
+
+@import "../base/media-queries.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--primary-40);
+}
+
+.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-text-primary-medium);
+  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);
+  }
+}

css/components/breadcrumb.css

@@ -0,0 +1,129 @@
+/*
+ * 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: var(--sp1);
+
+  /* Shadow on the right side of breadcrumbs for narrow screens. */
+}
+
+.breadcrumb::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 (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, 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 (min-width: 62.5rem) {
+  .breadcrumb__content {
+    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 (min-width: 62.5rem) {
+  .breadcrumb__list {
+    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;
+}
+
+.breadcrumb__item:nth-child(n + 2)::before {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-inline: 1rem 1.25rem;
+  content: "";
+  transform: rotate(45deg); /* LTR */
+  border-block-start: 2px solid var(--color--gray-45);
+  border-inline-end: 2px solid var(--color--gray-45);
+}
+
+.breadcrumb__item:last-child {
+  margin-inline-end: var(--sp3);
+}
+
+@media (min-width: 62.5rem) {
+  .breadcrumb__item:last-child {
+    margin-inline-end: 0;
+  }
+}
+
+[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
+  transform: rotate(-45deg);
+}
+
+.breadcrumb__link {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-primary-medium);
+}
+
+.breadcrumb__link:hover,
+.breadcrumb__link:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}

css/components/breadcrumb.pcss.css

@@ -0,0 +1,111 @@
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+@import "../base/media-queries.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-45);
+    border-inline-end: 2px solid var(--color--gray-45);
+  }
+
+  &: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-text-primary-medium);
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}

css/components/button.css

@@ -0,0 +1,143 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Buttons.
+ */
+
+.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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-primary-medium);
+  border: solid 2px currentColor;
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-l);
+  font-weight: 700;
+  -webkit-appearance: none;
+  appearance: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+.button:hover,
+.button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-primary-loud);
+  border: solid 2px currentColor;
+  background: none;
+  font-weight: 700;
+}
+
+.button:focus {
+  outline: 2px solid var(--color--primary-60);
+  outline-offset: 2px;
+}
+
+.button:active {
+  color: var(--color-text-primary-medium);
+  border-color: currentColor;
+}
+
+.button:disabled,
+.button.is-disabled {
+  cursor: default;
+  color: var(--color--gray-90);
+  border-color: var(--color--gray-90);
+}
+
+/*
+    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-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);
+  border-color: var(--color--primary-40);
+  background-color: var(--color--primary-40);
+}
+
+.button--primary:hover,
+.button--primary:focus {
+  color: var(--color--white);
+  border-color: var(--color--primary-30);
+  background-color: var(--color--primary-30);
+}
+
+.button--primary:active {
+  color: var(--color--white);
+  background-color: var(--color--primary-40);
+}
+
+.button--primary:disabled,
+.button--primary.is-disabled {
+  color: var(--color--white);
+  background-color: var(--color--gray-90);
+}
+
+.button--icon-back {
+  display: inline-flex;
+  align-items: center;
+}
+
+.button--icon-back::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;
+}

css/components/button.pcss.css

@@ -0,0 +1,131 @@
+/**
+ * @file
+ * Buttons.
+ */
+
+@import "../base/media-queries.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-text-primary-medium);
+  border: solid 2px currentColor;
+  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-text-primary-loud);
+    border: solid 2px currentColor;
+    background: none;
+    font-weight: 700;
+  }
+
+  &:focus {
+    outline: 2px solid var(--color--primary-60);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    color: var(--color-text-primary-medium);
+    border-color: currentColor;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    cursor: default;
+    color: var(--color--gray-90);
+    border-color: var(--color--gray-90);
+  }
+
+  /*
+    IE11 doesn't work properly on button elements so we only do
+    inline-flex on modern browsers.
+  */
+  @supports (display: inline-flex) {
+    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);
+  border-color: var(--color--primary-40);
+  background-color: var(--color--primary-40);
+
+  &:hover,
+  &:focus {
+    color: var(--color--white);
+    border-color: var(--color--primary-30);
+    background-color: var(--color--primary-30);
+  }
+
+  &:active {
+    color: var(--color--white);
+    background-color: var(--color--primary-40);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    color: var(--color--white);
+    background-color: var(--color--gray-90);
+  }
+}
+
+.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;
+}

css/components/cke-dialog.css

@@ -0,0 +1,16 @@
+/*
+ * 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;
+}

css/components/cke-dialog.pcss.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * CKE Dialogs.
+ */
+
+select.cke_dialog_ui_input_select {
+  appearance: menulist;
+}

css/components/color-picker.css

@@ -0,0 +1,16 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Color picker styles. These appear within theme settings when selecting a custom color.
+ */
+
+[data-drupal-selector="olivera-color-picker"] input[type="color"] {
+  margin-left: 0.8125rem;
+  vertical-align: bottom;
+}

css/components/color-picker.pcss.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Color picker styles. These appear within theme settings when selecting a custom color.
+ */
+
+[data-drupal-selector="olivera-color-picker"] {
+  & input[type="color"] {
+    margin-left: 13px;
+    vertical-align: bottom;
+  }
+}

css/components/comments.css

@@ -0,0 +1,258 @@
+/*
+ * 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.
+ */
+
+:root {
+  --comment-indentation: var(--sp2);
+  --comment-indentation--md: var(--sp4);
+}
+
+.comment--level-1 {
+  border-block-start: 2px solid var(--color--gray-95);
+}
+
+.comment--level-1 ~ .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: 2.125rem;
+  margin-block-start: 0;
+  margin-block-end: var(--sp0-5);
+  margin-inline-start: var(--sp);
+  margin-inline-end: var(--sp);
+  padding-block: 0;
+  padding-inline-start: 0.3125rem;
+  padding-inline-end: 0.3125rem;
+  text-align: center;
+  color: var(--color--white);
+  border-radius: 2px;
+  background-color: var(--color--primary-40);
+  font-size: 0.6875rem;
+  line-height: 1.3125rem;
+}
+
+.comments__count::after {
+  position: absolute;
+  inset-block-end: -0.4375rem;
+  inset-inline-start: 0.5rem;
+  width: 0;
+  height: 0;
+  content: "";
+  border-block-start: 0.4375rem solid var(--color--primary-40);
+  border-inline-end: 0.5rem solid transparent;
+}
+
+.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 (min-width: 43.75rem) {
+  .comment {
+    padding-inline-start: 0;
+  }
+}
+
+.comment__text-content {
+  font-size: 1rem;
+}
+
+.comment__text-content blockquote {
+  font-size: 1.3125rem;
+  line-height: var(--sp2);
+}
+
+/* Override for .field:not(:last-child) */
+
+.comment__text-content:not(:last-child) {
+  margin-block-end: 0;
+}
+
+.comment__links {
+  margin-block: var(--sp) 0;
+}
+
+.comment__links-link {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: bold;
+  line-height: var(--sp);
+}
+
+.comment__links-link:hover {
+  -webkit-text-decoration: underline;
+  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-95);
+}
+
+.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) {
+  .add-comment__picture,
+  .comment__picture {
+    inset-inline-start: calc(-1 * var(--sp5));
+    width: var(--sp3);
+    height: var(--sp3);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .indented .comment__picture {
+    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: 1rem;
+  font-weight: 700;
+  line-height: var(--sp);
+}
+
+.comment__author a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.comment__time {
+  margin: 0;
+  color: var(--color-text-neutral-soft);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: var(--sp);
+}
+
+.indented {
+  margin-inline-start: var(--comment-indentation);
+}
+
+.indented > .comment:not(:last-of-type, .has-children)::before {
+  position: absolute;
+  inset-block-start: var(--sp2);
+  inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
+  width: 0;
+  height: 100%;
+  content: "";
+  border-inline-start: solid 1px var(--color--gray-95);
+}
+
+@media (min-width: 43.75rem) {
+  .indented > .comment:not(:last-of-type, .has-children)::before {
+    inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .indented {
+    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-text-neutral-medium);
+  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) {
+  .show-hide-btn {
+    margin-inline-start: 0;
+  }
+}

css/components/comments.pcss.css

@@ -0,0 +1,233 @@
+/**
+ * @file
+ * Comment section and individual comments.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+:root {
+  --comment-indentation: var(--sp2);
+  --comment-indentation--md: var(--sp4);
+}
+
+.comment--level-1 {
+  border-block-start: 2px solid var(--color--gray-95);
+
+  & ~ .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--primary-40);
+  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--primary-40);
+    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-95);
+
+  & *: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-text-neutral-soft);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: var(--sp);
+}
+
+.indented {
+  margin-inline-start: var(--comment-indentation);
+
+  & > .comment:not(:last-of-type, .has-children)::before {
+    position: absolute;
+    inset-block-start: var(--sp2);
+    inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
+    width: 0;
+    height: 100%;
+    content: "";
+    border-inline-start: solid 1px var(--color--gray-95);
+
+    @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-text-neutral-medium);
+  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;
+  }
+}

css/components/container-inline.module.css

@@ -0,0 +1,25 @@
+/*
+ * 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-block: -0.125em; /* 2px */
+}
+
+.form-items-inline > .form-item {
+  display: inline-block;
+  margin-block: 0.125em;
+}

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

css/components/content-moderation.css

@@ -0,0 +1,94 @@
+/*
+ * 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.
+ */
+
+.entity-moderation-form {
+  flex-direction: column;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  border: 1px solid var(--color--gray-95);
+  background-color: var(--color--gray-100);
+}
+
+.entity-moderation-form select,
+.entity-moderation-form input:not([type="submit"]) {
+  background-color: var(--color--white);
+}
+
+@media (min-width: 43.75rem) {
+  .entity-moderation-form {
+    flex-direction: row;
+  }
+}
+
+.entity-moderation-form__item {
+  flex-basis: 0;
+  margin-inline-end: var(--sp);
+}
+
+.entity-moderation-form__item:last-child {
+  align-self: flex-start;
+  margin-inline-end: 0;
+}
+
+@media (min-width: 43.75rem) {
+  .entity-moderation-form__item:last-child {
+    align-self: flex-end;
+  }
+}
+
+.layout--content-narrow .entity-moderation-form,
+.layout--pass--content-narrow > * .entity-moderation-form,
+.layout--content-medium .entity-moderation-form,
+.layout--pass--content-medium > * .entity-moderation-form {
+  width: 100%;
+  margin-inline-start: 0;
+}
+
+@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) {
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+    margin-block: var(--sp2) var(--sp4);
+    margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+  }
+}
+
+@media (min-width: 90rem) {
+  .layout--content-narrow .entity-moderation-form,
+  .layout--pass--content-narrow > * .entity-moderation-form,
+  .layout--content-medium .entity-moderation-form,
+  .layout--pass--content-medium > * .entity-moderation-form {
+    width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: 0;
+  }
+}

css/components/content-moderation.pcss.css

@@ -0,0 +1,67 @@
+/**
+ * @file
+ * Styles for content moderation toolbar.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.entity-moderation-form {
+  flex-direction: column;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp);
+  border: 1px solid var(--color--gray-95);
+  background-color: var(--color--gray-100);
+
+  & 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(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+      margin-block: var(--sp2) var(--sp4);
+      margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
+    }
+
+    @media (--lg) {
+      width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+      margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+    }
+
+    @media (--grid-max) {
+      width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
+      margin-inline-start: 0;
+    }
+  }
+}

css/components/details.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
+ * Collapsible details.
+ */
+
+:root {
+  --details-border-width: 1px;
+  --details-summary-transition: background-color 0.12s ease-in-out;
+}
+
+.olivera-details {
+  display: block;
+  margin-block: var(--sp1);
+  color: inherit;
+  border: var(--details-border-width) solid var(--color--gray-95);
+  border-radius: var(--border-radius);
+  box-shadow: 0 1px 4px var(--color--gray-90);
+}
+
+/* Details summary styles */
+
+.olivera-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;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  color: inherit;
+  background-color: var(--color--gray-100);
+  font-size: var(--line-height-s);
+  font-weight: 700;
+  line-height: var(--sp1);
+}
+
+/* Arrow icon */
+
+.olivera-details__summary::before {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sp0-75);
+  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"] .olivera-details__summary::before {
+  transform: translateY(-50%) rotate(-135deg);
+}
+
+/* Pseudo-selector to manage focus styles */
+
+.olivera-details__summary::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--primary-60);
+}
+
+/* Hide the marker */
+
+.olivera-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Disable default outline for summary, since we have own implementation */
+
+.olivera-details__summary:focus {
+  outline: solid 2px transparent;
+  outline-offset: -4px;
+}
+
+/* Details summary, hover state */
+
+.olivera-details__summary:hover {
+  background-color: var(--color--gray-95);
+}
+
+/* Details summary, focus and active states */
+
+.olivera-details__summary:focus::after,
+.olivera-details__summary:active::after {
+  opacity: 1;
+}
+
+/* Rotate arrow icon of the details summary, when details expanded */
+
+.olivera-details[open] > .olivera-details__summary::before {
+  margin-block-start: -2px;
+  transform: translateY(-50%) rotate(135deg);
+}
+
+/* Details content wrapper */
+
+.olivera-details__wrapper {
+  margin: var(--sp1);
+}
+
+@media (min-width: 62.5rem) {
+  .olivera-details__wrapper {
+    margin-block-start: var(--sp1-5);
+    margin-block-end: var(--sp1-5);
+    margin-inline-start: var(--sp2);
+    margin-inline-end: var(--sp2);
+  }
+}
+
+/* Description */
+
+.olivera-details__description {
+  margin-block-end: var(--sp1);
+  color: var(--color-text-neutral-medium);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+}

css/components/details.pcss.css

@@ -0,0 +1,115 @@
+/**
+ * @file
+ * Collapsible details.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+:root {
+  --details-border-width: 1px;
+  --details-summary-transition: background-color 0.12s ease-in-out;
+}
+
+.olivera-details {
+  display: block;
+  margin-block: var(--sp1);
+  color: inherit;
+  border: var(--details-border-width) solid var(--color--gray-95);
+  border-radius: var(--border-radius);
+  box-shadow: 0 1px 4px var(--color--gray-90);
+}
+
+/* Details summary styles */
+.olivera-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-100);
+  font-size: var(--line-height-s);
+  font-weight: 700;
+  line-height: var(--sp1);
+}
+
+/* Arrow icon */
+.olivera-details__summary::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"] .olivera-details__summary::before {
+  transform: translateY(-50%) rotate(-135deg);
+}
+
+/* Pseudo-selector to manage focus styles */
+.olivera-details__summary::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--primary-60);
+}
+
+/* Hide the marker */
+.olivera-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Disable default outline for summary, since we have own implementation */
+.olivera-details__summary:focus {
+  outline: solid 2px transparent;
+  outline-offset: -4px;
+}
+
+/* Details summary, hover state */
+.olivera-details__summary:hover {
+  background-color: var(--color--gray-95);
+}
+
+/* Details summary, focus and active states */
+.olivera-details__summary:focus::after,
+.olivera-details__summary:active::after {
+  opacity: 1;
+}
+
+/* Rotate arrow icon of the details summary, when details expanded */
+.olivera-details[open] > .olivera-details__summary::before {
+  margin-block-start: -2px;
+  transform: translateY(-50%) rotate(135deg);
+}
+
+/* Details content wrapper */
+.olivera-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 */
+.olivera-details__description {
+  margin-block-end: var(--sp1);
+  color: var(--color-text-neutral-medium);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+}

css/components/dropbutton.css

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

css/components/dropbutton.pcss.css

@@ -0,0 +1,157 @@
+/**
+ * @file
+ * Dropbutton styles.
+ */
+
+.dropbutton-wrapper {
+  --dropbutton--height: var(--sp1-5);
+  --dropbutton--secondary-bg-color: var(--color--white);
+  --dropbutton--active-bg-color: var(--color--gray-90);
+  --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--border-radius: var(--border-radius);
+  --dropbutton--font-size: var(--font-size-s);
+  --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+
+  &.open {
+    position: relative;
+    z-index: 100; /* Ensure this appears above all other dropbuttons. */
+    filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
+  }
+}
+
+.dropbutton-widget {
+  position: relative;
+  width: max-content;
+  height: var(--dropbutton--height);
+  padding-inline-end: var(--dropbutton--height);
+  border-radius: var(--dropbutton--border-radius);
+
+  @nest .dropbutton-single & {
+    padding-inline-end: 0;
+  }
+
+  @nest .dropbutton-wrapper.open & {
+    border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
+  }
+}
+
+.dropbutton {
+  height: var(--dropbutton--height);
+  margin-block: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+  list-style: none;
+  font-size: var(--dropbutton--font-size);
+}
+
+/* This is the button that expands/collapses the secondary options. */
+.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--active-bg-color);
+
+  &:focus {
+    outline: solid 2px var(--dropbutton--outline-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--outline-color);
+    border-bottom: solid 2px var(--dropbutton--outline-color);
+
+    @nest .dropbutton-wrapper.open & {
+      transform: translateY(25%) rotate(225deg);
+    }
+  }
+
+  &:dir(rtl) {
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+  }
+}
+
+/* This is the first <li> element in the list of actions. */
+.dropbutton-action {
+  &:first-child {
+    margin-inline-end: 2px;
+    border: solid 1px transparent;
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
+    background: var(--dropbutton--active-bg-color);
+
+    &:dir(rtl) {
+      border: solid 1px transparent;
+      border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
+    }
+  }
+
+  & a {
+    display: flex;
+    align-items: center;
+    margin-bottom: -2px; /* Account for borders. */
+    padding: 0 9px;
+    text-decoration: none;
+    color: var(--dropbutton--text-color);
+    font-weight: 600;
+
+    &:hover {
+      color: inherit;
+    }
+
+    &:focus {
+      outline: solid 2px var(--dropbutton--outline-color);
+      outline-offset: -1px; /* Overlap parent container by 1px. */
+    }
+  }
+
+  /* Special rules if there is only one action. */
+  @nest .dropbutton-single & {
+    &:first-child {
+      border-right: solid 1px transparent; /* LTR */
+      border-radius: var(--dropbutton--border-radius);
+
+      &:dir(rtl) {
+        border: solid 1px transparent;
+      }
+    }
+
+    & a {
+      justify-content: center;
+    }
+  }
+}
+
+/* These are the <li> elements other than the first. */
+.secondary-action {
+  visibility: hidden;
+  width: calc(100% + var(--dropbutton--height));
+  border-right: 1px solid var(--dropbutton--active-bg-color);
+  border-left: 1px solid var(--dropbutton--active-bg-color);
+  background: var(--dropbutton--secondary-bg-color);
+
+  &:last-child {
+    border-bottom: 1px solid var(--dropbutton--active-bg-color);
+  }
+
+  & a:hover {
+    color: var(--dropbutton--text-hover-color);
+  }
+
+  @nest .dropbutton-wrapper.open & {
+    visibility: visible;
+  }
+}

css/components/embedded-media.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
+ * Embedded Media.
+ */
+
+figure {
+  background: var(--color--gray-100);
+}
+
+figcaption {
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp0-5);
+  padding-inline-end: var(--sp0-5);
+  color: var(--color-text-neutral-medium);
+  background: var(--color--gray-100);
+  font-family: var(--font-serif);
+  font-size: 0.875rem;
+  font-style: italic;
+  line-height: var(--sp);
+}
+
+@media (min-width: 31.25rem) {
+  figcaption {
+    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 (min-width: 43.75rem) {
+  .align-right {
+    float: right; /* LTR */
+    max-width: 50%;
+    margin-block-start: var(--sp);
+    margin-block-end: var(--sp);
+    margin-inline-start: var(--sp);
+    margin-inline-end: 0;
+
+    /**
+     * Chromium and Webkit do not yet support flow relative logical properties,
+     * such as float: inline-end. However, PostCSS Logical does not compile this
+     * value, so we accommodate by not using these.
+     *
+     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+     * @see https://github.com/csstools/postcss-plugins/issues/632
+     */
+  }
+  [dir="rtl"] .align-right {
+    float: left;
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+
+/* @todo this can be simplified. */
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+@media (min-width: 75rem) {
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+@media (min-width: 90rem) {
+  .layout--content-narrow .align-right,
+  .layout--pass--content-narrow > * .align-right {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+.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 (min-width: 43.75rem) {
+  .align-left {
+    float: left; /* LTR */
+    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. */
+
+    /**
+     * Chromium and Webkit do not yet support flow relative logical properties,
+     * such as float: inline-end. However, PostCSS Logical does not compile this
+     * value, so we accommodate by not using these.
+     *
+     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+     * @see https://github.com/csstools/postcss-plugins/issues/632
+     */
+  }
+  [dir="rtl"] .align-left {
+    float: right;
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+
+@media (min-width: 43.75rem) {
+  .layout--content-narrow .align-left,
+  .layout--pass--content-narrow > * .align-left {
+    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+.align-center img,
+.align-center video,
+.align-center audio {
+  margin-inline: auto;
+}
+
+.media-oembed-content {
+  display: block;
+  max-width: 100%;
+}

css/components/embedded-media.pcss.css

@@ -0,0 +1,127 @@
+/**
+ * @file
+ * Embedded Media.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+figure {
+  background: var(--color--gray-100);
+}
+
+figcaption {
+  padding-block: var(--sp0-5);
+  padding-inline-start: var(--sp0-5);
+  padding-inline-end: var(--sp0-5);
+  color: var(--color-text-neutral-medium);
+  background: var(--color--gray-100);
+  font-family: var(--font-serif);
+  font-size: 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: right; /* LTR */
+    max-width: 50%;
+    margin-block-start: var(--sp);
+    margin-block-end: var(--sp);
+    margin-inline-start: var(--sp);
+    margin-inline-end: 0;
+
+    /**
+     * Chromium and Webkit do not yet support flow relative logical properties,
+     * such as float: inline-end. However, PostCSS Logical does not compile this
+     * value, so we accommodate by not using these.
+     *
+     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+     * @see https://github.com/csstools/postcss-plugins/issues/632
+     */
+    &:dir(rtl) {
+      float: left;
+    }
+  }
+}
+
+/* Pull out of grid if nested in content narrow layout. */
+.layout--content-narrow .align-right,
+.layout--pass--content-narrow > * .align-right {
+  /* @todo this can be simplified. */
+  @media (--grid-md) {
+    margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+
+  @media (--lg) {
+    margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+
+  @media (--nav) {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+
+  @media (--grid-max) {
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
+  }
+}
+
+.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: left; /* LTR */
+    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. */
+
+    /**
+     * Chromium and Webkit do not yet support flow relative logical properties,
+     * such as float: inline-end. However, PostCSS Logical does not compile this
+     * value, so we accommodate by not using these.
+     *
+     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+     * @see https://github.com/csstools/postcss-plugins/issues/632
+     */
+    &:dir(rtl) {
+      float: right;
+    }
+  }
+}
+
+/* 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) + var(--grid-gap))));
+  }
+}
+
+.align-center img,
+.align-center video,
+.align-center audio {
+  margin-inline: auto;
+}
+
+.media-oembed-content {
+  display: block;
+  max-width: 100%;
+}

css/components/feed.css

@@ -0,0 +1,47 @@
+/*
+ * 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;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-neutral-soft);
+}
+
+.feed-icon:hover {
+  color: var(--color--primary-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--primary-50);
+}
+
+.feed-icon__icon svg {
+  vertical-align: top;
+  fill: currentColor;
+}

css/components/feed.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * @file
+ * RSS feed.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.feed-icon {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-text-neutral-soft);
+
+  &:hover {
+    color: var(--color--primary-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--primary-50);
+
+  & svg {
+    vertical-align: top;
+    fill: currentColor;
+  }
+}

css/components/field.css

@@ -0,0 +1,62 @@
+/*
+ * 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-block-end: var(--sp2);
+}
+
+.node--view-mode-teaser .field {
+  margin-block-end: var(--sp);
+}
+
+.node--view-mode-teaser .field:last-child {
+  margin-block-end: 0;
+}
+
+@media (min-width: 62.5rem) {
+  .node--view-mode-teaser .field {
+    margin-block-end: var(--sp2);
+  }
+}
+
+.field__label {
+  font-weight: bold;
+}
+
+.field--label-inline .field__label,
+.field--label-inline .field__items {
+  float: left; /* LTR */
+
+  /**
+   * Chromium and Webkit do not yet support flow relative logical properties,
+   * such as float: inline-end. However, PostCSS Logical does not compile this
+   * value, so we accommodate by not using these.
+   *
+   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+   * @see https://github.com/csstools/postcss-plugins/issues/632
+   */
+}
+
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  float: right;
+}
+
+.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: ":";
+}

css/components/field.pcss.css

@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+@import "../base/media-queries.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: left; /* LTR */
+
+  /**
+   * Chromium and Webkit do not yet support flow relative logical properties,
+   * such as float: inline-end. However, PostCSS Logical does not compile this
+   * value, so we accommodate by not using these.
+   *
+   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+   * @see https://github.com/csstools/postcss-plugins/issues/632
+   */
+  &:dir(rtl) {
+    float: right;
+  }
+}
+
+.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: ":";
+}

css/components/fieldset.css

@@ -0,0 +1,136 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Fieldset.
+ */
+
+.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-45);
+  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;
+}
+
+.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-45);
+  font-size: var(--font-size-l);
+  font-weight: 700;
+  line-height: var(--line-height-base);
+}
+
+.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-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-text-neutral-soft);
+}
+
+.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) {
+  .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 {
+  margin-block-start: 0;
+  padding-block: var(--sp);
+  padding-inline-start: var(--sp);
+}
+
+.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
+  border: solid 2px var(--color--gray-45);
+  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;
+}

css/components/fieldset.pcss.css

@@ -0,0 +1,133 @@
+/**
+ * @file
+ * Fieldset.
+ */
+
+@import "../base/media-queries.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-45);
+  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;
+}
+
+.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-45);
+  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-text-neutral-soft);
+}
+
+.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 {
+  margin-block-start: 0;
+  padding-block: var(--sp);
+  padding-inline-start: var(--sp);
+}
+
+.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
+  border: solid 2px var(--color--gray-45);
+  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;
+}

css/components/footer.css

@@ -0,0 +1,45 @@
+/*
+ * 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: var(--color--gray-65);
+  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
+}
+
+.site-footer .menu {
+  margin-inline-start: 0;
+  list-style: none;
+}
+
+.site-footer .menu ul {
+  margin-inline-start: var(--sp);
+}
+
+.site-footer .menu li {
+  margin-block-end: var(--sp0-5);
+}
+
+.site-footer a {
+  color: inherit;
+}
+
+.site-footer a:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .site-footer {
+    border-inline-start: solid var(--content-left) var(--color--black);
+  }
+}

css/components/footer.pcss.css

@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Footer regions.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.site-footer {
+  position: relative; /* stack above left social bar */
+  color: var(--color--gray-65);
+  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);
+
+  & .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);
+  }
+}

css/components/form-boolean.css

@@ -0,0 +1,115 @@
+/*
+ * 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: var(--sp1-5);
+  height: var(--sp1-5);
+  margin: 0;
+  vertical-align: middle;
+  border: 1px solid var(--color--gray-60);
+  border-radius: 0.1875rem;
+  background-color: var(--color--white);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: var(--sp1) var(--sp1);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
+
+@supports (outline-style: double) {
+  input[type="checkbox"]:focus,
+  input[type="radio"]:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
+  }
+}
+
+input[type="checkbox"]:hover,
+input[type="radio"]:hover {
+  border-color: var(--color--primary-60);
+}
+
+input[type="checkbox"][disabled],
+input[type="radio"][disabled] {
+  background-color: var(--color--gray-100);
+}
+
+input[type="checkbox"][disabled]:hover,
+input[type="radio"][disabled]:hover {
+  border-color: var(--color--gray-60);
+}
+
+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 var(--color--red);
+}
+
+input.error[type="checkbox"]:focus,
+input.error[type="radio"]:focus {
+  outline-color: var(--color--red);
+  outline-offset: -2px;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  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%;
+}
+
+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: var(--color--primary-50);
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
+}
+
+input.error[type="radio"]:focus {
+  outline-color: transparent;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
+}
+
+.form-type-boolean {
+  margin-block: var(--sp1);
+}

css/components/form-boolean.pcss.css

@@ -0,0 +1,99 @@
+/**
+ * @file
+ * Checkbox and radio input elements.
+ */
+
+@import "../base/media-queries.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-60);
+  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--primary-50);
+    outline: solid 2px var(--color--primary-50);
+
+    @supports (outline-style: double) {
+      border-width: 1px;
+      outline-width: 6px;
+      outline-style: double;
+      outline-offset: -1px;
+    }
+  }
+
+  &:hover {
+    border-color: var(--color--primary-60);
+  }
+
+  &[disabled] {
+    background-color: var(--color--gray-100);
+
+    &:hover {
+      border-color: var(--color--gray-60);
+    }
+
+    &:checked {
+      border-width: 1px;
+    }
+  }
+
+  &:checked {
+    border-width: 2px;
+  }
+
+  &.error {
+    border: solid 2px var(--color--red);
+
+    &:focus {
+      outline-color: var(--color--red);
+      outline-offset: -2px;
+    }
+  }
+
+  & + 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--primary-50);
+    outline-color: transparent;
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-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);
+}

css/components/form-select.css

@@ -0,0 +1,99 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Select input elements.
+ */
+
+:root {
+  --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
+}
+
+select {
+  max-width: 100%;
+  height: var(--sp3);
+  padding-block: 0;
+  padding-inline-start: var(--sp);
+  padding-inline-end: var(--sp3);
+  color: var(--color-text-neutral-loud);
+  border: 1px solid var(--color--gray-60);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  background-image: var(--form-element-select-icon);
+  background-repeat: no-repeat;
+  background-position: right var(--sp) center; /* LTR */
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select:focus {
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
+
+@supports (outline-style: double) {
+  select:focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
+  }
+}
+
+select[disabled] {
+  color: var(--color--gray-60);
+  background-color: var(--color--gray-100);
+}
+
+select.error {
+  border: solid 2px var(--color--red);
+}
+
+select.error:focus {
+  outline-color: var(--color--red);
+}
+
+select[multiple] {
+  height: auto;
+  padding: var(--sp0-5);
+  background-image: none;
+  line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
+}
+
+select[multiple] option {
+  padding: var(--sp0-5);
+}
+
+select.form-element--small {
+  height: var(--sp2-5);
+}
+
+/* Necessary to show chevron in forced colors mode in modern browsers. */
+
+@media (forced-colors: active) {
+  select {
+    padding-inline-end: var(--sp);
+    background-image: none;
+    -webkit-appearance: listbox;
+    appearance: listbox; /* Default <select> appearance value for modern browsers. */
+
+    /* 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;
+    }
+  }
+}
+
+[dir="rtl"] select {
+  background-position: left var(--sp) center;
+}

css/components/form-select.pcss.css

@@ -0,0 +1,84 @@
+/**
+ * @file
+ * Select input elements.
+ */
+
+@import "../base/media-queries.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-text-neutral-loud);
+  border: 1px solid var(--color--gray-60);
+  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--primary-50);
+    outline: solid 2px var(--color--primary-50);
+
+    @supports (outline-style: double) {
+      border-width: 1px;
+      outline-width: 6px;
+      outline-style: double;
+      outline-offset: -1px;
+    }
+  }
+
+  &[disabled] {
+    color: var(--color--gray-60);
+    background-color: var(--color--gray-100);
+  }
+
+  &.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;
+    }
+  }
+}
+
+[dir="rtl"] select {
+  background-position: left var(--sp) center;
+}

css/components/form-text.css

@@ -0,0 +1,114 @@
+/*
+ * 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: var(--sp3);
+  padding: 0 var(--sp);
+  color: var(--color-text-neutral-loud);
+  border: 1px solid var(--color--gray-60);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+  border: solid 2px var(--color--primary-50);
+  outline: solid 2px var(--color--primary-50);
+}
+
+@supports (outline-style: double) {
+  :is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+    border-width: 1px;
+    outline-width: 6px;
+    outline-style: double;
+    outline-offset: -1px;
+  }
+}
+
+[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  color: var(--color--gray-60);
+  background-color: var(--color--gray-100);
+}
+
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  border: solid 2px var(--color--red);
+}
+
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus {
+  outline-color: var(--color--red);
+  outline-offset: -2px;
+}
+
+.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main {
+  border: solid 2px var(--color--red);
+}
+
+.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) {
+  min-height: var(--sp2-5);
+}
+
+@media (min-width: 31.25rem) {
+  [type="color"],
+  [type="date"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="file"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"],
+  textarea {
+    width: auto;
+  }
+}
+
+/* Ensure that date field isn't larger than other fields. */
+
+[type="date"]::-webkit-datetime-edit-fields-wrapper {
+  padding-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;
+}

css/components/form-text.pcss.css

@@ -0,0 +1,90 @@
+/**
+ * @file
+ * Text input elements.
+ */
+
+@import "../base/media-queries.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-text-neutral-loud);
+  border: 1px solid var(--color--gray-60);
+  border-radius: var(--border-radius);
+  background-color: var(--color--white);
+  font-family: inherit;
+  font-size: inherit;
+  appearance: none;
+
+  &:focus {
+    border: solid 2px var(--color--primary-50);
+    outline: solid 2px var(--color--primary-50);
+
+    @supports (outline-style: double) {
+      border-width: 1px;
+      outline-width: 6px;
+      outline-style: double;
+      outline-offset: -1px;
+    }
+  }
+
+  &[disabled] {
+    color: var(--color--gray-60);
+    background-color: var(--color--gray-100);
+  }
+
+  &.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;
+}

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: var(--sp8);
+  padding: var(--sp);
+}

css/components/form-textarea.pcss.css

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

css/components/form.css

@@ -0,0 +1,212 @@
+/*
+ * 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.
+ */
+
+::placeholder {
+  color: var(--color--gray-60);
+}
+
+/**
+ * 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 core.
+ */
+
+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-70);
+}
+
+/* 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) {
+  .form-item__label.form-required::after,
+  .fieldset__label.form-required::after,
+  .required-mark::after {
+    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+  }
+}
+
+/**
+ * Form item description.
+ */
+
+.form-item__description {
+  margin-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) {
+  .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-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--inline .form-item__label {
+  margin: 0;
+}
+
+.form--inline .form-actions {
+  margin-top: var(--sp1-5);
+}

css/components/form.pcss.css

@@ -0,0 +1,193 @@
+/**
+ * @file
+ * Main form and form item styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+::placeholder {
+  color: var(--color--gray-60);
+}
+
+/**
+ * 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 core.
+ */
+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-70);
+}
+
+/* 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);
+  }
+}

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: var(--color-text-primary-medium);
+  font-weight: bold;
+}

css/components/forum.pcss.css

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

css/components/header-buttons-mobile.css

@@ -0,0 +1,40 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Header Mobile Buttons.
+ */
+
+.mobile-buttons {
+  margin-block-start: var(--sp0-5);
+  margin-inline-start: auto;
+}
+
+@media (min-width: 31.25rem) {
+  .mobile-buttons {
+    margin-block-start: var(--sp2);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .mobile-buttons {
+    margin-block-start: var(--sp4);
+  }
+}
+
+@media (min-width: 75rem) {
+  .mobile-buttons {
+    margin-block-start: var(--sp6);
+  }
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .mobile-buttons {
+    display: none;
+  }
+}

css/components/header-buttons-mobile.pcss.css

@@ -0,0 +1,29 @@
+/**
+ * @file
+ * Header Mobile Buttons.
+ */
+
+@import "../base/media-queries.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;
+  }
+}

css/components/header-navigation.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
+ * Navigation in header.
+ */
+
+.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: max-content;
+  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) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
+  background-color: var(--color--white);
+  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
+}
+
+.header-nav.is-active {
+  visibility: visible;
+  transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */
+}
+
+[dir="rtl"] .header-nav.is-active {
+  transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
+}
+
+@media (min-width: 31.25rem) {
+  .header-nav {
+    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .header-nav {
+    padding-block-end: var(--sp3);
+    padding-inline-start: var(--sp3);
+    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .header-nav {
+    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;
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .header-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;
+  }
+}
+
+@media (min-width: 75rem) {
+  body.is-always-mobile-nav .header-nav {
+    overflow: auto;
+    max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
+    padding-inline-end: var(--sp);
+    transition: transform 0.2s, visibility 0.2s;
+    border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
+  }
+}
+
+@media (min-width: 90rem) {
+  body.is-always-mobile-nav .header-nav {
+    max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
+    padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
+  }
+}
+
+.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--gray-5);
+}
+
+@media (forced-colors: active) {
+  .header-nav-overlay {
+    background: canvastext;
+  }
+}
+
+.is-overlay-active .header-nav-overlay {
+  display: block;
+}

css/components/header-navigation.pcss.css

@@ -0,0 +1,128 @@
+/**
+ * @file
+ * Navigation in header.
+ */
+
+@import "../base/media-queries.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: max-content;
+  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) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
+  background-color: var(--color--white);
+  box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
+
+  &.is-active {
+    visibility: visible;
+    transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */
+
+    &:dir(rtl) {
+      transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
+    }
+  }
+
+  @media (--sm) {
+    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
+  }
+
+  @media (--md) {
+    padding-block-end: var(--sp3);
+    padding-inline-start: var(--sp3);
+    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
+  }
+
+  @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;
+}
+
+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 {
+  & .header-nav {
+    @media (--nav) {
+      overflow: auto;
+      max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
+      padding-inline-end: var(--sp);
+      transition: transform 0.2s, visibility 0.2s;
+      border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
+    }
+
+    @media (--grid-max) {
+      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
+      padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
+    }
+  }
+}
+
+.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--gray-5);
+
+  @media (forced-colors: active) {
+    background: canvastext;
+  }
+
+  @nest .is-overlay-active & {
+    display: block;
+  }
+}

css/components/header-search-narrow.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
+ * Header Search Narrow Block.
+ */
+
+.block-search-narrow {
+  margin-inline: calc(-1 * var(--sp));
+  margin-block-end: var(--sp2);
+  background: var(--color--black);
+}
+
+.block-search-narrow .search-block-form {
+  display: flex;
+}
+
+.block-search-narrow .form-item {
+  flex-grow: 1;
+  margin: 0;
+}
+
+.block-search-narrow .form-actions {
+  margin: 0;
+}
+
+.block-search-narrow 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--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 0.3125rem;
+  box-shadow: none;
+  font-family: var(--font-serif);
+  font-size: 1rem;
+  -webkit-appearance: none;
+}
+
+.block-search-narrow input[type="search"]:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  background-size: 100% 0.3125rem;
+}
+
+@media (min-width: 43.75rem) {
+  .block-search-narrow input[type="search"] {
+    height: calc(4 * var(--sp));
+    padding-inline-start: var(--sp2);
+    padding-inline-end: var(--sp2);
+  }
+}
+
+.block-search-narrow .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>.
+    */
+}
+
+.block-search-narrow .search-form__submit .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("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto;
+}
+
+.block-search-narrow .search-form__submit .icon--search::after {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left; /* LTR */
+  border-block-start: solid 0.3125rem var(--color--primary-50);
+}
+
+@media (forced-colors: active) {
+  .block-search-narrow .search-form__submit .icon--search {
+    background: buttontext;
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+}
+
+.block-search-narrow .search-form__submit: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: var(--sp0-5);
+  }
+
+  .block-search-narrow .search-form__submit:focus span::after {
+    content: none;
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .block-search-narrow .search-form__submit {
+    width: 5rem;
+  }
+}
+
+@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) {
+  .block-search-narrow {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .block-search-narrow {
+    display: none;
+  }
+}
+
+[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;
+}

css/components/header-search-narrow.pcss.css

@@ -0,0 +1,173 @@
+/**
+ * @file
+ * Header Search Narrow Block.
+ */
+
+@import "../base/media-queries.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--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+    background-repeat: no-repeat;
+    background-position: bottom left; /* LTR */
+    background-size: 0% 5px;
+    box-shadow: none;
+    font-family: var(--font-serif);
+    font-size: 16px;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+      background-size: 100% 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--primary-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;
+  }
+}

css/components/header-search-wide.css

@@ -0,0 +1,288 @@
+/*
+ * 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;
+}
+
+.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: calc(-1 * var(--content-left));
+  display: none;
+  visibility: hidden;
+  overflow: hidden;
+  width: calc(100% + var(--content-left));
+  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-20);
+  background: var(--color--black);
+}
+
+.block-search-wide__wrapper.is-active {
+  visibility: visible;
+  max-height: var(--sp8);
+}
+
+.block-search-wide__wrapper form {
+  display: flex;
+  grid-column: 1 / 14;
+}
+
+.block-search-wide__wrapper input[type="search"] {
+  width: calc(100% + var(--sp2));
+  height: var(--sp8);
+  padding-block: 0;
+  padding-inline-start: var(--sp12);
+  padding-inline-end: 0;
+  transition: background-size 0.4s;
+  color: var(--color--white);
+  border: solid 1px transparent;
+  box-shadow: none;
+  font-family: var(--font-serif);
+  font-size: 2rem;
+  -webkit-appearance: none;
+}
+
+.block-search-wide__wrapper input[type="search"]:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+}
+
+.block-search-wide__wrapper .form-item-keys {
+  flex-grow: 1;
+  margin: 0;
+}
+
+.block-search-wide__wrapper .form-actions {
+  display: flex;
+  margin: 0;
+}
+
+.block-search-wide__wrapper .search-form__submit {
+  position: relative;
+  overflow: hidden;
+  align-self: stretch;
+  width: 6.25rem;
+  height: auto;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+
+  /*
+      When in Windows high contrast mode, FF will not output either background
+      images or SVGs that are nested directly within a <button> element, so we add a <span>.
+    */
+}
+
+.block-search-wide__wrapper .search-form__submit .icon--search {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: block;
+  width: 1.5rem; /* Width of the SVG background image. */
+  height: 100%;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e  %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.block-search-wide__wrapper .search-form__submit .icon--search::after {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left;
+  border-block-start: solid var(--sp0-5) var(--color--primary-50);
+}
+
+.block-search-wide__wrapper .search-form__submit:focus {
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+
+.block-search-wide__wrapper .search-form__submit:focus span::after {
+  transform: scaleX(1);
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .block-search-wide__wrapper .search-form__submit:focus {
+    border-bottom-width: var(--sp0-5);
+  }
+
+  .block-search-wide__wrapper .search-form__submit:focus span::after {
+    content: none;
+  }
+}
+
+@media screen and (-ms-high-contrast: active) {
+  /* Edge's high contrast does show the background image, so we hide it. */
+  .block-search-wide__wrapper .search-form__submit .icon--search {
+    display: none;
+  }
+}
+
+.block-search-wide__container {
+  max-width: var(--max-width);
+  padding-inline-end: var(--sp2);
+}
+
+.block-search-wide__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-col-count), 1fr);
+  grid-column-gap: var(--grid-gap);
+}
+
+/* Override specificity from container-inline.module.css */
+
+.container-inline .block-search-wide__container {
+  display: block;
+}
+
+.container-inline .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-text-neutral-loud); /* 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: var(--sp3);
+  content: "";
+  transform: translate(-50%, -50%);
+  border: solid 2px var(--color--primary-50);
+  border-radius: 0.25rem;
+}
+
+.block-search-wide__button[aria-expanded="true"] {
+  background: var(--color--black);
+}
+
+.block-search-wide__button[aria-expanded="true"]:focus::after {
+  border-color: var(--color--white);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--sp1-5);
+  height: 0;
+  content: "";
+  border-block-start: solid 2px var(--color--white);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.block-search-wide__button[aria-expanded="true"] svg {
+  display: none;
+}
+
+.block-search-wide__button svg {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
+@media (forced-colors: active) {
+  .block-search-wide__button {
+    background: ButtonFace;
+  }
+
+  .block-search-wide__button 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--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 0.625rem;
+}
+
+[dir] .block-search-wide__wrapper input[type="search"]:focus {
+  background-size: 100% var(--sp0-5);
+}
+
+[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;
+  }
+}

css/components/header-search-wide.pcss.css

@@ -0,0 +1,282 @@
+/**
+ * @file
+ * Header Search Wide Block.
+ */
+
+@import "../base/media-queries.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: calc(-1 * var(--content-left));
+  display: none;
+  visibility: hidden;
+  overflow: hidden;
+  width: calc(100% + var(--content-left));
+  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-20);
+  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;
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+    }
+  }
+
+  & .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--primary-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) {
+      /* 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), 1fr);
+  grid-column-gap: var(--grid-gap);
+}
+
+/* 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-text-neutral-loud); /* 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--primary-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--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 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;
+    }
+  }
+}

css/components/header-site-branding.css

@@ -0,0 +1,146 @@
+/*
+ * 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.
+ */
+
+.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)); /* Span minimum of 2 column widths. */
+  min-height: var(--sp3);
+  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
+  padding-block: 0 var(--sp0-5);
+  padding-inline-start: var(--container-padding);
+  padding-inline-end: var(--container-padding);
+  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
+}
+
+@media (min-width: 31.25rem) {
+  .site-branding {
+    min-height: var(--sp4);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .site-branding {
+    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
+    min-height: var(--sp6);
+    padding-block-end: var(--sp);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .site-branding {
+    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
+  }
+}
+
+@media (min-width: 75rem) {
+  .site-branding {
+    min-height: var(--site-header-height-wide);
+    margin-inline-start: calc(-1 * var(--container-padding));
+    padding-block: 0;
+  }
+}
+
+[dir="rtl"] .site-branding {
+  background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
+}
+
+.site-branding--bg-gray {
+  background: var(--color--gray-100);
+}
+
+.site-branding--bg-white {
+  background: var(--color--white);
+}
+
+.site-branding__inner {
+  display: flex;
+  align-items: center;
+}
+
+.site-branding__inner a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+@media (min-width: 75rem) {
+  .site-branding__inner {
+    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%;
+}
+
+.site-branding__logo img {
+  width: auto;
+  max-width: 100%;
+  max-height: var(--sp2);
+}
+
+@media (min-width: 31.25rem) {
+  .site-branding__logo img {
+    max-height: var(--sp3);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .site-branding__logo img {
+    max-height: var(--sp4);
+  }
+}
+
+@media (min-width: 75rem) {
+  .site-branding__logo img {
+    max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
+  }
+}
+
+.site-branding__text {
+  color: var(--color--white);
+  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: var(--sp2);
+  }
+}
+
+.site-branding--bg-gray .site-branding__text,
+.site-branding--bg-white .site-branding__text {
+  color: var(--color--primary-50);
+}
+
+.site-branding__logo + .site-branding__text {
+  margin-inline-start: 0.75rem;
+}

css/components/header-site-branding.pcss.css

@@ -0,0 +1,120 @@
+/**
+ * @file
+ * Site branding in header.
+ */
+
+@import "../base/media-queries.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)); /* Span minimum of 2 column widths. */
+  min-height: var(--sp3);
+  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
+  padding-block: 0 var(--sp0-5);
+  padding-inline-start: var(--container-padding);
+  padding-inline-end: var(--container-padding);
+  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
+
+  @media (--sm) {
+    min-height: var(--sp4);
+  }
+
+  @media (--md) {
+    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
+    min-height: var(--sp6);
+    padding-block-end: var(--sp);
+  }
+
+  @media (--lg) {
+    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
+  }
+
+  @media (--nav) {
+    min-height: var(--site-header-height-wide);
+    margin-inline-start: calc(-1 * var(--container-padding));
+    padding-block: 0;
+  }
+}
+
+[dir="rtl"] .site-branding {
+  background-image: linear-gradient(-160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
+}
+
+.site-branding--bg-gray {
+  background: var(--color--gray-100);
+}
+
+.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--primary-50);
+}
+
+.site-branding__logo + .site-branding__text {
+  margin-inline-start: 12px;
+}

css/components/header-sticky-toggle.css

@@ -0,0 +1,96 @@
+/*
+ * 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: var(--content-left);
+    height: var(--sp6);
+    pointer-events: none;
+    opacity: 0;
+    border: 0;
+    outline: 0;
+    background-color: var(--color--primary-50);
+  }
+
+  .sticky-header-toggle:focus {
+    cursor: pointer;
+    pointer-events: auto;
+    opacity: 1;
+    outline: solid 2px var(--color--white);
+    outline-offset: -4px;
+  }
+}
+
+@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 {
+  --icon-bar-height: 0.1875rem;
+  --icon-bar-space: 0.4375rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: var(--sp2);
+  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
+  /* Height = 3 bars + 2 spaces */
+  transition: opacity 0.2s;
+  pointer-events: none;
+  transform-style: preserve-3d;
+}
+
+.sticky-header-toggle__icon > span {
+  display: block;
+  width: 100%;
+  height: var(--icon-bar-height);
+  transition: transform 0.2s;
+  transform-origin: center;
+  background-color: var(--color--white);
+}
+
+.is-fixed .sticky-header-toggle {
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 1;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
+  transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
+  opacity: 0;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
+  transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
+}

css/components/header-sticky-toggle.pcss.css

@@ -0,0 +1,91 @@
+/**
+ * @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/media-queries.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--primary-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 {
+  --icon-bar-height: 3px;
+  --icon-bar-space: 7px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: var(--sp2);
+  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
+  /* Height = 3 bars + 2 spaces */
+  transition: opacity 0.2s;
+  pointer-events: none;
+  transform-style: preserve-3d;
+
+  & > span {
+    display: block;
+    width: 100%;
+    height: var(--icon-bar-height);
+    transition: transform 0.2s;
+    transform-origin: center;
+    background-color: var(--color--white);
+  }
+}
+
+.is-fixed .sticky-header-toggle {
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 1;
+}
+
+[aria-checked="true"] .sticky-header-toggle__icon {
+  & > span:nth-child(1) {
+    transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
+  }
+
+  & > span:nth-child(2) {
+    opacity: 0;
+  }
+
+  & > span:nth-child(3) {
+    transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
+  }
+}

css/components/hero.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
+ * Main Hero.
+ */
+
+.hero__content {
+  grid-column: 1 / 7;
+}
+
+@media (min-width: 43.75rem) {
+  .hero__content {
+    /* 700px */
+    grid-column: 3 / 13;
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .hero__content {
+    grid-column: 3 / 11;
+  }
+}
+
+.hero__img {
+  grid-column: 1 / 7;
+  margin-block-start: var(--sp2);
+  margin-block-end: var(--sp2);
+}
+
+.hero__img img {
+  width: 100%;
+}
+
+@media (min-width: 31.25rem) {
+  .hero__img {
+    margin-block-start: var(--sp3);
+    margin-block-end: var(--sp3);
+  }
+}
+
+@media (min-width: 43.75rem) {
+  .hero__img {
+    grid-column: 1 / 15;
+    margin-block-start: var(--sp4);
+    margin-block-end: var(--sp4);
+  }
+}
+
+@media (min-width: 62.5rem) {
+  .hero__img {
+    grid-column: 2 / 14;
+  }
+}

css/components/hero.pcss.css

@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Main Hero.
+ */
+
+@import "../base/media-queries.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;
+  }
+}

css/components/links.css

@@ -0,0 +1,33 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Links component.
+ */
+
+.links.inline {
+  margin-inline-start: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
+}
+
+.links.inline > * {
+  display: inline;
+}
+
+.links.inline > *:not(:last-child) {
+  padding-inline-end: 1em;
+}
+
+@media (min-width: 43.75rem) {
+  .node--type-book .links.inline {
+    text-align: end;
+  }
+}

css/components/links.pcss.css

@@ -0,0 +1,28 @@
+/**
+ * @file
+ * Links component.
+ */
+
+@import "../base/media-queries.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;
+  }
+}

css/components/maintenance-page.css

@@ -0,0 +1,31 @@
+/*
+ * 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: var(--content-left);
+  }
+}
+
+.maintenance-page .main-content {
+  min-height: 80vh;
+}
+
+.maintenance-page-icon {
+  display: block;
+  margin-block: var(--sp3);
+}
+
+.maintenance-page-icon path {
+  fill: var(--color--primary-50);
+}

css/components/maintenance-page.pcss.css

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Maintenance page.
+ */
+
+@import "../base/media-queries.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);
+
+  & path {
+    fill: var(--color--primary-50);
+  }
+}