:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1440;

  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
  (var(--fluid-max-width) - var(--fluid-min-width)));

  --font-base: Helvetica, Arial, sans-serif;
  --font-headings: 'Avenir Heavy', Avenir, Helvetica, Arial, sans-serif;

  /* Design specification: #f37700 does not have sufficient contrast,
   * #e46518 meets WCAG AA for bold text at sizes 18px+
   */
  --color-link: #e3651b;


  background: #fff;
  color: #000;
  font: normal 100%/1.2222222 var(--font-base);
  margin: 0;
  padding: 0;
}

@media screen and (prefers-contrast: more) {
  /* #ba531c would meet WCAG AA for regular text at any size,
   * and AAA for bold text above 18px
   */
  :root {
    --color-link: #ba531c;
  }
}
@media screen and (min-width: 90rem) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

body {
  font-size: 1.125rem;
  margin: 0;
  padding: 0;
}

.sr-only {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  clip: rect(0 0 0 0);
  height: auto; /* new - was 1px */
  margin: 0; /* new - was -1px */
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 1 */
  width: 1px;
}

a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
  transition: filter 250ms;
}
a:visited {
  /* This will not work in Safari, or FF.
   * It will probably not work in future Chrome.
   * See: https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#privacy_restrictions
   */
  filter: saturate(0.2);
}

a:hover {
  filter: brightness(110%);
  text-decoration: underline;
}

a.broken:any-link {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

/* Relative color syntax supported only in Safari 15+
 * (As of Version 15.0 (16612.1.29.41.4, 16612) CSS Relative Color Syntax must
 * be turned on in the Develop > Experimental Features menu).
 * Hopefully this is on the way towards being standardized because it's handy.
 * See:
 * https://www.w3.org/TR/css-color-5/#relative-HSL
 * https://stuffandnonsense.co.uk/blog/new-relative-colour-functions-in-css
 */
@supports (color: hsl(from #911 h s l)) {
  a:visited {
    color: hsl(from var(--color-link) h calc(s * 0.8) l);
    filter: none;
  }
  a:hover {
    color: hsl(from var(--color-link) h s calc(l * 1.1));
    filter: none;
  }
}
blockquote {
  color: #233759;
  font-family: "Avenir Heavy", Avenir, Helvetica, Arial, sans-serif;
  margin: 0 2.5rem 1rem 2.5rem;
}
blockquote > p:last-child::after,
blockquote > p:first-child::before {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-style: normal;
}
blockquote > p:last-child::after {
  content: "”";
}
blockquote > p:first-child::before {
  content: "“";
  margin-left: -0.48em;
}
blockquote:first-child {
  margin-top: 0;
}

.blockquote__wrapper {
  margin-bottom: 2rem;
}
.blockquote__wrapper .attribution {
  background: transparent;
  font-style: italic;
  margin-right: 2.5rem;
  padding: 0;
  text-align: right;
}
.blockquote__wrapper .attribution::before {
  content: "—";
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #233759;
  font-family: var(--font-headings);
  font-weight: 600;
}

h1,
.h1 {
  font-size: 1.42rem;
  line-height: 1.04;
  margin: 0.83333333em 0;
}

h2,
.h2 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.04;
}

h3,
.h3 {
  font-size: 1.125rem
}

@media screen and (min-width: 50rem) {
  h1,
  .h1 {
    font-size: 3rem;
  }
  h2,
  .h2{
    font-size: 2.25rem;
  }
  h3,
  .h3 {
    font-size: 1.75rem
  }
}

img {
  max-width: 100%;
}
li {
  margin: 1.222222em 0;
}

p {
  margin: 0 0 1.222222em;
}

iframe,
video {
  background: #000;
  display: block;
  max-width: 100%;
}

nav {
  --color-link: #f0e9d1;
  min-height: 2.5rem;
}

nav a,
nav button,
nav [aria-current] {
  box-sizing: border-box;
  display: block;
  height: 100%;
}
nav button {
  background-color: transparent;
  border: none;
  color: var(--color-link);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  text-align: left;
  width: 100%;
}
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-status {
  color: #f0e9d1;
  height: 2.5rem;
  line-height: 2.5rem;
  overflow: hidden;
  padding: 0 4rem 0 3.5rem;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__liner {
  margin: 0;
  padding: 0;
}
.nav__liner > a {
  text-decoration: none;
}
.nav__liner--header {
  --color-link: #1d385c;
  background-color: #dff0ff;
  padding: 0.5rem 0;
}
.nav__liner--header a,
.nav__liner--header button,
.nav__liner--header > [aria-current],
.nav__liner--header > li > [aria-current] {
  color: var(--color-link);
  font-weight: 400;
  padding: 0.5rem 1.125rem;
}
.nav--secondary.with-divider::before {
  background: rgb(25,55,89, 0.3);
  content: '';
  display: list-item;
  height: 1px;
  margin: 0.5rem 1.125rem 0.625rem;
  width: calc(100% - 2.25rem);
}
.nav__liner--header .dropdown-toggle::after {
  --toggle-icon: url('data:image/svg+xml;utf-8,<svg viewBox="-4 -3 9 16" xmlns="http://www.w3.org/2000/svg"><path d="M5 4.5 0 9V0z" /></svg>');
  background-color: currentColor;
  content: '\2003';
  font-family: Arial, sans-serif;
  line-height: 1;
  margin-left: 0.2em;
  -webkit-mask: var(--toggle-icon) center right / 1em calc(1em + 2px) no-repeat;
  mask: var(--toggle-icon) center right / 1em 1em no-repeat;
  vertical-align: middle;
}
.nav__liner--header .dropdown-toggle[aria-expanded="true"]::after {
  --toggle-icon: url('data:image/svg+xml;utf-8,<svg viewBox="-3 -2 16 9" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 5 0 0h9z" /></svg>');
}
.nav__liner--header .nav--secondary {
  font-family: var(--font-headings);
  font-size: 0.875rem;
  font-weight: 800;
}
.nav__wrapper {
  position: relative;
}
.nav__wrapper > label {
  background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='20' viewBox='0 0 30 20'><g stroke='rgb(240,233,209)' stroke-width='2'><path d='M0.5,1.5 L29.5,1.5'/><path d='M0.5,10 L29.5,10'/><path d='M0.5,18.5 L29.5,18.5' /></g></svg>");
  background-position: 1.25rem center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: block;
  height: 2.5rem;
  left: 0;
  overflow: hidden;
  padding: 0.5rem 1.25rem;
  position: absolute;
  text-indent: 3.125rem;
  top: 0;
  white-space: nowrap;
  width: 4.375rem;
  z-index: 1;
}

.nav__wrapper > input:checked + label {
  background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><g stroke='rgb(240,233,209)' stroke-width='2' transform='translate(5 5) rotate(45 10 10)'><path d='M0.5,0.5 L19.5,19.5'/><path d='M0,19 L20,19'/><path d='M19,0 L19,20'/></g></svg>");
}
.nav__wrapper > input:checked ~ nav {
  display: block;
}

@media screen and (min-width: 50rem) {
  nav button {
    text-align: center;
    width: auto;
  }

  .nav__liner {
    margin: 0 auto;
    max-width: 80rem;
    padding: 0 2.5rem;
  }
  .nav__liner > :first-child {
    border-left: solid 1px #66a4ce;
  }
  .nav__liner > * {
    border-right: solid 1px #66a4ce;
  }
  .nav__liner--header {
    --color-link: inherit;
    background: transparent;
    padding: 0;
  }
  .nav__liner--header [aria-current],
  .nav__liner--header .current {
    background: rgba(58, 130, 192, 0.5);
  }
  .nav__liner--header .dropdown-toggle::after {
    content: none;
  }
  .nav__liner--header .nav--secondary {
    display: none;
  }

  .nav-status,
  .nav__wrapper > input,
  .nav__wrapper > label {
    display: none;
  }
}

@media screen and (min-width: 85rem) {
  .nav__liner {
    padding: 0;
  }
}


footer,
header {
  font-family: "Avenir Medium", Avenir, Arial, sans-serif;
}

footer,
header .nav__wrapper {
  background: #233759;
}

@media screen and (min-width: 50rem) {
  header nav {
    display: flex;
  }
}

footer {
  color: #f0e9d1;
  line-height: 2.5rem;
  margin-top: 6rem;
  min-height: 2.5rem;
}

.footer__liner {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

footer nav {
  display: none;
}
footer nav>a {
  line-height: 3.5;
  text-decoration: underline;
}
footer nav > a + a {
  margin-left: 2rem;
}
:root.short-page footer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}
@media screen and (min-width: 50rem) {
  footer nav {
    display: flex;
  }
}
header {
  background: #3a82c0;
  color: #f0e9d1;
}
header nav {
  display: none;
}
@media screen and (min-width: 50rem) {
  header nav {
    display: block;
  }
  header nav > ul {
    display: flex;
  }
}

dd {
  margin: 0;
}

figcaption {
  background: #bcd9f1;
  background-color: rgb(225,237,249);
  font-size: 0.875rem;
  padding: 0.5rem;
}

figcaption>p {
  font-weight: 300;
  line-height: 1.7777778;
}

figcaption>p:first-child {
  margin-top: 0;
}

figcaption>p:last-child {
  margin-bottom: 0;
}

figure {
  margin: 0;
}

.container {
  margin: 0 1.25rem;
  padding: 0;
  position: relative;
}

@media screen and (min-width: 50rem) {
  .container {
    margin: 0 auto;
    max-width: 80rem;
    padding: 0 2.5rem;
  }
}

.copyright {
  margin: 0;
}

.dropdown {
  background-color: #dff0ff;
  display: none;
  left: 0;
  padding: 1rem 0;
  position: relative;
  right: 0;
  z-index: 5;
}

.dropdown a {
  --color-link: #0090cd;
  font-size: 0.875rem;
  font-weight: 300;
  padding: 0;
  text-decoration: underline;
}
.dropdown [aria-current="page"] {
  color: #233759;
  font-size: 0.875rem;
}
.dropdown li {
  break-inside: avoid;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.dropdown.is-expanded {
  display: block;
}
.dropdown-toggle[aria-expanded="true"] {
  background-color: #dff0ff;
  color: #233759;
}
@media screen and (min-width: 50rem) {
  .dropdown {
    box-shadow: 0 10px 10px rgba(0,0,0,0.3);
    position: absolute;
  }
  .dropdown a {
    font-size: 1.125rem;
  }
  .dropdown .container {
    column-gap: 4rem;
    columns: 2;
    margin: 0 auto;
  }
}

.logo {
  height: 63px;
  position: absolute;
  right: 10px;
  top: 19px;
  width: 50px;
  z-index: 1;
}

@media screen and (min-width: 50rem) {
  .logo {
    height: 126px;
    right: 2.5rem;
    top: 7px;
    width: 100px;
  }
}

.outbound {
  --outbound-icon: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 768 1024" xmlns="http://www.w3.org/2000/svg"><path d="M640 768H128V257.90599999999995L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/></svg>');
}
@supports (mask-image: var(--outbound-icon)) or (-webkit-mask-image: var(--outbound-icon)) {
  /* Don't make this display: inline-block, it can cause weird wrapping
   * problems if the link is the last thing on a line. It can cause even
   * weirder things if sentence ending punctuation immediately follows the link,
   * and is the last thing on a line.
   * See https://mattslack.org/2021/09/13/fun-with-svg-masks-and-link-states
   */
  .outbound::after {
    background: currentColor;
    content: '';
    line-height: 1;
    margin-left: 0.2em;
    /* The calc(1em + 2px) because Safari sometimes doesn't cover the entire
     * character, leaving thin colored bars at the top and the bottom of the
     * icon. Chrome and Firefox don't have that issue so we don't need it in
     * the non-vendor-prefixed version
     */
    -webkit-mask: var(--outbound-icon) center right / 1em calc(1em + 3px) no-repeat;
    mask: car(--outbound-icon) center right / 1em 1em no-repeat;
    padding-left: 1em;
    vertical-align: middle;
  }
}
.pull {
  color: #233759;
  font-family: "Avenir Heavy", Avenir, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0.833333em 0 0.8333333em 2em;
  text-indent: -2em;
}

.pull>q {
  font-style: italic;
  white-space: nowrap;
}

.pull>q::before,
.pull>q::after {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-style: normal;
}

@media screen and (min-width: 64rem) {
  .pull {
    --fluid-min-width: 800;
    --pull-min: 24.0;
    --pull-max: 48.0;
    --pull-fluid: calc(((var(--pull-min) / 16) * 1rem) + (var(--pull-max) - var(--pull-min)) * var(--fluid-bp));

    font-size: var(--pull-fluid);
  }
}

@media screen and (min-width: 90rem) {
  .pull {
    font-size: 3rem;
    line-height: 1.04;
  }
}

.wordmark {
  --color-link: currentColor;
  display: block;
  font-family: "Avenir Light", Avenir, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.375;
  margin: 0;
  padding: 1rem 0;
}

.wordmark>em {
  font-family: "Avenir Black Oblique", "Avenir Black", Avenir, Arial, sans-serif;
  font-weight: 900;
}

@media screen and (min-width: 50rem) {
  .wordmark {
    font-size: 3rem;
  }
}

.sidenav a,
.sidenav [aria-current="page"] {
  --color-link: #0c8dc8;
  font-family: "Avenir Medium", Avenir, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.35;
}
@supports not (color: hsl(from var(--color-link) h calc(s 0.8) l)) {
  .sidenav a:visited {
    --color-link: hsl(198.83, 26.6%, 41.57%);
  }
}
.sidenav li {
  list-style: none;
  margin: 1.35em 0;
  padding: 0;
}
.sidenav li:first-child {
  margin-top: 0;
}
.sidenav ul {
  margin: 0;
  padding: 0;
}

.image {
  margin: 0 0 2rem;
}
.image--is-sized img {
  height: auto;
}
.image--multi-col {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.image--multi-col.image--is-sized img {
  width: 100%;
}
.image--multi-col figcaption {
  grid-column: 1 / -1;
}
.image--border {
  border: solid 1px #999;
  box-sizing: border-box;
}
.image--center {
  align-items: center;
  clear: both;
  display: flex;
  flex-direction: column;
  margin: 0 auto 2rem;
}
.image--left {
  clear: both;
  float: left;
  margin: 0 1rem 2rem 0;
}
.image--right {
  clear: both;
  float: right;
  margin: 0 0 2rem 1rem;
}
main .image--left,
main .image--right {
  max-width: 50%;
}
main .image--left.image--is-sized img,
main .image--right.image--is-sized img {
  max-width: 100%;
}
.video {
  margin-bottom: 2rem;
}