/* fonts.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Base Fonts.
 */

@font-face {
  font-family: metropolis;
  src: url("/core/themes/olivero/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: metropolis;
  src: url("/core/themes/olivero/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: metropolis;
  src: url("/core/themes/olivero/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* lora-regular - latin */

@font-face {
  font-family: Lora;
  src:
    local("Lora Regular"),
    local("Lora-Regular"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* lora-italic - latin */

@font-face {
  font-family: Lora;
  src:
    local("Lora Italic"),
    local("Lora-Italic"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* lora-700 - latin */

@font-face {
  font-family: Lora;
  src:
    local("Lora Bold"),
    local("Lora-Bold"),
    url("/core/themes/olivero/fonts/lora/lora-v14-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* variables.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
  Global CSS custom properties.
*/

/* stylelint-disable */

:root {
  --font-sans: "metropolis", sans-serif;
  --font-serif: "Lora", "georgia", serif;

  /* Typography helpers. */
  --font-size-base: 1rem;
  --font-size-l: 1.125rem;
  --font-size-s: 0.875rem;
  --font-size-xs: 0.8125rem;
  --font-size-xxs: 0.75rem;
  --line-height-base: 1.6875rem;
  --line-height-s: 1.125rem;

  /* Layout helpers. */
  --max-width: 84.375rem;
  --max-bg-color: 98.125rem; /* Width to which the background color extends to. */
  --sp: 1.125rem;
  --content-left: 5.625rem;
  --site-header-height-wide: var(--sp10);
  --container-padding: var(--sp); /* Inline padding on .container elements. */

  @media (min-width: 75rem) {
    --container-padding: var(--sp2);
  }

  /**
   * Grid helpers.
   *
   * These variables help authors apply widths and negative margins to break items out of
   * the grid, while still conforming to the larger grid system.
   */
  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
  --grid-col-count: 6;
  --grid-gap: var(--sp);
  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */

  @media (min-width: 43.75rem) {
    --grid-col-count: 14;
    --grid-gap: var(--sp2);
  }

  @media (min-width: 62.5rem) {
    --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
  }

  @media (min-width: 75rem) {
    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
  }

  @media (min-width: 90rem) {
    --grid-full-width: calc(var(--max-width) - var(--sp4));
  }

  /* Layout helpers */
  --sp0-25: calc(0.25 * var(--sp));
  --sp0-5: calc(0.5 * var(--sp));
  --sp0-75: calc(0.75 * var(--sp));
  --sp1: calc(1 * var(--sp));
  --sp1-5: calc(1.5 * var(--sp));
  --sp2: calc(2 * var(--sp));
  --sp2-5: calc(2.5 * var(--sp));
  --sp3: calc(3 * var(--sp));
  --sp3-5: calc(3.5 * var(--sp));
  --sp4: calc(4 * var(--sp));
  --sp4-5: calc(4.5 * var(--sp));
  --sp5: calc(5 * var(--sp));
  --sp6: calc(6 * var(--sp));
  --sp7: calc(7 * var(--sp));
  --sp8: calc(8 * var(--sp));
  --sp9: calc(9 * var(--sp));
  --sp10: calc(10 * var(--sp));
  --sp11: calc(11 * var(--sp));
  --sp12: calc(12 * var(--sp));
  --sp13: calc(13 * var(--sp));

  /**
   * Gray colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--gray-hue: 201;
  --color--gray-saturation: 15%;
  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */
  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);
  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */
  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */
  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */
  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */
  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */
  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */
  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */
  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */

  /**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary-hue: 202;
  --color--primary-saturation: 79%;
  --color--primary-lightness: 50;
  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));
  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */
  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
  --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */

  /**
   * Variables specific to text.
   */
  --color-text-neutral-soft: var(--color--gray-45);
  --color-text-neutral-medium: var(--color--gray-20);
  --color-text-neutral-loud: var(--color--gray-5);

  --color-text-primary-medium: var(--color--primary-40);
  --color-text-primary-loud: var(--color--primary-30);

  /**
   * Named Colors.
   */
  --color--black: #000; /* Black */
  --color--white: #fff; /* White */
  --color--red: #e33f1e; /* Red */
  --color--gold: #fdca40; /* Gold */
  --color--green: #3fa21c; /* Green */

  /* Header */
  --header-height-wide-when-fixed: var(--sp6);

  /* Width of slide out navigation */
  --mobile-nav-width: 31.25rem;

  /* Border radius */
  --border-radius: 0.1875rem;
}

/* base.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Generic base elements.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  line-height: var(--line-height-base);
}

body {
  margin: 0;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--color-text-neutral-medium);
  background-color: var(--color--gray-100);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
  background-position: top left; /* LTR */

  &.is-fixed {
    position: fixed;
    overflow: hidden;
    width: 100%;
  }
}

[dir="rtl"] body {
  background-position: top right;
}

a {
  color: var(--color-text-primary-medium);

  &:hover {
    color: var(--color--primary-50);
  }

  &:focus {
    outline: solid 2px currentColor;
    outline-offset: 2px;
  }
}

button {
  font-family: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

audio {
  display: block;
  max-width: 100%;
}

h1 {
  letter-spacing: -0.01em;
  font-size: 1.75rem;
  line-height: var(--sp2);

  @media (min-width: 43.75rem) {
    font-size: 3.75rem;
    line-height: var(--sp4);
  }
}

h2 {
  letter-spacing: -0.01em;
  font-size: 1.5rem;
  line-height: var(--sp2);

  @media (min-width: 43.75rem) {
    font-size: 2.25rem;
    line-height: var(--sp3);
  }
}

h3 {
  font-size: 1.25rem;
  line-height: var(--sp1-5);

  @media (min-width: 43.75rem) {
    font-size: 1.5rem;
    line-height: var(--sp2);
  }
}

h4 {
  font-size: 1.125rem;
  line-height: var(--sp1-5);
}

h5 {
  font-size: 1rem;
  line-height: var(--sp1-5);
}

h6 {
  font-size: 0.875rem;
  line-height: var(--sp);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: var(--sp);
  color: var(--color-text-neutral-loud);
  font-family: var(--font-sans);
  font-weight: bold;

  @media (min-width: 43.75rem) {
    margin-block: var(--sp2);
  }
}

ul {
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
  margin-inline-start: 1.5em;
  margin-inline-end: 0;
  padding-inline-start: 0;
  list-style-image: none;
}

/* layout.css */
/*
 * 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 & {
    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 (min-width: 75rem) {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
}

.main-content {
  @media (min-width: 75rem) {
    width: calc(100% - var(--content-left));
    margin-inline-end: auto;
  }
}

.main-content__container {
  padding-block-start: var(--sp3);

  @media (min-width: 43.75rem) {
    padding-block-start: var(--sp5);
  }
}

/*
 * Contextual link wrappers load without the ".contextual" CSS class, which
 * causes layout shifts. We fix this by setting this to position: absolute;
 */

[data-contextual-id]:not(.contextual) {
  position: absolute;
}

/* grid.css */
/*
 * 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 {
    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 (min-width: 43.75rem) {
    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  }

  @media (min-width: 62.5rem) {
    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 (min-width: 43.75rem) {
    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
  }

  @media (min-width: 62.5rem) {
    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
  }
}

/* layout-content-narrow.css */
/*
 * 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) {
    grid-column: 2 / 14;
  }

  @media (min-width: 62.5rem) {
    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 (min-width: 43.75rem) {
      grid-column: 1 / 13;
    }

    @media (min-width: 62.5rem) {
      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 (min-width: 43.75rem) {
          inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
        }
      }

      &::after {
        @media (min-width: 43.75rem) {
          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) {
        width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
        margin-block: var(--sp3);
        padding-inline-start: 0;
      }
    }

    & pre {
      @media (min-width: 43.75rem) {
        margin-block: var(--sp3);
      }

      @media (min-width: 62.5rem) {
        width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
        margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
      }
    }
  }
}

/**
 * <pre> and <blockquote> 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;
      }
    }
  }
}

/* layout-content-medium.css */
/*
 * 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) {
    grid-column: 2 / 14;
  }

  @media (min-width: 62.5rem) {
    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 (min-width: 43.75rem) {
      grid-column: 1 / 13;
    }

    @media (min-width: 62.5rem) {
      grid-column: 1 / 11;
    }
  }
}

/* layout-footer.css */
/*
 * 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) {
    padding-block: var(--sp4) var(--sp13);
  }
}

.region--footer_top__inner,
.region--footer_bottom__inner {
  & > * {
    margin-block-end: var(--sp2);

    @media (min-width: 43.75rem) {
      flex: 1;
      margin-block-end: 0;

      &:not(:last-child) {
        margin-inline-end: var(--sp2);
      }
    }
  }

  @media (min-width: 43.75rem) {
    display: flex;
    flex-wrap: wrap;
  }
}

/* region.css */
/*
 * 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 > *:where(:not([data-big-pipe-placeholder-id])) {
  margin-block-end: var(--sp);

  @media (min-width: 43.75rem) {
    margin-block-end: var(--sp2);
  }

  @media (min-width: 62.5rem) {
    margin-block-end: var(--sp3);
  }
}

/* region-content.css */
/*
 * 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) {
    margin-block-end: var(--sp2);
  }

  @media (min-width: 62.5rem) {
    margin-block-end: var(--sp3);
  }
}

/* region-hero.css */
/*
 * 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;
  }

  .wide-content {
    max-width: 100%;
    margin-inline: 0;
  }
}

/* region-secondary-menu.css */
/*
 * 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);

  & > * {
    margin-block-end: 0;
  }
}

body:not(.is-always-mobile-nav) {
  @media (min-width: 75rem) {
    & .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;
      }
    }
  }
}

/* social-bar.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Social Bar Region
 .
 */

.social-bar {
  @media (min-width: 75rem) {
    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) {
    position: relative;
    width: var(--content-left);
    padding-block: var(--sp5);
    padding-inline-start: 0;
    padding-inline-end: 0;

    &.is-fixed {
      position: fixed;
      inset-block-start: var(--sp6);
      inset-inline-start: 0;
      height: calc(100vh - var(--sp6));
    }
  }
}

.rotate {
  & > * {
    margin-block-end: var(--sp2);

    @media (min-width: 75rem) {
      display: flex;
      align-items: center;
      margin-block-end: 0;

      &:not(:first-child) {
        margin-inline-end: var(--sp2);
      }
    }
  }

  & .contextual {
    @media (min-width: 75rem) {
      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 (min-width: 75rem) {
    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 (min-width: 75rem) {
    & .rotate {
      transform: rotate(90deg) translateX(100%);
      transform-origin: right;

      & .contextual {
        transform: rotate(-90deg);
        transform-origin: top right;
      }
    }
  }
}

/* views.css */
/*
 * 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,
.view-content {
  display: grid;
  gap: var(--sp2);
  grid-template-rows: max-content;

  @media (min-width: 43.75rem) {
    gap: var(--sp3);
  }
}

/* block.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Block styling.
 */

.block__title {
  margin-block: 0 var(--sp);
  letter-spacing: 0.02em;
  color: var(--color-text-neutral-soft);
  font-size: var(--font-size-s);
  line-height: var(--sp);
}

.site-footer .block__title {
  color: var(--color--gray-65);
}

/* breadcrumb.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Breadcrumb region.
 */

.breadcrumb {
  position: relative;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: var(--sp1);

  /* Shadow on the right side of breadcrumbs for narrow screens. */
  &::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(var(--sp1) * -1);
    width: var(--sp3);
    height: var(--sp2);
    content: "";
    background: linear-gradient(to left, var(--color--white) 0%, rgb(255, 255, 255, 0) 100%); /* LTR */

    @media (min-width: 62.5rem) {
      content: none;
    }
  }

  @media (min-width: 62.5rem) {
    position: static;
  }
}

[dir="rtl"] .breadcrumb::after {
  background: linear-gradient(to right, var(--color--white) 0%, rgb(255, 255, 255, 0) 100%);
}

.breadcrumb__content {
  overflow: auto;
  margin-block-start: calc(var(--sp0-5) * -1);
  margin-block-end: calc(var(--sp0-5) * -1);
  margin-inline-start: calc(var(--sp0-5) * -1);
  margin-inline-end: calc(var(--sp1) * -1);
  padding-block-start: var(--sp0-5);
  padding-block-end: var(--sp0-5);
  padding-inline-start: var(--sp0-5);
  -webkit-overflow-scrolling: touch;

  @media (min-width: 62.5rem) {
    margin-inline-end: 0;
  }
}

.breadcrumb__list {
  overflow-x: auto;
  width: max-content;
  margin-block: 0;
  margin-inline-start: calc(var(--sp1) * -1);
  margin-inline-end: calc(var(--sp1) * -1);
  padding-block: 0 var(--sp1);
  padding-inline-start: var(--sp1);
  padding-inline-end: 0;
  list-style: none;
  white-space: nowrap;

  @media (min-width: 62.5rem) {
    overflow: visible;
    width: auto;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    white-space: normal;
  }
}

.breadcrumb__item {
  display: inline-block;

  &:nth-child(n + 2)::before {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: 1rem 1.25rem;
    content: "";
    transform: rotate(45deg); /* LTR */
    border-block-start: 2px solid var(--color--gray-45);
    border-inline-end: 2px solid var(--color--gray-45);
  }

  &:last-child {
    margin-inline-end: var(--sp3);

    @media (min-width: 62.5rem) {
      margin-inline-end: 0;
    }
  }
}

[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
  transform: rotate(-45deg);
}

.breadcrumb__link {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--color-text-primary-medium);

  &:hover,
  &:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }
}

/* embedded-media.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Embedded Media.
 */

figure {
  background: var(--color--gray-100);
}

figcaption {
  padding-block: var(--sp0-5);
  padding-inline-start: var(--sp0-5);
  padding-inline-end: var(--sp0-5);
  color: var(--color-text-neutral-medium);
  background: var(--color--gray-100);
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  line-height: var(--sp);

  @media (min-width: 31.25rem) {
    padding-block: var(--sp);
    padding-inline-start: var(--sp);
    padding-inline-end: var(--sp);
  }
}

.align-right {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-block: var(--sp3);
  margin-inline-start: 0;
  margin-inline-end: 0;

  @media (min-width: 43.75rem) {
    float: right; /* LTR */
    max-width: 50%;
    margin-block-start: var(--sp);
    margin-block-end: var(--sp);
    margin-inline-start: var(--sp);
    margin-inline-end: 0;

    /**
     * Chromium and Webkit do not yet support flow relative logical properties,
     * such as float: inline-end. However, PostCSS Logical does not compile this
     * value, so we accommodate by not using these.
     *
     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
     * @see https://github.com/csstools/postcss-plugins/issues/632
     */
    &:dir(rtl) {
      float: left;
    }
  }
}

/* Pull out of grid if nested in content narrow layout. */

.layout--content-narrow .align-right,
.layout--pass--content-narrow > * .align-right {
  /* @todo this can be simplified. */
  @media (min-width: 43.75rem) {
    margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }

  @media (min-width: 62.5rem) {
    margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
  }

  @media (min-width: 75rem) {
    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }

  @media (min-width: 90rem) {
    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
  }
}

.align-left {
  float: none; /* Override core's align.module.css. */
  max-width: 100%;
  margin-block-start: var(--sp3);
  margin-block-end: var(--sp3);
  margin-inline-start: 0;
  margin-inline-end: 0;

  @media (min-width: 43.75rem) {
    float: left; /* LTR */
    max-width: 50%;
    margin-block-start: var(--sp);
    margin-block-end: var(--sp);
    margin-inline-start: 0;
    margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */

    /**
     * Chromium and Webkit do not yet support flow relative logical properties,
     * such as float: inline-end. However, PostCSS Logical does not compile this
     * value, so we accommodate by not using these.
     *
     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
     * @see https://github.com/csstools/postcss-plugins/issues/632
     */
    &:dir(rtl) {
      float: right;
    }
  }
}

/* Pull out of grid if nested in content narrow layout. */

.layout--content-narrow .align-left,
.layout--pass--content-narrow > * .align-left {
  @media (min-width: 43.75rem) {
    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
  }
}

.align-center img,
.align-center video,
.align-center audio {
  margin-inline: auto;
}

.media-oembed-content {
  display: block;
  max-width: 100%;
}

/* footer.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Footer regions.
 */

.site-footer {
  position: relative; /* stack above left social bar */
  color: var(--color--gray-65);
  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);

  & .menu {
    margin-inline-start: 0;
    list-style: none;

    & ul {
      margin-inline-start: var(--sp);
    }

    & li {
      margin-block-end: var(--sp0-5);
    }
  }

  & a {
    color: inherit;

    &:hover {
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start: solid var(--content-left) var(--color--black);
  }
}

/* button.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Buttons.
 */

.button {
  display: inline-flex;
  align-items: center;
  height: var(--sp3);
  margin-block: var(--sp1);
  margin-inline-start: 0;
  margin-inline-end: var(--sp1);
  padding-block: 1px 0;
  padding-inline: var(--sp1-5);
  cursor: pointer;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--color-text-primary-medium);
  border: solid 2px currentColor;
  border-radius: var(--border-radius);
  background-color: var(--color--white);
  font-family: var(--font-sans);
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: var(--line-height-s);
  appearance: none;
  -webkit-font-smoothing: antialiased;

  &:hover,
  &:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-text-primary-loud);
    border: solid 2px currentColor;
    background: none;
    font-weight: 700;
  }

  &:focus {
    outline: 2px solid var(--color--primary-60);
    outline-offset: 2px;
  }

  &:active {
    color: var(--color-text-primary-medium);
    border-color: currentColor;
  }

  &:disabled,
  &.is-disabled {
    cursor: default;
    color: var(--color--gray-90);
    border-color: var(--color--gray-90);
  }
}

/* No margin if is part of a menu. */

.menu .button {
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.button--small {
  height: var(--sp2-5);
  padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2);
  padding-inline: var(--sp);
  font-size: var(--font-size-base);
  line-height: normal;
}

.button--primary {
  color: var(--color--white);
  border-color: var(--color--primary-40);
  background-color: var(--color--primary-40);

  &:hover,
  &:focus {
    color: var(--color--white);
    border-color: var(--color--primary-30);
    background-color: var(--color--primary-30);
  }

  &:active {
    color: var(--color--white);
    background-color: var(--color--primary-40);
  }

  &:disabled,
  &.is-disabled {
    color: var(--color--white);
    background-color: var(--color--gray-90);
  }
}

.button--icon-back {
  display: inline-flex;
  align-items: center;

  &::before {
    display: block;
    width: 0.5em;
    height: 0.5em;
    margin-inline-end: 0.5em;
    content: "";
    transform: rotate(45deg); /* LTR */
    border-block-end: solid 2px currentColor;
    border-inline-start: solid 2px currentColor;
  }
}

[dir="rtl"] .button--icon-back::before {
  transform: rotate(-45deg);
}

/* Trigger button for core's responsive tables API. */

button.link {
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-primary-medium);
  border: 0;
  background: transparent;
  font-size: 1em;

  &:hover {
    color: var(--color--primary-50);
  }

  &:focus {
    outline: solid 2px currentColor;
    outline-offset: 2px;
  }
}

/* container-inline.module.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Inline items.
 */

.container-inline div,
.container-inline label {
  display: inline-block;
}

.form-items-inline {
  margin-block: -0.125em; /* 2px */
}

.form-items-inline > .form-item {
  display: inline-block;
  margin-block: 0.125em;
}

/* fieldset.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Fieldset.
 */

.fieldset {
  min-width: 0;
  margin-block: var(--sp1);
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  color: inherit;
  border: solid 2px var(--color--gray-45);
  border-radius: var(--border-radius);
  background-color: var(--color--white);
}

.fieldset--group {
  width: 100%;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.fieldset__legend {
  float: left; /* Prevent sticking out of top of fieldset. */
  width: 100%;
  color: inherit;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  background-color: var(--color--gray-45);
  font-size: var(--font-size-l);
  font-weight: 700;
  line-height: var(--line-height-base);

  & + * {
    clear: left;
  }

  & .fieldset__label {
    &.form-required {
      &::after {
        background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
      }
    }
  }
}

.fieldset__legend--composite {
  margin-block-start: 2px;
  color: inherit;
}

.fieldset__legend--invisible {
  margin: 0;
}

.fieldset__legend--group {
  color: inherit;
}

.fieldset__label {
  display: block;
  padding-block: var(--sp0-5);
  padding-inline-start: var(--sp1);
  padding-inline-end: var(--sp1);
  color: var(--color--white);
  line-height: var(--line-height-s);
}

.fieldset__label.is-disabled {
  color: var(--color-text-neutral-soft);
}

.fieldset__description {
  margin-block: var(--sp0-5);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-s);
}

.fieldset__description.is-disabled {
  color: var(--input--disabled-fg-color);
}

.fieldset__error-message {
  margin-block: var(--sp0-5);
  padding-inline-start: var(--sp1-5);
  color: var(--color--red);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top; /* LTR */
  background-size: var(--sp1) var(--sp1);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);

  @media screen and (-ms-high-contrast: active) {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  }
}

[dir="rtl"] .fieldset__error-message {
  background-position: left top;
}

.fieldset__wrapper {
  margin-block-start: 0;
  padding-block: var(--sp);
  padding-inline: var(--sp);
}

.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
  border: solid 2px var(--color--gray-45);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.fieldset__wrapper--group {
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.fieldset__wrapper > .container-inline {
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

/* field.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styles for fields.
 */

.field:not(:last-child) {
  margin-block-end: var(--sp2);
}

.field__label {
  font-weight: bold;
}

.field--label-inline .field__label,
.field--label-inline .field__items {
  float: left; /* LTR */

  /**
   * Chromium and Webkit do not yet support flow relative logical properties,
   * such as float: inline-end. However, PostCSS Logical does not compile this
   * value, so we accommodate by not using these.
   *
   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values
   * @see https://github.com/csstools/postcss-plugins/issues/632
   */
  &:dir(rtl) {
    float: right;
  }
}

.field--label-inline .field__label,
.field--label-inline > .field__item,
.field--label-inline .field__items {
  padding-inline-end: 0.5em;
}

.field--label-inline .field__label::after {
  content: ":";
}

/* form.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Main form and form item styles.
 */

::placeholder {
  color: var(--color--gray-60);
}

/**
 * General form item.
 */

.form-item {
  margin-block: var(--sp1);
}

.form-item__label--multiple-value-form {
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/**
 * When a table row or a container-inline has a single form item, prevent it
 * from adding unnecessary extra spacing.
 * If it has multiple form items, allow spacing between them, overriding core.
 */

tr .form-item,
.container-inline .form-item {
  margin-block: var(--sp0-5);
}

/**
 * Form element label.
 */

.form-item__label {
  display: block;
  margin-block: var(--sp0-5);
  font-size: var(--font-size-s);
  font-weight: bold;
  line-height: var(--line-height-s);
}

.container-inline .form-item__label {
  margin-inline-end: 1em;
}

.form-item__label--multiple-value-form {
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.form-item__label[for] {
  cursor: pointer;
}

.form-item__label.option {
  display: inline;
  font-weight: normal;
}

/* Label states. */

.form-item__label.is-disabled {
  cursor: default;
  color: var(--color--gray-70);
}

/* Form required star icon */

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.3em;
  content: "";
  vertical-align: text-top;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;

  @media screen and (-ms-high-contrast: active) {
    background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
  }
}

/**
 * Form item description.
 */

.form-item__description {
  margin-block: var(--sp0-5);
  max-width: 60ch;
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.field-multiple-table + .form-item__description {
  margin-block-start: 0;
}

/**
 * Error message (Inline form errors).
 */

.form-item--error-message {
  margin-block: var(--sp0-5);
  padding-inline-start: var(--sp1-5);
  color: var(--color--red);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top; /* LTR */
  background-size: var(--sp1) var(--sp1);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);

  @media screen and (-ms-high-contrast: active) {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
  }
}

[dir="rtl"] .form-item--error-message {
  background-position: right top;
}

/**
 * Form actions.
 */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-block: var(--sp0-5);
}

.form-actions .button {
  margin-block: 0;
}

.form-actions .action-link {
  margin-block: var(--sp0-5);
}

.form-actions > .form-wrapper {
  margin-inline-end: var(--sp1);
}

.form-actions .ajax-progress--throbber {
  align-self: center;
}

/**
 * Custom label placement for editor filter format select.
 */

.form-item--editor-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix,
.form-item--editor-format .form-element--editor-format {
  min-width: 1px;
}

.form-item--editor-format .form-item__label,
.form-item--editor-format .form-item__prefix,
.form-item--editor-format .form-item__suffix {
  margin-inline-end: var(--sp0-5);
}

.form-item--editor-format .form-item__description,
.form-item--editor-format .form-item--error-message {
  flex: 0 1 100%;
  min-width: 1px;
}

/**
 * Inline forms.
 */

.form--inline {
  & > * {
    display: inline-block;
    margin-top: var(--sp0-5);
    margin-bottom: 0;
    vertical-align: top; /* Ensure proper alignment if description is present. */
  }

  & .form-item__label {
    margin: 0;
  }

  & .form-actions {
    margin-top: var(--sp1-5);
  }
}

.layout-builder-form {
  & .form-actions {
    align-items: center;
  }
}

/* form-boolean.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Checkbox and radio input elements.
 */

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: var(--sp1-5);
  height: var(--sp1-5);
  margin: 0;
  vertical-align: middle;
  border: 1px solid var(--color--gray-60);
  border-radius: 0.1875rem;
  background-color: var(--color--white);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: var(--sp1) var(--sp1);
  appearance: none;

  &:focus {
    border: solid 2px var(--color--primary-50);
    outline: solid 2px var(--color--primary-50);

    @supports (outline-style: double) {
      border-width: 1px;
      outline-width: 6px;
      outline-style: double;
      outline-offset: -1px;
    }
  }

  &:hover {
    border-color: var(--color--primary-60);
  }

  &[disabled] {
    background-color: var(--color--gray-100);

    &:hover {
      border-color: var(--color--gray-60);
    }

    &:checked {
      border-width: 1px;
    }
  }

  &:checked {
    border-width: 2px;
  }

  &.error {
    border: solid 2px var(--color--red);

    &:focus {
      outline-color: var(--color--red);
      outline-offset: -2px;
    }
  }

  & + label {
    display: inline-block;
    padding-inline-start: var(--sp0-5);
  }
}

input[type="checkbox"] {
  &:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
  }
}

input[type="radio"] {
  border-radius: 50%;

  &:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
    background-size: 1.0625rem;
  }

  &:focus {
    border-width: 2px;
    border-color: var(--color--primary-50);
    outline-color: transparent;
    box-shadow:
      0 0 0 2px white,
      0 0 0 4px var(--color--primary-50);
  }

  &.error:focus {
    outline-color: transparent;
    box-shadow:
      0 0 0 2px white,
      0 0 0 4px var(--color--red);
  }
}

.form-type-boolean {
  margin-block: var(--sp1);
}

/* form-text.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Text input elements.
 */

[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="file"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea {
  width: 100%;
  max-width: 100%;
  min-height: var(--sp3);
  padding: 0 var(--sp);
  color: var(--color-text-neutral-loud);
  border: 1px solid var(--color--gray-60);
  border-radius: var(--border-radius);
  background-color: var(--color--white);
  font-family: inherit;
  font-size: inherit;
  appearance: none;

  &:focus {
    border: solid 2px var(--color--primary-50);
    outline: solid 2px var(--color--primary-50);

    @supports (outline-style: double) {
      border-width: 1px;
      outline-width: 6px;
      outline-style: double;
      outline-offset: -1px;
    }
  }

  &[disabled] {
    color: var(--color--gray-60);
    background-color: var(--color--gray-100);
  }

  &.error {
    border: solid 2px var(--color--red);

    &:focus {
      outline-color: var(--color--red);
      outline-offset: -2px;
    }
    & + .ck-editor > .ck-editor__main {
      border: solid 2px var(--color--red);
    }
  }

  &.form-element--small {
    min-height: var(--sp2-5);
  }

  @media (min-width: 31.25rem) {
    width: auto;
  }
}

[type="date"] {
  /* Ensure that date field isn't larger than other fields. */
  &::-webkit-datetime-edit-fields-wrapper {
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

[type="file"] {
  height: auto;
  padding-block: var(--sp0-75);
}

[type="color"] {
  width: var(--sp3);
  padding: 0;
}

/* form-textarea.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Textarea.
 */

textarea {
  display: block;
  width: 100%;
  min-height: var(--sp8);
  padding: var(--sp);
}

/* form-select.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Select input elements.
 */

:root {
  --form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e");
}

select {
  max-width: 100%;
  height: var(--sp3);
  padding-block: 0;
  padding-inline-start: var(--sp);
  padding-inline-end: var(--sp3);
  color: var(--color-text-neutral-loud);
  border: 1px solid var(--color--gray-60);
  border-radius: var(--border-radius);
  background-color: var(--color--white);
  background-image: var(--form-element-select-icon);
  background-repeat: no-repeat;
  background-position: right var(--sp) center; /* LTR */
  font-family: inherit;
  font-size: inherit;
  appearance: none;

  &:focus {
    border: solid 2px var(--color--primary-50);
    outline: solid 2px var(--color--primary-50);

    @supports (outline-style: double) {
      border-width: 1px;
      outline-width: 6px;
      outline-style: double;
      outline-offset: -1px;
    }
  }

  &[disabled] {
    color: var(--color--gray-60);
    background-color: var(--color--gray-100);
  }

  &.error {
    border: solid 2px var(--color--red);

    &:focus {
      outline-color: var(--color--red);
    }
  }

  &[multiple] {
    height: auto;
    padding: var(--sp0-5);
    background-image: none;
    line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */

    & option {
      padding: var(--sp0-5);
    }
  }

  &.form-element--small {
    height: var(--sp2-5);
  }

  /* Necessary to show chevron in forced colors mode in modern browsers. */
  @media (forced-colors: active) {
    padding-inline-end: var(--sp);
    background-image: none;
    appearance: auto; /* Default <select> appearance value for modern browsers. */

    /* Lets browser set <select> appearance to whatever the browser's default is. */
    @supports (appearance: revert) {
      appearance: revert;
    }
  }
}

[dir="rtl"] select {
  background-position: left var(--sp) center;
}

/* header-buttons-mobile.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Header Mobile Buttons.
 */

.mobile-buttons {
  margin-block-start: var(--sp0-5);
  margin-inline-start: auto;

  @media (min-width: 31.25rem) {
    margin-block-start: var(--sp2);
  }

  @media (min-width: 43.75rem) {
    margin-block-start: var(--sp4);
  }

  @media (min-width: 75rem) {
    margin-block-start: var(--sp6);
  }
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .mobile-buttons {
    display: none;
  }
}

/* header-navigation.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Navigation in header.
 */

.header-nav {
  position: fixed;
  z-index: 501; /* Appear above overlay and contextual links in header. */
  inset-block-start: 0;
  inset-inline-start: 100%;
  visibility: hidden;
  overflow: auto;
  /* Ensure that header nav not use additional space and force system branding
   * block text to unnecessarily wrap. */
  flex-basis: max-content;
  width: 100%;
  max-width: var(--mobile-nav-width);
  height: 100%;
  padding-block: 0 var(--sp);
  padding-inline-start: var(--sp);
  padding-inline-end: var(--sp);
  /* Create room for the "close" button. We cannot use margin because the
   * mobile navigation needs to slide beneath the button, but we also cannot
   * use padding because that would enable the button to scroll out of the
   * viewport on short screens. */
  border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px));
  background-color: var(--color--white);
  box-shadow: 0 0 72px rgb(0, 0, 0, 0.1);

  /* When Navigation module's mobile top bar is present, add padding to ensure no overlap. */
  body:has(> .admin-toolbar-control-bar) & {
    @media (max-width: 63.9375rem) {
      padding-top: 3rem;
    }
  }

  &.is-active {
    visibility: visible;
    transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */

    &:dir(rtl) {
      transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px)));
    }
  }

  @media (min-width: 31.25rem) {
    border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px));
  }

  @media (min-width: 43.75rem) {
    padding-block-end: var(--sp3);
    padding-inline-start: var(--sp3);
    border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px));
  }

  @media (min-width: 62.5rem) {
    grid-column: 5 / 14;
  }

  /*
   * Ensure top border has the same color as the background when in forced colors.
   */
  @media (forced-colors: active) {
    border-top-color: canvas;
  }
}

/*
 * Only apply transition styles when JS is loaded. This
 * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
 */

html.js .header-nav {
  transition:
    visibility 0.2s,
    transform 0.2s;
}

body:not(.is-always-mobile-nav) .header-nav {
  @media (min-width: 75rem) {
    position: static;
    display: flex;
    visibility: visible;
    overflow: visible;
    grid-column: 5 / 15;
    align-items: center;
    justify-content: flex-end;
    max-width: none;
    height: var(--header-height-wide-when-fixed);
    margin-block-start: auto;
    padding-block: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    transition: transform 0.2s;
    transform: none;
    border-block-start: 0;
    box-shadow: none;
  }
}

body.is-always-mobile-nav {
  & .header-nav {
    @media (min-width: 75rem) {
      overflow: auto;
      max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
      padding-inline-end: var(--sp);
      transition:
        transform 0.2s,
        visibility 0.2s;
      border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
    }

    @media (min-width: 90rem) {
      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
      padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
    }
  }
}

.header-nav-overlay {
  position: fixed;
  z-index: 101;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  width: 100%;
  height: 100vh;
  opacity: 0.2;
  background: var(--color--gray-5);

  .is-overlay-active & {
    display: block;
  }

  @media (forced-colors: active) {
    background: canvastext;
  }
}

/* header-site-branding.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Site branding in header.
 */

.site-branding {
  display: flex;
  flex-shrink: 1;
  align-items: flex-end;
  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  min-height: var(--sp3);
  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
  padding-block: var(--sp0-5);
  padding-inline-start: var(--container-padding);
  padding-inline-end: var(--container-padding);
  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);

  @media (min-width: 31.25rem) {
    min-height: var(--sp4);
  }

  @media (min-width: 43.75rem) {
    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
    min-height: var(--sp6);
    padding-block-end: var(--sp);
  }

  @media (min-width: 62.5rem) {
    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
  }

  @media (min-width: 75rem) {
    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;
  gap: var(--sp0-5);

  & a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  @media (min-width: 75rem) {
    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 (min-width: 31.25rem) {
      max-height: var(--sp3);
    }

    @media (min-width: 43.75rem) {
      max-height: var(--sp4);
    }

    @media (min-width: 75rem) {
      max-height: calc(var(--header-height-wide-when-fixed) - var(--sp));
    }
  }
}

.site-branding__text {
  color: var(--color--white);

  & a {
    color: inherit;
  }

  @media (min-width: 43.75rem) {
    display: grid;
    gap: var(--sp0-5);
  }
}

.site-branding__name {
  font-size: 1.125rem;
  font-weight: bold;

  @media (min-width: 43.75rem) {
    font-size: 1.75rem;
    line-height: 1.75rem;
  }

  @media (min-width: 75rem) {
    letter-spacing: 0.02em;
    font-size: 2rem;
    line-height: var(--sp2);
  }
}

.site-branding__slogan {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-s);

  @media (min-width: 43.75rem) {
    font-size: var(--font-size-base);
  }
}

.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
  color: var(--color--primary-50);
}

/* header-sticky-toggle.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Sticky Header Toggle Button.
 *
 * This button shows on the left hand side of the header (in LTR layouts), and
 * toggles fixing the header to the top of the viewport.
 */

.sticky-header-toggle {
  display: none;

  @media (min-width: 75rem) {
    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 (min-width: 75rem) {
    visibility: visible;
  }
}

body.is-always-mobile-nav .sticky-header-toggle {
  @media (min-width: 75rem) {
    visibility: hidden;
  }
}

.sticky-header-toggle__icon {
  --icon-bar-height: 0.1875rem;
  --icon-bar-space: 0.4375rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--sp2);
  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
  /* Height = 3 bars + 2 spaces */
  transition: opacity 0.2s;
  pointer-events: none;
  transform-style: preserve-3d;

  & > 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);
  }
}

/* hero.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Main Hero.
 */

.hero__content {
  grid-column: 1 / 7;

  @media (min-width: 43.75rem) {
    /* 700px */
    grid-column: 3 / 13;
  }

  @media (min-width: 62.5rem) {
    grid-column: 3 / 11;
  }
}

.hero__img {
  grid-column: 1 / 7;
  margin-block-start: var(--sp2);
  margin-block-end: var(--sp2);

  & img {
    width: 100%;
  }

  @media (min-width: 31.25rem) {
    margin-block-start: var(--sp3);
    margin-block-end: var(--sp3);
  }

  @media (min-width: 43.75rem) {
    grid-column: 1 / 15;
    margin-block-start: var(--sp4);
    margin-block-end: var(--sp4);
  }

  @media (min-width: 62.5rem) {
    grid-column: 2 / 14;
  }
}

/* links.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Links component.
 */

.links.inline {
  margin-inline-start: 0;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  list-style: none;

  & > * {
    display: inline;

    &:not(:last-child) {
      padding-inline-end: 1em;
    }
  }
}

/* layout-field.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Visual styles for fields.
 */

.block-layout-builder:not(:last-child) .field {
  margin-block-end: var(--sp2);
}

/* nav-button-mobile.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Nav Button Mobile.
 */

.mobile-nav-button {
  position: relative;
  z-index: 505; /* Appear above mobile nav. */
  display: flex;
  align-items: center;
  align-self: center;
  width: var(--sp2);
  height: var(--sp2);
  margin-inline-start: auto;
  margin-inline-end: -0.375rem;
  padding-block: 0;
  padding-inline-start: 0.375rem;
  padding-inline-end: 0.375rem;
  cursor: pointer;
  border: none;
  background: transparent;
  appearance: none;

  &:focus {
    outline: solid 2px var(--color--primary-40);
  }

  &:active {
    color: inherit; /* Override Safari's default UA styles. */
  }

  @media (min-width: 31.25rem) {
    display: inline-flex;
    width: auto;
    padding-inline-start: var(--sp);
  }
}

/* Text that says "menu". */

.mobile-nav-button__label {
  position: absolute;
  display: block;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;

  @media (min-width: 31.25rem) {
    position: static;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    margin-inline-end: 0.75rem;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    font-weight: 600;
  }
}

.mobile-nav-button__icon {
  position: relative;
  display: block;
  width: var(--sp2);
  height: 0;
  border-top: solid 3px var(--color--primary-50);

  &::before,
  &::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 0;
    content: "";
    transition: transform 0.2s;
    border-top: solid 3px var(--color--primary-50);
  }

  &::before {
    transform: translateY(-0.6875rem);
  }

  &::after {
    transform: translateY(0.3125rem);
  }
}

.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
  border-top-color: transparent;

  &::before {
    transform: translateY(-0.1875rem) rotate(-45deg);
  }

  &::after {
    transform: translateY(-0.1875rem) rotate(45deg);
  }
}

/* node.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Node specific styles.
 */

.node__author {
  display: inline-flex;
}

.node__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);

  & a {
    font-weight: bold;
  }

  @media (min-width: 31.25rem) {
    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: 0.1875rem;
    transition:
      background-size 0.2s,
      color 0.2s;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-text-neutral-loud);
    background-color: transparent;
    background-image: linear-gradient(var(--color--primary-50));
    background-repeat: no-repeat;
    background-position: bottom left; /* LTR */
    background-size: 0 0.1875rem;

    &: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 (min-width: 62.5rem) {
    padding-block-end: var(--sp3);
  }
}

.node--unpublished {
  /* There is no variable for the color - #fff4f4. */
  background-color: #fff4f4;
}

/* node-teaser.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Node Teaser specific styles.
 */

.node--view-mode-teaser {
  & .node__meta {
    margin-block-end: var(--sp);

    & a {
      color: var(--color-text-primary-medium);
      font-weight: bold;
    }
  }

  & .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 (min-width: 62.5rem) {
      margin-block-start: var(--sp2);
    }
  }
}

/* site-header.css */
/*
 * 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.
   */
  z-index: 101;

  @media (min-width: 75rem) {
    /* 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 (min-width: 75rem) {
      &: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
 */

html.js body:not(.is-always-mobile-nav) .site-header__inner {
  @media (min-width: 75rem) {
    transition:
      opacity 0.3s,
      transform 0.3s,
      box-shadow 0.3s;
  }
}

.site-header__fixable.is-expanded .site-header__inner {
  @media (min-width: 75rem) {
    box-shadow: -36px 1px 36px rgb(0, 0, 0, 0.08); /* LTR */
  }
}

[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {
  @media (min-width: 75rem) {
    box-shadow: 36px 1px 36px rgb(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 (min-width: 75rem) {
    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 (min-width: 75rem) {
    transform: translateX(101%);
  }
}

.site-header__inner__container {
  display: flex;
  justify-content: space-between;
}

/* Reset width set by layout.css */

body.is-fixed .site-header__inner__container {
  width: auto;
}

/* skip-link.css */
/*
 * 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: calc(var(--max-bg-color) + var(--drupal-displace-offset-left, 0px));
  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);

  &:hover {
    -webkit-text-decoration: underline;
    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: 2.5rem;
  outline: none;
}

/* pager.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Styles for pagination.
 */

.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 (min-width: 31.25rem) {
    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%;
  -webkit-text-decoration: none;
  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);
}

/* text-content.css */
/*
 * 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
  */

  & 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);
      -webkit-text-decoration: none;
      text-decoration: none;
      box-shadow: inset 0 -2px 0 0 var(--color--primary-50);

      &: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);
      }
    }
  }

  & p {
    margin-block-start: var(--sp);
    margin-block-end: var(--sp);

    &:first-child {
      margin-block-start: 0;
    }

    &:last-child {
      margin-block-end: 0;
    }

    @media (min-width: 43.75rem) {
      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: 1.3125rem;
    line-height: var(--sp2);

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      content: "\201C";
      color: var(--color--primary-60);
      font-size: 3.375rem;
    }

    &::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) {
      font-size: 2rem;
      line-height: var(--sp3);
    }

    @media (min-width: 62.5rem) {
      font-size: 2.5rem;
      line-height: var(--sp3-5);
    }
  }

  @media (min-width: 43.75rem) {
    font-size: 1.125rem;
    line-height: var(--sp2);
  }
}

/**
 * Special colors for footer that has a dark background.
 */

.site-footer .text-content {
  color: inherit;

  & * {
    color: inherit;
  }

  & a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    color: var(--color--white);
    box-shadow: none;

    &:hover {
      -webkit-text-decoration: none;
      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 (min-width: 62.5rem) {
    font-size: 1.5rem;
    line-height: var(--sp2);
  }
}

/* wide-content.css */
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Wide content
 *
 * This component breaks out of the layout-content-narrow grid layout using a
 * combination of carefully calculated negative margins and widths. It is used
 * on the article's default image field.
 */

.wide-content {
  margin-block-start: var(--sp0-5);
  margin-block-end: var(--sp2);
  margin-inline-start: 0;
  margin-inline-end: 0;

  @media (min-width: 43.75rem) {
    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) {
    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-content {
  @media (min-width: 62.5rem) {
    width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
  }

  @media (min-width: 81.25rem) {
    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-content,
.region--hero .wide-content {
  max-width: 100%;
  margin-inline: 0;
}