.
+ */
+ & .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;
+ }
+ }
+}
diff --git a/css_bk/components/pcss/header-site-branding.pcss.css b/css_bk/components/pcss/header-site-branding.pcss.css
new file mode 100755
index 0000000..be075f8
--- /dev/null
+++ b/css_bk/components/pcss/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;
+}
diff --git a/css_bk/components/pcss/header-sticky-toggle.pcss.css b/css_bk/components/pcss/header-sticky-toggle.pcss.css
new file mode 100755
index 0000000..de527ec
--- /dev/null
+++ b/css_bk/components/pcss/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);
+ }
+}
diff --git a/css_bk/components/pcss/hero.pcss.css b/css_bk/components/pcss/hero.pcss.css
new file mode 100755
index 0000000..34ec1f4
--- /dev/null
+++ b/css_bk/components/pcss/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;
+ }
+}
diff --git a/css_bk/components/pcss/links.pcss.css b/css_bk/components/pcss/links.pcss.css
new file mode 100755
index 0000000..1848b79
--- /dev/null
+++ b/css_bk/components/pcss/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;
+ }
+}
diff --git a/css_bk/components/pcss/maintenance-page.pcss.css b/css_bk/components/pcss/maintenance-page.pcss.css
new file mode 100755
index 0000000..9d39b6a
--- /dev/null
+++ b/css_bk/components/pcss/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);
+ }
+}
diff --git a/css_bk/components/pcss/messages.pcss.css b/css_bk/components/pcss/messages.pcss.css
new file mode 100755
index 0000000..cb2538b
--- /dev/null
+++ b/css_bk/components/pcss/messages.pcss.css
@@ -0,0 +1,159 @@
+/**
+ * @file
+ * Messages.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+:root {
+ --messages-icon-size: 32px;
+}
+
+.messages-list {
+ margin-block: var(--sp1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+}
+
+.messages {
+ min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
+ padding-block: var(--sp1);
+ padding-inline-start: var(--sp1-5);
+ padding-inline-end: var(--sp1-5);
+ color: var(--color--white);
+ outline: solid 1px transparent;
+ background-color: var(--color--gray-5);
+
+ & * {
+ color: inherit;
+ }
+
+ /* Additional specificity to override contrib modules. */
+ &.messages-list__item {
+ background-image: none;
+ }
+}
+
+.messages__list {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+}
+
+.messages:not(.hidden) ~ .messages {
+ margin-block-start: var(--sp1);
+}
+
+.messages__item + .messages__item {
+ margin-block-start: var(--sp0-5);
+}
+
+.messages__container {
+ display: flex;
+}
+
+.messages__header {
+ flex-shrink: 0;
+ margin-inline-end: var(--sp1);
+
+ &.no-icon {
+ margin-inline-end: 0;
+ }
+}
+
+.messages__content {
+ overflow: auto; /* Ensure large code blocks can be scrolled to. */
+ flex: 1;
+ padding-block-start: 3px;
+}
+
+.messages__button {
+ flex-shrink: 0;
+ margin-inline-start: var(--sp1);
+ padding-block-start: 3px;
+}
+
+.messages__close {
+ position: relative;
+ width: 25px;
+ height: 25px;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ cursor: pointer;
+ vertical-align: top;
+ border: 0;
+ background: none;
+ appearance: none;
+
+ &::before,
+ &::after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: block;
+ width: 33px;
+ height: 0;
+ content: "";
+ border-top: solid 2px var(--color--gray-60);
+ }
+
+ &::before {
+ transform: translate(-50%, -50%) rotate(45deg);
+ }
+
+ &::after {
+ transform: translate(-50%, -50%) rotate(-45deg);
+ }
+
+ &:hover {
+ &::before,
+ &::after {
+ border-color: var(--color--white);
+ }
+ }
+
+ &:focus {
+ outline: 2px solid var(--color--primary-60);
+ outline-offset: 2px;
+ }
+}
+
+.messages__icon svg {
+ vertical-align: top;
+}
+
+.messages--error .messages__icon svg {
+ fill: var(--color--red);
+}
+
+.messages--warning .messages__icon svg {
+ fill: var(--color--gold);
+}
+
+.messages--status .messages__icon svg {
+ fill: var(--color--green);
+}
+
+.messages--info .messages__icon svg {
+ fill: var(--color--primary-60);
+}
+
+.messages a {
+ color: var(--color--white);
+}
+
+.messages pre {
+ margin: 0;
+}
+
+.js-form-managed-file .messages {
+ margin-block-end: var(--sp1);
+ border-inline-start: solid 6px var(--color--red);
+}
diff --git a/css_bk/components/pcss/node-preview-container.pcss.css b/css_bk/components/pcss/node-preview-container.pcss.css
new file mode 100755
index 0000000..4321c52
--- /dev/null
+++ b/css_bk/components/pcss/node-preview-container.pcss.css
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * Node preview container styling.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.node-preview-container {
+ padding-block: 0;
+ padding-inline-start: var(--sp0-5);
+ padding-inline-end: var(--sp0-5);
+ background: var(--color--white);
+ box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
+}
+
+[dir="rtl"] .node-preview-container {
+ box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
+}
+
+.toolbar-vertical.toolbar-tray-open .node-preview-container {
+ max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width));
+}
+
+.node-preview-form-select {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.node-preview-backlink {
+ margin-block: var(--sp0-5);
+ margin-inline-start: 0;
+ margin-inline-end: auto;
+}
diff --git a/css_bk/components/pcss/node-teaser.pcss.css b/css_bk/components/pcss/node-teaser.pcss.css
new file mode 100755
index 0000000..6f956af
--- /dev/null
+++ b/css_bk/components/pcss/node-teaser.pcss.css
@@ -0,0 +1,116 @@
+/**
+ * @file
+ * Node Teaser specific styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.node--view-mode-teaser {
+ position: relative; /* Anchor after pseudo-element. */
+ margin-block-end: var(--sp1-5);
+
+ &::after {
+ position: absolute;
+ inset-block-end: 0;
+ width: var(--sp3);
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px var(--color--gray-95);
+ }
+
+ & .node__meta {
+ margin-block-end: var(--sp);
+
+ & a {
+ color: var(--color-text-primary-medium);
+ font-weight: bold;
+ }
+ }
+
+ & .node__top-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin: 0;
+
+ @media (--lg) {
+ position: relative; /* Anchor the image */
+ }
+ }
+
+ & .primary-image {
+ flex-shrink: 0;
+ margin: 0;
+ margin-block-end: var(--sp1);
+ margin-inline-end: var(--sp1);
+
+ /* Ensure title does not wrap under image until necessary. */
+ & + .node__title {
+ flex-basis: calc(100% - calc(4.5 * var(--sp)));
+
+ @media (--lg) {
+ flex-basis: auto;
+ }
+ }
+
+ & a {
+ display: block;
+ }
+
+ & img {
+ width: calc(3.5 * var(--sp));
+ height: calc(3.5 * var(--sp));
+ object-fit: cover;
+ border-radius: 50%;
+
+ @media (--lg) {
+ width: var(--grid-col-width);
+ height: var(--grid-col-width);
+ }
+ }
+
+ @media (--lg) {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+ margin: 0;
+ }
+ }
+
+ & .node__title {
+ margin: 0;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-loud);
+ font-size: 24px;
+ line-height: var(--line-height-base);
+
+ @media (--lg) {
+ font-size: var(--sp2);
+ line-height: var(--sp3);
+ }
+ }
+
+ & .field--tag-ref {
+ margin-block-start: var(--sp1);
+ margin-block-end: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ background-color: transparent;
+
+ @media (--lg) {
+ margin-block-start: var(--sp2);
+ }
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp3);
+ }
+}
+
+.views-row:last-child .node--view-mode-teaser {
+ margin-block-end: 0;
+}
diff --git a/css_bk/components/pcss/node.pcss.css b/css_bk/components/pcss/node.pcss.css
new file mode 100755
index 0000000..1f6c7cc
--- /dev/null
+++ b/css_bk/components/pcss/node.pcss.css
@@ -0,0 +1,67 @@
+/**
+ * @file
+ * Node specific styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.node__meta {
+ display: flex;
+ align-items: center;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-soft);
+ font-size: 14px;
+ line-height: var(--sp);
+
+ & a {
+ font-weight: bold;
+ }
+
+ @media (--sm) {
+ margin-block-end: var(--sp2);
+ }
+}
+
+.node__author-image img {
+ width: var(--sp2-5);
+ height: var(--sp2-5);
+ margin-inline-end: var(--sp0-5);
+ object-fit: cover;
+ border-radius: 50%;
+}
+
+.node__title {
+ & a {
+ padding-block-end: 3px;
+ transition: background-size 0.2s, color 0.2s;
+ text-decoration: none;
+ color: var(--color-text-neutral-loud);
+ background-color: transparent;
+ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+ background-repeat: no-repeat;
+ background-position: bottom left; /* LTR */
+ background-size: 0 3px;
+
+ &:hover,
+ &:focus {
+ color: var(--color-text-primary-medium);
+ }
+ }
+}
+
+[dir="rtl"] .node__title {
+ background-position: bottom right;
+}
+
+.node__content {
+ padding-block-end: var(--sp1-5);
+
+ @media (--lg) {
+ padding-block-end: var(--sp3);
+ }
+}
+
+.node--unpublished {
+ /* There is no variable for the color - #fff4f4. */
+ background-color: #fff4f4;
+}
diff --git a/css_bk/components/pcss/page-title.pcss.css b/css_bk/components/pcss/page-title.pcss.css
new file mode 100755
index 0000000..1f66a2c
--- /dev/null
+++ b/css_bk/components/pcss/page-title.pcss.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Page title.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.page-title {
+ /*
+ Necessary to properly display the star icon from core's shortcut
+ module.
+ */
+ display: inline;
+}
diff --git a/css_bk/components/pcss/pager.pcss.css b/css_bk/components/pcss/pager.pcss.css
new file mode 100755
index 0000000..3355f7d
--- /dev/null
+++ b/css_bk/components/pcss/pager.pcss.css
@@ -0,0 +1,82 @@
+/**
+ * @file
+ * Styles for pagination.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.pager__items {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ margin-block: 0;
+ margin-inline-start: 0;
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+ font-weight: bold;
+}
+
+.pager__item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--sp2-5);
+ height: var(--sp2-5);
+ cursor: default;
+ color: var(--color-text-neutral-soft);
+ background-color: var(--color--white);
+
+ @media (--sm) {
+ width: var(--sp3);
+ height: var(--sp3);
+ }
+}
+
+[dir="rtl"] .pager__item--control {
+ transform: scaleX(-1);
+}
+
+.pager__item--active {
+ color: var(--color--white);
+ background-color: var(--color--primary-40);
+}
+
+.pager__item--control {
+ @media (forced-colors: active) {
+ & path {
+ fill: linktext;
+ }
+ }
+}
+
+.pager__link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ text-decoration: none;
+ color: var(--color-text-neutral-soft);
+}
+
+.pager__link:hover {
+ background-color: var(--color--gray-95);
+}
+
+.pager__link:focus {
+ color: var(--color-text-primary-medium);
+ outline: solid 2px currentColor;
+ outline-offset: -2px;
+}
+
+.pager__item svg {
+ display: block;
+ fill: currentColor;
+}
+
+.pager__item--next svg,
+.pager__item--last svg {
+ transform: rotate(180deg);
+}
diff --git a/css_bk/components/pcss/powered-by-block.pcss.css b/css_bk/components/pcss/powered-by-block.pcss.css
new file mode 100755
index 0000000..cda5dc7
--- /dev/null
+++ b/css_bk/components/pcss/powered-by-block.pcss.css
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Powered by block specific styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.block-system-powered-by-block {
+ letter-spacing: 0.02em;
+ font-size: 14px;
+ line-height: var(--sp);
+
+ & a {
+ text-decoration: underline;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+
+ & .drupal-logo {
+ display: inline-block;
+ margin-block-start: calc(-1 * var(--sp) / 4);
+ margin-inline-start: calc(var(--sp) / 4);
+ }
+
+ & svg {
+ width: 0.875rem; /* 14 */
+ height: 1.1875rem; /* 19 */
+ vertical-align: top;
+ fill: currentColor;
+ }
+}
+
+.site-footer .block-system-powered-by-block {
+ & a {
+ color: var(--color--white);
+ }
+
+ & svg path {
+ fill: var(--color--white);
+ }
+}
diff --git a/css_bk/components/pcss/progress.pcss.css b/css_bk/components/pcss/progress.pcss.css
new file mode 100755
index 0000000..d4e058e
--- /dev/null
+++ b/css_bk/components/pcss/progress.pcss.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Progress bar specific styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.progress__track {
+ overflow: hidden;
+ height: var(--sp);
+ border: 1px solid var(--color--primary-40);
+ border-radius: var(--border-radius);
+}
+
+.progress__bar {
+ height: var(--sp);
+ background-color: var(--color--primary-40);
+}
+
+.progress__percentage {
+ margin-inline-start: 1rem;
+}
diff --git a/css_bk/components/pcss/search-results.pcss.css b/css_bk/components/pcss/search-results.pcss.css
new file mode 100755
index 0000000..e2382e0
--- /dev/null
+++ b/css_bk/components/pcss/search-results.pcss.css
@@ -0,0 +1,97 @@
+/**
+ * @file
+ * Search results specific styles.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.search-results {
+ margin-block-end: var(--sp2);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+
+ @media (--md) {
+ margin-block-end: var(--sp3);
+ }
+}
+
+.search-result__title {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ color: var(--color-text-neutral-loud);
+ font-size: 20px;
+ line-height: var(--line-height-base);
+
+ & a {
+ padding-block-end: 3px;
+ transition: background-size 0.2s, color 0.2s;
+ text-decoration: none;
+ background-color: transparent;
+ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+ background-repeat: no-repeat;
+ background-position: bottom left; /* LTR */
+ background-size: 0 3px;
+
+ &:hover {
+ color: var(--color-text-primary-medium);
+ }
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp1);
+ font-size: 30px;
+ line-height: var(--sp3);
+ }
+}
+
+[dir="rtl"] .search-result__title a {
+ background-position: bottom right;
+}
+
+.search-result__snippet {
+ padding-block-end: calc(var(--sp1-5) - 2px);
+
+ @media (--lg) {
+ padding-block-end: var(--sp3);
+ }
+}
+
+.search-result__meta {
+ display: flex;
+ align-items: center;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-soft);
+ font-size: 14px;
+ line-height: var(--sp);
+
+ & a {
+ color: var(--color-text-primary-medium);
+ font-weight: bold;
+ }
+}
+
+.search-results__item {
+ position: relative; /* Anchor after pseudo-element. */
+ margin-block-end: var(--sp1-5);
+
+ &::after {
+ position: absolute;
+ inset-block-end: 0;
+ width: var(--sp3);
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px var(--color--gray-95);
+ }
+
+ &:last-child {
+ margin-block-end: 0;
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/components/pcss/site-header.pcss.css b/css_bk/components/pcss/site-header.pcss.css
new file mode 100755
index 0000000..1ab7251
--- /dev/null
+++ b/css_bk/components/pcss/site-header.pcss.css
@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Site header.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.site-header {
+ position: relative;
+ /**
+ * Ensure mobile site header is always above other elements including
+ * contextual links, and Tour.
+ */
+ z-index: 101;
+
+ @media (--nav) {
+ /* Necessary to keep the content from jumping up when header transitions to fixed. */
+ min-height: var(--site-header-height-wide);
+ border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
+ }
+}
+
+.site-header__initial {
+ position: relative;
+ z-index: 102;
+ display: flex;
+ align-items: flex-end;
+ align-self: stretch;
+ background-color: var(--color--primary-50);
+}
+
+.site-header__fixable {
+ display: flex;
+ align-items: flex-end;
+ transition: all 0.5s;
+
+ &.is-fixed {
+ @media (--nav) {
+ &:not(.is-expanded) {
+ pointer-events: none;
+ }
+ }
+ }
+}
+
+@media (--nav) {
+ body:not(.is-always-mobile-nav) {
+ & .site-header__fixable.is-fixed {
+ position: fixed;
+ z-index: 102; /* Appear above body content that is position: relative */
+ inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
+ max-width: var(--max-bg-color);
+ }
+ }
+}
+
+.site-header__inner {
+ position: relative;
+ z-index: 1; /* Appear in front of Drupal's tabs. */
+ flex-grow: 1;
+ width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+ background: var(--color--white);
+}
+
+/*
+ * Only apply transition styles when JS is loaded. This
+ * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
+ */
+html.js body:not(.is-always-mobile-nav) .site-header__inner {
+ @media (--nav) {
+ transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
+ }
+}
+
+.site-header__fixable.is-expanded .site-header__inner {
+ @media (--nav) {
+ box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
+ }
+}
+
+[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
+ @media (--nav) {
+ box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
+ }
+}
+
+/* Hide the desktop nav when it's fixed and not active. */
+body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ @media (--nav) {
+ transform: translateX(-101%); /* LTR */
+ opacity: 0;
+ }
+}
+
+[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ @media (--nav) {
+ transform: translateX(101%);
+ }
+}
+
+.site-header__inner__container {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/css_bk/components/pcss/skip-link.pcss.css b/css_bk/components/pcss/skip-link.pcss.css
new file mode 100755
index 0000000..7a422ae
--- /dev/null
+++ b/css_bk/components/pcss/skip-link.pcss.css
@@ -0,0 +1,38 @@
+/**
+ * @file
+ * Skip link
+ *
+ * Allows keyboard users to quickly skip to the main content of the page.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.skip-link {
+ display: block;
+ width: 100%;
+ max-width: var(--max-bg-color);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ text-decoration: none;
+ color: var(--color--white);
+ outline: 0;
+ background-color: var(--color--gray-5);
+
+ &:hover {
+ text-decoration: underline;
+ color: var(--color--white);
+ }
+
+ &::after {
+ content: "\0020 âž”";
+ }
+}
+
+.skip-link.focusable:focus {
+ position: absolute !important; /* Override position from module file. */
+ z-index: 503;
+ width: 100%;
+ height: 40px;
+ outline: none;
+}
diff --git a/css_bk/components/pcss/table.pcss.css b/css_bk/components/pcss/table.pcss.css
new file mode 100755
index 0000000..19c5b93
--- /dev/null
+++ b/css_bk/components/pcss/table.pcss.css
@@ -0,0 +1,93 @@
+/**
+ * @file
+ * User generated tables.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.forum table,
+.text-content table,
+.views-table,
+.draggable-table {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+ border-spacing: 0;
+ color: var(--color-text-neutral-medium);
+ border: 0;
+ border-collapse: collapse;
+ font-family: var(--font-sans);
+ font-size: 16px;
+ line-height: var(--sp1-5);
+
+ & caption {
+ margin-block-end: var(--sp1);
+ text-align: start;
+ color: var(--color-text-neutral-medium);
+ font-family: var(--font-serif);
+ font-size: 14px;
+ font-style: italic;
+ line-height: var(--sp);
+ }
+
+ & tr {
+ &:last-child {
+ & td {
+ border-block-end: 0;
+ }
+ }
+ }
+
+ & td,
+ & th {
+ padding-block: var(--sp1);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp1);
+ vertical-align: top;
+ }
+
+ & th {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ text-align: start;
+ letter-spacing: 0.02em;
+ color: var(--color-text-neutral-loud);
+ border-block-end: 2px solid var(--color--primary-50);
+ font-family: var(--font-sans);
+ font-size: 14px;
+ line-height: var(--sp);
+ }
+
+ & td {
+ white-space: normal;
+ border-block-end: 2px solid var(--color--gray-65);
+ }
+
+ & th.checkbox,
+ & td.checkbox {
+ text-align: center;
+ }
+}
+
+.draggable-table {
+ width: 100%;
+}
+
+.draggable-table .form-item {
+ margin-top: 0;
+}
+
+.tablesort {
+ vertical-align: middle;
+}
+
+.sticky-header {
+ z-index: 0;
+ margin: 0;
+ border-block-end: 4px solid var(--color--primary-50);
+}
+
+/* Properly align VBO checkboxes. */
+.views-field-node-bulk-form .form-item {
+ margin: 0;
+}
diff --git a/css_bk/components/pcss/tabledrag.pcss.css b/css_bk/components/pcss/tabledrag.pcss.css
new file mode 100755
index 0000000..54d17bd
--- /dev/null
+++ b/css_bk/components/pcss/tabledrag.pcss.css
@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Styles for tabledrag.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.draggable:hover {
+ background-color: var(--color--gray-100);
+}
+
+.draggable.drag {
+ background-color: var(--color--gray-100);
+}
+
+.draggable.drag-previous {
+ background-color: var(--color--gray-95);
+}
+
+.drag-previous a {
+ color: var(--color-text-neutral-medium); /* Ensure proper contrast. */
+}
+
+a.tabledrag-handle,
+.touchevents a.tabledrag-handle {
+ width: 36px;
+ height: 36px;
+}
+
+.draggable a.tabledrag-handle {
+ margin-inline-start: 0;
+}
+
+a.tabledrag-handle .handle {
+ width: var(--sp2);
+ height: var(--sp2);
+ margin: 0;
+ background-position: 50% 5px;
+}
+
+.touchevents a.tabledrag-handle .handle {
+ height: var(--sp2);
+ background-position: 50% 5px;
+}
+
+.touchevents .draggable td {
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp0-5);
+}
+
+.touchevents .draggable .menu-item__link {
+ padding: 0;
+}
diff --git a/css_bk/components/pcss/tabs.pcss.css b/css_bk/components/pcss/tabs.pcss.css
new file mode 100755
index 0000000..17dbf19
--- /dev/null
+++ b/css_bk/components/pcss/tabs.pcss.css
@@ -0,0 +1,205 @@
+@import "../base/media-queries.pcss.css";
+
+/* Breakpoint where tabs switch between vertical and horizontal layouts. */
+@custom-media --tabs-layout-switch (--md);
+
+.tabs {
+ --tabs-height: var(--sp3);
+ --tabs-padding-inline: var(--sp1-5);
+ --tabs-active-border-size: 6px;
+ --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-letter-spacing: 1px;
+ --tabs-font-size: var(--font-size-s);
+ --tabs-background-color: var(--color--gray-100);
+ --tabs-background-color-hover: var(--color--gray-95);
+ --tabs-border-width: 1px;
+ --tabs-border-color: var(--color--gray-95);
+ --tabs-transition-duration: 0.2s;
+
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin: 0;
+ margin-inline-start: 0; /* Override [dir] attribute in base in compiled CSS. */
+ padding: 0;
+ list-style: none;
+
+ @media (--tabs-layout-switch) {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+}
+
+.tabs__tab {
+ display: none;
+ margin: 0;
+ margin-block-end: calc(-1 * var(--tabs-border-width));
+
+ &.is-active {
+ display: flex;
+ }
+
+ @media (--tabs-layout-switch) {
+ display: flex;
+ margin-block-end: 0;
+ margin-inline-start: calc(-1 * var(--tabs-border-width));
+ }
+
+ /* Show tabs when JavaScript disabled. */
+ @nest html:not(.js) & {
+ display: flex;
+ }
+
+ /* Show tabs when tabs-expanded class is present. */
+ @nest .tabs.is-expanded & {
+ display: flex;
+ }
+
+ /* Secondary tabs will always be expanded. */
+ @nest .tabs--secondary & {
+ display: block;
+
+ @media (--tabs-layout-switch) {
+ display: flex;
+ }
+ }
+}
+
+.tabs__link {
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ height: var(--tabs-height);
+ padding-block: 0;
+ padding-inline: var(--tabs-padding-inline);
+ transition: background-color var(--tabs-transition-duration);
+ text-decoration: none;
+ letter-spacing: var(--tabs-letter-spacing);
+ color: var(--tabs-text-color);
+ border: var(--tabs-border-width) solid var(--tabs-border-color);
+ background-color: var(--tabs-background-color);
+ font-size: var(--tabs-font-size);
+
+ &:hover {
+ color: var(--tabs-text-color-active);
+ background-color: var(--tabs-background-color-hover);
+ }
+
+ &:focus {
+ position: relative;
+ outline: solid 3px var(--tabs-highlight-color);
+ outline-offset: -3px;
+ }
+
+ &.is-active {
+ position: relative; /* Anchor ::after pseudo-element. */
+ color: var(--tabs-text-color-active);
+ font-weight: 600;
+
+ /*
+ * We use ::after pseudo-element in place of border so edges do not appear
+ * diagonally cut off due to other edges with transparent borders.
+ */
+ &::after {
+ position: absolute;
+ inset-block-start: calc(-1 * var(--tabs-border-width));
+ inset-inline-start: calc(-1 * var(--tabs-border-width));
+ height: calc(100% + var(--tabs-border-width) * 2);
+ content: "";
+ border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+
+ @media (--tabs-layout-switch) {
+ inset-block: auto calc(-1 * var(--tabs-border-width));
+ width: calc(100% + 2 * var(--tabs-border-width));
+ height: 0;
+ border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+ border-inline-start: 0;
+ }
+ }
+ }
+
+ /* No regular borders or background color for secondary tab links. */
+ @nest .tabs--secondary & {
+ @media (--tabs-layout-switch) {
+ border-color: transparent;
+ background-color: transparent;
+ }
+ }
+}
+
+/* Button that opens and closes primary tabs at narrow viewports. */
+.tabs__trigger {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--tabs-height);
+ margin-block: 0;
+ margin-inline: calc(-1 * var(--tabs-border-width)) 0;
+ cursor: pointer;
+ border: solid var(--tabs-border-width) var(--tabs-border-color);
+ background-color: var(--tabs-background-color);
+
+ &:hover {
+ background-color: var(--tabs-background-color-hover);
+ }
+
+ &:focus {
+ position: relative;
+ border-color: var(--tabs-highlight-color);
+ outline: none;
+ }
+
+ /* Button will not work when JavaScript is disabled, so we hide it. */
+ @nest html:not(.js) & {
+ display: none;
+ }
+
+ @media (--tabs-layout-switch) {
+ display: none;
+ }
+}
+
+.tabs__trigger-icon {
+ position: relative;
+ display: block;
+ width: var(--sp);
+ height: 10px;
+ margin-block-start: calc(-2 * var(--tabs-border-width));
+
+ & > span {
+ position: absolute;
+ inset-inline-start: 0;
+ display: block;
+ width: 100%;
+ transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+ border-block-start: solid 2px var(--tabs-highlight-color);
+
+ &:nth-child(1) {
+ inset-block-start: 0;
+
+ @nest .tabs__trigger[aria-expanded="true"] & {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(45deg);
+ }
+ }
+
+ &:nth-child(2) {
+ inset-block-start: calc(50% + 1px);
+
+ @nest .tabs__trigger[aria-expanded="true"] & {
+ opacity: 0;
+ }
+ }
+
+ &:nth-child(3) {
+ inset-block-start: calc(100% + 2px);
+
+ @nest .tabs__trigger[aria-expanded="true"] & {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(-45deg);
+ }
+ }
+ }
+}
diff --git a/css_bk/components/pcss/tags.pcss.css b/css_bk/components/pcss/tags.pcss.css
new file mode 100755
index 0000000..ca3711c
--- /dev/null
+++ b/css_bk/components/pcss/tags.pcss.css
@@ -0,0 +1,83 @@
+/**
+ * @file
+ * Tags field styling.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.field--tags {
+ display: flex;
+ font-family: var(--font-sans);
+}
+
+.field--tags__label {
+ margin: 0;
+ margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
+ letter-spacing: 0.02em;
+ color: var(--color-text-neutral-soft);
+ font-size: var(--font-size-s);
+ font-weight: 600;
+ line-height: 1.6;
+
+ &::after {
+ content: ":";
+ }
+
+ @media (--md) {
+ line-height: 2;
+ }
+}
+
+.field--label-inline .field--tags__label {
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+}
+
+.field--tags__items {
+ display: flex;
+ flex-wrap: wrap;
+ margin-block: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-start: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-end: calc((var(--sp0-5) / 2) * -1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+}
+
+.field--tags__item {
+ display: flex;
+ margin-block: calc(var(--sp0-5) / 2);
+ margin-inline-start: calc(var(--sp0-5) / 2);
+ margin-inline-end: calc(var(--sp0-5) / 2);
+}
+
+.field--tags__item:nth-last-child(n+2)::after {
+ content: ",";
+ font-size: var(--font-size-base);
+ line-height: 1.5;
+}
+
+.field--tags__item a {
+ position: relative;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ letter-spacing: 0.02em;
+ color: var(--color-text-primary-medium);
+ font-size: var(--font-size-base);
+ font-weight: 700;
+ line-height: 1.5;
+}
+
+.node--view-mode-full {
+ & .field--tags {
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
+ padding-block: var(--sp1-5);
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ background-color: var(--color--gray-100);
+ }
+}
diff --git a/css_bk/components/pcss/text-content.pcss.css b/css_bk/components/pcss/text-content.pcss.css
new file mode 100755
index 0000000..840087b
--- /dev/null
+++ b/css_bk/components/pcss/text-content.pcss.css
@@ -0,0 +1,153 @@
+/**
+ * @file
+ * Text Content.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.text-content,
+.cke_editable {
+ color: var(--color-text-neutral-medium);
+ font-family: var(--font-serif);
+ line-height: var(--sp1-5);
+
+ /*
+ @todo
+
+ text-decoration-thickness is supported by FF & Safari
+ text-underline-offset is supported by Safari
+
+ text-decoration-color supported by Chrome, FF, & Safari
+ */
+
+ & a:where(:not(.button)) {
+ color: var(--color-text-primary-medium);
+ text-decoration-color: currentColor;
+ text-decoration-thickness: 2px;
+ overflow-wrap: break-word;
+
+ @supports (box-shadow: none) {
+ transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
+ text-decoration: none;
+ box-shadow: inset 0 -2px 0 0 var(--color--primary-50);
+
+ &:hover {
+ text-decoration: underline;
+ color: var(--color--black);
+ box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+ text-decoration-color: var(--color--primary-80);
+ }
+ }
+ }
+
+ & p {
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
+
+ &:first-child {
+ margin-block-start: 0;
+ }
+
+ &:last-child {
+ margin-block-end: 0;
+ }
+
+ @media (--md) {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+ }
+ }
+
+ & code {
+ background-color: var(--color--gray-100);
+ }
+
+ & pre code {
+ display: block;
+ overflow: auto;
+ padding-block: var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ color: var(--color-text-neutral-soft);
+ }
+
+ & blockquote {
+ position: relative;
+ margin-block: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-inline-start: var(--sp2);
+ letter-spacing: -0.01em;
+ font-family: var(--font-serif);
+ font-size: 21px;
+ line-height: var(--sp2);
+
+ &::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ content: "\201C";
+ color: var(--color--primary-60);
+ font-size: 54px;
+ }
+
+ &::after {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--sp0-5);
+ height: calc(100% - 30px);
+ margin-inline-start: 4px;
+ content: "";
+ background: var(--color--gray-100);
+ }
+
+ @media (--grid-md) {
+ font-size: 32px;
+ line-height: var(--sp3);
+ }
+
+ @media (--lg) {
+ font-size: 40px;
+ line-height: calc(3.5 * var(--sp));
+ }
+ }
+
+ @media (--grid-md) {
+ font-size: 18px;
+ line-height: var(--sp2);
+ }
+}
+
+/**
+ * Special colors for footer that has a dark background.
+ */
+.site-footer .text-content {
+ color: inherit;
+
+ & * {
+ color: inherit;
+ }
+
+ & a {
+ text-decoration: underline;
+ color: var(--color--white);
+ box-shadow: none;
+
+ &:hover {
+ text-decoration: none;
+ color: var(--color--white);
+ box-shadow: none;
+ }
+ }
+}
+
+/**
+ * Decrease font-size for blockquote placed in sidebar region.
+ */
+.region--sidebar .text-content blockquote {
+ @media (--lg) {
+ font-size: 24px;
+ line-height: var(--sp2);
+ }
+}
diff --git a/css_bk/components/pcss/ui-dialog.pcss.css b/css_bk/components/pcss/ui-dialog.pcss.css
new file mode 100755
index 0000000..1bfb025
--- /dev/null
+++ b/css_bk/components/pcss/ui-dialog.pcss.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Styles for jQuery UI dialog.
+ */
+
+.ui-dialog {
+ & .ui-dialog-buttonpane {
+ padding-inline-start: 0.2em;
+ padding-inline-end: 0.2em;
+
+ & .ui-dialog-buttonset {
+ display: flex;
+ float: none;
+ flex-wrap: wrap;
+ gap: 5px;
+ }
+
+ & button {
+ margin: 0;
+ }
+ }
+}
+
+.ui-widget-overlay {
+ z-index: 1259;
+}
+
+.ui-dialog {
+ z-index: 1260;
+}
diff --git a/css_bk/components/pcss/vertical-tabs.pcss.css b/css_bk/components/pcss/vertical-tabs.pcss.css
new file mode 100755
index 0000000..7ea7501
--- /dev/null
+++ b/css_bk/components/pcss/vertical-tabs.pcss.css
@@ -0,0 +1,98 @@
+/**
+ * @file
+ * Vertical Tabs.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+:root {
+ --vertical-tabs-menu-width: 15rem;
+ --vertical-tabs-menu-border-width: 1px;
+}
+
+.vertical-tabs {
+ @media (--lg) {
+ display: flex;
+ }
+}
+
+.vertical-tabs__menu {
+ position: relative;
+ align-self: flex-start;
+ margin: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ list-style: none;
+ border-width: var(--vertical-tabs-menu-border-width);
+ border-style: solid;
+ border-color: var(--color--gray-95);
+
+ @media (--lg) {
+ width: var(--vertical-tabs-menu-width);
+ border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
+ }
+}
+
+.vertical-tabs__panes {
+ margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
+
+ @media (--lg) {
+ width: calc(100% - var(--vertical-tabs-menu-width));
+ margin-block-start: 0;
+ }
+}
+
+.vertical-tabs__pane {
+ @media (--lg) {
+ min-height: 100%;
+ }
+}
+
+.vertical-tabs__pane.olives-details {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.vertical-tabs__pane > summary {
+ display: none;
+}
+
+.vertical-tabs__menu-item:nth-child(n+2) {
+ border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
+}
+
+.vertical-tabs__menu-item a {
+ display: block;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp0-75);
+ padding-inline-end: var(--sp0-75);
+ text-decoration: none;
+ color: var(--color-text-primary-loud);
+ background-color: var(--color--gray-95);
+
+ &:focus,
+ &:hover,
+ &:active {
+ background-color: var(--color--gray-100);
+ }
+}
+
+.vertical-tabs__menu-item.is-selected {
+ background-color: var(--color--white);
+
+ @media (--lg) {
+ margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
+ padding-inline-end: var(--vertical-tabs-menu-border-width);
+ }
+}
+
+.vertical-tabs__menu-item.is-selected a {
+ background-color: transparent;
+}
+
+.vertical-tabs__menu-item-summary {
+ display: block;
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
+}
diff --git a/css_bk/components/pcss/wide-image.pcss.css b/css_bk/components/pcss/wide-image.pcss.css
new file mode 100755
index 0000000..2413387
--- /dev/null
+++ b/css_bk/components/pcss/wide-image.pcss.css
@@ -0,0 +1,42 @@
+/**
+ * @file
+ * Wide image component.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.wide-image {
+ margin-block-start: var(--sp0-5);
+ margin-block-end: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+
+ @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(-1 * ((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)));
+ }
+}
+
+/* Ensure that image doesn't overlap sidebar. */
+.sidebar-grid .wide-image {
+ @media (--lg) {
+ width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
+ }
+
+ @media (--xl) {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+ }
+}
+
+/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
+.layout-builder .wide-image {
+ max-width: 100%;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
diff --git a/css_bk/components/powered-by-block.css b/css_bk/components/powered-by-block.css
new file mode 100755
index 0000000..282095e
--- /dev/null
+++ b/css_bk/components/powered-by-block.css
@@ -0,0 +1,49 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Powered by block specific styles.
+ */
+
+.block-system-powered-by-block {
+ letter-spacing: 0.02em;
+ font-size: 0.875rem;
+ line-height: var(--sp);
+}
+
+.block-system-powered-by-block a {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.block-system-powered-by-block a:hover,
+.block-system-powered-by-block a:focus {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.block-system-powered-by-block .drupal-logo {
+ display: inline-block;
+ margin-block-start: calc(-1 * var(--sp) / 4);
+ margin-inline-start: calc(var(--sp) / 4);
+}
+
+.block-system-powered-by-block svg {
+ width: 0.875rem; /* 14 */
+ height: 1.1875rem; /* 19 */
+ vertical-align: top;
+ fill: currentColor;
+}
+
+.site-footer .block-system-powered-by-block a {
+ color: var(--color--white);
+}
+
+.site-footer .block-system-powered-by-block svg path {
+ fill: var(--color--white);
+}
diff --git a/css_bk/components/progress.css b/css_bk/components/progress.css
new file mode 100755
index 0000000..c204247
--- /dev/null
+++ b/css_bk/components/progress.css
@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Progress bar specific styles.
+ */
+
+.progress__track {
+ overflow: hidden;
+ height: var(--sp);
+ border: 1px solid var(--color--primary-40);
+ border-radius: var(--border-radius);
+}
+
+.progress__bar {
+ height: var(--sp);
+ background-color: var(--color--primary-40);
+}
+
+.progress__percentage {
+ margin-inline-start: 1rem;
+}
diff --git a/css_bk/components/search-results.css b/css_bk/components/search-results.css
new file mode 100755
index 0000000..51a093e
--- /dev/null
+++ b/css_bk/components/search-results.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
+ * Search results specific styles.
+ */
+
+.search-results {
+ margin-block-end: var(--sp2);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+}
+
+@media (min-width: 43.75rem) {
+ .search-results {
+ margin-block-end: var(--sp3);
+ }
+}
+
+.search-result__title {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ color: var(--color-text-neutral-loud);
+ font-size: 1.25rem;
+ line-height: var(--line-height-base);
+}
+
+.search-result__title a {
+ padding-block-end: 0.1875rem;
+ transition: background-size 0.2s, color 0.2s;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ background-color: transparent;
+ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+ background-repeat: no-repeat;
+ background-position: bottom left; /* LTR */
+ background-size: 0 0.1875rem;
+}
+
+.search-result__title a:hover {
+ color: var(--color-text-primary-medium);
+}
+
+@media (min-width: 62.5rem) {
+ .search-result__title {
+ margin-block-end: var(--sp1);
+ font-size: 1.875rem;
+ line-height: var(--sp3);
+ }
+}
+
+[dir="rtl"] .search-result__title a {
+ background-position: bottom right;
+}
+
+.search-result__snippet {
+ padding-block-end: calc(var(--sp1-5) - 2px);
+}
+
+@media (min-width: 62.5rem) {
+ .search-result__snippet {
+ padding-block-end: var(--sp3);
+ }
+}
+
+.search-result__meta {
+ display: flex;
+ align-items: center;
+ margin-block-end: var(--sp1);
+ color: var(--color-text-neutral-soft);
+ font-size: 0.875rem;
+ line-height: var(--sp);
+}
+
+.search-result__meta a {
+ color: var(--color-text-primary-medium);
+ font-weight: bold;
+}
+
+.search-results__item {
+ position: relative; /* Anchor after pseudo-element. */
+ margin-block-end: var(--sp1-5);
+}
+
+.search-results__item::after {
+ position: absolute;
+ inset-block-end: 0;
+ width: var(--sp3);
+ height: 0;
+ content: "";
+ /* Intentionally not using CSS logical properties. */
+ border-top: solid 2px var(--color--gray-95);
+}
+
+.search-results__item:last-child {
+ margin-block-end: 0;
+}
+
+@media (min-width: 62.5rem) {
+ .search-results__item {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/components/site-header.css b/css_bk/components/site-header.css
new file mode 100755
index 0000000..4cbc7e6
--- /dev/null
+++ b/css_bk/components/site-header.css
@@ -0,0 +1,109 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Site header.
+ */
+
+.site-header {
+ position: relative;
+ /**
+ * Ensure mobile site header is always above other elements including
+ * contextual links, and Tour.
+ */
+ z-index: 101;
+}
+
+@media (min-width: 75rem) {
+ .site-header {
+ /* Necessary to keep the content from jumping up when header transitions to fixed. */
+ min-height: var(--site-header-height-wide);
+ border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
+ }
+}
+
+.site-header__initial {
+ position: relative;
+ z-index: 102;
+ display: flex;
+ align-items: flex-end;
+ align-self: stretch;
+ background-color: var(--color--primary-50);
+}
+
+.site-header__fixable {
+ display: flex;
+ align-items: flex-end;
+ transition: all 0.5s;
+}
+
+@media (min-width: 75rem) {
+ .site-header__fixable.is-fixed:not(.is-expanded) {
+ pointer-events: none;
+ }
+}
+
+@media (min-width: 75rem) {
+ body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
+ position: fixed;
+ z-index: 102; /* Appear above body content that is position: relative */
+ inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4));
+ max-width: var(--max-bg-color);
+ }
+}
+
+.site-header__inner {
+ position: relative;
+ z-index: 1; /* Appear in front of Drupal's tabs. */
+ flex-grow: 1;
+ width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+ background: var(--color--white);
+}
+
+/*
+ * Only apply transition styles when JS is loaded. This
+ * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
+ */
+
+@media (min-width: 75rem) {
+ html.js body:not(.is-always-mobile-nav) .site-header__inner {
+ transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
+ }
+}
+
+@media (min-width: 75rem) {
+ .site-header__fixable.is-expanded .site-header__inner {
+ box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
+ }
+}
+
+@media (min-width: 75rem) {
+ [dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
+ box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
+ }
+}
+
+/* Hide the desktop nav when it's fixed and not active. */
+
+@media (min-width: 75rem) {
+ body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ transform: translateX(-101%); /* LTR */
+ opacity: 0;
+ }
+}
+
+@media (min-width: 75rem) {
+ [dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner {
+ transform: translateX(101%);
+ }
+}
+
+.site-header__inner__container {
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/css_bk/components/skip-link.css b/css_bk/components/skip-link.css
new file mode 100755
index 0000000..e354828
--- /dev/null
+++ b/css_bk/components/skip-link.css
@@ -0,0 +1,49 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Skip link
+ *
+ * Allows keyboard users to quickly skip to the main content of the page.
+ */
+
+.skip-link {
+ display: block;
+ width: 100%;
+ max-width: var(--max-bg-color);
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color--white);
+ outline: 0;
+ background-color: var(--color--gray-5);
+}
+
+.skip-link:hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--white);
+}
+
+.skip-link::after {
+ content: "\0020 âž”";
+}
+
+.skip-link.focusable:focus {
+ position: absolute !important;
+}
+
+.skip-link.focusable:focus {
+ /* Override position from module file. */
+ z-index: 503;
+ width: 100%;
+ height: 2.5rem;
+ outline: none;
+}
diff --git a/css_bk/components/table.css b/css_bk/components/table.css
new file mode 100755
index 0000000..13b7511
--- /dev/null
+++ b/css_bk/components/table.css
@@ -0,0 +1,95 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * User generated tables.
+ */
+
+.forum table,
+.text-content table,
+.views-table,
+.draggable-table {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+ border-spacing: 0;
+ color: var(--color-text-neutral-medium);
+ border: 0;
+ border-collapse: collapse;
+ font-family: var(--font-sans);
+ font-size: 1rem;
+ line-height: var(--sp1-5);
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) caption {
+ margin-block-end: var(--sp1);
+ text-align: start;
+ color: var(--color-text-neutral-medium);
+ font-family: var(--font-serif);
+ font-size: 0.875rem;
+ font-style: italic;
+ line-height: var(--sp);
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) tr:last-child td {
+ border-block-end: 0;
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) td,
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+ padding-block: var(--sp1);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp1);
+ vertical-align: top;
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) th {
+ margin-block: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ text-align: start;
+ letter-spacing: 0.02em;
+ color: var(--color-text-neutral-loud);
+ border-block-end: 2px solid var(--color--primary-50);
+ font-family: var(--font-sans);
+ font-size: 0.875rem;
+ line-height: var(--sp);
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) td {
+ white-space: normal;
+ border-block-end: 2px solid var(--color--gray-65);
+}
+
+:is(.forum table, .text-content table, .views-table, .draggable-table) th.checkbox,
+:is(.forum table, .text-content table, .views-table, .draggable-table) td.checkbox {
+ text-align: center;
+}
+
+.draggable-table {
+ width: 100%;
+}
+
+.draggable-table .form-item {
+ margin-top: 0;
+}
+
+.tablesort {
+ vertical-align: middle;
+}
+
+.sticky-header {
+ z-index: 0;
+ margin: 0;
+ border-block-end: 0.25rem solid var(--color--primary-50);
+}
+
+/* Properly align VBO checkboxes. */
+
+.views-field-node-bulk-form .form-item {
+ margin: 0;
+}
diff --git a/css_bk/components/tabledrag.css b/css_bk/components/tabledrag.css
new file mode 100755
index 0000000..839ae3f
--- /dev/null
+++ b/css_bk/components/tabledrag.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
+ * Styles for tabledrag.
+ */
+
+.draggable:hover {
+ background-color: var(--color--gray-100);
+}
+
+.draggable.drag {
+ background-color: var(--color--gray-100);
+}
+
+.draggable.drag-previous {
+ background-color: var(--color--gray-95);
+}
+
+.drag-previous a {
+ color: var(--color-text-neutral-medium); /* Ensure proper contrast. */
+}
+
+a.tabledrag-handle,
+.touchevents a.tabledrag-handle {
+ width: 2.25rem;
+ height: 2.25rem;
+}
+
+.draggable a.tabledrag-handle {
+ margin-inline-start: 0;
+}
+
+a.tabledrag-handle .handle {
+ width: var(--sp2);
+ height: var(--sp2);
+ margin: 0;
+ background-position: 50% 5px;
+}
+
+.touchevents a.tabledrag-handle .handle {
+ height: var(--sp2);
+ background-position: 50% 5px;
+}
+
+.touchevents .draggable td {
+ padding-block: var(--sp0-5);
+ padding-inline-start: 0;
+ padding-inline-end: var(--sp0-5);
+}
+
+.touchevents .draggable .menu-item__link {
+ padding: 0;
+}
diff --git a/css_bk/components/tabs.css b/css_bk/components/tabs.css
new file mode 100755
index 0000000..1c1c15e
--- /dev/null
+++ b/css_bk/components/tabs.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
+ */
+/* Breakpoint where tabs switch between vertical and horizontal layouts. */
+.tabs {
+ --tabs-height: var(--sp3);
+ --tabs-padding-inline: var(--sp1-5);
+ --tabs-active-border-size: 0.375rem;
+ --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
+ --tabs-letter-spacing: 1px;
+ --tabs-font-size: var(--font-size-s);
+ --tabs-background-color: var(--color--gray-100);
+ --tabs-background-color-hover: var(--color--gray-95);
+ --tabs-border-width: 1px;
+ --tabs-border-color: var(--color--gray-95);
+ --tabs-transition-duration: 0.2s;
+
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin: 0;
+ margin-inline-start: 0; /* Override [dir] attribute in base in compiled CSS. */
+ padding: 0;
+ list-style: none;
+}
+@media (min-width: 43.75rem) {
+ .tabs {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+}
+.tabs__tab {
+ display: none;
+ margin: 0;
+ margin-block-end: calc(-1 * var(--tabs-border-width));
+}
+.tabs__tab.is-active {
+ display: flex;
+}
+@media (min-width: 43.75rem) {
+ .tabs__tab {
+ display: flex;
+ margin-block-end: 0;
+ margin-inline-start: calc(-1 * var(--tabs-border-width));
+ }
+}
+/* Show tabs when JavaScript disabled. */
+html:not(.js) .tabs__tab {
+ display: flex;
+}
+/* Show tabs when tabs-expanded class is present. */
+.tabs.is-expanded .tabs__tab {
+ display: flex;
+}
+/* Secondary tabs will always be expanded. */
+.tabs--secondary .tabs__tab {
+ display: block;
+}
+@media (min-width: 43.75rem) {
+ .tabs--secondary .tabs__tab {
+ display: flex;
+ }
+}
+.tabs__link {
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+ height: var(--tabs-height);
+ padding-block: 0;
+ padding-inline: var(--tabs-padding-inline);
+ transition: background-color var(--tabs-transition-duration);
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ letter-spacing: var(--tabs-letter-spacing);
+ color: var(--tabs-text-color);
+ border: var(--tabs-border-width) solid var(--tabs-border-color);
+ background-color: var(--tabs-background-color);
+ font-size: var(--tabs-font-size);
+}
+.tabs__link:hover {
+ color: var(--tabs-text-color-active);
+ background-color: var(--tabs-background-color-hover);
+}
+.tabs__link:focus {
+ position: relative;
+ outline: solid 3px var(--tabs-highlight-color);
+ outline-offset: -3px;
+}
+.tabs__link.is-active {
+ position: relative; /* Anchor ::after pseudo-element. */
+ color: var(--tabs-text-color-active);
+ font-weight: 600;
+
+ /*
+ * We use ::after pseudo-element in place of border so edges do not appear
+ * diagonally cut off due to other edges with transparent borders.
+ */
+}
+.tabs__link.is-active::after {
+ position: absolute;
+ inset-block-start: calc(-1 * var(--tabs-border-width));
+ inset-inline-start: calc(-1 * var(--tabs-border-width));
+ height: calc(100% + var(--tabs-border-width) * 2);
+ content: "";
+ border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+}
+@media (min-width: 43.75rem) {
+ .tabs__link.is-active::after {
+ inset-block: auto calc(-1 * var(--tabs-border-width));
+ width: calc(100% + 2 * var(--tabs-border-width));
+ height: 0;
+ border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
+ border-inline-start: 0;
+ }
+}
+/* No regular borders or background color for secondary tab links. */
+@media (min-width: 43.75rem) {
+ .tabs--secondary .tabs__link {
+ border-color: transparent;
+ background-color: transparent;
+ }
+}
+/* Button that opens and closes primary tabs at narrow viewports. */
+.tabs__trigger {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--tabs-height);
+ margin-block: 0;
+ margin-inline: calc(-1 * var(--tabs-border-width)) 0;
+ cursor: pointer;
+ border: solid var(--tabs-border-width) var(--tabs-border-color);
+ background-color: var(--tabs-background-color);
+}
+.tabs__trigger:hover {
+ background-color: var(--tabs-background-color-hover);
+}
+.tabs__trigger:focus {
+ position: relative;
+ border-color: var(--tabs-highlight-color);
+ outline: none;
+}
+/* Button will not work when JavaScript is disabled, so we hide it. */
+html:not(.js) .tabs__trigger {
+ display: none;
+}
+@media (min-width: 43.75rem) {
+ .tabs__trigger {
+ display: none;
+ }
+}
+.tabs__trigger-icon {
+ position: relative;
+ display: block;
+ width: var(--sp);
+ height: 0.625rem;
+ margin-block-start: calc(-2 * var(--tabs-border-width));
+}
+.tabs__trigger-icon > span {
+ position: absolute;
+ inset-inline-start: 0;
+ display: block;
+ width: 100%;
+ transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+ border-block-start: solid 2px var(--tabs-highlight-color);
+}
+.tabs__trigger-icon > span:nth-child(1) {
+ inset-block-start: 0;
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(45deg);
+}
+.tabs__trigger-icon > span:nth-child(2) {
+ inset-block-start: calc(50% + 1px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) {
+ opacity: 0;
+}
+.tabs__trigger-icon > span:nth-child(3) {
+ inset-block-start: calc(100% + 2px);
+}
+.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) {
+ inset-block-start: calc(50% + 1px);
+ transform: rotate(-45deg);
+}
diff --git a/css_bk/components/tags.css b/css_bk/components/tags.css
new file mode 100755
index 0000000..71703ad
--- /dev/null
+++ b/css_bk/components/tags.css
@@ -0,0 +1,89 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Tags field styling.
+ */
+
+.field--tags {
+ display: flex;
+ font-family: var(--font-sans);
+}
+
+.field--tags__label {
+ margin: 0;
+ margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
+ letter-spacing: 0.02em;
+ color: var(--color-text-neutral-soft);
+ font-size: var(--font-size-s);
+ font-weight: 600;
+ line-height: 1.6;
+}
+
+.field--tags__label::after {
+ content: ":";
+}
+
+@media (min-width: 43.75rem) {
+ .field--tags__label {
+ line-height: 2;
+ }
+}
+
+.field--label-inline .field--tags__label {
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+}
+
+.field--tags__items {
+ display: flex;
+ flex-wrap: wrap;
+ margin-block: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-start: calc((var(--sp0-5) / 2) * -1);
+ margin-inline-end: calc((var(--sp0-5) / 2) * -1);
+ padding-block: 0;
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ list-style: none;
+}
+
+.field--tags__item {
+ display: flex;
+ margin-block: calc(var(--sp0-5) / 2);
+ margin-inline-start: calc(var(--sp0-5) / 2);
+ margin-inline-end: calc(var(--sp0-5) / 2);
+}
+
+.field--tags__item:nth-last-child(n + 2)::after {
+ content: ",";
+ font-size: var(--font-size-base);
+ line-height: 1.5;
+}
+
+.field--tags__item a {
+ position: relative;
+ display: flex;
+ align-items: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ letter-spacing: 0.02em;
+ color: var(--color-text-primary-medium);
+ font-size: var(--font-size-base);
+ font-weight: 700;
+ line-height: 1.5;
+}
+
+.node--view-mode-full .field--tags {
+ margin-block-start: var(--sp4);
+ margin-block-end: var(--sp4);
+ padding-block: var(--sp1-5);
+ padding-inline-start: var(--sp2);
+ padding-inline-end: var(--sp2);
+ background-color: var(--color--gray-100);
+}
diff --git a/css_bk/components/text-content.css b/css_bk/components/text-content.css
new file mode 100755
index 0000000..7b7832e
--- /dev/null
+++ b/css_bk/components/text-content.css
@@ -0,0 +1,189 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Text Content.
+ */
+
+.text-content,
+.cke_editable {
+ color: var(--color-text-neutral-medium);
+ font-family: var(--font-serif);
+ line-height: var(--sp1-5);
+
+ /*
+ @todo
+
+ text-decoration-thickness is supported by FF & Safari
+ text-underline-offset is supported by Safari
+
+ text-decoration-color supported by Chrome, FF, & Safari
+ */
+}
+
+.text-content a:where(:not(.button)),
+.cke_editable a:where(:not(.button)) {
+ color: var(--color-text-primary-medium);
+ text-decoration-color: currentColor;
+ text-decoration-thickness: 2px;
+ overflow-wrap: break-word;
+}
+
+@supports (box-shadow: none) {
+ .text-content a:where(:not(.button)),
+ .cke_editable a:where(:not(.button)) {
+ transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ box-shadow: inset 0 -2px 0 0 var(--color--primary-50);
+ }
+
+ .text-content a:where(:not(.button)):hover,
+ .cke_editable a:where(:not(.button)):hover {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--black);
+ box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
+ text-decoration-color: var(--color--primary-80);
+ }
+}
+
+.text-content p,
+.cke_editable p {
+ margin-block-start: var(--sp);
+ margin-block-end: var(--sp);
+}
+
+.text-content p:first-child,
+.cke_editable p:first-child {
+ margin-block-start: 0;
+}
+
+.text-content p:last-child,
+.cke_editable p:last-child {
+ margin-block-end: 0;
+}
+
+@media (min-width: 43.75rem) {
+ .text-content p,
+ .cke_editable p {
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+ }
+}
+
+.text-content code,
+.cke_editable code {
+ background-color: var(--color--gray-100);
+}
+
+.text-content pre code,
+.cke_editable pre code {
+ display: block;
+ overflow: auto;
+ padding-block: var(--sp);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+ color: var(--color-text-neutral-soft);
+}
+
+.text-content blockquote,
+.cke_editable blockquote {
+ position: relative;
+ margin-block: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ padding-inline-start: var(--sp2);
+ letter-spacing: -0.01em;
+ font-family: var(--font-serif);
+ font-size: 1.3125rem;
+ line-height: var(--sp2);
+}
+
+.text-content blockquote::before,
+.cke_editable blockquote::before {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ content: "\201C";
+ color: var(--color--primary-60);
+ font-size: 3.375rem;
+}
+
+.text-content blockquote::after,
+.cke_editable blockquote::after {
+ position: absolute;
+ inset-block-end: 0;
+ inset-inline-start: 0;
+ width: var(--sp0-5);
+ height: calc(100% - 1.875rem);
+ margin-inline-start: 0.25rem;
+ content: "";
+ background: var(--color--gray-100);
+}
+
+@media (min-width: 43.75rem) {
+ .text-content blockquote,
+ .cke_editable blockquote {
+ font-size: 2rem;
+ line-height: var(--sp3);
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .text-content blockquote,
+ .cke_editable blockquote {
+ font-size: 2.5rem;
+ line-height: calc(3.5 * var(--sp));
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .text-content,
+ .cke_editable {
+ font-size: 1.125rem;
+ line-height: var(--sp2);
+ }
+}
+
+/**
+ * Special colors for footer that has a dark background.
+ */
+
+.site-footer .text-content {
+ color: inherit;
+}
+
+.site-footer .text-content * {
+ color: inherit;
+}
+
+.site-footer .text-content a {
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+ color: var(--color--white);
+ box-shadow: none;
+}
+
+.site-footer .text-content a:hover {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color--white);
+ box-shadow: none;
+}
+
+/**
+ * Decrease font-size for blockquote placed in sidebar region.
+ */
+
+@media (min-width: 62.5rem) {
+ .region--sidebar .text-content blockquote {
+ font-size: 1.5rem;
+ line-height: var(--sp2);
+ }
+}
diff --git a/css_bk/components/ui-dialog.css b/css_bk/components/ui-dialog.css
new file mode 100755
index 0000000..ef0721e
--- /dev/null
+++ b/css_bk/components/ui-dialog.css
@@ -0,0 +1,35 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for jQuery UI dialog.
+ */
+
+.ui-dialog .ui-dialog-buttonpane {
+ padding-inline-start: 0.2em;
+ padding-inline-end: 0.2em;
+}
+
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+ display: flex;
+ float: none;
+ flex-wrap: wrap;
+ gap: 0.3125rem;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+ margin: 0;
+}
+
+.ui-widget-overlay {
+ z-index: 1259;
+}
+
+.ui-dialog {
+ z-index: 1260;
+}
diff --git a/css_bk/components/unsorted.css b/css_bk/components/unsorted.css
new file mode 100755
index 0000000..e69de29
diff --git a/css_bk/components/vertical-tabs.css b/css_bk/components/vertical-tabs.css
new file mode 100755
index 0000000..6398b8d
--- /dev/null
+++ b/css_bk/components/vertical-tabs.css
@@ -0,0 +1,110 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Vertical Tabs.
+ */
+
+:root {
+ --vertical-tabs-menu-width: 15rem;
+ --vertical-tabs-menu-border-width: 1px;
+}
+
+@media (min-width: 62.5rem) {
+ .vertical-tabs {
+ display: flex;
+ }
+}
+
+.vertical-tabs__menu {
+ position: relative;
+ align-self: flex-start;
+ margin: 0;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ list-style: none;
+ border-width: var(--vertical-tabs-menu-border-width);
+ border-style: solid;
+ border-color: var(--color--gray-95);
+}
+
+@media (min-width: 62.5rem) {
+ .vertical-tabs__menu {
+ width: var(--vertical-tabs-menu-width);
+ border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width);
+ }
+}
+
+.vertical-tabs__panes {
+ margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1);
+}
+
+@media (min-width: 62.5rem) {
+ .vertical-tabs__panes {
+ width: calc(100% - var(--vertical-tabs-menu-width));
+ margin-block-start: 0;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .vertical-tabs__pane {
+ min-height: 100%;
+ }
+}
+
+.vertical-tabs__pane.olives-details {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.vertical-tabs__pane > summary {
+ display: none;
+}
+
+.vertical-tabs__menu-item:nth-child(n + 2) {
+ border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
+}
+
+.vertical-tabs__menu-item a {
+ display: block;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp0-75);
+ padding-inline-end: var(--sp0-75);
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ color: var(--color-text-primary-loud);
+ background-color: var(--color--gray-95);
+}
+
+.vertical-tabs__menu-item a:focus,
+.vertical-tabs__menu-item a:hover,
+.vertical-tabs__menu-item a:active {
+ background-color: var(--color--gray-100);
+}
+
+.vertical-tabs__menu-item.is-selected {
+ background-color: var(--color--white);
+}
+
+@media (min-width: 62.5rem) {
+ .vertical-tabs__menu-item.is-selected {
+ margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1);
+ padding-inline-end: var(--vertical-tabs-menu-border-width);
+ }
+}
+
+.vertical-tabs__menu-item.is-selected a {
+ background-color: transparent;
+}
+
+.vertical-tabs__menu-item-summary {
+ display: block;
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
+}
diff --git a/css_bk/components/wide-image.css b/css_bk/components/wide-image.css
new file mode 100755
index 0000000..637df39
--- /dev/null
+++ b/css_bk/components/wide-image.css
@@ -0,0 +1,55 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Wide image component.
+ */
+
+.wide-image {
+ margin-block-start: var(--sp0-5);
+ margin-block-end: var(--sp2);
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
+
+@media (min-width: 43.75rem) {
+ .wide-image {
+ width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
+ margin-block: var(--sp2) var(--sp4);
+ margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .wide-image {
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ }
+}
+
+/* Ensure that image doesn't overlap sidebar. */
+
+@media (min-width: 62.5rem) {
+ .sidebar-grid .wide-image {
+ width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
+ }
+}
+
+@media (min-width: 81.25rem) {
+ .sidebar-grid .wide-image {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+ }
+}
+
+/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
+
+.layout-builder .wide-image {
+ max-width: 100%;
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+}
diff --git a/css_bk/layout/grid.css b/css_bk/layout/grid.css
new file mode 100755
index 0000000..d462d9c
--- /dev/null
+++ b/css_bk/layout/grid.css
@@ -0,0 +1,64 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system.
+ */
+
+.grid-full {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
+ grid-column-gap: var(--grid-gap);
+
+ /* .grid-full classes nested 3 or more deep go full width. */
+}
+
+.grid-full .grid-full .grid-full {
+ display: block;
+}
+
+/*
+ If the .grid-full is nested within the following, apply the appropriate number of columns.
+ - .layout--content-narrow class.
+ - Element that's inheriting the layout--content-narrow styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow .grid-full,
+ .layout--pass--content-narrow > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-narrow .grid-full,
+ .layout--pass--content-narrow > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
+ }
+}
+
+/*
+ If the .grid-full is nested within the following, apply the appropriate number of columns.
+ - .layout--content-medium class.
+ - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+ .layout--content-medium .grid-full,
+ .layout--pass--content-medium > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-medium .grid-full,
+ .layout--pass--content-medium > * .grid-full {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
+ }
+}
diff --git a/css_bk/layout/layout-builder-fourcol-section.css b/css_bk/layout/layout-builder-fourcol-section.css
new file mode 100755
index 0000000..c607c6f
--- /dev/null
+++ b/css_bk/layout/layout-builder-fourcol-section.css
@@ -0,0 +1,75 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * @file
+ * Provides the layout styles for four-column layout section.
+ */
+
+.layout--fourcol-section {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.layout--fourcol-section > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
+
+@media (min-width: 43.75rem) {
+ .layout--fourcol-section > .layout__region {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+}
+
+/* Two column layout. */
+
+@media (min-width: 43.75rem) {
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: var(--grid-gap);
+ }
+
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--third {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--fourcol-section > .layout__region--second,
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+}
+
+/* Four column layout. */
+
+@media (min-width: 62.5rem) {
+ .layout--fourcol-section > .layout__region {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+ }
+
+ .layout--fourcol-section > .layout__region--first,
+ .layout--fourcol-section > .layout__region--second {
+ margin-block-end: 0;
+ }
+
+ .layout--fourcol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--fourcol-section > .layout__region--second,
+ .layout--fourcol-section > .layout__region--third {
+ margin-inline: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--fourcol-section > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+}
diff --git a/css_bk/layout/layout-builder-threecol-section.css b/css_bk/layout/layout-builder-threecol-section.css
new file mode 100755
index 0000000..df66d8b
--- /dev/null
+++ b/css_bk/layout/layout-builder-threecol-section.css
@@ -0,0 +1,72 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * @file
+ * Provides the layout styles for three-column layout section.
+ */
+
+.layout--threecol-section {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.layout--threecol-section > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
+
+@media (min-width: 62.5rem) {
+ .layout--threecol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--threecol-section > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--threecol-section > .layout__region--second {
+ margin-inline: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--threecol-section > .layout__region--third {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ .layout--threecol-section--25-50-25 > .layout__region--first,
+ .layout--threecol-section--25-50-25 > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+
+ .layout--threecol-section--25-50-25 > .layout__region--second {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ .layout--threecol-section--25-25-50 > .layout__region--first,
+ .layout--threecol-section--25-25-50 > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+
+ .layout--threecol-section--25-25-50 > .layout__region--third {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ .layout--threecol-section--50-25-25 > .layout__region--first {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+
+ .layout--threecol-section--50-25-25 > .layout__region--second,
+ .layout--threecol-section--50-25-25 > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+ .layout--threecol-section--33-34-33 > .layout__region--first,
+ .layout--threecol-section--33-34-33 > .layout__region--second,
+ .layout--threecol-section--33-34-33 > .layout__region--third {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
+}
diff --git a/css_bk/layout/layout-builder-twocol-section.css b/css_bk/layout/layout-builder-twocol-section.css
new file mode 100755
index 0000000..43dfb2b
--- /dev/null
+++ b/css_bk/layout/layout-builder-twocol-section.css
@@ -0,0 +1,77 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * @file
+ * Provides the layout styles for two-column layout section.
+ */
+
+.layout--twocol-section {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.layout--twocol-section > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+}
+
+@media (min-width: 43.75rem) {
+ .layout--twocol-section > .layout__region {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .layout--twocol-section--50-50 > .layout__region--first {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ .layout--twocol-section--50-50 > .layout__region--second {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ .layout--twocol-section--33-67 > .layout__region--first {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-end: calc(var(--grid-gap) * 0.3333);
+ }
+
+ .layout--twocol-section--33-67 > .layout__region--second {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
+ }
+ .layout--twocol-section--67-33 > .layout__region--first {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-end: calc(var(--grid-gap) * 0.6666);
+ }
+
+ .layout--twocol-section--67-33 > .layout__region--second {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
+ }
+ .layout--twocol-section--25-75 > .layout__region--first {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-end: calc(var(--grid-gap) * 0.25);
+ }
+
+ .layout--twocol-section--25-75 > .layout__region--second {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-start: calc(var(--grid-gap) * 0.75);
+ }
+ .layout--twocol-section--75-25 > .layout__region--first {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
+ }
+
+ .layout--twocol-section--75-25 > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
+ }
+}
diff --git a/css_bk/layout/layout-content-medium.css b/css_bk/layout/layout-content-medium.css
new file mode 100755
index 0000000..bae3903
--- /dev/null
+++ b/css_bk/layout/layout-content-medium.css
@@ -0,0 +1,55 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the content wide layout.
+ */
+
+.layout--content-medium,
+.layout--pass--content-medium > * {
+ grid-column: 1 / 7;
+ width: 100%;
+}
+
+@media (min-width: 43.75rem) {
+ .layout--content-medium,
+ .layout--pass--content-medium > * {
+ grid-column: 2 / 14;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-medium,
+ .layout--pass--content-medium > * {
+ grid-column: 3 / 13;
+ }
+}
+
+/*
+ If .layout--content-medium is nested within itself, or an element that's inheriting the
+ layout--content-medium styles from its parent region, go full width within its
+ parent .grid-full.
+*/
+
+@media (min-width: 43.75rem) {
+ .layout--pass--content-medium > * .layout--content-medium,
+ .layout--content-medium .layout--content-medium,
+ .layout--pass--content-medium > * .layout--pass--content-medium > *,
+ .layout--content-medium .layout--pass--content-medium > * {
+ grid-column: 1 / 13;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--pass--content-medium > * .layout--content-medium,
+ .layout--content-medium .layout--content-medium,
+ .layout--pass--content-medium > * .layout--pass--content-medium > *,
+ .layout--content-medium .layout--pass--content-medium > * {
+ grid-column: 1 / 11;
+ }
+}
diff --git a/css_bk/layout/layout-content-narrow.css b/css_bk/layout/layout-content-narrow.css
new file mode 100755
index 0000000..aabeee4
--- /dev/null
+++ b/css_bk/layout/layout-content-narrow.css
@@ -0,0 +1,138 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the content narrow layout.
+ */
+
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+ grid-column: 1 / 7;
+ width: 100%;
+}
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow,
+ .layout--pass--content-narrow > * {
+ grid-column: 2 / 14;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-narrow,
+ .layout--pass--content-narrow > * {
+ grid-column: 3 / 11;
+ }
+}
+
+/*
+ If .layout--content-narrow is nested within any of the following, allocate the appropriate
+ amount of columns within its parent .grid-full.
+ - .layout--content-narrow class.
+ - Element that's inheriting the layout--content-narrow styles from its parent region.
+ - .layout--content-medium class.
+ - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow .layout--content-narrow,
+ .layout--pass--content-narrow > * .layout--content-narrow,
+ .layout--content-medium .layout--content-narrow,
+ .layout--pass--content-medium > * .layout--content-narrow,
+ .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+ .layout--content-medium .layout--pass--content-narrow > *,
+ .layout--pass--content-medium > * .layout--pass--content-narrow > * {
+ grid-column: 1 / 13;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-narrow .layout--content-narrow,
+ .layout--pass--content-narrow > * .layout--content-narrow,
+ .layout--content-medium .layout--content-narrow,
+ .layout--pass--content-medium > * .layout--content-narrow,
+ .layout--content-narrow .layout--pass--content-narrow > *,
+ .layout--pass--content-narrow > * .layout--pass--content-narrow > *,
+ .layout--content-medium .layout--pass--content-narrow > *,
+ .layout--pass--content-medium > * .layout--pass--content-narrow > * {
+ grid-column: 1 / 9;
+ }
+}
+
+/*
+ Special grid-breaking treatment for text-content elements that
+ reside in a content-narrow layout.
+*/
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow.text-content blockquote::before,
+ .layout--pass--content-narrow > *.text-content blockquote::before,
+ .layout--content-narrow .text-content blockquote::before,
+ .layout--pass--content-narrow > * .text-content blockquote::before {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow.text-content blockquote::after,
+ .layout--pass--content-narrow > *.text-content blockquote::after,
+ .layout--content-narrow .text-content blockquote::after,
+ .layout--pass--content-narrow > * .text-content blockquote::after {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ width: var(--sp);
+ height: calc(100% - 2.8125rem);
+ margin-inline-start: 2px;
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow.text-content blockquote,
+ .layout--pass--content-narrow > *.text-content blockquote,
+ .layout--content-narrow .text-content blockquote,
+ .layout--pass--content-narrow > * .text-content blockquote {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+ margin-block: var(--sp3);
+ padding-inline-start: 0;
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .layout--content-narrow.text-content pre,
+ .layout--pass--content-narrow > *.text-content pre,
+ .layout--content-narrow .text-content pre,
+ .layout--pass--content-narrow > * .text-content pre {
+ margin-block: var(--sp3);
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout--content-narrow.text-content pre,
+ .layout--pass--content-narrow > *.text-content pre,
+ .layout--content-narrow .text-content pre,
+ .layout--pass--content-narrow > * .text-content pre {
+ width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+ margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ }
+}
+
+/**
+ *
and elements should not break containers and overflow
+ * into sidebar region when present.
+ */
+
+.sidebar-grid .layout--content-narrow.text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > *.text-content blockquote,
+.sidebar-grid .layout--content-narrow .text-content blockquote,
+.sidebar-grid .layout--pass--content-narrow > * .text-content blockquote,
+.sidebar-grid .layout--content-narrow.text-content pre,
+.sidebar-grid .layout--pass--content-narrow > *.text-content pre,
+.sidebar-grid .layout--content-narrow .text-content pre,
+.sidebar-grid .layout--pass--content-narrow > * .text-content pre {
+ width: auto;
+}
diff --git a/css_bk/layout/layout-discovery-section-layout.css b/css_bk/layout/layout-discovery-section-layout.css
new file mode 100755
index 0000000..e92fe2c
--- /dev/null
+++ b/css_bk/layout/layout-discovery-section-layout.css
@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/*
+ * @file
+ * Provides default layout styles for all layout sections.
+ */
+
+.layout {
+ margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+ .layout {
+ margin-block-end: var(--sp2);
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .layout {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/layout/layout-footer.css b/css_bk/layout/layout-footer.css
new file mode 100755
index 0000000..17df54d
--- /dev/null
+++ b/css_bk/layout/layout-footer.css
@@ -0,0 +1,57 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Grid system definition for the footer top and footer bottom layouts.
+ */
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+
+.site-footer {
+ position: relative;
+ z-index: 1;
+}
+
+.site-footer__inner {
+ padding-block: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+ .site-footer__inner {
+ padding-block: var(--sp4) calc(13 * var(--sp));
+ }
+}
+
+.region--footer_top__inner > *,
+.region--footer_bottom__inner > * {
+ margin-block-end: var(--sp2);
+}
+
+@media (min-width: 43.75rem) {
+ .region--footer_top__inner > *,
+ .region--footer_bottom__inner > * {
+ flex: 1;
+ margin-block-end: 0;
+ }
+
+ .region--footer_top__inner > *:not(:last-child),
+ .region--footer_bottom__inner > *:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .region--footer_top__inner,
+ .region--footer_bottom__inner {
+ display: flex;
+ flex-wrap: wrap;
+ }
+}
diff --git a/css_bk/layout/layout-sidebar.css b/css_bk/layout/layout-sidebar.css
new file mode 100755
index 0000000..6bfbeb5
--- /dev/null
+++ b/css_bk/layout/layout-sidebar.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
+ * Special grid system for sidebar.
+ */
+
+.sidebar-grid > .site-main {
+ grid-column: 1 / 7;
+ align-self: flex-start;
+}
+
+@media (min-width: 43.75rem) {
+ .sidebar-grid > .site-main {
+ grid-column: 1 / 15;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .sidebar-grid > .site-main {
+ display: grid;
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 2 / 11;
+ }
+
+ .sidebar-grid > .site-main > .region--content-above,
+ .sidebar-grid > .site-main > .region--content {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 1 / 9;
+ }
+
+ .sidebar-grid > .site-main .layout--content-narrow,
+ .sidebar-grid > .site-main .layout--pass--content-narrow > *,
+ .sidebar-grid > .site-main .layout--content-medium,
+ .sidebar-grid > .site-main .layout--pass--content-medium > * {
+ grid-column: 1 / 9;
+ }
+}
+
+.sidebar-grid .region--sidebar {
+ grid-column: 1 / 7;
+}
+
+@media (min-width: 43.75rem) {
+ .sidebar-grid .region--sidebar {
+ grid-column: 3 / 13;
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .sidebar-grid .region--sidebar {
+ grid-column: 11 / 15;
+ }
+}
diff --git a/css_bk/layout/layout-views-grid.css b/css_bk/layout/layout-views-grid.css
new file mode 100755
index 0000000..42c5c2a
--- /dev/null
+++ b/css_bk/layout/layout-views-grid.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
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+.views-view-grid {
+ --views-grid--layout-gap: var(--sp);
+ --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+ --views-grid-item--min-width: 6.25rem;
+}
+
+.views-view-grid--horizontal {
+ /**
+ * Calculated values.
+ */
+ --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+ --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+ --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+ grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+ margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+ column-width: var(--views-grid-item--min-width);
+ column-count: var(--views-grid--column-count);
+ column-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical .views-view-grid__item > * {
+ padding-block-end: var(--views-grid--layout-gap);
+ page-break-inside: avoid;
+ break-inside: avoid;
+}
diff --git a/css_bk/layout/layout.css b/css_bk/layout/layout.css
new file mode 100755
index 0000000..790482a
--- /dev/null
+++ b/css_bk/layout/layout.css
@@ -0,0 +1,71 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Base Layout.
+ */
+
+.container {
+ width: 100%;
+ max-width: var(--max-width);
+ padding-inline: var(--container-padding);
+
+ /* This fixes an issue where if the toolbar is open in vertical mode, and
+ * the mobile navigation is open, the "close" button gets pushed outside of
+ * the viewport. */
+}
+
+body.is-fixed .container {
+ width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+}
+
+.page-wrapper {
+ max-width: var(--max-bg-color);
+ background: var(--color--white);
+}
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+
+.layout-main-wrapper {
+ position: relative;
+ z-index: 2; /* Ensure dropdown is not cut off by footer. */
+}
+
+/* Contains the social sidebar, and the primary content area. */
+
+@media (min-width: 75rem) {
+ .layout-main {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ }
+}
+
+@media (min-width: 75rem) {
+ .main-content {
+ width: calc(100% - var(--content-left));
+ margin-inline-end: auto;
+ }
+}
+
+.main-content__container {
+ padding-block-start: var(--sp3);
+}
+
+@media (min-width: 43.75rem) {
+ .main-content__container {
+ padding-block-start: var(--sp5);
+ }
+}
+.block-mirador {
+ height: 1200px;
+ position: relative;
+ }
diff --git a/css_bk/layout/pcss/grid.pcss.css b/css_bk/layout/pcss/grid.pcss.css
new file mode 100755
index 0000000..c4b586e
--- /dev/null
+++ b/css_bk/layout/pcss/grid.pcss.css
@@ -0,0 +1,50 @@
+/**
+ * @file
+ * Grid system.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.grid-full {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr));
+ grid-column-gap: var(--grid-gap);
+
+ /* .grid-full classes nested 3 or more deep go full width. */
+ & .grid-full .grid-full {
+ display: block;
+ }
+}
+
+/*
+ If the .grid-full is nested within the following, apply the appropriate number of columns.
+ - .layout--content-narrow class.
+ - Element that's inheriting the layout--content-narrow styles from its parent region.
+*/
+.layout--content-narrow .grid-full,
+.layout--pass--content-narrow > * .grid-full {
+ @media (--grid-md) {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+ }
+
+ @media (--lg) {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
+ }
+}
+
+/*
+ If the .grid-full is nested within the following, apply the appropriate number of columns.
+ - .layout--content-medium class.
+ - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+.layout--content-medium .grid-full,
+.layout--pass--content-medium > * .grid-full {
+ @media (--grid-md) {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
+ }
+
+ @media (--lg) {
+ grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
+ }
+}
diff --git a/css_bk/layout/pcss/layout-builder-fourcol-section.pcss.css b/css_bk/layout/pcss/layout-builder-fourcol-section.pcss.css
new file mode 100755
index 0000000..012c243
--- /dev/null
+++ b/css_bk/layout/pcss/layout-builder-fourcol-section.pcss.css
@@ -0,0 +1,66 @@
+/*
+ * @file
+ * Provides the layout styles for four-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--fourcol-section {
+ display: flex;
+ flex-wrap: wrap;
+
+ & > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+
+ @media (--md) {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+ }
+
+ /* Two column layout. */
+ @media (--md) {
+ & > .layout__region--first,
+ & > .layout__region--second {
+ margin-block-end: var(--grid-gap);
+ }
+
+ & > .layout__region--first,
+ & > .layout__region--third {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--second,
+ & > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ }
+
+ /* Four column layout. */
+ @media (--lg) {
+ & > .layout__region {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.75));
+ }
+
+ & > .layout__region--first,
+ & > .layout__region--second {
+ margin-block-end: 0;
+ }
+
+ & > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--second,
+ & > .layout__region--third {
+ margin-inline: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--fourth {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-builder-threecol-section.pcss.css b/css_bk/layout/pcss/layout-builder-threecol-section.pcss.css
new file mode 100755
index 0000000..afb669c
--- /dev/null
+++ b/css_bk/layout/pcss/layout-builder-threecol-section.pcss.css
@@ -0,0 +1,79 @@
+/*
+ * @file
+ * Provides the layout styles for three-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--threecol-section {
+ display: flex;
+ flex-wrap: wrap;
+
+ & > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+
+ @media (--lg) {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+ }
+}
+
+@media (--lg) {
+ .layout--threecol-section {
+ & > .layout__region--first {
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--second {
+ margin-inline: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--third {
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ }
+
+ .layout--threecol-section--25-50-25 {
+ & > .layout__region--first,
+ & > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ }
+
+ .layout--threecol-section--25-25-50 {
+ & > .layout__region--first,
+ & > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+
+ & > .layout__region--third {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+ }
+
+ .layout--threecol-section--50-25-25 {
+ & > .layout__region--first {
+ flex-basis: calc(50% - var(--grid-gap));
+ }
+
+ & > .layout__region--second,
+ & > .layout__region--third {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.5));
+ }
+ }
+
+ .layout--threecol-section--33-34-33 {
+ & > .layout__region--first,
+ & > .layout__region--second,
+ & > .layout__region--third {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-builder-twocol-section.pcss.css b/css_bk/layout/pcss/layout-builder-twocol-section.pcss.css
new file mode 100755
index 0000000..ea05bc6
--- /dev/null
+++ b/css_bk/layout/pcss/layout-builder-twocol-section.pcss.css
@@ -0,0 +1,84 @@
+/*
+ * @file
+ * Provides the layout styles for two-column layout section.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--twocol-section {
+ display: flex;
+ flex-wrap: wrap;
+
+ & > .layout__region {
+ flex: 1 0 100%;
+ margin-block-end: var(--grid-gap);
+
+ @media (--md) {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-block-end: 0;
+ }
+ }
+}
+
+@media (--md) {
+ .layout--twocol-section--50-50 {
+ & > .layout__region--first {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-end: calc(var(--grid-gap) * 0.5);
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+ margin-inline-start: calc(var(--grid-gap) * 0.5);
+ }
+ }
+
+ .layout--twocol-section--33-67 {
+ & > .layout__region--first {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-end: calc(var(--grid-gap) * 0.3333);
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-start: calc(var(--grid-gap) * 0.6666);
+ }
+ }
+
+ .layout--twocol-section--67-33 {
+ & > .layout__region--first {
+ flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+ margin-inline-end: calc(var(--grid-gap) * 0.6666);
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+ margin-inline-start: calc(var(--grid-gap) * 0.3333);
+ }
+ }
+
+ .layout--twocol-section--25-75 {
+ & > .layout__region--first {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-end: calc(var(--grid-gap) * 0.25);
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-start: calc(var(--grid-gap) * 0.75);
+ }
+ }
+
+ .layout--twocol-section--75-25 {
+ & > .layout__region--first {
+ flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+ margin-inline-end: calc(var(--grid-gap) * 0.75);
+ }
+
+ & > .layout__region--second {
+ flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+ margin-inline-start: calc(var(--grid-gap) * 0.25);
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-content-medium.pcss.css b/css_bk/layout/pcss/layout-content-medium.pcss.css
new file mode 100755
index 0000000..fc9be63
--- /dev/null
+++ b/css_bk/layout/pcss/layout-content-medium.pcss.css
@@ -0,0 +1,39 @@
+/**
+ * @file
+ * Grid system definition for the content wide layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--content-medium,
+.layout--pass--content-medium > * {
+ grid-column: 1 / 7;
+ width: 100%;
+
+ @media (--grid-md) {
+ grid-column: 2 / 14;
+ }
+
+ @media (--lg) {
+ grid-column: 3 / 13;
+ }
+}
+
+/*
+ If .layout--content-medium is nested within itself, or an element that's inheriting the
+ layout--content-medium styles from its parent region, go full width within its
+ parent .grid-full.
+*/
+.layout--pass--content-medium > *,
+.layout--content-medium {
+ & .layout--content-medium,
+ & .layout--pass--content-medium > * {
+ @media (--grid-md) {
+ grid-column: 1 / 13;
+ }
+
+ @media (--lg) {
+ grid-column: 1 / 11;
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-content-narrow.pcss.css b/css_bk/layout/pcss/layout-content-narrow.pcss.css
new file mode 100755
index 0000000..86fc642
--- /dev/null
+++ b/css_bk/layout/pcss/layout-content-narrow.pcss.css
@@ -0,0 +1,105 @@
+/**
+ * @file
+ * Grid system definition for the content narrow layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+ grid-column: 1 / 7;
+ width: 100%;
+
+ @media (--grid-md) {
+ grid-column: 2 / 14;
+ }
+
+ @media (--lg) {
+ grid-column: 3 / 11;
+ }
+}
+
+/*
+ If .layout--content-narrow is nested within any of the following, allocate the appropriate
+ amount of columns within its parent .grid-full.
+ - .layout--content-narrow class.
+ - Element that's inheriting the layout--content-narrow styles from its parent region.
+ - .layout--content-medium class.
+ - Element that's inheriting the layout--content-medium styles from its parent region.
+*/
+.layout--content-narrow,
+.layout--pass--content-narrow > *,
+.layout--content-medium,
+.layout--pass--content-medium > * {
+ & .layout--content-narrow,
+ & .layout--pass--content-narrow > * {
+ @media (--grid-md) {
+ grid-column: 1 / 13;
+ }
+
+ @media (--lg) {
+ grid-column: 1 / 9;
+ }
+ }
+}
+
+/*
+ Special grid-breaking treatment for text-content elements that
+ reside in a content-narrow layout.
+*/
+.layout--content-narrow,
+.layout--pass--content-narrow > * {
+ &.text-content,
+ & .text-content {
+ & blockquote {
+ &::before {
+ @media (--grid-md) {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ }
+ }
+
+ &::after {
+ @media (--grid-md) {
+ inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
+ width: var(--sp);
+ height: calc(100% - 45px);
+ margin-inline-start: 2px;
+ }
+ }
+
+ @media (--grid-md) {
+ width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
+ margin-block: var(--sp3);
+ padding-inline-start: 0;
+ }
+ }
+
+ & pre {
+ @media (--grid-md) {
+ margin-block: var(--sp3);
+ }
+
+ @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)));
+ }
+ }
+ }
+}
+
+/**
+ * and elements should not break containers and overflow
+ * into sidebar region when present.
+ */
+.sidebar-grid {
+ & .layout--content-narrow,
+ & .layout--pass--content-narrow > * {
+ &.text-content,
+ & .text-content {
+ & blockquote,
+ & pre {
+ width: auto;
+ }
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-discovery-section-layout.pcss.css b/css_bk/layout/pcss/layout-discovery-section-layout.pcss.css
new file mode 100755
index 0000000..d5d3353
--- /dev/null
+++ b/css_bk/layout/pcss/layout-discovery-section-layout.pcss.css
@@ -0,0 +1,18 @@
+/*
+ * @file
+ * Provides default layout styles for all layout sections.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.layout {
+ margin-block-end: var(--sp);
+
+ @media (--md) {
+ margin-block-end: var(--sp2);
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/layout/pcss/layout-footer.pcss.css b/css_bk/layout/pcss/layout-footer.pcss.css
new file mode 100755
index 0000000..2e91e4f
--- /dev/null
+++ b/css_bk/layout/pcss/layout-footer.pcss.css
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Grid system definition for the footer top and footer bottom layouts.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+.site-footer {
+ position: relative;
+ z-index: 1;
+}
+
+.site-footer__inner {
+ padding-block: var(--sp2);
+
+ @media (--nav) {
+ padding-block: var(--sp4) calc(13 * var(--sp));
+ }
+}
+
+.region--footer_top__inner,
+.region--footer_bottom__inner {
+ & > * {
+ margin-block-end: var(--sp2);
+
+ @media (--md) {
+ flex: 1;
+ margin-block-end: 0;
+
+ &:not(:last-child) {
+ margin-inline-end: var(--sp2);
+ }
+ }
+ }
+
+ @media (--md) {
+ display: flex;
+ flex-wrap: wrap;
+ }
+}
diff --git a/css_bk/layout/pcss/layout-sidebar.pcss.css b/css_bk/layout/pcss/layout-sidebar.pcss.css
new file mode 100755
index 0000000..6cd6c50
--- /dev/null
+++ b/css_bk/layout/pcss/layout-sidebar.pcss.css
@@ -0,0 +1,48 @@
+/**
+ * @file
+ * Special grid system for sidebar.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.sidebar-grid {
+ & > .site-main {
+ grid-column: 1 / 7;
+ align-self: flex-start;
+
+ @media (--grid-md) {
+ grid-column: 1 / 15;
+ }
+
+ @media (--lg) {
+ display: grid;
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 3 / 11;
+
+ & > .region--content-above,
+ & > .region--content {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ grid-column: 1 / 9;
+ }
+
+ & .layout--content-narrow,
+ & .layout--pass--content-narrow > *,
+ & .layout--content-medium,
+ & .layout--pass--content-medium > * {
+ grid-column: 1 / 9;
+ }
+ }
+ }
+
+ & .region--sidebar {
+ grid-column: 1 / 7;
+
+ @media (--grid-md) {
+ grid-column: 3 / 13;
+ }
+
+ @media (--lg) {
+ grid-column: 12 / 15;
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout-views-grid.pcss.css b/css_bk/layout/pcss/layout-views-grid.pcss.css
new file mode 100755
index 0000000..af26f8a
--- /dev/null
+++ b/css_bk/layout/pcss/layout-views-grid.pcss.css
@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.views-view-grid {
+ --views-grid--layout-gap: var(--sp);
+ --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+ --views-grid-item--min-width: 100px;
+}
+
+.views-view-grid--horizontal {
+ /**
+ * Calculated values.
+ */
+ --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+ --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+ --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+ grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+ margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+ column-width: var(--views-grid-item--min-width);
+ column-count: var(--views-grid--column-count);
+ column-gap: var(--views-grid--layout-gap);
+
+ & .views-view-grid__item {
+ & > * {
+ padding-block-end: var(--views-grid--layout-gap);
+ break-inside: avoid;
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/layout.pcss.css b/css_bk/layout/pcss/layout.pcss.css
new file mode 100755
index 0000000..ded782c
--- /dev/null
+++ b/css_bk/layout/pcss/layout.pcss.css
@@ -0,0 +1,57 @@
+/**
+ * @file
+ * Base Layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.container {
+ width: 100%;
+ max-width: var(--max-width);
+ padding-inline: var(--container-padding);
+
+ /* This fixes an issue where if the toolbar is open in vertical mode, and
+ * the mobile navigation is open, the "close" button gets pushed outside of
+ * the viewport. */
+ @nest body.is-fixed & {
+ width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
+ }
+}
+
+.page-wrapper {
+ max-width: var(--max-bg-color);
+ background: var(--color--white);
+}
+
+/**
+ * Creates stacking context ensuring that child elements can never appear in
+ * front of mobile navigation.
+ */
+.layout-main-wrapper {
+ position: relative;
+ z-index: 2; /* Ensure dropdown is not cut off by footer. */
+}
+
+/* Contains the social sidebar, and the primary content area. */
+.layout-main {
+ @media (--nav) {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap;
+ }
+}
+
+.main-content {
+ @media (--nav) {
+ width: calc(100% - var(--content-left));
+ margin-inline-end: auto;
+ }
+}
+
+.main-content__container {
+ padding-block-start: var(--sp3);
+
+ @media (--md) {
+ padding-block-start: var(--sp5);
+ }
+}
diff --git a/css_bk/layout/pcss/region-content-below.pcss.css b/css_bk/layout/pcss/region-content-below.pcss.css
new file mode 100755
index 0000000..8fbc837
--- /dev/null
+++ b/css_bk/layout/pcss/region-content-below.pcss.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Content below region layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--content-below {
+ @media (--md) {
+ display: flex;
+ flex-wrap: wrap;
+
+ & > * {
+ flex-basis: calc(50% - (var(--grid-gap) / 2));
+ flex-grow: 1;
+ flex-shrink: 0;
+ margin-inline-end: var(--grid-gap);
+
+ &:nth-child(2n),
+ &:last-child {
+ margin-inline-end: 0;
+ }
+ }
+ }
+
+ @media (--md) {
+ & > * {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+
+ &:nth-child(2n),
+ &:last-child {
+ margin-inline-end: var(--grid-gap);
+ }
+
+ &:nth-child(3n),
+ &:last-child {
+ margin-inline-end: 0;
+ }
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/region-content.pcss.css b/css_bk/layout/pcss/region-content.pcss.css
new file mode 100755
index 0000000..4e1fddb
--- /dev/null
+++ b/css_bk/layout/pcss/region-content.pcss.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Content region layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--content {
+ margin-block-end: var(--sp);
+
+ @media (--md) {
+ margin-block-end: var(--sp2);
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/layout/pcss/region-hero.pcss.css b/css_bk/layout/pcss/region-hero.pcss.css
new file mode 100755
index 0000000..4e2526a
--- /dev/null
+++ b/css_bk/layout/pcss/region-hero.pcss.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Region default layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--hero {
+ & > *:last-child {
+ margin-block-end: 0;
+ }
+}
diff --git a/css_bk/layout/pcss/region-secondary-menu.pcss.css b/css_bk/layout/pcss/region-secondary-menu.pcss.css
new file mode 100755
index 0000000..2bb13ed
--- /dev/null
+++ b/css_bk/layout/pcss/region-secondary-menu.pcss.css
@@ -0,0 +1,30 @@
+/**
+ * @file
+ * Secondary menu region layout styling.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region--secondary-menu {
+ display: flex;
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+
+ & > * {
+ margin-block-end: 0;
+ }
+}
+
+body:not(.is-always-mobile-nav) {
+ @media (--nav) {
+ & .region--secondary-menu {
+ justify-content: flex-end;
+ margin: 0;
+
+ /* If the secondary nav is the first item within the header, it does not need left separator. */
+ &:first-child .secondary-nav::before {
+ content: none;
+ }
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/region.pcss.css b/css_bk/layout/pcss/region.pcss.css
new file mode 100755
index 0000000..c04a060
--- /dev/null
+++ b/css_bk/layout/pcss/region.pcss.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Region default layout.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.region > * {
+ margin-block-end: var(--sp);
+
+ @media (--md) {
+ margin-block-end: var(--sp2);
+ }
+
+ @media (--lg) {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/layout/pcss/social-bar.pcss.css b/css_bk/layout/pcss/social-bar.pcss.css
new file mode 100755
index 0000000..4116e35
--- /dev/null
+++ b/css_bk/layout/pcss/social-bar.pcss.css
@@ -0,0 +1,105 @@
+/**
+ * @file
+ * Social Bar Region
+ .
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.social-bar {
+ @media (--nav) {
+ flex-shrink: 0;
+ width: var(--content-left);
+ background-color: var(--color--gray-100);
+ }
+}
+
+.social-bar__inner {
+ position: relative;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+
+ @media (--nav) {
+ position: relative;
+ width: var(--content-left);
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+
+ &.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
+ }
+ }
+}
+
+.rotate {
+ & > * {
+ margin-block-end: var(--sp2);
+
+ @media (--nav) {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+
+ &:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
+ }
+ }
+
+ & .contextual {
+ @media (--nav) {
+ inset-inline: 100% auto;
+ transform: rotate(90deg); /* LTR */
+ transform-origin: top left; /* LTR */
+
+ & .trigger {
+ float: left; /* LTR */
+
+ /**
+ * Chromium and Webkit do not yet support flow relative logical properties,
+ * such as float: inline-end. However, PostCSS Logical does not compile this
+ * value, so we accommodate by not using these.
+ *
+ * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+ * @see https://github.com/csstools/postcss-plugins/issues/632
+ */
+ &:dir(rtl) {
+ float: right;
+ }
+ }
+ }
+ }
+
+ @media (--nav) {
+ position: absolute;
+ inset-inline-start: 50%;
+ display: flex;
+ flex-direction: row-reverse;
+ width: 100vh;
+ transform: rotate(-90deg) translateX(-100%); /* LTR */
+ transform-origin: left; /* LTR */
+
+ @supports (width: max-content) {
+ width: max-content;
+ }
+ }
+}
+
+[dir="rtl"] {
+ @media (--nav) {
+ & .rotate {
+ transform: rotate(90deg) translateX(100%);
+ transform-origin: right;
+
+ & .contextual {
+ transform: rotate(-90deg);
+ transform-origin: top right;
+ }
+ }
+ }
+}
diff --git a/css_bk/layout/pcss/views.pcss.css b/css_bk/layout/pcss/views.pcss.css
new file mode 100755
index 0000000..cbc6f03
--- /dev/null
+++ b/css_bk/layout/pcss/views.pcss.css
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Styles for views.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.view {
+ & > * {
+ margin-block-end: var(--sp2);
+
+ &:last-child {
+ margin-block-end: 0;
+ }
+
+ @media (--md) {
+ margin-block-end: var(--sp3);
+ }
+ }
+}
diff --git a/css_bk/layout/region-content-below.css b/css_bk/layout/region-content-below.css
new file mode 100755
index 0000000..14341c4
--- /dev/null
+++ b/css_bk/layout/region-content-below.css
@@ -0,0 +1,46 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Content below region layout.
+ */
+
+@media (min-width: 43.75rem) {
+ .region--content-below {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .region--content-below > * {
+ flex-basis: calc(50% - (var(--grid-gap) / 2));
+ flex-grow: 1;
+ flex-shrink: 0;
+ margin-inline-end: var(--grid-gap);
+ }
+
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
+ }
+}
+
+@media (min-width: 43.75rem) {
+ .region--content-below > * {
+ flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
+ }
+
+ .region--content-below > *:nth-child(2n),
+ .region--content-below > *:last-child {
+ margin-inline-end: var(--grid-gap);
+ }
+
+ .region--content-below > *:nth-child(3n),
+ .region--content-below > *:last-child {
+ margin-inline-end: 0;
+ }
+}
diff --git a/css_bk/layout/region-content.css b/css_bk/layout/region-content.css
new file mode 100755
index 0000000..7e60724
--- /dev/null
+++ b/css_bk/layout/region-content.css
@@ -0,0 +1,27 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Content region layout.
+ */
+
+.region--content {
+ margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+ .region--content {
+ margin-block-end: var(--sp2);
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .region--content {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/layout/region-hero.css b/css_bk/layout/region-hero.css
new file mode 100755
index 0000000..f739ad9
--- /dev/null
+++ b/css_bk/layout/region-hero.css
@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Region default layout.
+ */
+
+.region--hero > *:last-child {
+ margin-block-end: 0;
+}
diff --git a/css_bk/layout/region-secondary-menu.css b/css_bk/layout/region-secondary-menu.css
new file mode 100755
index 0000000..5f17730
--- /dev/null
+++ b/css_bk/layout/region-secondary-menu.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
+ * Secondary menu region layout styling.
+ */
+
+.region--secondary-menu {
+ display: flex;
+ margin-block-start: var(--sp2);
+ margin-block-end: var(--sp2);
+}
+
+.region--secondary-menu > * {
+ margin-block-end: 0;
+}
+
+@media (min-width: 75rem) {
+ body:not(.is-always-mobile-nav) .region--secondary-menu {
+ justify-content: flex-end;
+ margin: 0;
+
+ /* If the secondary nav is the first item within the header, it does not need left separator. */
+ }
+ body:not(.is-always-mobile-nav) .region--secondary-menu:first-child .secondary-nav::before {
+ content: none;
+ }
+}
diff --git a/css_bk/layout/region.css b/css_bk/layout/region.css
new file mode 100755
index 0000000..64e80d6
--- /dev/null
+++ b/css_bk/layout/region.css
@@ -0,0 +1,142 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Region default layout.
+ */
+
+.region > * {
+ margin-block-end: var(--sp);
+}
+
+@media (min-width: 43.75rem) {
+ .region > * {
+ margin-block-end: var(--sp2);
+ }
+}
+
+@media (min-width: 62.5rem) {
+ .region > * {
+ margin-block-end: var(--sp3);
+ }
+}
+
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Social Bar Region
+ .
+ */
+
+@media (min-width: 75rem) {
+ .social-bar {
+ flex-shrink: 0;
+ width: var(--content-left);
+ background-color: var(--color--gray-100);
+ }
+}
+
+.social-bar__inner {
+ position: relative;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+}
+
+@media (min-width: 75rem) {
+ .social-bar__inner {
+ position: relative;
+ width: var(--content-left);
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
+
+ .social-bar__inner.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
+ }
+}
+
+.rotate > * {
+ margin-block-end: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+ .rotate > * {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+ }
+
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate .contextual {
+ inset-inline: 100% auto;
+ transform: rotate(90deg); /* LTR */
+ transform-origin: top left; /* LTR */
+ }
+
+ .rotate .contextual .trigger {
+ float: left; /* LTR */
+
+ /**
+ * 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"] .rotate .contextual .trigger {
+ float: right;
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate {
+ position: absolute;
+ inset-inline-start: 50%;
+ display: flex;
+ flex-direction: row-reverse;
+ width: 100vh;
+ transform: rotate(-90deg) translateX(-100%); /* LTR */
+ transform-origin: left; /* LTR */
+ }
+
+ @supports (width: max-content) {
+ .rotate {
+ width: max-content;
+ }
+ }
+}
+
+@media (min-width: 75rem) {
+ [dir="rtl"] .rotate {
+ transform: rotate(90deg) translateX(100%);
+ transform-origin: right;
+ }
+
+ [dir="rtl"] .rotate .contextual {
+ transform: rotate(-90deg);
+ transform-origin: top right;
+ }
+}
diff --git a/css_bk/layout/social-bar.css b/css_bk/layout/social-bar.css
new file mode 100755
index 0000000..2b5b72e
--- /dev/null
+++ b/css_bk/layout/social-bar.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
+ * Social Bar Region
+ .
+ */
+
+@media (min-width: 75rem) {
+ .social-bar {
+ flex-shrink: 0;
+ width: var(--content-left);
+ background-color: var(--color--gray-100);
+ }
+}
+
+.social-bar__inner {
+ position: relative;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+}
+
+@media (min-width: 75rem) {
+ .social-bar__inner {
+ position: relative;
+ width: var(--content-left);
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
+
+ .social-bar__inner.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
+ }
+}
+
+.rotate > * {
+ margin-block-end: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+ .rotate > * {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+ }
+
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate .contextual {
+ inset-inline: 100% auto;
+ transform: rotate(90deg); /* LTR */
+ transform-origin: top left; /* LTR */
+ }
+
+ .rotate .contextual .trigger {
+ float: left; /* LTR */
+
+ /**
+ * 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"] .rotate .contextual .trigger {
+ float: right;
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate {
+ position: absolute;
+ inset-inline-start: 50%;
+ display: flex;
+ flex-direction: row-reverse;
+ width: 100vh;
+ transform: rotate(-90deg) translateX(-100%); /* LTR */
+ transform-origin: left; /* LTR */
+ }
+
+ @supports (width: max-content) {
+ .rotate {
+ width: max-content;
+ }
+ }
+}
+
+@media (min-width: 75rem) {
+ [dir="rtl"] .rotate {
+ transform: rotate(90deg) translateX(100%);
+ transform-origin: right;
+ }
+
+ [dir="rtl"] .rotate .contextual {
+ transform: rotate(-90deg);
+ transform-origin: top right;
+ }
+}
diff --git a/css_bk/layout/social-bar_.css b/css_bk/layout/social-bar_.css
new file mode 100755
index 0000000..2b5b72e
--- /dev/null
+++ b/css_bk/layout/social-bar_.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
+ * Social Bar Region
+ .
+ */
+
+@media (min-width: 75rem) {
+ .social-bar {
+ flex-shrink: 0;
+ width: var(--content-left);
+ background-color: var(--color--gray-100);
+ }
+}
+
+.social-bar__inner {
+ position: relative;
+ padding-block: var(--sp0-5);
+ padding-inline-start: var(--sp);
+ padding-inline-end: var(--sp);
+}
+
+@media (min-width: 75rem) {
+ .social-bar__inner {
+ position: relative;
+ width: var(--content-left);
+ padding-block: calc(5 * var(--sp));
+ padding-inline-start: 0;
+ padding-inline-end: 0;
+ }
+
+ .social-bar__inner.is-fixed {
+ position: fixed;
+ inset-block-start: var(--sp6);
+ inset-inline-start: 0;
+ height: calc(100vh - 6 * var(--sp));
+ }
+}
+
+.rotate > * {
+ margin-block-end: var(--sp2);
+}
+
+@media (min-width: 75rem) {
+ .rotate > * {
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+ }
+
+ .rotate > *:not(:first-child) {
+ margin-inline-end: var(--sp2);
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate .contextual {
+ inset-inline: 100% auto;
+ transform: rotate(90deg); /* LTR */
+ transform-origin: top left; /* LTR */
+ }
+
+ .rotate .contextual .trigger {
+ float: left; /* LTR */
+
+ /**
+ * 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"] .rotate .contextual .trigger {
+ float: right;
+ }
+}
+
+@media (min-width: 75rem) {
+ .rotate {
+ position: absolute;
+ inset-inline-start: 50%;
+ display: flex;
+ flex-direction: row-reverse;
+ width: 100vh;
+ transform: rotate(-90deg) translateX(-100%); /* LTR */
+ transform-origin: left; /* LTR */
+ }
+
+ @supports (width: max-content) {
+ .rotate {
+ width: max-content;
+ }
+ }
+}
+
+@media (min-width: 75rem) {
+ [dir="rtl"] .rotate {
+ transform: rotate(90deg) translateX(100%);
+ transform-origin: right;
+ }
+
+ [dir="rtl"] .rotate .contextual {
+ transform: rotate(-90deg);
+ transform-origin: top right;
+ }
+}
diff --git a/css_bk/layout/views.css b/css_bk/layout/views.css
new file mode 100755
index 0000000..e97620b
--- /dev/null
+++ b/css_bk/layout/views.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
+ * Styles for views.
+ */
+
+.view > * {
+ margin-block-end: var(--sp2);
+}
+
+.view > *:last-child {
+ margin-block-end: 0;
+}
+
+@media (min-width: 43.75rem) {
+ .view > * {
+ margin-block-end: var(--sp3);
+ }
+}
diff --git a/css_bk/theme/filter.theme.css b/css_bk/theme/filter.theme.css
new file mode 100755
index 0000000..ac53a01
--- /dev/null
+++ b/css_bk/theme/filter.theme.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
+ * Styling for the Filter module.
+ */
+
+/**
+ * Filter information under field.
+ */
+
+.text-full > .form-item {
+ margin-block-end: 0;
+}
+
+.form-element--editor-format {
+ vertical-align: top;
+}
+
+.filter-wrapper {
+ margin-block: var(--sp1) var(--sp0-5);
+}
+
+.filter-wrapper .form-item {
+ margin: 0;
+}
+
+.filter-help {
+ float: right; /* LTR */
+ padding-block: var(--sp0-5);
+ font-size: var(--font-size-xxs);
+
+ /**
+ * 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"] .filter-help {
+ float: left;
+}
+
+/**
+ * Compose tips.
+ *
+ * Wraps filter tips on page '/filter/tips[/name]'.
+ */
+
+.compose-tips__item {
+ margin-block: var(--sp1-5);
+}
+
+/**
+ * Filter guidelines.
+ */
+
+.filter-guidelines__item {
+ margin-block-start: var(--sp1);
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
+}
+
+.filter-guidelines p {
+ margin-block: var(--sp0-25) 0;
+}
+
+/**
+ * Filter tips.
+ *
+ * Long is used on '/filter/tips[/name]', short is used for the filter tips
+ * below a text format input.
+ */
+
+.filter-tips--long {
+ margin-block-end: var(--sp1-5);
+}
+
+.filter-tips__item,
+.filter-tips--long p {
+ margin-block: var(--sp0-75);
+}
+
+.filter-tips__item--short {
+ margin-block: var(--sp0-25) 0;
+}
diff --git a/css_bk/theme/pcss/filter.theme.pcss.css b/css_bk/theme/pcss/filter.theme.pcss.css
new file mode 100755
index 0000000..29ea34c
--- /dev/null
+++ b/css_bk/theme/pcss/filter.theme.pcss.css
@@ -0,0 +1,80 @@
+/**
+ * @file
+ * Styling for the Filter module.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+/**
+ * Filter information under field.
+ */
+.text-full > .form-item {
+ margin-block-end: 0;
+}
+.form-element--editor-format {
+ vertical-align: top;
+}
+
+.filter-wrapper {
+ margin-block: var(--sp1) var(--sp0-5);
+}
+
+.filter-wrapper .form-item {
+ margin: 0;
+}
+
+.filter-help {
+ float: right; /* LTR */
+ padding-block: var(--sp0-5);
+ font-size: var(--font-size-xxs);
+
+ /**
+ * 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;
+ }
+}
+
+/**
+ * Compose tips.
+ *
+ * Wraps filter tips on page '/filter/tips[/name]'.
+ */
+.compose-tips__item {
+ margin-block: var(--sp1-5);
+}
+
+/**
+ * Filter guidelines.
+ */
+.filter-guidelines__item {
+ margin-block-start: var(--sp1);
+ font-size: var(--font-size-s);
+ line-height: var(--line-height-s);
+}
+.filter-guidelines p {
+ margin-block: var(--sp0-25) 0;
+}
+
+/**
+ * Filter tips.
+ *
+ * Long is used on '/filter/tips[/name]', short is used for the filter tips
+ * below a text format input.
+ */
+.filter-tips--long {
+ margin-block-end: var(--sp1-5);
+}
+.filter-tips__item,
+.filter-tips--long p {
+ margin-block: var(--sp0-75);
+}
+.filter-tips__item--short {
+ margin-block: var(--sp0-25) 0;
+}