@charset "UTF-8";
/*------------------------------------*\
    #Apollo: core styles for all browsers
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

    The measurements presented here are for guidance only
    and should be updated to reflect the design/content needs.
\*------------------------------------*/
/*------------------------------------*\
    #Colors
\*------------------------------------*/
/**
Base colors that can be used when prototyping. Taken from https://czw0ca1j4o.proxynodejs.usequeue.com/

1. We ideally avoid using pure white on pure black, because the contrast is
so great that it creates the illusion that text is vibrating on screen.
 */
/* 1 */
/* 1 */
/**
Theme colors.
 */
/**
Sass variables.
 */
/**
Social media colours that might be useful.
See: https://o8r6tofuhl.proxynodejs.usequeue.com/
 */
/*------------------------------------*\
    #Fonts
\*------------------------------------*/
@font-face {
  font-display: fallback;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/notosans/notosans-regular.woff2") format("woff2"), url("../fonts/notosans/notosans-regular.woff") format("woff");
}
@font-face {
  font-display: fallback;
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/notosans/notosans-italic.woff2") format("woff2"), url("../fonts/notosans/notosans-italic.woff") format("woff");
}
@font-face {
  font-display: fallback;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/notosans/notosans-bold.woff2") format("woff2"), url("../fonts/notosans/notosans-bold.woff") format("woff");
}
@font-face {
  font-display: fallback;
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/notosans/notosans-bolditalic.woff2") format("woff2"), url("../fonts/notosans/notosans-bolditalic.woff") format("woff");
}
/*------------------------------------*\
    #Typesetting
\*------------------------------------*/
/**
Use https://e9ljj5inm2.proxynodejs.usequeue.com/ and https://3wmn43ds8g.proxynodejs.usequeue.com/font-style-matcher/ to pick
system fonts that are reasonably close to any web fonts needed for the project.

This improves performance, avoids Flash Of Invisible Text (FOIT) and minimises
Flash of Unstyled Content (FOUC) - see https://l4tlo557ag.proxynodejs.usequeue.com/writing/type-is-your-right/

Be sure to include fonts for both Mac OS and Windows. Use quote marks around
fonts with white space in their name.

When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
/*------------------------------------*\
    #Functions
\*------------------------------------*/
/*------------------------------------*\
    #Maths functions
\*------------------------------------*/
/**
 #Random number
 https://xoydvidr7r.proxynodejs.usequeue.com/221/
 */
/**
 #Power function
 https://5j37drpizq.proxynodejs.usequeue.com/snippets/sass/power-function/
 */
/**
 #Square root function
 */
/*------------------------------------*\
    #CSS unit functions
\*------------------------------------*/
/**
 #em
 */
/**
 #rem
 */
/**
 #px
 */
/**
 #Return a number without a unit
 */
/**
 #Remove any unit present to return a unitless number
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #Font sizes
\*------------------------------------*/
/*------------------------------------*\
    #Media query
\*------------------------------------*/
/*------------------------------------*\
    #Stack
\*------------------------------------*/
/**
This mixin allows us to add vertical spacing between a container's direct children,
much like the 'axiomatic owl' technique but limited to specific use cases.

By applying Flexbox to the parent container, we can use auto margin on a specific
child element. This way, we can choose to group elements inside the stack to the
top/bottom of the vertical space, which is useful for card-like components.

Use with a specific measure, or without for the default measure, e.g.

main {
	@include stack(4rem);
}

article {
	@include stack;
}
 */
/*------------------------------------*\
    #Base

    Normalize comes first for the cascade
\*------------------------------------*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a, .heading-anchor {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*------------------------------------*\
    #Animation
\*------------------------------------*/
/*
 * Respect the choices of users who do not want animations.
 */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}
/*------------------------------------*\
    #Quotes
\*------------------------------------*/
blockquote {
  margin-inline-end: 1.5625rem;
  margin-inline-start: 1.5625rem;
  padding: 0.625rem;
  position: relative;
}
blockquote::before {
  background-color: #bdbdbd;
  content: "";
  height: 100%;
  left: -0.1875rem;
  position: absolute;
  top: 0;
  width: 0.1875rem;
}
blockquote > * + * {
  margin-top: 1rem;
}
blockquote > *:first-child {
  margin-top: 0;
}
blockquote cite {
  color: #111;
  font-size: 1rem;
  font-style: normal;
  font-weight: bold;
}

[dir=rtl] blockquote::before {
  left: auto;
  right: -0.1875rem;
}

/*------------------------------------*\
    #Body
\*------------------------------------*/
html {
  height: 100%;
}

/**
 Typographical styles for fonts are in 40-base/_typography.scss
 */
body {
  background-color: #fff;
  color: #111;
  min-height: 100%;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/**
Styles needed for a sticky footer
 */
.grid-wrap {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

/*------------------------------------*\
    #Box sizing
\*------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0;
}

/*------------------------------------*\
    #Buttons

    1. High contrast themes tend to eliminate background-color.
    With no border set, we need to apply a transparent outline to
    maintain the button shape. The negative outline-offset moves
    the outline inside the perimeter so it behaves like a border.
\*------------------------------------*/
button,
.button {
  background-color: #005797;
  border: solid 2px #005797;
  border-radius: 1.5rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  outline: 2px solid transparent; /* 1 */
  outline-offset: -2px; /* 1 */
  padding: 0.6875rem 1.5rem;
}
button:hover,
.button:hover {
  background-color: #024488;
  border-color: #024488;
}
button:focus, button:active,
.button:focus,
.button:active {
  color: #000;
  background-color: #f9dc4a;
  border-color: #000;
}

button:not([type=submit]) {
  text-align: start;
}

/**
Remove link styling from links styled as buttons.
 */
.button {
  text-decoration: none;
}

/**
Remove link styling from actual buttons styled as buttons.
 */
button.button,
input[type=submit].button {
  text-decoration: none;
}

.button--wide {
  text-align: center;
  width: 100%;
}

.button--alt {
  background-color: transparent;
  color: #005797;
}
.button--alt:hover {
  background-color: #cbe0fb;
  color: #024488;
}
.button--alt:focus, .button--alt:active {
  background-color: #f9dc4a;
  border-width: 3px;
  color: #000;
  padding: 0.625rem 1.4375rem;
}

.button--ghost {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #000;
  font-weight: normal;
  padding-left: 0;
  padding-right: 0;
}
.button--ghost:hover {
  background-color: transparent;
  border-color: transparent;
}

.button[disabled],
.button.js-disabled {
  background-color: #bdbdbd;
  border-color: #bdbdbd;
  box-shadow: none;
  color: #303030;
  cursor: not-allowed;
}
.button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active,
.button.js-disabled:hover,
.button.js-disabled:focus,
.button.js-disabled:active {
  background-color: #bdbdbd;
  color: #303030;
  outline: 0;
}

/*------------------------------------*\
    #Focus
\*------------------------------------*/
:focus {
  /**
  Ideally we would specify the background-color here to cover all circumstances.
  Unfortunately, this does not work at all well for Internet Explorer, so we can't.
   */
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/**
Where focus is moved to the target via JavaScript, it is
acceptable not to show a focus outline.
 */
main:focus,
#main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

/*------------------------------------*\
    #Forms
\*------------------------------------*/
/**
Start of resets for the fieldset element
https://9gho5pjb6k.proxynodejs.usequeue.com/blog/2015/01/03/reset-your-fieldset/
 */
fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0.01em 0 0 0;
}

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

/**
End of resets for the fieldset element
 */
.field-group + .field-group {
  margin-top: 2.5rem;
}

form > * + *,
.field-group > * + * {
  margin-top: 1.75rem;
}

/**
Group inputs to line up side-by-side
 */
.input-group {
  display: flex;
  align-items: center;
}

.input-group > * + * {
  margin-left: 1.875rem;
}

[dir=rtl] .input-group > * + * {
  margin-left: 0;
  margin-right: 1.875rem;
}

.field-legend {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: bold;
}

.field {
  max-width: 41.25rem;
}

label,
.field-label,
.field-hint,
.field-error-msg,
.faux-label {
  display: block;
}

.field-label,
.faux-label {
  margin-bottom: 0.25rem;
}

.field-label,
.group-legend {
  font-weight: bold;
}
.field-label + .field-hint,
.group-legend + .field-hint {
  margin-top: 0.25rem;
}

.field-hint {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #545454;
  margin-bottom: 0.25rem;
  max-width: 41.25rem;
}

.required {
  color: #545454;
  font-weight: normal;
}

textarea,
[type=date],
[type=email],
[type=file],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 0.3125rem;
  width: 100%;
}
textarea:focus,
[type=date]:focus,
[type=email]:focus,
[type=file]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus {
  box-shadow: inset 0 0 0 2px;
  outline: solid 3px #f9dc4a;
  outline-offset: 0;
}

select,
[type=date],
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  height: 2.9375rem;
}

[type=file] {
  border-color: transparent;
}
[type=file]:focus {
  border-color: currentColor;
  box-shadow: inset 0 0 0 4px;
  margin-left: -0.3125rem;
  margin-right: -0.3125rem;
  outline: 3px solid #f9dc4a;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}

/**
Search
 */
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

/**
Select
 */
select {
  background-color: transparent;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 0.3125rem;
  width: 100%;
}
select:focus {
  box-shadow: inset 0 0 0 2px;
  outline: solid 3px #f9dc4a;
  outline-offset: 0;
}

/**
Select with custom arrow icon
 */
@supports (padding-inline-start: 1em) {
  select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E");
    background-position: center right 0.625rem;
    background-repeat: no-repeat;
    background-size: 0.9375rem;
    padding-inline-end: 2.125rem;
  }
  [dir=rtl] select {
    background-position: center left 0.625rem;
  }
}
/**
Textarea
 */
textarea {
  height: 10em;
  resize: vertical;
}

/**
Memorable dates (e.g. date of birth)
 */
.memorable-date {
  display: inline-block;
  margin-top: 0;
}

.memorable-date + .memorable-date {
  margin-left: 1rem;
}

[dir=rtl] .memorable-date + .memorable-date {
  margin-left: auto;
  margin-right: 1rem;
}

/**
Radio/checkbox inputs
 */
.radio-item,
.checkbox-item {
  clear: left;
  float: left;
  margin-top: 0.25rem;
  padding-left: 2.125rem;
  position: relative;
}
.radio-item::after,
.checkbox-item::after {
  clear: both;
  content: "";
  display: block;
}

[dir=rtl] .radio-item,
[dir=rtl] .checkbox-item {
  clear: right;
  float: right;
  padding-left: 0;
  padding-right: 2.125rem;
}

.radio-item input,
.checkbox-item input {
  cursor: pointer;
  height: 2.75rem;
  left: -0.625rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: -0.125rem;
  width: 2.75rem;
  z-index: 1;
}

[dir=rtl] .radio-item input,
[dir=rtl] .checkbox-item input {
  left: auto;
  right: -0.625rem;
}

.radio-item label,
.checkbox-item label {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 0;
  margin-top: -0.125rem;
  padding: 0.6875rem 0.9375rem 0.625rem 0.0625rem;
  touch-action: manipulation;
}
.radio-item label::before, .radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
  content: "";
  position: absolute;
}
.radio-item label::before,
.checkbox-item label::before {
  background: transparent;
  border: 2px solid;
  height: 1.5rem;
  left: 0;
  top: 0.5rem;
  width: 1.5rem;
}

[dir=rtl] .radio-item label,
[dir=rtl] .checkbox-item label {
  padding: 0.6875rem 0.0625rem 0.625rem 0.9375rem;
}
[dir=rtl] .radio-item label::before,
[dir=rtl] .checkbox-item label::before {
  left: auto;
  right: 0;
}

.radio-item label::before, .radio-item label::after {
  border-radius: 50%;
}
.radio-item label::after {
  background: currentColor;
  border: 5px solid;
  height: 0;
  left: 0.4375rem;
  opacity: 0;
  top: 0.9375rem;
  width: 0;
}

[dir=rtl] .radio-item label::after {
  left: auto;
  right: 0.4375rem;
}

.checkbox-item label::after {
  background: transparent;
  border: solid;
  border-top-color: transparent;
  border-width: 0 0 3px 3px;
  height: 0.40625rem;
  left: 0.375rem;
  opacity: 0;
  top: 0.9375rem;
  transform: rotate(-45deg);
  width: 0.75rem;
}

[dir=rtl] .checkbox-item label::after {
  left: auto;
  right: 0.375rem;
}

.checkbox-group--cluster .checkbox-item {
  clear: none;
  margin-right: 0.75rem;
}

.radio-item:hover input:not(:disabled) + label::before,
.checkbox-item:hover input:not(:disabled) + label::before {
  box-shadow: 0 0 0 4px #005797;
}

.radio-item input:focus + label::before,
.checkbox-item input:focus + label::before {
  border-width: 4px;
  box-shadow: 0 0 0 4px #f9dc4a;
}

.radio-item:hover input:focus + label::before,
.checkbox-item:hover input:focus + label::before {
  box-shadow: 0 0 0 4px #f9dc4a;
}

.radio-item input:checked + label::after,
.checkbox-item input:checked + label::after {
  opacity: 1;
}

[type=radio]:disabled,
[type=radio]:disabled + label [type=checkbox]:disabled,
[type=checkbox]:disabled + label {
  cursor: default;
}

[type=radio]:disabled + label,
[type=checkbox]:disabled + label {
  opacity: 0.5;
}

/**
Segmented options. Can use either radio or checkbox inputs. The purpose is to
show all available options outright, rather than hide them behind a <select>
 */
.segmented-group-wrapper {
  max-width: none;
}

.segmented-group.l-switcher {
  margin-top: 0;
}
.segmented-group.l-switcher > * > * {
  max-width: 100%;
  min-width: 33.333%;
  position: relative;
}
.segmented-group.l-switcher label {
  border: 2px solid;
  cursor: pointer;
  display: block;
  margin: 0.125rem;
}
.segmented-group.l-switcher label:before, .segmented-group.l-switcher label:after {
  content: "";
  position: absolute;
}
.segmented-group.l-switcher label::before {
  background: transparent;
  height: 1.5rem;
  left: 0.625rem;
  top: 0.625rem;
  width: 1.5rem;
}
.segmented-group.l-switcher label::after {
  background: transparent;
  border: solid;
  border-top-color: transparent;
  border-width: 0 0 3px 3px;
  height: 0.40625rem;
  left: 1rem;
  opacity: 0;
  top: 1.0625rem;
  transform: rotate(-45deg);
  width: 0.75rem;
}
.segmented-group.l-switcher input {
  cursor: pointer;
  height: 2.75rem;
  margin: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 2.75rem;
  z-index: 1;
}
.segmented-group.l-switcher .segmented-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  display: block;
  padding: 0.625rem;
  padding-left: 2.75rem;
}
.segmented-group.l-switcher .segmented-label > * + * {
  margin-top: 0.5em;
}
.segmented-group.l-switcher .segmented-label span {
  display: block;
}
.segmented-group.l-switcher .segmented-label span:first-of-type {
  font-weight: bold;
}
.segmented-group.l-switcher > * > *:hover label {
  background-color: #cbe0fb;
}
.segmented-group.l-switcher input:focus + label {
  border-color: #f9dc4a;
  box-shadow: inset 0 0 0 4px;
  outline: solid 2px #f9dc4a;
}
.segmented-group.l-switcher input:checked + label::after {
  opacity: 1;
}

[dir=rtl] .segmented-group label::before {
  right: 0.625rem;
  left: auto;
}
[dir=rtl] .segmented-group label::after {
  right: 1rem;
  left: auto;
}
[dir=rtl] .segmented-group input {
  left: 0;
  right: auto;
}
[dir=rtl] .segmented-group .segmented-label {
  padding: 0.625rem;
  padding-right: 2.75rem;
}

/**
Fixed input widths
 */
.input-width-30 {
  max-width: 59ex;
}

.input-width-20 {
  max-width: 41ex;
}

.input-width-10 {
  max-width: 23ex;
}

.input-width-5 {
  max-width: 10.8ex;
}

.input-width-4 {
  max-width: 9ex;
}

.input-width-3 {
  max-width: 7.2ex;
}

.input-width-2 {
  max-width: 5.4ex;
}

/**
Error styles
 */
[data-component=error-summary] li a, [data-component=error-summary] li .heading-anchor {
  color: #a82615;
  display: inline-block;
  font-weight: bold;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
[data-component=error-summary] li a:hover, [data-component=error-summary] li .heading-anchor:hover, [data-component=error-summary] li a:visited, [data-component=error-summary] li .heading-anchor:visited {
  color: #a82615;
}
[data-component=error-summary] li a:focus, [data-component=error-summary] li .heading-anchor:focus {
  color: #000;
}

.field--error {
  border-left: solid 0.3125rem #a82615;
  padding-left: 0.9375rem;
}
.field--error input:not([type=file]),
.field--error textarea:not(:focus) {
  border-color: #a82615;
}
.field--error input:focus,
.field--error textarea:focus {
  border-color: inherit;
}

[dir=rtl] .field--error {
  border-left: none;
  border-right: solid 0.3125rem #a82615;
  padding-left: 0;
  padding-right: 0.9375rem;
}

.field-error-msg {
  color: #a82615;
  font-weight: bold;
  margin-top: 0.9375rem;
}

/**
Progress bar
 */
.progress-list {
  margin-bottom: 1.875rem;
}
@media screen and (min-width: 48em) {
  .progress-list {
    display: flex;
    flex-wrap: wrap;
  }
}

.progress-list li {
  position: relative;
}
.progress-list li::after {
  background-color: #545454;
  bottom: -1rem;
  content: "";
  height: 0.8125rem;
  left: 1.1875rem;
  position: absolute;
  width: 0.1875rem;
}
@media screen and (min-width: 48em) {
  .progress-list li::after {
    bottom: auto;
    height: 0.1875rem;
    left: 50%;
    top: 2rem;
    width: 100%;
    z-index: -1;
  }
}
.progress-list li + li {
  margin-top: 1.25rem;
}
@media screen and (min-width: 48em) {
  .progress-list li + li {
    margin-top: 0;
  }
}

[dir=rtl] .progress-list li::after {
  left: auto;
  right: 1.1875rem;
}
@media screen and (min-width: 48em) {
  [dir=rtl] .progress-list li::after {
    left: auto;
    right: 50%;
  }
}

.progress-list li.complete::after {
  background-color: #237978;
}

.progress-list li:last-child::after {
  display: none;
}

.progress-step__inner {
  align-items: center;
  display: flex;
}
@media screen and (min-width: 48em) {
  .progress-step__inner {
    flex-direction: column;
    padding-top: 0.625rem;
    text-align: center;
  }
}
.progress-step__inner > span {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.625rem;
}
@media screen and (min-width: 48em) {
  .progress-step__inner > span {
    width: 9.375rem;
  }
}

.progress-step__marker {
  align-items: center;
  background-color: #fff;
  border: solid 3px #545454;
  border-radius: 50%;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}
@media screen and (min-width: 48em) {
  .progress-step__marker {
    box-shadow: 0 0 0 0.625rem #fff;
  }
}

.progress-step__marker.complete {
  background-color: #237978;
  border-color: #237978;
  color: #fff;
  position: relative;
}
.progress-step__marker.complete::before, .progress-step__marker.complete::after {
  background-color: #237978;
  content: "";
  position: absolute;
}
.progress-step__marker.complete::before {
  border-radius: 50%;
  height: 2.375rem;
  left: 0;
  top: 0;
  width: 2.375rem;
}
.progress-step__marker.complete::after {
  border: solid;
  border-top-color: transparent;
  border-width: 0 0 3px 3px;
  height: 0.5625rem;
  left: 0.625rem;
  top: 0.8125rem;
  transform: rotate(-45deg);
  width: 1.125rem;
}

.progress-list a, .progress-list .heading-anchor {
  color: #545454;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.progress-list a:visited, .progress-list .heading-anchor:visited {
  color: #920ba6;
}
.progress-list a:hover, .progress-list .heading-anchor:hover {
  color: #024488;
}
.progress-list a:focus, .progress-list .heading-anchor:focus {
  box-shadow: 0 0 0 2px;
  color: #000;
  outline: solid 3px #f9dc4a;
  outline-offset: 2px;
  text-decoration: none;
}
.progress-list a:active, .progress-list .heading-anchor:active {
  color: #000;
}

/*------------------------------------*\
    #Hide and show items inclusively

    See https://8ve7aytltt.proxynodejs.usequeue.com/blog/2017/04/14/inclusively-hidden.html
\*------------------------------------*/
/*
 * Hide from everybody and remove from the document flow, using the hidden
 * attribute.
 *
 * Use if a component should remain hidden regardless of CSS being
 * available or not (the style below provides support for legacy browsers).
 */
[hidden] {
  display: none !important;
}

/*
 * Hide from everybody and remove from the document flow, using the %hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a component requires a basic show and hide interaction, and the
 * content should become available were CSS to fail.
 */
/*
 * Hide from everybody while maintaining layout, using the %invisible
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a more complex transition is required, like when transitioning an
 * off-screen navigation into the viewport. Best paired with other CSS
 * properties that negate its position in the DOM e.g. `position: absolute;`
 */
/*
 * Hide visually only - remains available to Assistive Technology -
 * using the %visually-hidden placeholder (extend the placeholder with
 * Sass to avoid it appearing repeatedly in your markup).
 */
.global-header [role=status], .visuallyhidden:not(:focus):not(:active), .skip-link:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 *The :not portions of the following selector allow a means for any
 * focusable element to become visible when focused/active by a user.
 */
/*
 * Make sure that the siblings of hidden components do not cause the hidden
 * component to take up any vertical space.
 */
.visuallyhidden + *, .skip-link + * {
  margin-top: 0 !important;
}

br {
  margin-top: 0;
}

/*
 * Restore an element that has been visually hidden, using the %visually-hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 */
/*------------------------------------*\
    #HTML elements
\*------------------------------------*/
abbr {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}

dfn {
  font-style: normal;
  font-weight: 600;
}

b,
strong,
.bold {
  font-weight: 600;
}

em,
i {
  font-style: italic;
}

small,
.small,
.small-caps {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

.small-caps {
  text-shadow: 0 0 0 #111;
  text-transform: uppercase;
}

code,
samp,
pre {
  font-family: Monaco, "Lucida Console", "Courier New", monospace;
  font-size: 0.9em;
  -webkit-hyphens: none;
          hyphens: none;
  orphans: 3;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  page-break-before: avoid;
  text-transform: none;
  widows: 3;
}

/*------------------------------------*\
    #Icons
\*------------------------------------*/
svg {
  fill: currentColor;
  height: auto;
}

svg:not([class]), svg.heading-anchor {
  width: 100%;
}

/**
SVG icons are sized relative to font size, thanks to the em unit.
 */
.icon {
  height: 1em;
  vertical-align: baseline;
  width: 1em;
}

.icon--larger {
  height: 1.875rem;
  width: 1.875rem;
}

/**
Use the `with-icon` class on the SVG's parent, if there
is a need to specify the spacing between text and icon.
Pay attention to whether the icon is before the text or after.

2. Logical property creates appropriate spacing irrespective of text direction
 */
.with-icon--before,
.with-icon--after,
.with-icon--larger {
  align-items: baseline;
  display: inline-flex;
}
.with-icon--before .icon,
.with-icon--after .icon,
.with-icon--larger .icon {
  flex: 0 0 auto;
}

.with-icon--larger {
  align-items: center;
}

.with-icon--before .icon {
  margin-right: 0.5rem;
}
@supports (margin-inline-end: 1em) {
  .with-icon--before .icon {
    margin-right: 0;
    margin-inline-end: 0.5rem; /* 2 */
  }
}

.with-icon--after .icon {
  margin-left: 0.5rem;
}
@supports (margin-inline-start: 1em) {
  .with-icon--after .icon {
    margin-left: 0;
    margin-inline-start: 0.5rem; /* 2 */
  }
}

[dir=rtl] .with-icon--before .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
@supports (margin-inline-start: 1em) {
  [dir=rtl] .with-icon--before .icon {
    margin-left: 0;
    margin-inline-end: 0.5rem; /* 2 */
  }
}
[dir=rtl] .with-icon--after .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
@supports (margin-inline-start: 1em) {
  [dir=rtl] .with-icon--after .icon {
    margin-right: 0;
    margin-inline-start: 0.5rem; /* 2 */
  }
}

/*------------------------------------*\
    #Images
\*------------------------------------*/
img {
  height: auto;
  max-width: 100%;
}

.avatar {
  background-color: #fff;
  border: solid 1px #005a9c;
  border-radius: 50%;
  height: 6.25rem;
  overflow: hidden;
  width: 6.25rem;
}
.avatar img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.avatar--med {
  height: 3.125rem;
  width: 3.125rem;
}
.avatar--med img {
  margin-top: 0;
}

.avatar--small {
  height: 2rem;
  width: 2rem;
}
.avatar--small img {
  margin-top: 0;
}

/*------------------------------------*\
    #Links
\*------------------------------------*/
/**
Default global link styles that do not interfere with component link styles
- see https://jxly2z6izm.proxynodejs.usequeue.com/screencasts/2019/02/global-link-styles/

1. Don't rely on colour alone for styling links - see
https://xncet4ijb3.proxynodejs.usequeue.com/TR/2016/NOTE-WCAG20-TECHS-20161007/F73

2. Remove the outline on focused links when they are also active/hovered.
 */
a:not([class]), .heading-anchor,
a.with-icon--before,
a.with-icon--after {
  border: 0;
  color: #005797;
  cursor: pointer;
  padding-inline: 0.125rem;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
a:not([class]) svg, .heading-anchor svg,
a.with-icon--before svg,
a.with-icon--after svg {
  fill: currentColor;
}
a:not([class]):visited, .heading-anchor:visited,
a.with-icon--before:visited,
a.with-icon--after:visited {
  color: #920ba6;
}
a:not([class]):hover, .heading-anchor:hover,
a.with-icon--before:hover,
a.with-icon--after:hover {
  color: #024488;
  outline-width: 0; /* 2 */
}
a:not([class]):focus, .heading-anchor:focus,
a.with-icon--before:focus,
a.with-icon--after:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
  text-decoration: none;
}
a:not([class]):active, .heading-anchor:active,
a.with-icon--before:active,
a.with-icon--after:active {
  color: #000;
  outline-width: 0; /* 2 */
}

.heading-anchor {
  color: #545454;
  font-weight: normal;
  opacity: 0.82;
  text-underline-offset: auto;
}
.heading-anchor:visited {
  color: #545454;
}
.heading-anchor:hover {
  color: #545454;
  opacity: 1;
}
.heading-anchor:focus {
  color: #000;
  opacity: 1;
}

/*------------------------------------*\
    #Lists
\*------------------------------------*/
ul,
ol {
  margin-block-end: 1em;
  margin-block-start: 1em;
  padding-inline-start: 2.4em;
}
ul > * + *,
ul li ul,
ul li ol,
ol > * + *,
ol li ul,
ol li ol {
  margin-block-start: 0.75em;
}

ol.counter ::marker {
  content: counters(list-item, ".") ". ";
}

/**
Remove bullets, margin and padding from lists inside a <nav> element, and lists with the
'.clean-list' class/. Note that that this may remove list semantics in some circumstances in
some WebKit browsers. See https://8ve7aytltt.proxynodejs.usequeue.com/blog/2019/01/12/lists-and-safari.html
If it's important that the number of items in a list is announced, add role="list" to the <ul> / <ol>
 */
nav ul,
nav ol,
.clean-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li,
nav ul ol,
nav ul ul,
nav ol li,
nav ol ol,
nav ol ul,
.clean-list li,
.clean-list ol,
.clean-list ul {
  margin: 0;
  padding: 0;
}

/**
Description lists / Definition lists
 */
dl {
  margin-block-end: 1em;
  margin-block-start: 1em;
}
dl dt {
  font-weight: bold;
}
dl dd {
  margin-inline-start: 2.5rem;
}
dl dd + dt {
  margin-block-start: 0.5em;
}
dl dt + dd,
dl dd + dd {
  margin-block-start: 0.25em;
}

dl.inline div {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
}
dl.inline div dt, dl.inline div dd {
  margin-inline-start: 0;
}
dl.inline div dt::after {
  content: ": ";
}
dl.inline div dd:not(:last-child):after {
  content: ", ";
}

@supports (grid-row-start: auto) {
  dl.grid {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: 1fr;
    row-gap: 1rem;
  }
  dl.grid dd + dt,
  dl.grid dt + dd,
  dl.grid dd + dd {
    margin-block-start: 0;
  }
  dl.grid dt {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  dl.grid dd {
    grid-column-start: 2;
    grid-column-end: 3;
    margin-inline-start: 0;
  }
}

/*------------------------------------*\
    #Skip link
\*------------------------------------*/
.skip-link {
  background-color: #f9dc4a;
  border: solid 3px #000;
  color: #000;
  padding: 0.625em 0.9375em;
  text-decoration: none;
}
.skip-link:active, .skip-link:focus {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 999;
}
.skip-link:active span, .skip-link:focus span {
  box-shadow: 0 -1px 0 0 inset;
}

.skip-link [dir=rtl]:active, .skip-link [dir=rtl]:focus {
  left: auto;
  right: 0;
}

/*------------------------------------*\
    #Details and summary elements
\*------------------------------------*/
summary {
  color: #005797;
  cursor: pointer;
  display: inline-block;
  padding-left: 1.5625rem;
  position: relative;
}
summary::before {
  border-color: transparent;
  border-left-color: inherit;
  border-style: solid;
  border-width: 7px 0 7px 12.124px;
  bottom: 0;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin: auto;
  position: absolute;
  top: -0.0625rem;
  width: 0;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  color: #024488;
}
summary span {
  display: inline-block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
summary:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
}
summary:focus span {
  text-decoration: none;
}

details {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

details[open] > summary {
  margin-bottom: 1rem;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

[dir=rtl] summary {
  padding-left: 0;
  padding-right: 1.5625rem;
}
[dir=rtl] summary::before {
  left: auto;
  right: 0;
  transform: rotate(180deg);
}

/*------------------------------------*\
    #Social links
\*------------------------------------*/
.social-links__item {
  height: 3rem;
  padding: 0.875rem;
  width: 3rem;
}
.social-links__item .icon {
  height: 1.25rem;
  width: 1.25rem;
}
.social-links__item:hover .icon {
  color: #024488;
}

/*------------------------------------*\
    #Tables

    1. Logical property allows text-direction to change with 'dir'
\*------------------------------------*/
table {
  border: 1px solid #bdbdbd;
  border-collapse: collapse;
  margin-bottom: 1rem;
  margin-top: 1rem;
  width: 100%;
}

tr:nth-child(even) {
  background-color: rgba(206, 205, 205, 0.5);
}

th,
td,
table caption {
  padding: 0.75rem;
  text-align: left;
  text-align: start; /* 1 */
}

[dir=rtl] th,
[dir=rtl] td,
[dir=rtl] table caption {
  text-align: right;
  text-align: start; /* 1 */
}

td, th {
  vertical-align: text-top;
}

thead th,
tfoot th {
  background-color: #024488;
  color: #fff;
  vertical-align: bottom;
}

/**
Responsive tables:
https://ho2eccgwv6.proxynodejs.usequeue.com/2020/11/under-engineered-responsive-tables.html
 */
@media screen {
  .table-wrap {
    border: 1px solid #bdbdbd;
    margin-bottom: 1rem;
    margin-top: 1rem;
    max-width: 100% !important;
  }
  .table-wrap[role][aria-labelledby][tabindex] {
    overflow: auto;
  }
  .table-wrap table {
    border: 0;
    margin-bottom: 0;
    margin-top: 0;
  }
  .table-wrap:focus {
    border-color: #000;
    box-shadow: inset 0 0 0 4px;
    outline: 3px solid #f9dc4a;
  }
}
/*------------------------------------*\
    #Typography
\*------------------------------------*/
body {
  font-family: "Trebuchet MS", Geneva, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

p {
  margin: 1rem 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0 0 1rem;
}

h1 {
  margin-bottom: 1em;
}

h1,
.txt-venus {
  font-size: 2.0625rem;
  line-height: 1.303030303;
}
@media screen and (min-width: 48em) {
  h1,
  .txt-venus {
    font-size: 2.625rem;
    line-height: 1.4;
  }
}

h2,
.txt-earth {
  font-size: 1.6875rem;
  line-height: 1.2444444444;
}
@media screen and (min-width: 48em) {
  h2,
  .txt-earth {
    font-size: 2.125rem;
    line-height: 1.2647058824;
  }
}

h3,
.txt-mars {
  font-size: 1.5rem;
  line-height: 1.4;
}

h4,
.txt-jupiter {
  font-size: 1.25rem;
  line-height: 1.6;
}

h5,
.txt-saturn,
.post__notes h3 {
  font-size: 1.125rem;
  line-height: 1.5;
}

h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.4375rem;
  line-height: 1.4;
}

.txt-pluto {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.txt-eris {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

/**
When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
.fonts-loaded body {
  font-family: "Noto Sans", "Trebuchet MS", Geneva, sans-serif;
}

/*------------------------------------*\
    #Layouts
\*------------------------------------*/
/*------------------------------------*\
    #Box layout primitive

    From https://40sotolfod.proxynodejs.usequeue.com/layouts/box/

    `.l-box` should have borders and/or padding on all sides, or
    none at all. Otherwise it's not a box, but something more specific.
\*------------------------------------*/
.l-box {
  border: 1px solid;
  display: block;
  padding: 1.5rem;
}

.l-box--no-padding {
  padding: 0;
}

/**
1. High contrast themes tend to eliminate background-color. If there is no
border set on the box, we need to apply a transparent outline to maintain
the box shape. The negative outline-offset moves the outline inside the
perimeter so it behaves like a border and doesn't add to the overall size.
 */
.l-box--no-border {
  border: none;
  outline: 1px solid transparent; /* 1 */
  outline-offset: -1px; /* 1 */
}

/*------------------------------------*\
    #Center layout primitive

    From https://40sotolfod.proxynodejs.usequeue.com/layouts/center/

    `.l-center` creates a horizontally centered container.
\*------------------------------------*/
/**
1. We use left and right padding to add some minimum space between the
contents of `.l-center` and the edges of the parent element or viewport.
To avoid making the content narrower than intended, we add an exception
to our global box-sizing rule.
 */
.l-center.l-center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
  padding-left: 5vw;
  padding-right: 5vw;
}

/*------------------------------------*\
    #Cluster layout primitive

    From https://40sotolfod.proxynodejs.usequeue.com/layouts/cluster/

    `.l-cluster` suits any groups of elements that differ in length and
    are liable to wrap. Use the Cluster to align any groups of horizontally
    laid out elements to the left or right, or in the center, with even
    spacing between elements.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-cluster {
  overflow: hidden;
}

/**
We use flexbox to configure the elements into clusters without creating
white space. We can control how we align items within the cluster,
by using 'align-items` and `justify-content`.
 */
.l-cluster > * {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -0.625rem;
}

.l-cluster--vertical-align > * {
  align-items: center;
}

/**
We apply an even, symmetrical margin to the elements that we wish to space
out, but halve it to to account for 'doubling up' at the edges.
 */
.l-cluster.l-cluster > * > * {
  display: inline-block;
  margin: 0.625rem;
}

/*------------------------------------*\
    #Frame layout primitive

    From https://40sotolfod.proxynodejs.usequeue.com/layouts/frame/

    `.l-frame` is most useful for cropping media (images
    and video) to a specific aspect ratio.

    It is not recommended to apply the `.l-frame` class to the
    <figure> element, as it will interfere with the <figcaption>.
    Instead, place it on <picture> or a <div> inside of <figure>.
\*------------------------------------*/
.l-frame {
  display: block;
  overflow: hidden;
  position: relative;
}

.l-frame > * {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.l-frame > iframe,
.l-frame > img,
.l-frame > video {
  height: 100%;
  width: 100%;
}

.l-frame > img,
.l-frame > video {
  -o-object-fit: cover;
     object-fit: cover;
}

/* Common aspect ratios */
.l-frame--16-9 {
  padding-bottom: 56.25%;
}

.l-frame--3-2 {
  padding-bottom: 66.67%;
}

.l-frame--4-3 {
  padding-bottom: 75%;
}

.l-frame--square {
  padding-bottom: 100%;
}

/*------------------------------------*\
    #Sidebar layout primitive

    From https://40sotolfod.proxynodejs.usequeue.com/layouts/sidebar/

    `.l-sidebar` creates a container for a larger panel next to
    a smaller - sidebar - panel.

    When there is enough horizontal space for them to sit alongside
    each other, they do so. Otherwise they stack vertically. The
    point at which this happens is determined by setting a flex-basis
    on the sidebar panel and a min-width on the other panel.

    N.B: because this layout uses Flexbox, we can use the `order`
    property on either `.not-sidebar` or `.sidebar` (depending upon
    the source order of the HTML) to determine whether the sidebar
    sits on the left or right side.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-sidebar {
  overflow: hidden;
}

/**
We target the intermediary wrapper and give it a negative margin
to create a gutter between the `.sidebar` and `.not-sidebar`.
 */
.l-sidebar > * {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -0.75rem; /* 1 */
}

/**
We apply an even, symmetrical margin to `.sidebar` and `.not-sidebar`,
but halve it to to account for 'doubling up' at the edges.
 */
.l-sidebar > * > * {
  margin: 0.75rem;
}

/**
Flex-basis determines the ideal width of the `.sidebar`. This can be
omitted to let the contents of `.sidebar` determine the width of
`.sidebar` (e.g. an image with a specified max-width).
 */
.l-sidebar .sidebar {
  flex-basis: 18.75rem;
  flex-grow: 1;
}

/**
Min-width determines the point at which `.sidebar` and `.not-sidebar`
will sit side-by-side rather than vertically. This negates the use of
a viewport media query.
 */
.l-sidebar .not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(55% - 1.5rem);
}

.l-sidebar--expanded {
  width: 100%;
}

.l-sidebar .sidebar--compact {
  flex-basis: 11.25rem;
}

/*------------------------------------*\
    #Switcher layout primitive

    Uses this to switch between vertical and horizontal layouts:
    https://ubukxttvvh.proxynodejs.usequeue.com/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/

    `.l-switcher` switches a Flexbox context between a horizontal and a
    vertical layout at a given, CONTAINER-BASED breakpoint, rather than
    using viewport media queries.

    The child elements in the horizontal configuration will be of equal
	width.

	To apply gutter spacing, apply padding to the flex items and an
    equivalent negative margin to the flex container. This will double up,
    so use half the intended value.

\*------------------------------------*/
.l-switcher {
  overflow: hidden;
}

.l-switcher > * {
  display: flex;
  flex-flow: row wrap;
}

/**
1. Determines the item width in the single column, vertical configuration

2. Determines how many items will be in a row in the horizontal configuration

3. The 690 value matches the desired breakpoint value. The 100% corresponds to
the width of the columns' parent container. This calculation will create a
value that's either bigger than the max-width or smaller than the min-width,
so that either of these properties is applied instead.
 */
.l-switcher > * > * {
  max-width: 100%; /* 1 */
  min-width: 50%; /* 2 */
  width: calc(476100px - 69000%); /* 3 */
}

/*------------------------------------*\
    #Core components
\*------------------------------------*/
/*------------------------------------*\
    #Global header core
\*------------------------------------*/
.no-js [data-trigger=account-menu],
.no-js .account-menu {
  display: none;
}

.global-header {
  background-color: #fff;
}

.global-header .banner {
  background-color: #cbe0fb;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

.global-header .banner__inner {
  align-items: center;
  display: flex;
}
.global-header .banner__inner p {
  font-size: 0.875rem;
  line-height: 1.4285714286;
  margin-bottom: 0;
  margin-top: 0;
}
.global-header .banner__inner a, .global-header .banner__inner .heading-anchor {
  color: #024488;
}
.global-header .banner__inner a:focus, .global-header .banner__inner .heading-anchor:focus {
  color: #000;
}

#lang-nav {
  background-color: #f8f8fb;
}
#lang-nav .l-cluster > * {
  justify-content: flex-end;
  margin: 0 -0.625rem;
}
#lang-nav .l-cluster.l-cluster > * > * {
  margin: 0 0.625rem;
}
#lang-nav a, #lang-nav .heading-anchor {
  font-size: 0.875rem;
  line-height: 1.4285714286;
  color: #111;
  display: block;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
}

/*------------------------------------*\
    #Archive banner
\*------------------------------------*/
@media screen {
  #archive-banner {
    background-color: #f9dc4a;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
  }
  #archive-banner .centered {
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 70rem;
    overflow: hidden;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #archive-banner .centered > * {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -0.75rem;
  }
  #archive-banner .centered > * > * {
    margin: 0.75rem;
  }
  #archive-banner .archive-banner__message {
    flex-basis: 0;
    flex-grow: 999;
    min-width: calc(80% - 1.5rem);
  }
  #archive-banner .archive-banner__message > * + * {
    margin-top: 1rem;
  }
  #archive-banner .archive-banner__message > * {
    max-width: 41.25rem;
  }
  #archive-banner .archive-banner__message h2 {
    display: block;
    font-size: 1.1875rem;
    line-height: 1.6842105263;
  }
  #archive-banner .archive-banner__message h3 {
    font-size: 1rem;
    line-height: 1.3333333333;
  }
  #archive-banner .archive-banner__message h3 + * {
    margin-top: 0;
  }
  #archive-banner a, #archive-banner .heading-anchor {
    color: #024488;
  }
  #archive-banner a:visited, #archive-banner .heading-anchor:visited {
    color: #024488;
  }
  #archive-banner a:focus, #archive-banner .heading-anchor:focus {
    background-image: none;
    color: #000;
    outline: solid 2px #000;
    outline-offset: 1px;
    text-decoration: none;
  }
  #archive-banner .archive-banner__logo {
    flex-basis: auto;
    flex-grow: 1;
    order: -1;
  }
  #archive-banner .archive-banner__logo > span {
    display: block;
    height: 2.75rem;
    position: relative;
    width: 4.125rem;
  }
}
@media screen and (min-width: 64em) {
  #archive-banner .archive-banner__logo > span {
    height: 3.25rem;
    width: 4.875rem;
  }
}
@media print {
  #archive-banner {
    border: solid 2.25pt;
    font-family: "Noto Sans", "Trebuchet MS", Geneva, sans-serif;
    margin: 1cm;
    padding: 8pt;
    position: relative;
  }
  #archive-banner a:link,
  #archive-banner a:visited,
  #archive-banner a,
  #archive-banner .heading-anchor {
    color: #000;
  }
  #archive-banner a[href]::after, #archive-banner [href].heading-anchor::after {
    content: " <" attr(href) "> ";
  }
  .archive-banner__message {
    min-height: 40pt;
    padding-left: 62pt;
  }
  .archive-banner__message > * + * {
    margin-top: 8pt;
  }
  [dir=rtl] .archive-banner__message {
    padding-left: 0;
    padding-right: 60pt;
  }
  .archive-banner__logo {
    left: 8pt;
    position: absolute;
    top: 8pt;
  }
  [dir=rtl] .archive-banner__logo {
    left: auto;
    right: 8pt;
  }
}
/*------------------------------------*\
    #Logo
\*------------------------------------*/
.logo {
  display: block;
  height: 2.75rem;
  position: relative;
  width: 4.125rem;
}
@media screen and (min-width: 64em) {
  .logo {
    height: 3.25rem;
    width: 4.875rem;
  }
}

.logo--member {
  height: 5.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  position: relative;
  width: 9.375rem;
}
.logo--member > img {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto 0;
  max-height: 100%;
  max-width: calc(100% - 40px);
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

/*------------------------------------*\
    #Navigation core
\*------------------------------------*/
#global-nav svg {
  pointer-events: none;
}

#global-nav {
  border-bottom: solid 1px #bdbdbd;
  display: block;
  padding-bottom: 1.125rem;
  padding-top: 1.125rem;
}
@media screen and (min-width: 70em) {
  #global-nav {
    padding-bottom: 0;
    padding-top: 1.25rem;
  }
}

.global-nav__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 70em) {
  .global-nav__inner {
    align-items: flex-end;
    flex-wrap: nowrap;
    position: relative;
  }
}

.global-nav__inner > ul {
  background-color: #fff;
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  padding-bottom: 2.8125rem;
  width: 100%;
}
@media screen and (min-width: 70em) {
  .global-nav__inner > ul {
    flex-basis: auto;
    flex-wrap: nowrap;
    padding-bottom: 0;
  }
}

@media screen and (min-width: 70em) {
  li.top-nav-item + li.top-nav-item {
    margin-inline-start: 0.5rem;
  }
}

@media screen and (min-width: 70em) {
  .global-nav__inner > ul > li:last-child {
    margin-inline-start: auto;
  }
}

.global-nav__inner .top-nav-item {
  border-bottom: solid 1px #bdbdbd;
  flex-basis: 100%;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .top-nav-item {
    border-bottom: none;
    flex-basis: auto;
  }
}

.nav-link {
  color: #111;
  display: block;
  padding: 0.625rem 0;
  position: relative;
  text-decoration: none;
}
@media screen and (min-width: 70em) {
  .nav-link {
    display: inline-block;
  }
}

.global-nav__inner .top-nav-item > .nav-link {
  font-weight: 600;
}

.global-nav__inner .has-children > .nav-link {
  align-items: center;
  display: flex;
}
.global-nav__inner .has-children > .nav-link::after {
  block-size: 0.4375rem;
  border-color: black;
  border-style: solid;
  border-width: 0 0.125rem 0.125rem 0;
  content: "";
  inline-size: 0.4375rem;
  margin-inline-start: 0.75rem;
  visibility: hidden;
}

.logo-link:focus {
  box-shadow: 0 0 0 3px #000;
  outline: solid 3px #f9dc4a;
  outline-offset: 3px;
}
@media screen and (min-width: 70em) {
  .logo-link {
    margin-inline-end: 1.5625rem;
    padding-bottom: 0.3125rem;
    position: relative;
  }
  .logo-link::before {
    background-color: #005a9c;
    bottom: 0;
    content: "";
    display: none;
    height: 0.1875rem;
    left: 0;
    position: absolute;
    width: 100%;
  }
  .logo-link:hover::before {
    display: block;
  }
}

.icon-link {
  align-items: center;
  color: #111;
  display: flex;
  min-height: 2.75rem;
  text-decoration: none !important;
}
@media screen and (min-width: 70em) {
  .icon-link {
    display: inline-flex;
    justify-content: center;
    height: 100%;
    min-width: 2.75rem;
  }
}
.icon-link::before {
  bottom: 0 !important;
}
.icon-link:visited, .icon-link:hover {
  color: #111 !important;
}
.icon-link:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
}
.icon-link .hide-at-max-width {
  margin-inline-start: 0.625rem;
}
@media screen and (min-width: 70em) {
  .icon-link .hide-at-max-width {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    margin-inline-start: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

.account-login {
  flex-basis: 100%;
  font-size: 0.875rem !important;
}
@media screen and (min-width: 70em) {
  .account-login {
    flex-basis: auto;
    padding-bottom: 0.625rem;
    padding-top: 0.625rem;
  }
}

@media screen and (min-width: 70em) {
  .global-nav__inner .top-nav-item > *:first-child {
    font-size: 1rem;
    height: 100%;
    line-height: 1.6875rem;
    padding: 0.625rem 0.3125rem 0.4375rem !important;
    position: relative;
    white-space: nowrap;
  }
  .global-nav__inner .top-nav-item > *:first-child::before {
    background-color: #005a9c;
    bottom: -0.125rem;
    content: "";
    display: none;
    height: 0.1875rem;
    left: 0;
    position: absolute;
    width: 100%;
  }
  .global-nav__inner .top-nav-item > *:first-child:hover::before {
    display: block;
  }
  .global-nav__inner .top-nav-item > *:first-child:focus {
    background-color: #f9dc4a;
    background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
    color: #000;
  }
  .global-nav__inner .top-nav-item > *:first-child:focus:hover::before {
    display: none;
  }
}

.global-nav__inner .nav__submenu {
  display: none;
}

#archive-nav ul,
#category-nav ul {
  background-color: #fff;
  border: solid 1px #bdbdbd;
  height: 11.25rem;
  overflow: auto;
}
#archive-nav ul a, #archive-nav ul .heading-anchor,
#category-nav ul a,
#category-nav ul .heading-anchor {
  display: block;
  padding: 0.625rem;
}

/*------------------------------------*\
    #Breadcrumbs
    See: https://bzt3revabx.proxynodejs.usequeue.com/a11y_breadcrumbs/
\*------------------------------------*/
#breadcrumb {
  padding-bottom: 0.9375rem;
  padding-top: 0.625rem;
}
#breadcrumb .l-cluster > * {
  margin: 0 -0.6875rem;
}
#breadcrumb .l-cluster.l-cluster > * > * {
  margin: 0 0 0 0.6875rem;
  padding-right: 1em;
  position: relative;
}

[dir=rtl] #breadcrumb .l-cluster.l-cluster > * > * {
  margin: 0 0.6875rem 0 0;
  padding-left: 1em;
  padding-right: 0;
}

.breadcrumbs a, .breadcrumbs .heading-anchor {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #111;
  display: block;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem;
}
.breadcrumbs a:visited, .breadcrumbs .heading-anchor:visited, .breadcrumbs a:hover, .breadcrumbs .heading-anchor:hover, .breadcrumbs a:active, .breadcrumbs .heading-anchor:active {
  color: #111;
}

.breadcrumbs [aria-current] {
  font-weight: 600;
  text-decoration: none;
}
.breadcrumbs [aria-current]:hover, .breadcrumbs [aria-current]:focus {
  outline-color: #111;
}

/**
Separator chevron - see https://gtmrxihoat.proxynodejs.usequeue.com/jonneal/pen/kptBs
*/
.breadcrumbs li:not(:last-child)::after {
  border-style: solid;
  border-width: 0.1em 0.1em 0 0;
  content: "";
  display: block;
  height: 0.5em;
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  width: 0.5em;
}

[dir=rtl] .breadcrumbs li:not(:last-child)::after {
  border-width: 0 0 0.1em 0.1em;
  left: 0.1em;
  right: auto;
}

/*------------------------------------*\
    #Access control banner
\*------------------------------------*/
.banner.banner--access-control.acl-private, .banner.banner--access-control.acl-user {
  background-color: #237978;
  color: #fff;
}
.banner.banner--access-control.acl-private .icon, .banner.banner--access-control.acl-user .icon {
  filter: invert(1);
}

.banner--access-control.acl-member {
  background-color: #ddb0c8;
  color: #000;
}

.banner--access-control.acl-team {
  background-color: #ec7070;
  color: #000;
}

/*------------------------------------*\
    #Main
\*------------------------------------*/
/**
1. We use left and right padding to add some minimum space between the
contents of <main> and the edges of the parent element or viewport.
To avoid making the content narrower than intended, we add an exception
to our global box-sizing rule.
 */
main,
#main {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 70rem;
  padding: 1.5rem 5vw 6.25rem;
}

#main .component + .component {
  margin-top: 5rem;
}
@media screen and (min-width: 48em) {
  #main .component + .component {
    margin-top: 6.25rem;
  }
}

#main .component.u-full-width + .component.u-full-width {
  margin-top: 0;
}

/*------------------------------------*\
    #Hero
\*------------------------------------*/
.hero {
  background-color: #f8f8fb;
}
@media screen and (min-width: 70em) {
  .hero {
    padding-top: 2.875rem;
  }
}
.hero .l-sidebar > *,
.hero .l-sidebar > * > * {
  margin: 0;
}
.hero .l-sidebar .sidebar {
  flex-basis: 31.25rem;
}
.hero .l-sidebar .not-sidebar {
  min-width: 50%;
  padding-bottom: 1.875rem;
}
@media screen and (min-width: 70em) {
  .hero .l-sidebar .not-sidebar > * {
    max-width: 31.5rem;
  }
}
.hero .lead {
  margin-bottom: 1.125rem;
  margin-top: 0;
}
.hero img {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 48em) {
  .hero img {
    max-width: 31.25rem;
  }
}

.hero h1 {
  margin-bottom: 1rem;
}

.hero + * {
  margin-top: 3.125rem;
}

.hero .button {
  align-self: flex-start;
}

.hero--listing {
  background-color: #fff;
  margin-bottom: 1.25rem;
  padding-bottom: 2.5rem;
}
.hero--listing + * {
  margin-top: 0;
}

.hero--listing .filters.l-switcher {
  margin: -0.625rem;
  overflow: visible;
}
.hero--listing .filters.l-switcher > * > * {
  min-width: 33.333%;
  padding: 0.625rem;
  width: calc(846400px - 92000%);
}

.hero--listing .filters > div {
  align-items: flex-start;
}
.hero--listing .filters > div > fieldset,
.hero--listing .filters > div > .input-group-wrap {
  align-self: end;
}
.hero--listing .filters .field {
  margin-top: 0;
}
.hero--listing .filters .button--ghost {
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.hero--listing .filters .button--ghost:hover {
  box-shadow: 0 0 4px 2px rgba(84, 84, 84, 0.25);
}
.hero--listing .filters .button--ghost:focus {
  border-color: inherit;
  box-shadow: inset 0 0 0 2px;
  outline: solid 3px #f9dc4a;
  outline-offset: 0;
}

.hero--listing .browse {
  margin: -0.625rem;
  overflow: visible;
}
.hero--listing .browse > * {
  display: flex;
  flex-wrap: wrap;
}
.hero--listing .browse > * > * {
  padding: 0.625rem;
}
.hero--listing .browse h2 {
  font-size: 1rem;
  font-weight: normal;
}

/*------------------------------------*\
    #Translations
\*------------------------------------*/
.translations {
  background-color: #f8f8fb;
  padding: 1.25rem;
}

.translations .l-sidebar > * {
  align-items: center;
  margin-bottom: 0;
  margin-top: 0;
}

.translations .l-sidebar > * > * {
  margin-bottom: 0;
  margin-top: 0;
}

.translations .l-sidebar .sidebar {
  flex-basis: auto;
}

.translations .l-sidebar .not-sidebar {
  min-width: 70%;
}

.translations.l-cluster > * {
  margin: 0 -0.625rem;
}
.translations.l-cluster > * > * {
  margin: 0 0.625rem;
}

.translations + * {
  margin-top: 1.875rem;
}

/*
 * For the TR card, the language subheading is h5 for Family view and h3 for Search results view
 */
.translations h2,
.translations h3,
.translations h5,
.translations .sidebar span {
  font-size: 1rem;
  font-weight: normal;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

.translations a, .translations .heading-anchor {
  display: block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

.landing .translations,
.ecosystem .translations {
  padding: 0;
  margin-top: 0;
}
.landing .translations .sidebar span,
.ecosystem .translations .sidebar span {
  padding-inline-end: 1em;
}
.landing .translations .l-sidebar .not-sidebar,
.ecosystem .translations .l-sidebar .not-sidebar {
  min-width: 70%;
  padding-bottom: 0;
}
.landing .translations + *,
.ecosystem .translations + * {
  margin-top: 2em;
}

/*------------------------------------*\
    #Table of contents (TOC)
\*------------------------------------*/
.toc + * {
  margin-block-start: 1.875rem;
}
@media screen and (min-width: 70em) {
  .toc + * {
    margin-block-start: 5rem;
  }
}

.toc h2 {
  font-size: 1rem;
  font-weight: normal;
}

.toc > ul {
  border-inline-start: solid 3px #f9c818;
}

.toc ul {
  line-height: 1em;
  padding-inline-start: 0.9375rem;
}
.toc ul ul {
  list-style: circle inside;
  padding-inline-start: 1.875rem;
}

.toc ul a, .toc ul .heading-anchor {
  display: inline-block;
  padding-block: 0.625rem;
}

/*------------------------------------*\
    #Text component
\*------------------------------------*/
.component--text > * {
  max-width: 41.25rem;
}
.component--text > * + h2,
.component--text > * + h3,
.component--text > * + h4,
.component--text > * + h5,
.component--text > * + h6 {
  margin-top: 2em;
}

/*------------------------------------*\
    #Quotes
\*------------------------------------*/
.component--quote {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #005a9c;
  font-weight: bold;
  margin-inline-end: 0;
  margin-inline-start: 0.625rem;
  padding: 1.25rem;
  position: relative;
}
.component--quote::before {
  background-color: #005a9c;
  border-radius: 0.3125rem;
  left: -0.625rem;
  width: 0.625rem;
}
.component--quote > * {
  max-width: 39.375rem;
}

[dir=rtl] .component--quote::before {
  left: auto;
  right: -0.625rem;
}

/*------------------------------------*\
    #Image component
\*------------------------------------*/
.component--image figcaption {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-block-start: 1em;
}
.component--image figcaption > * {
  max-width: 33.75rem;
}
.component--image figcaption > a, .component--image figcaption > .heading-anchor {
  align-self: flex-start;
  display: inline-block;
  margin: 0;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Video component
\*------------------------------------*/
.component--video iframe {
  border: 0;
}
.component--video figcaption {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.component--video figcaption > * {
  max-width: 33.75rem;
}
.component--video figcaption > a, .component--video figcaption > .heading-anchor {
  display: inline-block;
  margin: 0;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Notes
\*------------------------------------*/
.note {
  border-width: 5px;
  margin-bottom: 1.875rem;
  max-width: 47rem;
}

.note--error {
  border-color: #a82615;
}

.note--info {
  border-color: #005a9c;
}

.note--success {
  border-color: #046704;
}

.note--warning {
  border-color: #c28605;
}

/*------------------------------------*\
    #Columns
\*------------------------------------*/
.component--columns {
  overflow: hidden;
}

@media screen and (min-width: 48em) {
  .component--columns > ul {
    display: flex;
    flex-wrap: wrap;
    margin: -1.5%;
  }
}
.component--columns > ul li + li {
  margin-top: 1.25rem;
}
@media screen and (min-width: 48em) {
  .component--columns > ul li + li {
    margin-top: 0;
  }
}

@media screen and (min-width: 48em) {
  .component--columns--images > ul > li {
    flex: 1 0 33%;
    max-width: 50%;
    padding: 1.5%;
  }
}
@media screen and (min-width: 48em) {
  .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 48em) {
  .component--columns--icons > ul > li {
    flex: 1 0 50%;
    max-width: 50%;
    padding: 1.5%;
  }
}
@media screen and (min-width: 70em) {
  .component--columns--icons > ul > li {
    flex-basis: 25%;
  }
}
@media screen and (min-width: 70em) {
  .component--columns--icons li:nth-last-child(n+5), .component--columns--icons li:nth-last-child(n+5) ~ li {
    flex-basis: 33%;
  }
}
@media screen and (min-width: 70em) {
  .component--columns--icons li:nth-last-child(n+7), .component--columns--icons li:nth-last-child(n+7) ~ li {
    flex-basis: 25%;
  }
}

/*------------------------------------*\
    #Cards
\*------------------------------------*/
.card {
  background-color: #fff;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.card--event {
  border-left: solid 0.375rem;
}

[dir=rtl] .card--event {
  border-left: 0;
  border-right: solid 0.375rem;
}

.card--event,
.card--member,
.card--news,
.card--group {
  box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
}

.card--event.conference {
  border-color: #237978;
}
.card--event.meeting {
  border-color: #1bc0d7;
}
.card--event.talk {
  border-color: #f9c818;
}
.card--event.workshop {
  border-color: #e93737;
}

.card__text {
  flex-grow: 1;
  order: 1;
  padding-top: 1rem;
}

.card--group .card__text {
  max-width: 41.25rem;
}

.card__text > a:not([class]), .card__text > .heading-anchor {
  align-self: flex-start;
  margin-top: 0.375rem;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

.card__heading {
  font-size: 1.125rem;
  line-height: 1.5;
}

.card__image img {
  border-radius: 0.25rem;
}

.card__link {
  border: 0;
  color: #111;
  text-decoration: none;
}
.card__link:hover {
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.card__link:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
  text-decoration: none;
}

.card--user.l-sidebar {
  padding-bottom: 1.875rem;
  padding-top: 2.5rem;
}
.card--user.l-sidebar .sidebar {
  flex-basis: auto;
  order: -1;
}
.card--user.l-sidebar .sidebar img {
  width: 6.25rem;
}
.card--user.l-sidebar .not-sidebar {
  min-width: calc(70% - 1.5rem);
}
.card--user.l-sidebar .not-sidebar > div {
  max-width: 41.25rem;
}
.card--user.l-sidebar .not-sidebar > div > * + * {
  margin-top: 1.25rem;
}
.card--user.l-sidebar .l-cluster > * {
  align-items: center;
}
.card--user.l-sidebar .l-cluster > *,
.card--user.l-sidebar .l-cluster.l-cluster > * > * {
  margin-bottom: 0;
  margin-top: 0;
}
.card--user.l-sidebar .l-cluster a, .card--user.l-sidebar .l-cluster .heading-anchor {
  display: inline-block;
  padding: 0.75rem 0;
}

/*------------------------------------*\
    #Tag list
\*------------------------------------*/
.tag-list.tag-list {
  margin: -0.625rem;
}
.tag-list.tag-list li {
  margin: 0.625rem;
}

.tag {
  font-size: 0.875rem;
  line-height: 1.4285714286;
  background-color: rgba(206, 205, 205, 0.5);
  background-clip: padding-box;
  border: solid 2px rgba(206, 205, 205, 0.5);
  border-radius: 0.25rem;
  display: inline-block;
  padding: 0.15625rem 0.3125rem 0.15625rem 0.3125rem;
}

/*
Makes the tag links selectable if card link is stretched
across entire card using pseudo element
 */
a.tag, .tag.heading-anchor {
  position: relative;
  text-decoration: underline;
  z-index: 10;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}

/*------------------------------------*\
    #Fifty-fifty
\*------------------------------------*/
@media screen and (min-width: 48em) {
  .component--fifty-fifty {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.component--fifty-fifty > * + * {
  margin-top: 1rem;
}
@media screen and (min-width: 48em) {
  .component--fifty-fifty > * + * {
    margin-top: 0;
  }
}

@media screen and (min-width: 48em) {
  .component--fifty-fifty__text {
    flex-basis: 52%;
  }
}
@media screen and (min-width: 64em) {
  .component--fifty-fifty__text {
    flex-basis: 45%;
  }
}

.component--fifty-fifty__text .l-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 1.875rem;
}
.component--fifty-fifty__text .l-box > * + * {
  margin-top: 1rem;
}
.component--fifty-fifty__text .l-box a, .component--fifty-fifty__text .l-box .heading-anchor {
  align-self: flex-start;
}

@media screen and (min-width: 48em) {
  .component--fifty-fifty .image,
  .component--fifty-fifty .illustration {
    flex-basis: 45%;
  }
}

.component--fifty-fifty .image img {
  border-radius: 0.25rem;
}

.component--fifty-fifty .image .l-frame {
  padding-bottom: 66.67%;
}
@media screen and (min-width: 48em) {
  .component--fifty-fifty .image .l-frame {
    padding-bottom: 100%;
  }
}

.component--fifty-fifty .illustration .l-frame {
  padding-bottom: 75%;
}

@media screen and (min-width: 48em) {
  .component--fifty-fifty.reversed .component--fifty-fifty__text {
    order: -1;
  }
}

/*------------------------------------*\
    #Evangelists
\*------------------------------------*/
@media screen and (min-width: 64em) {
  .component--evangelists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.component--evangelists > * + * {
  margin-top: 1rem;
}
@media screen and (min-width: 64em) {
  .component--evangelists > * + * {
    margin-top: 0;
  }
}

@media screen and (min-width: 64em) {
  .component--evangelists__text {
    flex-basis: 45%;
  }
}
.component--evangelists__text h2 ~ * {
  max-width: 41.25rem;
}

.component--evangelists__list {
  background-color: #005a9c;
  border-radius: 0.375rem;
  color: #fff;
  overflow: hidden;
  padding-top: 1.5rem;
}
@media screen and (min-width: 64em) {
  .component--evangelists__list {
    flex-basis: 45%;
  }
}
.component--evangelists__list h3 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.component--evangelists__list .l-box {
  padding: 1.5rem;
}
.component--evangelists__list li + li {
  border-top: solid 1px #649bc5;
}
.component--evangelists__list p {
  margin-bottom: 0;
  margin-top: 0;
}
.component--evangelists__list .sidebar {
  flex-basis: auto;
}
.component--evangelists__list .not-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: calc(65% - 1.5rem);
}
.component--evangelists__list .not-sidebar > * + * {
  margin-top: 0.75em;
}
.component--evangelists__list a, .component--evangelists__list .heading-anchor {
  color: #fff;
}
.component--evangelists__list a:visited, .component--evangelists__list .heading-anchor:visited, .component--evangelists__list a:hover, .component--evangelists__list .heading-anchor:hover, .component--evangelists__list a:active, .component--evangelists__list .heading-anchor:active {
  color: #fff;
}
.component--evangelists__list a:focus, .component--evangelists__list .heading-anchor:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
}

/*------------------------------------*\
    #Actitivy
\*------------------------------------*/
.component--activity {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem;
}

@media screen and (min-width: 64em) {
  .component--activity .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .component--activity .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    flex-basis: 25%;
  }
}

.component--activity .card {
  background-color: #fff;
  border-radius: 0.25rem;
  overflow: hidden;
}

.component--activity .card__text {
  padding: 1.25rem;
}

.component--activity .card__image img {
  border-radius: 0;
}

/*------------------------------------*\
    #Collapsible sections
\*------------------------------------*/
.component--collapsibles > div {
  background-color: #fff;
  border-radius: 0.375rem;
  box-shadow: -0.0625rem 0.0625rem 0.25rem rgba(55, 70, 95, 0.12);
  padding: 1.5625rem;
}
.component--collapsibles > div + div {
  margin-top: 1rem;
}

[data-heading=collapsibles] span {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
[data-heading=collapsibles] span > * + * {
  margin-top: 1rem;
}

[data-heading=collapsibles] h3 {
  font-size: 1.125rem;
  line-height: 1.5;
}

[data-heading=collapsibles] > * {
  font-size: 0.9375rem;
  line-height: 1.5;
  display: block;
  font-weight: normal;
  margin-top: 1rem;
}

[data-heading=collapsibles] + * > * {
  max-width: 41.25rem;
}

/*------------------------------------*\
    #Group list
\*------------------------------------*/
.component--group-list {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem;
}

.component--group-list__intro {
  max-width: 41.25rem;
}

/*------------------------------------*\
    #Members grid
\*------------------------------------*/
.component--members {
  background-color: #f8f8fb;
  padding-bottom: 1.5625rem;
  padding-top: 1.5625rem;
}

.component--members .l-center > h2,
.component--members .l-center > p {
  max-width: 41.25rem;
}

.component--members__grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
@supports (display: grid) {
  .component--members__grid {
    display: grid;
    grid-auto-rows: minmax(10.625rem, auto);
    grid-gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr));
  }
}

.component--members__grid figure {
  align-items: center;
  background-color: #fff;
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  flex: 1 1 10.625rem;
  position: relative;
}
@supports (display: grid) {
  .component--members__grid figure {
    margin: 0;
  }
}

.component--members__grid figcaption {
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: bold;
  margin: 0.625rem;
  text-align: center;
}

.component--members__grid .l-box {
  max-width: 10.625rem;
}

.component--members__grid + a, .component--members__grid + .heading-anchor {
  align-self: flex-start;
}

.component--members__cta > * {
  align-items: center;
  margin-top: 1em;
}

.component--members__cta > * > *:not(a):not(.heading-anchor) {
  flex-basis: 100%;
}
@media screen and (min-width: 48em) {
  .component--members__cta > * > *:not(a):not(.heading-anchor) {
    flex-basis: auto;
  }
}

/*------------------------------------*\
    #Slide
\*------------------------------------*/
@media screen and (min-width: 64em) {
  .slide {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }
}
.slide > * + * {
  margin-top: 1rem;
}
@media screen and (min-width: 64em) {
  .slide > * + * {
    margin-top: 0;
  }
}

@media screen and (min-width: 64em) {
  .slide__quote,
  .slide__cite {
    flex-basis: 45%;
  }
}

.slide__quote {
  background: url("../images/quote-bg.png") no-repeat 0 0;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.6;
  margin-inline-start: 2.1875rem;
  padding-top: 0.9375rem;
  position: relative;
}
@media screen and (min-width: 48em) {
  .slide__quote {
    font-size: 1.5rem;
    line-height: 1.4;
  }
}
.slide__quote::before {
  background-color: #005a9c;
  border-radius: 0.3125rem;
  content: "";
  height: 100%;
  left: -2.0625rem;
  position: absolute;
  top: 0;
  width: 0.25rem;
}
.slide__quote > * {
  max-width: 41.25rem;
}

[dir=rtl] .slide__quote {
  background-position-x: 100%;
}
[dir=rtl] .slide__quote::before {
  left: auto;
  right: -2.0625rem;
}

.slide__cite {
  font-size: 0.9375rem;
  line-height: 1.5;
  padding-inline-start: 0.3125rem;
}
.slide__cite.l-sidebar .sidebar {
  flex-basis: auto;
}
.slide__cite.l-sidebar .not-sidebar {
  align-items: flex-start;
  min-width: calc(70% - 1.5rem);
}
.slide__cite.l-sidebar .not-sidebar p:first-child {
  font-weight: bold;
}
.slide__cite.l-sidebar .not-sidebar p:first-child + p {
  margin-top: 0;
}

.slide__logo {
  background-color: #fff;
  height: 7.5rem;
  padding: 1.5rem;
  position: relative;
  width: 11.25rem;
}
.slide__logo > img {
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
@supports ((-o-object-fit: contain) or (object-fit: contain)) {
  .slide__logo > img {
    height: 100%;
    max-width: none;
    -o-object-fit: contain;
       object-fit: contain;
    position: static;
  }
}

/*------------------------------------*\
    #Slider core
\*------------------------------------*/
.component--slider {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem;
}
.component--slider h2 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
}
.component--slider ul > li + li {
  margin-top: 2rem;
}

/*------------------------------------*\
    #Crosslinks (You may also like)
\*------------------------------------*/
.crosslinks {
  background-color: #005a9c;
  color: #fff;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem;
}

.crosslinks .component--columns__intro h2 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.crosslinks .component--columns__intro a, .crosslinks .component--columns__intro .heading-anchor,
.crosslinks .component--columns__intro a:visited,
.crosslinks .component--columns__intro a:hover,
.crosslinks .component--columns__intro a:active {
  color: #fff;
}
.crosslinks .component--columns__intro a:focus, .crosslinks .component--columns__intro .heading-anchor:focus {
  color: #111;
}

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul {
    display: flex;
    flex-wrap: wrap;
    margin: -1.5%;
  }
}
@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul > li {
    flex: 1 0 50%;
    max-width: 50%;
    padding: 1.5%;
  }
}
@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images > ul li + li {
    margin-top: 0;
  }
}

@media screen and (min-width: 43.75em) {
  .crosslinks .component--columns--images li:nth-last-child(n+3):nth-last-child(-n+3):first-child,
  .crosslinks .component--columns--images li:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ li {
    flex-basis: 33%;
  }
}
@media screen and (min-width: 64em) {
  .crosslinks .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child,
  .crosslinks .component--columns--images li:nth-last-child(n+4):nth-last-child(-n+4):first-child ~ li {
    flex-basis: 25%;
  }
}

.crosslinks .card {
  background-color: #fff;
  border-radius: 0.25rem;
  color: #111;
  overflow: hidden;
}

.crosslinks .card__text {
  padding: 1.25rem;
}

.crosslinks .card__image img {
  border-radius: 0;
}

/*------------------------------------*\
    #Search
\*------------------------------------*/
input[type=search] {
  max-width: none;
  position: relative;
  z-index: 1;
}

.l-sidebar.search {
  overflow: visible;
}

.l-sidebar.search > * {
  margin: -0.75rem;
}

.l-sidebar.search > * > * {
  margin: 0.75rem;
}

.l-sidebar.search form .sidebar {
  flex-basis: auto;
}

.l-sidebar.search form .not-sidebar {
  min-width: 70%;
}

.l-sidebar.search input[type=search] {
  max-width: none;
}

@supports (padding-inline-start: 1em) {
  input[type=search] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs/%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
    background-position: center left 0.5em;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-inline-start: 2.5rem;
  }
  [dir=rtl] input[type=search] {
    background-position: center right 0.5em;
  }
}
/*------------------------------------*\
    #Meta info
\*------------------------------------*/
.meta {
  border-bottom: solid 1px #bdbdbd;
  border-top: solid 1px #bdbdbd;
  margin-bottom: 3.125rem;
  padding: 1.5rem 0;
}
.meta dl {
  margin-bottom: 0;
}

.meta .with-link {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Family/Series list
\*------------------------------------*/
.family-grouping {
  padding-block-start: 1.75rem;
}

.family-grouping h2 + * {
  margin-block-start: 1rem;
}

/*------------------------------------*\
    #Maturity levels
\*------------------------------------*/
.maturity-level {
  background-color: rgba(206, 205, 205, 0.5);
  border-radius: 0.25rem;
  display: inline-block;
  margin-bottom: 0.3125rem;
  padding: 0.15625rem 0.3125rem;
}

.maturity-level--note {
  background-color: transparent;
}

.maturity-level--highlighted {
  background-color: #005a9c;
  color: #fff;
}

/*------------------------------------*\
    #Pagination
\*------------------------------------*/
.pagination {
  margin-top: 2.5rem;
}

.l-cluster.pagination > * {
  margin-bottom: 0;
  margin-top: 0;
}

.l-cluster.pagination > * > * {
  margin-bottom: 0;
  margin-top: 0;
}

.pagination + * {
  border-top: solid 1px #bdbdbd;
  margin-top: 2.0625rem;
}

@media screen and (min-width: 64em) {
  .pagination__list {
    justify-content: center;
  }
}
.pagination__list a, .pagination__list .heading-anchor {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #000;
  display: block;
  text-decoration: none;
  padding: 0.6875rem 1.125rem;
}
.pagination__list a:visited, .pagination__list .heading-anchor:visited {
  color: #000;
}
.pagination__list a:focus, .pagination__list .heading-anchor:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
  text-decoration: none;
}
.pagination__list a[href]:hover, .pagination__list [href].heading-anchor:hover {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.pagination__list a[href][aria-current], .pagination__list [href][aria-current].heading-anchor {
  background-color: #005797;
  color: #fff;
  font-weight: bold;
}
.pagination__list a[href][aria-current]:hover, .pagination__list [href][aria-current].heading-anchor:hover {
  color: #fff;
  text-decoration: none;
}
.pagination__list a[href][aria-current]:focus, .pagination__list [href][aria-current].heading-anchor:focus {
  color: #000;
}

/*------------------------------------*\
    #RSS feed
\*------------------------------------*/
.rss {
  margin-top: 2.5rem;
}
.rss a, .rss .heading-anchor {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Comments
\*------------------------------------*/
.comments {
  background-color: #f8f8fb;
  padding-bottom: 3.125rem;
  padding-top: 3.125rem;
}
.comments h2 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.comment-list {
  margin-top: 1.875rem;
}
.comment-list > li {
  border-bottom: solid 1px #bdbdbd;
  padding-bottom: 3.125rem;
}
.comment-list > li + li {
  margin-top: 1.25rem;
}

.l-sidebar.comment {
  overflow: visible;
}

.l-sidebar.comment,
.l-sidebar.comment-form-wrap {
  overflow: visible;
}
.l-sidebar.comment .sidebar,
.l-sidebar.comment-form-wrap .sidebar {
  flex-basis: auto;
  order: -1;
}
.l-sidebar.comment .sidebar img,
.l-sidebar.comment-form-wrap .sidebar img {
  width: 3.125rem;
}
.l-sidebar.comment .not-sidebar,
.l-sidebar.comment-form-wrap .not-sidebar {
  min-width: calc(80% - 1.5rem);
}

.reply-list.reply-list {
  margin-left: 4.375rem;
  margin-top: 1.875rem;
  padding-left: 1.875rem;
  position: relative;
}
.reply-list.reply-list::before {
  background-color: #005a9c;
  border-radius: 0.1875rem;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0.1875rem;
}
.reply-list.reply-list > li {
  border-top: solid 1px #bdbdbd;
}
.reply-list.reply-list > li + li {
  margin-top: 1.25rem;
}

[dir=rtl] .reply-list.reply-list {
  margin-left: 0;
  margin-right: 4.375rem;
  padding-left: 0;
  padding-right: 1.875rem;
}
[dir=rtl] .reply-list.reply-list::before {
  left: auto;
  right: 0;
}

.reply-list .comment {
  padding-top: 1.25rem;
}

.comment__author {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3333333333;
}

.comment__body {
  max-width: 41.25rem;
}

[data-replylink] {
  font-size: 0.9375rem;
  line-height: 1.5;
  align-self: flex-start;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem;
}

#respond {
  margin-top: 1rem;
}
#respond > div:first-of-type {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.comment-form-wrap {
  margin-top: 1.875rem;
}

#comment-form {
  max-width: 41.25rem;
}
#comment-form .l-switcher {
  overflow: visible;
}
#comment-form .l-switcher > * {
  align-items: flex-end;
  margin: -0.625rem;
}
#comment-form .l-switcher > * > * {
  padding: 0.625rem;
  width: calc(435600px - 66000%);
}

/*------------------------------------*\
    #Pre-footer items
\*------------------------------------*/
.pre-footer.l-switcher {
  margin: -1.25rem;
}

.pre-footer.l-switcher > * > * {
  margin-top: 2.5rem;
  min-width: 33.333%;
  padding: 1.25rem;
  width: calc(846400px - 92000%);
}

.pre-footer h2 + * {
  margin-top: 1em;
}

.pre-footer a, .pre-footer .heading-anchor {
  display: block;
}

/*------------------------------------*\
    #Global footer
\*------------------------------------*/
.global-footer {
  border-top: solid 1px #bdbdbd;
  grid-row-start: 2;
  grid-row-end: 3;
  padding: 1.25rem 0 1.5625rem;
}
.global-footer .l-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.global-footer .l-center > * + * {
  margin-top: 1rem;
}
.global-footer a, .global-footer .heading-anchor,
.global-footer .copyright {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}
.global-footer .copyright {
  margin-bottom: 0;
}
.global-footer a, .global-footer .heading-anchor {
  color: #111;
}
.global-footer a:visited, .global-footer .heading-anchor:visited, .global-footer a:hover, .global-footer .heading-anchor:hover, .global-footer a:active, .global-footer .heading-anchor:active {
  color: #111;
}

.global-footer__links {
  display: flex;
  flex-wrap: wrap;
}
.global-footer__links > ul {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 64em) {
  .global-footer__links > ul {
    margin-inline-start: auto;
  }
}
.global-footer__links .l-cluster > * {
  margin: 0 -0.625rem;
}
.global-footer__links .l-cluster.l-cluster > * > * {
  margin: 0 0.625rem;
}
.global-footer__links a:not([class]), .global-footer__links .heading-anchor {
  display: block;
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
}
.global-footer__links .with-icon--larger {
  padding: 0.75rem;
}
.global-footer__links .with-icon--larger img {
  height: 1.25rem;
  width: 1.25rem;
}
.global-footer__links .with-icon--larger:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
}

/*------------------------------------*\
    #Templates
\*------------------------------------*/
/*------------------------------------*\
    #Default page
\*------------------------------------*/
.default .content {
  max-width: 47rem;
}

@supports (grid-column-gap: 8%) {
  .default .content {
    max-width: none;
  }
  @media screen and (min-width: 64em) {
    .default .content {
      display: grid;
      grid-column-gap: 7.857%;
      grid-template-areas: "article related";
      grid-template-columns: 67.143% 25%;
    }
  }
  @media screen and (min-width: 64em) {
    .default .content article {
      grid-area: article;
    }
  }
  @media screen and (min-width: 64em) {
    .default .content .related {
      grid-area: related;
    }
  }
}
.default .related {
  border-top: solid 10px #005a9c;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

.related [aria-current] {
  color: #111;
  text-decoration: none;
}

@supports (grid-column-gap: 8%) {
  @media screen and (min-width: 64em) {
    .default .related {
      margin-top: 0;
    }
  }
}
@media screen and (min-width: 64em) {
  .default .related__inner {
    border-inline-start: solid 1px #bdbdbd;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.default .related__inner ul a, .default .related__inner ul .heading-anchor {
  display: inline-block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Event
\*------------------------------------*/
.event .content {
  max-width: 47rem;
}

.event .intro {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
  margin-inline-start: 1.875rem;
  position: relative;
}
.event .intro::before {
  border-radius: 0.3125rem;
  content: "";
  height: 100%;
  left: -1.75rem;
  position: absolute;
  top: 0;
  width: 0.3125rem;
}
.event .intro.conference::before {
  background-color: #237978;
}
.event .intro.meeting::before {
  background-color: #1bc0d7;
}
.event .intro.talk::before {
  background-color: #f9c818;
}
.event .intro.workshop::before {
  background-color: #e93737;
}
.event .intro h1 {
  margin-bottom: 0;
}
.event .intro h1 + * {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 0.625rem;
  order: -1;
}

[dir=rtl] .event .intro::before {
  left: auto;
  right: -1.75rem;
}

.event .lead,
.event .calendar-link {
  margin-bottom: 1.25rem;
}

/*------------------------------------*\
    #Home page
\*------------------------------------*/
.home .hero {
  background-color: #fff;
}
.home .component--members {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
}
.home .component--members__grid {
  margin-top: 2.5rem;
}

/*------------------------------------*\
    #Post template
\*------------------------------------*/
.post .content,
.post .rss {
  max-width: 47rem;
}

@supports (grid-column-gap: 8%) {
  .post .content {
    max-width: none;
  }
  @media screen and (min-width: 64em) {
    .post .content {
      display: grid;
      grid-column-gap: 7.857%;
      grid-template-columns: 67.143% 25%;
      grid-template-areas: "article related";
    }
  }
  @media screen and (min-width: 64em) {
    .post .content article {
      grid-area: article;
    }
  }
  @media screen and (min-width: 64em) {
    .post .content .related {
      grid-area: related;
    }
  }
}
.post .related {
  margin-top: 2.5rem;
}

@supports (grid-column-gap: 8%) {
  @media screen and (min-width: 64em) {
    .post .content .related {
      margin-top: 0;
    }
  }
}
.post .related__inner {
  background-color: #f8f8fb;
  padding: 1.75rem 1.25rem;
}
.post .related__inner h2 {
  font-size: 1.1875rem;
  line-height: 1.9411764706;
}
.post .related__inner h3 {
  font-size: 1rem;
  line-height: 1.3333333333;
}
.post .related__inner a, .post .related__inner .heading-anchor {
  color: #545454;
}
.post .related__inner a:focus, .post .related__inner .heading-anchor:focus {
  color: #000;
}

.post .related__inner > div,
.post .related__inner h3 + * {
  margin-top: 1.125rem;
}

.post .related__inner > div + div {
  border-top: solid 1px #bdbdbd;
  margin-top: 1.5rem;
  padding-top: 0.9375rem;
}

.post .related__inner li {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.post .related__inner li + li {
  margin-top: 1.375rem;
}

.post .sub-head {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 1.875rem;
  margin-top: -1.25rem;
}
.post .meta {
  position: relative;
}
@media screen and (min-width: 48em) {
  .post .meta dl dd:first-of-type {
    padding-right: 9.375rem;
  }
}
.post .meta dl dd, .post .meta dl dt {
  margin: 0;
  padding-bottom: 0.5rem;
  padding-top: 0.3125rem;
}
.post .meta dl dt:first-of-type,
.post .meta dl dd:first-of-type {
  padding-top: 0.5rem;
}
.post .meta dl dt {
  float: left;
  font-weight: normal;
  margin-right: 1em;
}
.post .skip-to-comments,
.post .skip-to-comment-form {
  color: #545454;
  display: inline-block;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.post .skip-to-comments:visited,
.post .skip-to-comment-form:visited {
  color: #545454;
}
.post .skip-to-comments:focus,
.post .skip-to-comment-form:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
  text-decoration: none;
}
@media screen and (min-width: 48em) {
  .post .skip-to-comments {
    position: absolute;
    right: 0;
    top: 1.1875rem;
  }
}
.post .rss {
  border-top: solid 1px #bdbdbd;
  padding-top: 2.5rem;
}

@media screen and (min-width: 48em) {
  [dir=rtl] .post .meta dl dd:first-of-type {
    padding-left: 9.375rem;
    padding-right: 0;
  }
}
[dir=rtl] .post .meta dl dt {
  float: right;
  margin-left: 1em;
  margin-right: 0;
}
@media screen and (min-width: 48em) {
  [dir=rtl] .post .skip-to-comments {
    left: 0;
    right: auto;
  }
}

.post__notes {
  border-top: solid 1px #bdbdbd;
  margin-top: 3.75rem;
  padding-top: 1.25rem;
}
/*------------------------------------*\
    #Landing page
\*------------------------------------*/
.landing #breadcrumb,
.ecosystem #breadcrumb {
  background-color: #f8f8fb;
}
.landing main,
.landing #main,
.ecosystem main,
.ecosystem #main {
  padding-top: 0;
}
.landing .component--text,
.landing .component--image,
.landing .component--video,
.landing .component--quote,
.ecosystem .component--text,
.ecosystem .component--image,
.ecosystem .component--video,
.ecosystem .component--quote {
  margin-left: auto;
  margin-right: auto;
  max-width: 44.4375rem;
}
.landing .component--quote,
.ecosystem .component--quote {
  max-width: 43.1875rem;
}

/*------------------------------------*\
    #Listing templates
\*------------------------------------*/
.listing .wrap {
  background-color: #f8f8fb;
}
.listing #breadcrumb {
  background-color: #fff;
}
.listing main,
.listing #main {
  padding-top: 0;
}

.people-list > * + *,
.post-list > * + * {
  border-top: solid 1px #bdbdbd;
}

.people-list .groups .sidebar {
  flex-basis: auto;
}
.people-list .groups .sidebar h3 {
  font-size: 1rem;
  font-weight: normal;
  line-height: 2.75rem;
}

.post-list > * {
  padding-bottom: 1.875rem;
  padding-top: 2.5rem;
}
.post-list > li:last-child {
  border-bottom: solid 1px #bdbdbd;
}
.post-list .l-sidebar .sidebar {
  flex-basis: auto;
}
.post-list .l-sidebar .not-sidebar {
  min-width: calc(70% - 1.5rem);
}
.post-list .l-sidebar .not-sidebar > div {
  max-width: 41.25rem;
}
@media screen and (min-width: 64em) {
  .post-list .l-sidebar .not-sidebar > div {
    margin-bottom: 2.5rem;
  }
}
.post-list .l-sidebar .not-sidebar > div > * + * {
  margin-top: 1.25rem;
}
.post-list .l-sidebar .sidebar .l-frame {
  height: 9.125rem;
  width: 12.5rem;
}
.post-list .l-sidebar .sidebar .l-frame img {
  border-radius: 0.25rem;
}
.post-list .l-cluster > * {
  align-items: center;
}
.post-list .l-cluster a, .post-list .l-cluster .heading-anchor {
  display: inline-block;
  padding: 0.75rem 0;
}
.post-list h2 a, .post-list h2 .heading-anchor {
  color: #000;
}
.post-list h2 a .icon, .post-list h2 .heading-anchor .icon {
  height: 0.8em;
  width: 0.8em;
}

.event-list,
.member-list,
.group-list,
.tr-stats-list {
  margin-top: 2.5rem;
}
.event-list > * + *,
.member-list > * + *,
.group-list > * + *,
.tr-stats-list > * + * {
  margin-top: 1rem;
}
.event-list .card,
.member-list .card,
.group-list .card,
.tr-stats-list .card {
  padding: 1rem;
}
.event-list .card.l-sidebar .sidebar,
.member-list .card.l-sidebar .sidebar,
.group-list .card.l-sidebar .sidebar,
.tr-stats-list .card.l-sidebar .sidebar {
  flex-basis: auto;
}
.event-list .card.l-sidebar .not-sidebar,
.member-list .card.l-sidebar .not-sidebar,
.group-list .card.l-sidebar .not-sidebar,
.tr-stats-list .card.l-sidebar .not-sidebar {
  min-width: calc(70% - 1.5rem);
}
.event-list .card__text,
.member-list .card__text,
.group-list .card__text,
.tr-stats-list .card__text {
  padding-top: 0;
}

.event-list .card .l-cluster {
  margin-top: 1rem;
}
.event-list .card .l-cluster > * {
  font-size: 0.9375rem;
  line-height: 1.5;
  align-items: center;
}
.event-list .card.l-sidebar .l-sidebar .sidebar {
  flex-basis: 20rem;
}
.event-list .card.l-sidebar .l-sidebar .not-sidebar {
  min-width: calc(55% - 1.5rem);
}
.event-list .card__image {
  align-self: flex-start;
  height: 6.25rem;
  width: 6.25rem;
}
@media screen and (min-width: 64em) {
  .event-list .card__image {
    height: 12.5rem;
    width: 12.5rem;
  }
}
.event-list .card__image img {
  border-radius: 0;
}
.event-list .date-location {
  font-size: 0.9375rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: nowrap;
  max-width: 18.75rem;
}
.event-list .date-location img {
  margin-inline-end: 0.75rem;
  width: 1.125rem;
}
.event-list .date-location .date-orig {
  display: inline-block;
  padding-bottom: 0.625rem;
}
.event-list .date-location > div:last-child {
  border-inline-start: solid 1px #bdbdbd;
  padding-inline-start: 0.75rem;
}

.member-list .card__text > * {
  max-width: 41.25rem;
}
.member-list .logo--member {
  margin-left: auto;
  margin-right: auto;
}

.js .member-list [data-component=card] .card__text > :last-child {
  margin-bottom: 2.5rem;
  margin-top: 0;
}

.group-list {
  margin-top: 0;
}

.archive-links h2 + * {
  margin-top: 0.8em;
}

/*------------------------------------*\
    #Profile template
\*------------------------------------*/
.profile .content {
  max-width: 47rem;
}

@supports (grid-column-gap: 8%) {
  .profile .content {
    max-width: none;
  }
  @media screen and (min-width: 64em) {
    .profile .content {
      display: grid;
      grid-column-gap: 7.857%;
      grid-template-areas: "title nav" "details nav";
      grid-template-columns: 67.143% 25%;
      grid-template-rows: auto 1fr;
    }
  }
  @media screen and (min-width: 64em) {
    .profile .content h1 {
      grid-area: title;
    }
  }
  @media screen and (min-width: 64em) {
    .profile .content #profile-nav {
      grid-area: nav;
    }
  }
  @media screen and (min-width: 64em) {
    .profile .content .details {
      grid-area: details;
    }
  }
}
.profile .profile-nav__inner {
  margin-bottom: 2.0625rem;
}
@media screen and (min-width: 64em) {
  .profile .profile-nav__inner {
    border-inline-start: solid 1px #bdbdbd;
    margin-bottom: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.profile .profile-nav__inner [aria-current] {
  font-weight: bold;
}

@media screen and (min-width: 64em) {
  .profile [data-toggle=true] {
    display: none;
  }
}
.profile [data-toggle=true][aria-expanded=false] {
  margin-bottom: 2.0625rem;
}

#profile-nav a, #profile-nav .heading-anchor {
  display: inline-block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
#profile-nav a[aria-current], #profile-nav [aria-current].heading-anchor {
  color: #111;
  text-decoration: none;
}

/*------------------------------------*\
    #Technical reports (TR)
\*------------------------------------*/
.technical-reports .wrap {
  background-color: #fff;
}
.technical-reports .hero {
  background-color: #fff;
  margin-block-end: 1.25rem;
  padding-block-end: 0;
}
.technical-reports .hero .l-box {
  background-color: #f3f3f6;
  border-radius: 0.25rem;
}
.technical-reports .hero .field {
  max-width: none;
}
.technical-reports .hero .field-hint {
  color: #111;
}
.technical-reports .checkbox-item label::before,
.technical-reports .radio-item label::before {
  background-color: #fff;
}
.technical-reports .translation-list dt:has(span.visuallyhidden, span.skip-link)::after {
  margin-inline-start: -0.25rem;
}

.tr-list .tr-list__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 0.9375rem;
  line-height: 1.5;
  border-block-end: 1px solid #bdbdbd;
  padding-block-end: 0.5rem;
  padding-block-start: 1.25rem;
}
.tr-list .tr-list__item > * + * {
  margin-top: 0.5em;
}
.tr-list .tr-list__item > * {
  max-width: 51.25rem;
}
.tr-list .tr-list__item h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}
.tr-list .tr-list__item__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.tr-list .tr-list__item__header > * + * {
  margin-top: 1em;
}
.tr-list .tr-list__item__header h3 {
  margin-block-end: 0;
  margin-block-start: 0.3125rem;
}
.tr-list .tr-list__item__header h3 + * {
  margin-block-start: 0;
  order: -1;
}

/*------------------------------------*\
    #Utilities
\*------------------------------------*/
/*------------------------------------*\
    #Alignment utilities

    1. Logical property allows text-direction to change with `ltr`
\*------------------------------------*/
.u-float-left {
  float: left;
  float: inline-start; /* 1 */
}

.u-float-right {
  float: right;
  float: inline-end; /* 1 */
}

.u-text-center {
  text-align: center;
}

.u-text-left {
  text-align: left;
  text-align: start; /* 1 */
}

.u-text-right {
  text-align: right;
  text-align: end; /* 1 */
}

.u-text-vertical-lr {
  writing-mode: vertical-lr;
}

.u-text-vertical-rl {
  writing-mode: vertical-rl;
}

.u-block-left {
  float: left;
  margin-bottom: 1em;
  margin-right: 1em;
}

.u-block-right {
  float: right;
  margin-bottom: 1em;
  margin-left: 1em;
}

/**
Change text-alignment at the "laptop" breakpoint,
as defined in /10-settings/breakpoints

1. Logical property allows text-direction to change with `ltr`
 */
@media screen and (min-width: 80em) {
  .u-text-left-from-lap {
    text-align: left;
    text-align: start; /* 1 */
  }
}

@media screen and (min-width: 80em) {
  .u-text-center-from-lap {
    text-align: center;
  }
}

@media screen and (min-width: 80em) {
  .u-text-right-from-lap {
    text-align: right;
    text-align: end; /* 1 */
  }
}

/*------------------------------------*\
    #Clearfix utility

    https://5j37drpizq.proxynodejs.usequeue.com/snippets/css/clear-fix/

    Extend the clearfix placeholder with Sass to avoid
    having it appear over and over in your markup.
\*------------------------------------*/
/*------------------------------------*\
    #Layout utilities
\*------------------------------------*/
/**
For a full-viewport-width element inside a limited width parent.
The parent must be exactly centered in the browser in order for this
to work - see https://5j37drpizq.proxynodejs.usequeue.com/full-width-containers-limited-width-parents/
 */
.u-full-width {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

/**
To horizontally center a block-level item
 */
.u-center {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/*------------------------------------*\
    #Margin utilities

    Double specificity in classname avoids use of !important
\*------------------------------------*/
.u-no-margin.u-no-margin {
  margin: 0;
}

.u-no-margin-top.u-no-margin-top {
  margin-top: 0;
}

/*------------------------------------*\
    #Color utilities

    Double specificity in classname avoids use of !important
\*------------------------------------*/
/**
 Utilities for "solid" background/border color with WCAG conforming content color
 */
.u-bg-active.u-bg-active {
  background-color: #fc7750;
  border-color: #fc7750;
  color: #111;
}

.u-bg-category.u-bg-category {
  background-color: #920ba6;
  border-color: #920ba6;
  color: #fff;
}

.u-bg-error.u-bg-error {
  background-color: #a82615;
  border-color: #a82615;
  color: #fff;
}

.u-bg-info.u-bg-info {
  background-color: #005a9c;
  border-color: #005a9c;
  color: #fff;
}

.u-bg-success.u-bg-success {
  background-color: #046704;
  border-color: #046704;
  color: #fff;
}

.u-bg-warning.u-bg-warning {
  background-color: #c28605;
  border-color: #c28605;
  color: #111;
}

/**
 Utilities for border/content color with white background color
 */
.u-color-draft.u-color-draft {
  background-color: #fff;
  border-color: #111;
  color: #111;
}

.u-color-error.u-color-error {
  background-color: #fff;
  border-color: #a82615;
  color: #a82615;
}

.u-color-info.u-color-info {
  background-color: #fff;
  border-color: #005a9c;
  color: #005a9c;
}

.u-color-success.u-color-success {
  background-color: #fff;
  border-color: #046704;
  color: #046704;
}

.u-color-warning.u-color-warning {
  background-color: #fff;
  border-color: #c28605;
  color: #111;
}