/* ---------- STYLES ENTRY POINT ---------- */

/* https://www.npmjs.com/package/postcss-normalize#css-libraries */

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

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

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 * 3. Show the overflow in Edge 18- and IE.
 */

hr {
  color: inherit; /* 1 */
  height: 0; /* 2 */
  overflow: visible; /* 3 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */

nav li::before {
  content: "\200B";
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
  -ms-overflow-style: scrollbar; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * 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 {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

table {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

/**
 * Remove the additional :invalid styles in Firefox.
 */

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * Remove the tapping delay in IE 10.
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: inline;
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */

button,
input,
select,
textarea {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

/**
 * Remove the border and padding in all browsers (opinionated).
 */

[type="color"],
[type="range"] {
  border-width: 0;
  padding: 0;
}

/**
 * Change the inconsistent appearance in IE (opinionated).
 */

/**
 * Correct the inconsistent appearance in IE (opinionated).
 */

/**
 * Use the default user interface font in all browsers (opinionated).
 */

html {
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
     "Segoe UI",
     "Roboto",
     "Ubuntu",
     "Cantarell",
     "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol",
     "Noto Color Emoji";
}

/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */

code,
pre {
  font-family:
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}

/* core */

/* ---------- SETTINGS animation ---------- */

:root {
  --animation-easing: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */

  --animation-duration-slow: 500ms;
  --animation-duration: 250ms;
  --animation-duration-fast: 125ms;
}

/* ---------- SETTINGS colors ---------- */

:root {
  /* negative */
  --color-black-h: 235;
  --color-black-s: 16%;
  --color-black-l: 16%;
  --color-black-hsl: var(--color-black-h), var(--color-black-s), var(--color-black-l);
  --color-black: hsl(var(--color-black-hsl));

  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-white-hsl: var(--color-white-h), var(--color-white-s), var(--color-white-l);
  --color-white: hsl(var(--color-white-hsl));

  /* blue */
  --color-blue-h: 214;
  --color-blue-s: 82%;
  --color-blue-l: 51%;
  --color-blue-hsl: var(--color-blue-h), var(--color-blue-s), var(--color-blue-l);
  --color-blue: hsl(var(--color-blue-hsl));

  /* grey */
  --color-grey-h: 210;

  --color-grey-300-s: 40%;
  --color-grey-300-l: 96%;
  --color-grey-300-hsl: var(--color-grey-h), var(--color-grey-300-s), var(--color-grey-300-l);
  --color-grey-300: hsl(var(--color-grey-300-hsl));

  --color-grey-500-s: 29%;
  --color-grey-500-l: 87%;
  --color-grey-500-hsl: var(--color-grey-h), var(--color-grey-500-s), var(--color-grey-500-l);
  --color-grey-500: hsl(var(--color-grey-500-hsl));

  /* gunmetal */
  --color-gunmetal-h: 235;
  --color-gunmetal-s: 16%;
  --color-gunmetal-l: 16%;
  --color-gunmetal-hsl: var(--color-gunmetal-h), var(--color-gunmetal-s), var(--color-gunmetal-l);
  --color-gunmetal: hsl(var(--color-gunmetal-hsl));

  /* navy */
  --color-navy-h: 237;
  --color-navy-s: 74%;
  --color-navy-l: 13%;
  --color-navy-hsl: var(--color-navy-h), var(--color-navy-s), var(--color-navy-l);
  --color-navy: hsl(var(--color-navy-hsl));

  /* red */
  --color-red-h: 360;
  --color-red-s: 84%;

  --color-red-300-l: 83%;
  --color-red-300-hsl: var(--color-red-h), var(--color-red-s), var(--color-red-300-l);
  --color-red-300: hsl(var(--color-red-300-hsl));

  --color-red-400-l: 67%;
  --color-red-400-hsl: var(--color-red-h), var(--color-red-s), var(--color-red-400-l);
  --color-red-400: hsl(var(--color-red-400-hsl));

  --color-red-500-l: 47%;
  --color-red-500-hsl: var(--color-red-h), var(--color-red-s), var(--color-red-500-l);
  --color-red-500: hsl(var(--color-red-500-hsl));

  --color-red-600-l: 33%;
  --color-red-600-hsl: var(--color-red-h), var(--color-red-s), var(--color-red-600-l);
  --color-red-600: hsl(var(--color-red-600-hsl));

  --color-red-700-l: 17%;
  --color-red-700-hsl: var(--color-red-h), var(--color-red-s), var(--color-red-700-l);
  --color-red-700: hsl(var(--color-red-700-hsl));

  /* royal */
  --color-royal-h: 237;
  --color-royal-s: 74%;
  --color-royal-l: 25%;
  --color-royal-hsl: var(--color-royal-h), var(--color-royal-s), var(--color-royal-l);
  --color-royal: hsl(var(--color-royal-hsl));

  /* social */
  --color-facebook-blue-h: 220;
  --color-facebook-blue-s: 46%;
  --color-facebook-blue-l: 48%;
  --color-facebook-blue-hsl: var(--color-facebook-blue-h), var(--color-facebook-blue-s), var(--color-facebook-blue-l);
  --color-facebook-blue: hsl(var(--color-facebook-blue-hsl));

  --color-twitter-blue-h: 203;
  --color-twitter-blue-s: 89%;
  --color-twitter-blue-l: 53%;
  --color-twitter-blue-hsl: var(--color-twitter-blue-h), var(--color-twitter-blue-s), var(--color-twitter-blue-l);
  --color-twitter-blue: hsl(var(--color-twitter-blue-hsl));

  --color-youtube-red-h: 360;
  --color-youtube-red-s: 100%;
  --color-youtube-red-l: 50%;
  --color-youtube-red-hsl: var(--color-youtube-red-h), var(--color-youtube-red-s), var(--color-youtube-red-l);
  --color-youtube-red: hsl(var(--color-youtube-red-hsl));

  /* ceph */
  --color-ceph-grey-h: 208;
  --color-ceph-grey-s: 11%;
  --color-ceph-grey-l: 26%;
  --color-ceph-grey-hsl: var(--color-ceph-grey-h), var(--color-ceph-grey-s), var(--color-ceph-grey-l);
  --color-ceph-grey: hsl(var(--color-ceph-grey-hsl));

  --color-ceph-grey-rev-h: 150;
  --color-ceph-grey-rev-s: 4%;
  --color-ceph-grey-rev-l: 91%;
  --color-ceph-grey-rev-hsl: var(--color-ceph-grey-rev-h), var(--color-ceph-grey-rev-s), var(--color-ceph-grey-rev-l);
  --color-ceph-grey-rev: hsl(var(--color-ceph-grey-rev-hsl));

  /* shadow */
  --shadow-black: 0 0.0625rem 0.125rem hsla(var(--color-black-hsl), 0.05), 0 0.125rem 0.25rem hsla(var(--color-black-hsl), 0.05),
    0 0.25rem 0.5rem hsla(var(--color-black-hsl), 0.05), 0 0.5rem 1rem hsla(var(--color-black-hsl), 0.05);
}

/* ---------- SETTINGS media queries ---------- */

/* 374px */

/* <700px */

/* 700px */

/* 700-1024 */

/* <1024px */

/* 1024px */

/* 1440px */

/* ---------- SETTINGS sizes ---------- */

:root {
  --size-none: none;
  --size-auto: auto;

  /* pixels */
  --size-0: 0; /* 0px */
  --size-px: 1px; /* 1px */
  --size-0_5: 2px; /* 2px */
  --size-1: 0.25rem; /* 4px */
  --size-1_5: 0.375rem; /* 6px */
  --size-2: 0.5rem; /* 8px */
  --size-3: 0.75rem; /* 12px */
  --size-4: 1rem; /* 16px */
  --size-5: 1.25rem; /* 20px */
  --size-6: 1.5rem; /* 24px */
  --size-7: 1.75rem; /* 28px */
  --size-8: 2rem; /* 32px */
  --size-9: 2.25rem; /* 36px */
  --size-10: 2.5rem; /* 40px */
  --size-11: 2.75rem; /* 44px */
  --size-12: 3rem; /* 48px */
  --size-14: 3.5rem; /* 56px */
  --size-16: 4rem; /* 64px */
  --size-18: 4.5rem; /* 72px */
  --size-20: 5rem; /* 80px */
  --size-24: 6rem; /* 96px */
  --size-28: 7rem; /* 112px */
  --size-32: 8rem; /* 128px */
  --size-36: 9rem; /* 144px */
  --size-40: 10rem; /* 160px */
  --size-48: 12rem; /* 192px */
  --size-56: 14rem; /* 224px */
  --size-64: 16rem; /* 256px */
  --size-72: 18rem; /* 288px */
  --size-80: 20rem; /* 320px */
  --size-96: 24rem; /* 384px */
  --size-112: 28rem; /* 448px */
  --size-128: 32rem; /* 512px */
  --size-144: 36rem; /* 576px */
  --size-160: 40rem; /* 640px */
  --size-192: 48rem; /* 768px */
  --size-224: 56rem; /* 896px */
  --size-256: 64rem; /* 1024px */
  --size-288: 72rem; /* 1152px */
  --size-360: 90rem; /* 1440px */

  /* fractions */
  --size-1-12: 8.333%;
  --size-1-6: 16.666%;
  --size-1-5: 20%;
  --size-1-4: 25%;
  --size-1-3: 33.333334%;
  --size-5-12: 41.666%;
  --size-1-2: 50%;
  --size-7-12: 58.333%;
  --size-2-3: 66.666667%;
  --size-3-4: 75%;
  --size-5-6: 83.33333333%;
  --size-11-12: 91.66666667%;
  --size-full: 100%;

  /* screen */
  --size-h-screen: 100vh;
  --size-w-screen: 100vw;

  /* site header magic number */
  --size-header-height: 5.25rem; /* 84px */
  --size-scroll-offset: calc(var(--size-header-height) + var(--size-4));
}

/* ---------- SETTINGS typography ---------- */

:root {
  /* families */
  --font-family-fallback: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-brand: "Inter", var(--font-family-fallback);

  /* leading */
  --font-leading-none: 1;
  --font-leading-tighter: 1.25;
  --font-leading-tight: 1.375;
  --font-leading-normal: 1.5;

  /* sizes */
  --font-size-xs: 0.75rem; /* 12/16 */
  --font-size-sm: 0.875rem; /* 14/16 */
  --font-size-md: 1rem; /* 16/16 */
  --font-size-lg: 1.125rem; /* 18/16 */
  --font-size-xl: 1.25rem; /* 20/16 */
  --font-size-2xl: 1.5rem; /* 24/16 */
  --font-size-3xl: 1.75rem; /* 28/16 */
  --font-size-4xl: 2rem; /* 32/16 */
  --font-size-5xl: 2.25rem; /* 36/16 */
  --font-size-6xl: 2.625rem; /* 42/16 */
  --font-size-7xl: 3rem; /* 48/16 */
  --font-size-8xl: 3.375rem; /* 54/16 */
  --font-size-9xl: 3.75rem; /* 60/16 */
  --font-size-10xl: 4.25rem; /* 68/16 */
  --font-size-11xl: 4.75rem; /* 76/16 */
  --font-size-12xl: 5.25rem; /* 84/16 */
  --font-size-13xl: 5.75rem; /* 92/16 */

  /* tracking */
  --font-tracking-tighter: -0.05em;
  --font-tracking-tight: -0.025em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.025em;
  --font-tracking-wider: 0.05em;
  --font-tracking-widest: 0.1em;

  /* weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
}

/* ---------- BASE codeblock ---------- */

.richtext blockquote {
  border-left: 2px solid hsl(210, 29%, 87%);
  border-left: var(--size-0_5) solid var(--color-grey-500);
  font-size: 1rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 1.5rem 0;
  margin: var(--size-6) 0;
  padding: 1rem 1.5rem;
  padding: var(--size-4) var(--size-6);
}

/* ---------- BASE codeblock ---------- */

/* code */

.richtext code {
  background-color: hsl(210, 40%, 96%);
  background-color: var(--color-grey-300);
  border: 1px solid hsl(210, 29%, 87%);
  border: var(--size-px) solid var(--color-grey-500);
  border-radius: 0.25rem;
  border-radius: var(--size-1);
  font-size: inherit;
  line-height: inherit;
  padding: 2px;
  padding: var(--size-0_5);
}

/* pre */

.richtext pre {
  background-color: hsl(210, 40%, 96%);
  background-color: var(--color-grey-300);
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 1.5rem 0;
  margin: var(--size-6) 0;
  overflow-x: auto;
  padding: 1.5rem;
  padding: var(--size-6);
}

.richtext pre code {
  background: none;
  border: 0;
  padding: 0;
}

/* ---------- BASE document ---------- */

html {
  line-height: 1;
  line-height: var(--font-leading-none);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

html.no-scroll {
  overflow: hidden;
}

body {
  background-color: hsl(0, 0%, 100%);
  background-color: var(--color-white);
  color: hsl(235, 16%, 16%);
  color: var(--color-gunmetal);
  display: grid;
  font-family: "Inter", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-family-brand);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: var(--size-h-screen);
  line-height: 1;
  line-height: var(--font-leading-none);
  overflow-x: hidden;
}

a,
button,
input,
select,
textarea {
  font-family: inherit;
}

/* 
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility_concerns
This is implemented by sanitize but it omits the position absolute. 
Firefox needs the position absolute otherwise it adds whitespace.
*/

nav li::before {
  position: absolute;
}

img {
  max-width: 100%;
}

/* ---------- BASE focus ---------- */

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.js-focus-visible .focus-visible {
  outline: 2px solid hsl(214, 82%, 51%);
  outline: var(--size-0_5) solid var(--color-blue);
  outline-offset: 0.25rem;
  outline-offset: var(--size-1);
}

/* should probably consider moving the declarations below to their relevant CSS files */

.js-focus-visible .button.focus-visible,
.js-focus-visible .input.focus-visible,
.js-focus-visible .select.focus-visible,
.js-focus-visible .link-cover--shadow.focus-visible::before {
  outline-offset: 0;
  outline-offset: var(--size-0);
}

.js-focus-visible .nav-secondary .focus-visible,
.js-focus-visible .sub-menu .focus-visible,
.js-focus-visible .matrix .link-cover.focus-visible::before {
  outline-offset: calc(-1 * 2px);
  outline-offset: calc(-1 * var(--size-0_5));
}

.js-focus-visible .link-cover.focus-visible {
  outline: none;
}

.js-focus-visible .link-cover.focus-visible::before {
  outline: 2px solid hsl(214, 82%, 51%);
  outline: var(--size-0_5) solid var(--color-blue);
  outline-offset: 0.25rem;
  outline-offset: var(--size-1);
}

.js-focus-visible .link-anchor.focus-visible {
  opacity: 1;
}

/* ---------- BASE forms ---------- */

/* input-search */

.input[type="search"] {
  border: 1px solid hsl(235, 16%, 16%);
  border: var(--size-px) solid var(--color-gunmetal);
  border-radius: 0.25rem;
  border-radius: var(--size-1);
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  padding: 0.5rem 6rem 0.5rem 0.75rem;
  padding: var(--size-2) var(--size-24) var(--size-2) var(--size-3);
  -webkit-transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: background-color var(--animation-duration) var(--animation-easing);
  transition: background-color var(--animation-duration) var(--animation-easing);
}

.input[type="search"]:hover {
  background: hsl(210, 40%, 96%);
  background: var(--color-grey-300);
}

.input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.input[type="reset"] {
  border: 0;
  cursor: pointer;
  line-height: 1.5rem;
  line-height: var(--size-6);
  padding: 0.5rem;
  padding: var(--size-2);
  position: absolute;
  right: 3.5rem;
  right: var(--size-14);
  top: 0;
}

.input[type="reset"] svg g {
  -webkit-transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: stroke var(--animation-duration) var(--animation-easing);
  transition: stroke var(--animation-duration) var(--animation-easing);
}

.input[type="reset"]:hover svg g {
  stroke: hsl(360, 84%, 47%);
  stroke: var(--color-red-500);
}

.input[type="search"]:not(:valid) ~ .input[type="reset"] {
  display: none;
}

.input[type="submit"] {
  border: 0;
  cursor: pointer;
  line-height: 1.5rem;
  line-height: var(--size-6);
  padding: 0.5rem 1rem;
  padding: var(--size-2) var(--size-4);
  position: absolute;
  right: 0;
  top: 0;
}

.input[type="submit"] svg {
  -webkit-transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: fill var(--animation-duration) var(--animation-easing);
  transition: fill var(--animation-duration) var(--animation-easing);
}

.input[type="submit"]:hover svg {
  fill: hsl(360, 84%, 47%);
  fill: var(--color-red-500);
}

.input[type="submit"]::before {
  background: hsl(210, 29%, 87%);
  background: var(--color-grey-500);
  content: "";
  height: 60%;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  width: var(--size-px);
}

/* select */

.select:not([multiple]):not([size]) {
  background: transparent
    url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%0A%20%20%3Ctitle%3EChevron%20down%3C/title%3E%0A%20%20%3Cpath%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%230A0C38%22%20stroke-width%3D%222%22%20d%3D%22M7%2010l5%205%205-5%22/%3E%0A%3C/svg%3E")
    no-repeat calc(100% - 0.5rem) center;
  background: transparent
    url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%0A%20%20%3Ctitle%3EChevron%20down%3C/title%3E%0A%20%20%3Cpath%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%230A0C38%22%20stroke-width%3D%222%22%20d%3D%22M7%2010l5%205%205-5%22/%3E%0A%3C/svg%3E")
    no-repeat calc(100% - var(--size-2)) center;
  border: 1px solid hsl(235, 16%, 16%);
  border: var(--size-px) solid var(--color-gunmetal);
  border-radius: 0.25rem;
  border-radius: var(--size-1);
  cursor: pointer;
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  padding: var(--size-2) var(--size-10) var(--size-2) var(--size-3);
  -webkit-transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: background-color var(--animation-duration) var(--animation-easing);
  transition: background-color var(--animation-duration) var(--animation-easing);
}

.select:not([multiple]):not([size]):hover {
  background-color: hsl(210, 40%, 96%);
  background-color: var(--color-grey-300);
}

/* ---------- BASE media ---------- */

/* image */

.richtext img {
  --richtext-img-gutters-y: var(--size-6);
  display: block;
  margin: var(--richtext-img-gutters-y) auto
}

@media (min-width: 64em) {

.richtext img {
    --richtext-img-gutters-y: var(--size-10)
}
  }

@media (min-width: 90em) {

.richtext img {
    --richtext-img-gutters-y: var(--size-14)
}
  }

.richtext img:not([height]) {
  height: auto;
}

.richtext img:not([width]) {
  width: auto;
}

/*
We've removed this for now as the assumption that all 
richtext imgs will go full width is a potential can of worms.

It can always be re-instated if we need it.
*/

/* @media (--mq-to-lg) {
  .richtext img {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: var(--size-w-screen);
    position: relative;
    right: 50%;
    width: var(--size-w-screen);
  }
} */

/* ---------- BASE table ---------- */

.table {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  width: 100%;
  width: var(--size-full);
}

.table td {
  border-bottom: 1px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-px) solid var(--color-grey-500);
  padding: 1rem 0;
  padding: var(--size-4) 0;
  vertical-align: top;
}

/* richtext */

.richtext table {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 1.5rem 0;
  margin: var(--size-6) 0;
  width: 100%;
  width: var(--size-full);
}

.richtext table th {
  border-bottom: 2px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-0_5) solid var(--color-grey-500);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  padding: 0 0 1rem;
  padding: 0 0 var(--size-4);
  text-align: left;
  vertical-align: top;
}

.richtext table td {
  border-bottom: 1px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-px) solid var(--color-grey-500);
  padding: 1rem 0;
  padding: var(--size-4) 0;
  vertical-align: top;
}

/* ---------- BASE typography ---------- */

/* headings */

.h1,.h2,.h3,.h4,.h5,.h6,
.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6 {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}

.h1[id],.h2[id],.h3[id],.h4[id],.h5[id],.h6[id],
.richtext h1[id],
.richtext h2[id],
.richtext h3[id],
.richtext h4[id],
.richtext h5[id],
.richtext h6[id] {
  scroll-margin-top: calc(5.25rem + 1rem);
  scroll-margin-top: var(--size-scroll-offset);
}

.h1,
.richtext h1 {
  font-size: 2rem;
  font-size: var(--font-size-4xl);
  line-height: 2.5rem;
  line-height: var(--size-10);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4)
}

@media (min-width: 64em) {

.h1,
.richtext h1 {
    font-size: 2.625rem;
    font-size: var(--font-size-6xl);
    line-height: 3.5rem;
    line-height: var(--size-14);
    margin-bottom: 1.5rem;
    margin-bottom: var(--size-6)
}
  }

@media (min-width: 90em) {

.h1,
.richtext h1 {
    font-size: 3.375rem;
    font-size: var(--font-size-8xl);
    line-height: 4rem;
    line-height: var(--size-16);
    margin-bottom: 2rem;
    margin-bottom: var(--size-8)
}
  }

.h2,
.richtext h2 {
  font-size: 1.5rem;
  font-size: var(--font-size-2xl);
  line-height: 2rem;
  line-height: var(--size-8);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4)
}

@media (min-width: 64em) {

.h2,
.richtext h2 {
    font-size: 2rem;
    font-size: var(--font-size-4xl);
    line-height: 2.5rem;
    line-height: var(--size-10);
    margin-bottom: 1.25rem;
    margin-bottom: var(--size-5)
}
  }

@media (min-width: 90em) {

.h2,
.richtext h2 {
    font-size: 2.25rem;
    font-size: var(--font-size-5xl);
    line-height: 2.75rem;
    line-height: var(--size-11);
    margin-bottom: 1.5rem;
    margin-bottom: var(--size-6)
}
  }

.richtext p + h2,
.richtext ul + h2,
.richtext ol + h2 {
  margin-top: 1.5rem;
  margin-top: var(--size-6)
}

@media (min-width: 64em) {

.richtext p + h2,
.richtext ul + h2,
.richtext ol + h2 {
    margin-top: 2rem;
    margin-top: var(--size-8)
}
  }

@media (min-width: 90em) {

.richtext p + h2,
.richtext ul + h2,
.richtext ol + h2 {
    margin-top: 2.5rem;
    margin-top: var(--size-10)
}
  }

.h3,
.richtext h3 {
  font-size: 1.25rem;
  font-size: var(--font-size-xl);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4)
}

@media (min-width: 90em) {

.h3,
.richtext h3 {
    font-size: 1.5rem;
    font-size: var(--font-size-2xl);
    line-height: 2rem;
    line-height: var(--size-8)
}
  }

.h4,
.richtext h4 {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4)
}

@media (min-width: 64em) {

.h4,
.richtext h4 {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    line-height: 1.5rem;
    line-height: var(--size-6)
}
  }

.h5,
.richtext h5 {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4)
}

@media (min-width: 90em) {

.h5,
.richtext h5 {
    font-size: 1.125rem;
    font-size: var(--font-size-lg);
    line-height: 1.5rem;
    line-height: var(--size-6)
}
  }

.h6,
.richtext h6 {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

.richtext p + h3,
.richtext ul + h3,
.richtext ol + h3,
.richtext p + h4,
.richtext ul + h4,
.richtext ol + h4,
.richtext p + h5,
.richtext ul + h5,
.richtext ol + h5,
.richtext p + h6,
.richtext ul + h6,
.richtext ol + h6 {
  margin-top: 1.5rem;
  margin-top: var(--size-6);
}

/* paragraph */

.p,
.richtext p {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

.richtext p:last-child,
.richtext li p {
  margin-bottom: 0;
}

.p-sm {
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

/* link */

.a,
.richtext a {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  font-size: 1rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5rem;
  line-height: var(--size-6);
  text-decoration: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.heading-link,
.heading-link:visited {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.heading-link:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

.heading-link:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.a:hover,
.richtext a:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

.a:active,
.richtext a:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.richtext .link-anchor {
  display: none;
  font: inherit;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: opacity var(--animation-duration) var(--animation-easing);
  transition: opacity var(--animation-duration) var(--animation-easing);
}

.richtext *:hover > .link-anchor,
.richtext *:focus > .link-anchor {
  opacity: 1;
}

.blog-post .richtext .link-anchor {
  display: inline-block;
}

/* lists */

.ul,.ol,
.richtext ul,
.richtext ol {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

.ul li,.ol li,
.richtext ul li,
.richtext ol li {
  margin: 0 0 0.25rem;
  margin: 0 0 var(--size-1);
}

.ul li::marker,.ol li::marker,
.richtext ul li::marker,
.richtext ol li::marker {
  color: hsl(237, 74%, 13%);
  color: var(--color-navy);
}

.ol li::marker,
.richtext ol li::marker {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}

.ul li > .ul,.ul li > .ol,.ol li > .ul,.ol li > .ol,
.richtext ul li > ul,
.richtext ul li > ol,
.richtext ol li > ul,
.richtext ol li > ol {
  margin: 0.25rem 0 0;
  margin: var(--size-1) 0 0;
}

.ol li > .ol,
.richtext ol li > ol {
  list-style-type: lower-alpha;
}

.ol li > .ol li > .ol,
.richtext ol li > ol li > ol {
  list-style-type: lower-roman;
}

/* custom */

.standout,
.excerpt {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 0 0 1.5rem;
  margin: 0 0 var(--size-6);
}

@media (min-width: 90em) {

.standout {
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    line-height: 1.75rem;
    line-height: var(--size-7)
}
  }

.intro-para > p:first-child {
  font-size: 1.125rem;
  font-size: var(--font-size-lg);
  line-height: 1.5rem;
  line-height: var(--size-6);
}

.intro-para > p:first-child {
  margin: 0 0 1.5rem;
  margin: 0 0 var(--size-6)
}

@media (min-width: 64em) {

.intro-para > p:first-child {
    margin: 0 0 2rem;
    margin: 0 0 var(--size-8)
}
  }

/* objects */

/* ---------- OBJECT aspect ratio ---------- */

.aspect-ratio {
  height: 0;
  position: relative;
}

.aspect-ratio--16x9 {
  padding-top: 56.25%;
}

.aspect-ratio--1x1 {
  padding-top: 100%;
}

.richtext .aspect-ratio {
  --richtext-img-gutters-y: var(--size-6);
  margin: var(--richtext-img-gutters-y) 0
}

@media (min-width: 64em) {

.richtext .aspect-ratio {
    --richtext-img-gutters-y: var(--size-10)
}
  }

@media (min-width: 90em) {

.richtext .aspect-ratio {
    --richtext-img-gutters-y: var(--size-14)
}
  }

.aspect-ratio iframe {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.aspect-ratio--cover img {
  -o-object-fit: cover;
     object-fit: cover;
}

/* ---------- OBJECT flex ---------- */

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex--align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex--justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex--justify-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex--gap-4 {
  --flex-gap: var(--size-4);
  margin-left: calc(-1 * var(--flex-gap));
  margin-top: calc(-1 * var(--flex-gap));
}

.flex--gap-4 > * {
  margin-left: var(--flex-gap);
  margin-top: var(--flex-gap);
}

.flex--gap-6 {
  --flex-gap: var(--size-6);
  margin-left: calc(-1 * var(--flex-gap));
  margin-top: calc(-1 * var(--flex-gap));
}

.flex--gap-6 > * {
  margin-left: var(--flex-gap);
  margin-top: var(--flex-gap);
}

.flex--gap-8 {
  --flex-gap: var(--size-8);
  margin-left: calc(-1 * var(--flex-gap));
  margin-top: calc(-1 * var(--flex-gap));
}

.flex--gap-8 > * {
  margin-left: var(--flex-gap);
  margin-top: var(--flex-gap);
}

.flex--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex--pipe > * {
  position: relative;
}

.flex--pipe > *:not(:last-child)::before {
  background: hsl(210, 29%, 87%);
  background: var(--color-grey-500);
  content: "";
  height: 100%;
  height: var(--size-full);
  position: absolute;
  right: calc(-1 * var(--flex-gap) / 2);
  top: 0;
  width: 1px;
  width: var(--size-px);
}

@media (min-width: 64em) {
  .lg\:flex--gap-6 {
    --flex-gap: var(--size-6);
    margin-left: calc(-1 * var(--flex-gap));
    margin-top: calc(-1 * var(--flex-gap));
  }

  .lg\:flex--gap-6 > * {
    margin-left: var(--flex-gap);
    margin-top: var(--flex-gap);
  }
}

/* ---------- OBJECT grid ---------- */

.grid {
  --grid-gap: var(--size-4);
  display: grid;
  grid-gap: var(--grid-gap);
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr)
}

@media (min-width: 23.375em) {

.grid {
    --grid-gap: var(--size-7)
}
  }

@media (min-width: 90em) {

.grid {
    --grid-gap: var(--size-14)
}
  }

/* grid alignment */

.grid--align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* gap */

.grid--gap-0 {
  --grid-gap: var(--size-0);
}

.grid--gap-7 {
  --grid-gap: var(--size-7);
}

.grid--gap-8 {
  --grid-gap: var(--size-8);
}

.grid--gap-14 {
  --grid-gap: var(--size-14);
}

/* columns */

.grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* column alignment */

@media (min-width: 23.375em) {

  .sm\:grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 43.749em) {
  .to-md\:grid--gap-14 {
    --grid-gap: var(--size-14);
  }
}

@media (min-width: 43.75em) {
  .md\:grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid--cols-56-auto {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-columns: var(--size-56) minmax(0, 1fr);
  }
}

@media (min-width: 43.75em) and (max-width: 63.999em) {
  .md-to-lg\:grid--gap-7 {
    --grid-gap: var(--size-7);
  }

  .md-to-lg\:grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 63.999em) {
  .to-lg\:grid--gap-0 {
    --grid-gap: var(--size-0);
  }
}

@media (min-width: 64em) {

  .lg\:grid--gap-0 {
    --grid-gap: var(--size-0);
  }

  .lg\:grid--gap-16 {
    --grid-gap: var(--size-16);
  }

  .lg\:grid--gap-28 {
    --grid-gap: var(--size-28);
  }

  .lg\:grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid--cols-72-auto {
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-columns: var(--size-72) minmax(0, 1fr);
  }

  .lg\:grid--cols-auto-72 {
    grid-template-columns: minmax(0, 1fr) 18rem;
    grid-template-columns: minmax(0, 1fr) var(--size-72);
  }

  .lg\:grid--cols-auto-160 {
    grid-template-columns: minmax(0, 1fr) 40rem;
    grid-template-columns: minmax(0, 1fr) var(--size-160);
  }
}

@media (min-width: 90em) {
  .xl\:grid--gap-20 {
    --grid-gap: var(--size-20);
  }

  .xl\:grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- OBJECT section ---------- */

.section {
  --section-gutters-y: var(--size-10);
  padding-bottom: var(--section-gutters-y);
  padding-top: var(--section-gutters-y)
}

@media (min-width: 23.375em) {

.section {
    --section-gutters-y: var(--size-14)
}
  }

@media (min-width: 43.75em) {

.section {
    --section-gutters-y: var(--size-16)
}
  }

@media (min-width: 64em) {

.section {
    --section-gutters-y: var(--size-20)
}
  }

@media (min-width: 90em) {

.section {
    --section-gutters-y: var(--size-32)
}
  }

.section--full {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
  width: var(--size-w-screen);
  z-index: 0;
}

/* ---------- OBJECT wrapper ---------- */

.wrapper {
  --wrapper-gutters: var(--size-3);
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
  max-width: var(--size-360);
  padding-left: var(--wrapper-gutters);
  padding-right: var(--wrapper-gutters);
  width: 100%;
  width: var(--size-full);
}

@media (min-width: 23.375em) {
  .wrapper {
    --wrapper-gutters: var(--size-5);
  }
}

@media (min-width: 43.75em) {
  .wrapper {
    --wrapper-gutters: var(--size-7);
  }
}

@media (min-width: 64em) {
  .wrapper {
    --wrapper-gutters: var(--size-9);
  }
}

/* components */

/* ---------- COMPONENT agenda ---------- */

.agenda {
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  line-height: var(--size-5);
  width: 100%;
  width: var(--size-full);
}

.agenda__intermission {
  color: hsla(235, 16%, 16%, 0.4);
  color: hsla(var(--color-gunmetal-hsl), 0.4);
}

.agenda td {
  border-bottom: 1px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-px) solid var(--color-grey-500);
  padding: 1rem 0;
  padding: var(--size-4) 0;
}

.agenda td:first-child {
  width: 5rem;
  width: var(--size-20);
}

/* ---------- COMPONENT button ---------- */

.button,
.richtext .button {
  background: hsl(360, 84%, 47%);
  background: var(--color-red-500);
  border-radius: 0.25rem;
  border-radius: var(--size-1);
  color: hsl(0, 0%, 100%);
  color: var(--color-white);
  display: inline-block;
  font-size: 1rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5rem;
  line-height: var(--size-6);
  padding: 1rem 2rem;
  padding: var(--size-4) var(--size-8);
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: background-color var(--animation-duration) var(--animation-easing);
  transition: background-color var(--animation-duration) var(--animation-easing);
}

.button--pill,
.richtext .button--pill {
  padding: 0.5rem 1rem;
  padding: var(--size-2) var(--size-4);
}

.button:not([disabled]):hover {
  background: hsl(360, 84%, 33%);
  background: var(--color-red-600);
}

.button:not([disabled]):active {
  background: hsl(360, 84%, 17%);
  background: var(--color-red-700);
  outline: none;
}

.richtext .button:not([disabled]):hover,
.richtext .button:not([disabled]):active {
  color: hsl(0, 0%, 100%);
  color: var(--color-white);
  text-decoration: none;
}

.button[disabled],
.button[aria-disabled] {
  cursor: not-allowed;
  opacity: 0.25;
  pointer-events: none;
}

/* ---------- COMPONENT details ---------- */

.details,
.richtext details {
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
  padding-left: 1.5rem;
  padding-left: var(--size-6);
}

.details > summary,
.richtext details > summary {
  cursor: pointer;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  list-style: none;
  margin: 0 0 1rem calc(-1 * 1.5rem);
  margin: 0 0 var(--size-4) calc(-1 * var(--size-6));
  padding-left: 1.5rem;
  padding-left: var(--size-6);
  position: relative;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.details > summary:hover,
.richtext details > summary:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

/* 
I'm not a fan of the image duplication just to swap out a color.
A future enhancement could be sweeping the details component into a macro and inlining the SVG.
*/

.details > summary:hover::before,
.richtext details > summary:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Ctitle%3EChevron down%3C/title%3E%3Cpath fill='none' fill-rule='evenodd' stroke='%23eb1414' stroke-width='2' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

.details > summary:active,
.richtext details > summary:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.details > summary:active::before,
.richtext details > summary:active::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Ctitle%3EChevron down%3C/title%3E%3Cpath fill='none' fill-rule='evenodd' stroke='%239b0d0d' stroke-width='2' d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
}

.details > summary::-webkit-details-marker,
.richtext details > summary::-webkit-details-marker {
  display: none;
}

.details > summary::before,
.richtext details > summary::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Ctitle%3EChevron down%3C/title%3E%3Cpath fill='none' fill-rule='evenodd' stroke='%230A0C38' stroke-width='2' d='M7 10l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat center;
  background-size: contain;
  content: "";
  height: 1.5rem;
  height: var(--size-6);
  left: calc(-1 * 0.25rem);
  left: calc(-1 * var(--size-1));
  position: absolute;
  top: 0;
  width: 1.5rem;
  width: var(--size-6);
}

.details[open] > summary::before,
.richtext details[open] > summary::before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* ---------- COMPONENT hr ---------- */

.hr,
.richtext hr {
  background: hsl(210, 29%, 87%);
  background: var(--color-grey-500);
  border: 0;
  height: 1px;
  height: var(--size-px);
  margin: 2rem 0;
  margin: var(--size-8) 0;
}

/* ---------- COMPONENT link cover ---------- */

.link-cover {
  text-decoration: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.link-cover:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

.link-cover:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.link-cover::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.link-cover--shadow:hover::before {
  -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
          box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
  -webkit-box-shadow: var(--shadow-black);
          box-shadow: var(--shadow-black);
}

.link-cover--shadow::before {
  border-radius: 0.5rem;
  border-radius: var(--size-2); /* not sure about declaring this as it's possible this won't always be used with a rounded utility */
  -webkit-transition: -webkit-box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: -webkit-box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: -webkit-box-shadow var(--animation-duration) var(--animation-easing);
  transition: -webkit-box-shadow var(--animation-duration) var(--animation-easing);
  transition: box-shadow var(--animation-duration) var(--animation-easing);
  transition: box-shadow var(--animation-duration) var(--animation-easing), -webkit-box-shadow var(--animation-duration) var(--animation-easing);
}

/* ---------- COMPONENT language selector ---------- */

.language-selector {
  --language-selector-gap-x: var(--size-6);
  --language-selector-gutters-x: var(--size-3);
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6)
}

@media (min-width: 23.375em) {

.language-selector {
    --language-selector-gutters-x: var(--size-5)
}
  }

@media (min-width: 43.75em) {

.language-selector {
    --language-selector-gutters-x: var(--size-7)
}
  }

@media (min-width: 90em) {

.language-selector {
    --language-selector-gap-x: var(--size-8)
}
  }

.language-selector__toggle {
  color: hsl(235, 16%, 16%);
  color: var(--color-gunmetal);
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  list-style: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.language-selector__toggle::-webkit-details-marker {
  display: none;
}

.language-selector__toggle:hover {
  text-decoration: underline;
}

.language-selector[open] .language-selector__toggle {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
}

.language-selector__icon-globe {
  height: 1rem;
  height: var(--size-4);
  margin-right: 0.25rem;
  margin-right: var(--size-1);
  position: relative;
  top: calc(-1 * 2px);
  top: calc(-1 * var(--size-0_5));
  width: 1rem;
  width: var(--size-4);
}

.language-selector__icon-globe path {
  -webkit-transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: fill var(--animation-duration) var(--animation-easing);
  transition: fill var(--animation-duration) var(--animation-easing);
}

.language-selector[open] .language-selector__icon-globe path {
  fill: hsl(360, 84%, 47%);
  fill: var(--color-red-500);
}

.language-selector__icon-chevron {
  height: 1.5rem;
  height: var(--size-6);
  margin-left: 0.5rem;
  margin-left: var(--size-2);
  position: relative;
  top: calc(-1 * 1px);
  top: calc(-1 * var(--size-px));
  width: 1.5rem;
  width: var(--size-6);
}

.language-selector__icon-chevron path {
  -webkit-transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: stroke var(--animation-duration) var(--animation-easing);
  transition: stroke var(--animation-duration) var(--animation-easing);
}

.language-selector[open] .language-selector__icon-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.language-selector[open] .language-selector__icon-chevron path {
  stroke: hsl(360, 84%, 47%);
  stroke: var(--color-red-500);
}

.language-selector__content,
.language-selector__content > li:last-child {
  margin-bottom: 0;
}

.language-selector__content > li {
  margin-bottom: 1rem;
  margin-bottom: var(--size-4);
}

.language-selector__content a {
  color: hsl(235, 16%, 16%);
  color: var(--color-gunmetal);
  display: inline-block;
  text-decoration: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.language-selector__content a:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

.language-selector__content a:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.language-selector__content [aria-current] {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
}

@media (max-width: 63.999em) {
  .language-selector {
    border-top: 1px solid hsl(210, 29%, 87%);
    border-top: var(--size-px) solid var(--color-grey-500);
    padding: 1rem var(--language-selector-gutters-x);
    padding: var(--size-4) var(--language-selector-gutters-x);
    -webkit-transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: background-color var(--animation-duration-fast) var(--animation-easing);
    transition: background-color var(--animation-duration-fast) var(--animation-easing);
  }

  .language-selector[open] {
    background: hsl(210, 40%, 96%);
    background: var(--color-grey-300);
  }

  .language-selector__content {
    margin-top: 1rem;
    margin-top: var(--size-4);
  }
}

@media (min-width: 64em) {
  .language-selector {
    margin-left: var(--language-selector-gap-x);
    position: relative;
  }

  .home .language-selector__toggle {
    color: hsl(210, 29%, 87%);
    color: var(--color-grey-500);
  }

  .home .site-header--stuck .language-selector__toggle {
    color: hsl(235, 16%, 16%);
    color: var(--color-gunmetal);
  }

  .home .language-selector[open] .language-selector__toggle {
    color: hsl(360, 84%, 47%);
    color: var(--color-red-500);
  }

  .home .language-selector__icon-globe path {
    fill: hsl(210, 29%, 87%);
    fill: var(--color-grey-500);
  }

  .home .site-header--stuck .language-selector__icon-globe path {
    fill: hsl(235, 16%, 16%);
    fill: var(--color-gunmetal);
  }

  .home .language-selector[open] .language-selector__icon-globe path {
    fill: hsl(360, 84%, 47%);
    fill: var(--color-red-500);
  }

  .home .language-selector__icon-chevron path {
    stroke: hsl(210, 29%, 87%);
    stroke: var(--color-grey-500);
  }

  .home .site-header--stuck .language-selector__icon-chevron path {
    stroke: hsl(235, 16%, 16%);
    stroke: var(--color-gunmetal);
  }

  .home .language-selector[open] .language-selector__icon-chevron path {
    stroke: hsl(360, 84%, 47%);
    stroke: var(--color-red-500);
  }

  .language-selector__content {
    background: hsl(210, 40%, 96%);
    background: var(--color-grey-300);
    border: 1px solid hsl(210, 29%, 87%);
    border: var(--size-px) solid var(--color-grey-500);
    border-radius: 0.25rem;
    border-radius: var(--size-1);
    -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
            box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
    -webkit-box-shadow: var(--shadow-black);
            box-shadow: var(--shadow-black);
    margin-top: 0;
    min-width: 12rem;
    min-width: var(--size-48);
    padding: 1rem;
    padding: var(--size-4);
    position: absolute;
    right: 0;
    top: 2.5rem;
    top: var(--size-10);
  }
}

/* ---------- COMPONENT matrix ---------- */

.matrix {
  --matrix-gap-x: var(--size-4);
  --matrix-gutters-x: var(--size-3);
  --matrix-item-size: var(--size-72)
}

@media (min-width: 23.375em) {

.matrix {
    --matrix-gap-x: var(--size-7);
    --matrix-gutters-x: var(--size-5);
    --matrix-item-size: var(--size-80)
}
  }

@media (min-width: 43.75em) {

.matrix {
    --matrix-gutters-x: var(--size-7);
    --matrix-item-size: var(--size-96)
}
  }

@media (min-width: 64em) {

.matrix {
    --matrix-item-size: var(--size-72)
}
  }

@media (min-width: 90em) {

.matrix {
    --matrix-item-size: var(--size-80)
}
  }

@media (max-width: 63.999em) {
  .matrix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: calc(-1 * var(--matrix-gutters-x));
    margin-right: calc(-1 * var(--matrix-gutters-x));
    overflow-x: auto;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
  }
}

/* ---------- COMPONENT nav primary ---------- */

.nav-primary {
  --nav-primary-gutters-x: var(--size-3);
  font-size: 1rem;
  font-size: var(--font-size-md);
  line-height: 1.5rem;
  line-height: var(--size-6)
}

@media (min-width: 23.375em) {

.nav-primary {
    --nav-primary-gutters-x: var(--size-5)
}
  }

@media (min-width: 43.75em) {

.nav-primary {
    --nav-primary-gutters-x: var(--size-7)
}
  }

@media (min-width: 64em) {

.nav-primary {
    --nav-primary-gap-x: var(--size-6)
}
  }

@media (min-width: 90em) {

.nav-primary {
    --nav-primary-gap-x: var(--size-8)
}
  }

.nav-primary a {
  color: hsl(235, 16%, 16%);
  color: var(--color-gunmetal);
  display: inline-block;
  text-decoration: none;
  -webkit-transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: color var(--animation-duration) var(--animation-easing);
  transition: color var(--animation-duration) var(--animation-easing);
}

.nav-primary a:hover {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
  text-decoration: underline;
}

.nav-primary a:active {
  color: hsl(360, 84%, 33%);
  color: var(--color-red-600);
  text-decoration: underline;
}

.nav-primary [aria-current="page"] {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
}

/* ---------- media queries ---------- */

@media (max-width: 63.999em) {
  .nav-primary {
    margin: 0 0 1rem;
    margin: 0 0 var(--size-4);
    padding: 0 var(--nav-primary-gutters-x);
  }

  .nav-primary > li {
    margin-bottom: 1rem;
    margin-bottom: var(--size-4);
  }
}

@media (min-width: 64em) {
  .nav-primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin: 0;
    margin-left: calc(-1 * var(--nav-primary-gap-x));
  }

  .nav-primary > li {
    margin-left: var(--nav-primary-gap-x);
  }

  .home .nav-primary a {
    color: hsl(210, 29%, 87%);
    color: var(--color-grey-500);
  }

  .home .nav-primary a:hover,
  .home .nav-primary a:active {
    color: hsl(0, 0%, 100%);
    color: var(--color-white);
  }

  .home .site-header--stuck .nav-primary a {
    color: hsl(235, 16%, 16%);
    color: var(--color-gunmetal);
  }

  .home .site-header--stuck .nav-primary a:hover {
    color: hsl(360, 84%, 47%);
    color: var(--color-red-500);
  }

  .home .site-header--stuck .nav-primary a:active {
    color: hsl(360, 84%, 33%);
    color: var(--color-red-600);
  }
}

/* ---------- COMPONENT nav secondary ---------- */

.nav-secondary {
  --nav-secondary-sub-gap-x: var(--size-4);
  --nav-secondary-link-color: var(--color-gunmetal);
  --nav-secondary-link-hover-color: var(--color-red-500);
  --nav-secondary-link-active-color: var(--color-red-600);
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 1.5rem 0 0;
  margin: var(--size-6) 0 0
}

@media (min-width: 90em) {

.nav-secondary {
    --nav-secondary-sub-gap-x: var(--size-6)
}
  }

.nav-secondary a {
  color: var(--nav-secondary-link-color);
  display: inline-block;
  text-decoration: none;
  -webkit-transition: color cubic-bezier(0.215, 0.61, 0.355, 1) 250ms;
  transition: color cubic-bezier(0.215, 0.61, 0.355, 1) 250ms;
  -webkit-transition: color var(--animation-easing) var(--animation-duration);
  transition: color var(--animation-easing) var(--animation-duration);
}

.nav-secondary a:hover {
  color: var(--nav-secondary-link-hover-color);
  text-decoration: underline;
}

.nav-secondary a:active {
  color: var(--nav-secondary-link-active-color);
  text-decoration: underline;
}

.nav-secondary [aria-current="page"] {
  color: var(--nav-secondary-link-hover-color);
}

.nav-secondary__top {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}

.nav-secondary__sub {
  margin: 0.25rem 0 0;
  margin: var(--size-1) 0 0;
}

.nav-secondary__sub > li {
  margin-bottom: 0.25rem;
  margin-bottom: var(--size-1);
}

.js .nav-secondary {
  --nav-secondary-gutters-x: var(--size-3)
}

@media (--mq-to-sm) {

.js .nav-secondary {
    --nav-secondary-gutters-x: var(--size-5)
}
  }

@media (max-width: 63.999em) {

.js .nav-secondary {
    --nav-secondary-gutters-x: var(--size-7);
    --nav-secondary-link-color: var(--color-grey-500);
    --nav-secondary-link-hover-color: var(--color-white);
    --nav-secondary-link-active-color: var(--color-white)
}
  }

@media (max-width: 63.999em) {
  .js .nav-secondary {
    margin: 0 calc(-1 * var(--nav-secondary-gutters-x));
  }

  .js .nav-secondary--overlay {
    margin-bottom: 0;
  }

  .js .nav-secondary__wrapper {
    position: relative;
    z-index: 5;
  }

  .js .nav-secondary__top {
    background: hsl(235, 16%, 16%);
    background: var(--color-gunmetal);
    padding: 0.75rem var(--nav-secondary-gutters-x);
    padding: var(--size-3) var(--nav-secondary-gutters-x);
    position: relative;
    width: 100%;
    width: var(--size-full);
  }

  .js .nav-secondary__top:hover,
  .js .nav-secondary__top:active {
    color: var(--nav-secondary-link-color);
    text-decoration: none;
  }

  .js .nav-secondary__top::before {
    background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%0A%20%20%3Ctitle%3EChevron%20Down%3C/title%3E%0A%20%20%3Cpath%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20d%3D%22M7%2010l5%205%205-5%22/%3E%0A%3C/svg%3E")
      no-repeat center;
    background-size: contain;
    content: "";
    height: 1.5rem;
    height: var(--size-6);
    right: calc(var(--nav-secondary-gutters-x) - 0.25rem);
    right: calc(var(--nav-secondary-gutters-x) - var(--size-1));
    position: absolute;
    top: calc(50% - 0.75rem);
    top: calc(50% - var(--size-3));
    width: 1.5rem;
    width: var(--size-6);
  }

  .js .nav-secondary__top[aria-expanded="true"]::before {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .js .nav-secondary__sub {
    background: hsl(235, 16%, 16%);
    background: var(--color-gunmetal);
    -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
            box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
    -webkit-box-shadow: var(--shadow-black);
            box-shadow: var(--shadow-black);
    display: none;
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 2.75rem;
    top: var(--size-11);
    width: 100%;
    width: var(--size-full);
  }

  .js .nav-secondary__top[aria-expanded="true"] + .nav-secondary__sub {
    display: block;
  }

  .js .nav-secondary__sub > li {
    margin-bottom: 0;
  }

  .js .nav-secondary__sub a {
    padding: 0.75rem var(--nav-secondary-gutters-x);
    padding: var(--size-3) var(--nav-secondary-gutters-x);
    width: 100%;
    width: var(--size-full);
  }
}

@media (min-width: 64em) {
  .nav-secondary--overlay {
    --nav-secondary-link-color: var(--color-grey-500);
    --nav-secondary-link-hover-color: var(--color-white);
    --nav-secondary-link-active-color: var(--color-white);
    position: absolute;
    z-index: 1;
  }

  .nav-secondary__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-left: calc(-1 * var(--nav-secondary-sub-gap-x));
  }

  .nav-secondary__wrapper > * {
    margin-left: var(--nav-secondary-sub-gap-x);
  }

  .nav-secondary__sub {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-top: 0;
    position: relative;
  }

  .nav-secondary__sub::before {
    background: var(--nav-secondary-link-color);
    content: "";
    height: 1.25rem;
    height: var(--size-5);
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
    width: 1px;
    width: var(--size-px);
  }

  .nav-secondary__sub > li {
    margin: 0 0 0 var(--nav-secondary-sub-gap-x);
  }
}

/* ---------- COMPONENT pagination ---------- */

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.pagination__button {
  padding: 0.5rem;
  padding: var(--size-2);
}

.pagination__button img {
  width: 1.5rem;
  width: var(--size-6);
}

.pagination__button span {
  display: none;
}

.pagination__select {
  text-transform: lowercase;
}

@media (min-width: 43.75em) {
  .pagination {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: calc(-1 * 1.75rem);
    margin-left: calc(-1 * var(--size-7));
  }

  .pagination > * {
    margin-left: 1.75rem;
    margin-left: var(--size-7);
  }

  .pagination__button {
    min-width: 9rem;
    min-width: var(--size-36);
    padding: 0.5rem 1rem;
    padding: var(--size-2) var(--size-4);
  }

  .pagination__button span {
    display: inline-block;
    position: relative;
    top: 2px;
    top: var(--size-0_5);
  }

  .pagination__button--prev {
    padding-right: 2rem;
    padding-right: var(--size-8);
  }

  .pagination__button--next {
    padding-left: 2rem;
    padding-left: var(--size-8);
  }
}

@media (min-width: 90em) {
  .pagination {
    margin-left: calc(-1 * 3.5rem);
    margin-left: calc(-1 * var(--size-14));
  }

  .pagination > * {
    margin-left: 3.5rem;
    margin-left: var(--size-14);
  }
}

/* ---------- COMPONENT site footer ---------- */

.site-footer {
  --site-footer-gutters-y: var(--size-8);
  --site-footer-support-gap-x: var(--size-6);
  --site-footer-support-gap-y: var(--size-2);
  --site-footer-social-gap-x: var(--size-4);
  background: hsl(237, 74%, 13%);
  background: var(--color-navy);
  padding-bottom: var(--site-footer-gutters-y);
  padding-top: var(--site-footer-gutters-y)
}

@media (min-width: 43.75em) {

.site-footer {
    --site-footer-gutters-y: var(--size-12)
}
  }

@media (min-width: 64em) {

.site-footer {
    --site-footer-gutters-y: var(--size-16)
}
  }

.site-footer__site {
  display: none;
  font-size: 0.875rem;
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  line-height: var(--size-5);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

.site-footer__support {
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
  line-height: 1rem;
  line-height: var(--size-4);
  margin: 0 0 1rem;
  margin: 0 0 var(--size-4);
}

.site-footer__site a,
.site-footer__support a {
  color: hsl(0, 0%, 100%);
  color: var(--color-white);
  display: inline-block;
  text-decoration: none;
}

.site-footer__site a:hover,
.site-footer__support a:hover,
.site-footer [aria-current="page"] {
  text-decoration: underline;
}

.site-footer__site > li > a {
  font-size: 1rem;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5rem;
  line-height: var(--size-6);
  margin-bottom: 1rem;
  margin-bottom: var(--size-4);
}

.site-footer__site > li,
.site-footer__site > li li {
  margin-bottom: 0.75rem;
  margin-bottom: var(--size-3);
}

.site-footer__support > li {
  margin-bottom: 0.5rem;
  margin-bottom: var(--size-2);
}

.site-footer__site > li li:last-child {
  margin-bottom: 0;
}

.site-footer__ceph {
  margin-bottom: 1rem;
  margin-bottom: var(--size-4);
  width: 4.5rem;
  width: var(--size-18);
}

.site-footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin: 0 0 0 calc(-1 * var(--site-footer-social-gap-x));
}

.site-footer__social > li {
  margin-left: var(--site-footer-social-gap-x);
}

.site-footer__social svg {
  -webkit-transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: fill var(--animation-duration) var(--animation-easing);
  transition: fill var(--animation-duration) var(--animation-easing);
}

.site-footer__facebook:hover svg {
  fill: hsl(220, 46%, 48%);
  fill: var(--color-facebook-blue);
}

.site-footer__twitter:hover svg {
  fill: hsl(203, 89%, 53%);
  fill: var(--color-twitter-blue);
}

.site-footer__youtube:hover svg {
  fill: hsl(360, 100%, 50%);
  fill: var(--color-youtube-red);
}

@media (min-width: 23.375em) {
  .site-footer__support {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: calc(-1 * var(--site-footer-support-gap-x));
    margin-top: calc(-1 * var(--site-footer-support-gap-y));
  }

  .site-footer__support > li {
    margin-bottom: 0;
    margin-left: var(--site-footer-support-gap-x);
    margin-top: var(--site-footer-support-gap-y);
  }
}

@media (min-width: 43.75em) {
  .site-footer [aria-label="support"] {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .site-footer__site {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    grid-gap: var(--size-8);
    gap: var(--size-8);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__support {
    margin-bottom: 0;
  }

  .site-footer__ceph {
    width: 7rem;
    width: var(--size-28);
  }
}

@media (min-width: 64em) {
  .site-footer__site {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- COMPONENT site header ---------- */

.scroll-offset {
  height: 5.25rem;
  height: var(--size-header-height);
  position: relative;
  top: 0;
  width: 1px;
  width: var(--size-px);
}

.site-header {
  --site-header-gutters-y: var(--size-6);
  --site-header-menu-gutters-x: var(--size-3);
  background: hsl(0, 0%, 100%);
  background: var(--color-white);
  border-bottom: 1px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-px) solid var(--color-grey-500);
  -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
          box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
  -webkit-box-shadow: var(--shadow-black);
          box-shadow: var(--shadow-black);
  padding-bottom: var(--site-header-gutters-y);
  padding-top: var(--site-header-gutters-y);
  position: fixed;
  top: 0;
  -webkit-transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1),
    border 125ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1),
    border 125ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-box-shadow 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1),
    border 125ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 125ms cubic-bezier(0.215, 0.61, 0.355, 1),
    border 125ms cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 125ms cubic-bezier(0.215, 0.61, 0.355, 1),
    -webkit-box-shadow 125ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: background-color var(--animation-duration-fast) var(--animation-easing),
    border var(--animation-duration-fast) var(--animation-easing), -webkit-box-shadow var(--animation-duration-fast) var(--animation-easing);
  transition: background-color var(--animation-duration-fast) var(--animation-easing),
    border var(--animation-duration-fast) var(--animation-easing), -webkit-box-shadow var(--animation-duration-fast) var(--animation-easing);
  transition: background-color var(--animation-duration-fast) var(--animation-easing),
    border var(--animation-duration-fast) var(--animation-easing), box-shadow var(--animation-duration-fast) var(--animation-easing);
  transition: background-color var(--animation-duration-fast) var(--animation-easing),
    border var(--animation-duration-fast) var(--animation-easing), box-shadow var(--animation-duration-fast) var(--animation-easing),
    -webkit-box-shadow var(--animation-duration-fast) var(--animation-easing);
  width: 100%;
  width: var(--size-full);
  z-index: 10
}

@media (min-width: 23.375em) {

.site-header {
    --site-header-menu-gutters-x: var(--size-5)
}
  }

@media (min-width: 43.75em) {

.site-header {
    --site-header-menu-gutters-x: var(--size-7)
}
  }

.site-header__logo {
  position: relative;
  width: 8rem;
  width: var(--size-32);
  z-index: 12;
}

.site-header__logo svg {
  height: auto;
  max-width: 100%;
  width: 100%;
}

/* home */

.home .scroll-offset {
  position: absolute;
}

.home .site-header {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.home .site-header--stuck {
  background: hsl(0, 0%, 100%);
  background: var(--color-white);
  border-bottom: 1px solid hsl(210, 29%, 87%);
  border-bottom: var(--size-px) solid var(--color-grey-500);
  -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
          box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
  -webkit-box-shadow: var(--shadow-black);
          box-shadow: var(--shadow-black);
}

.home .site-header__logo .logo-ceph__text path {
  fill: hsl(150, 4%, 91%);
  fill: var(--color-ceph-grey-rev);
  -webkit-transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: fill var(--animation-duration) var(--animation-easing);
  transition: fill var(--animation-duration) var(--animation-easing);
}

.home .site-header__menu-open svg g {
  stroke: hsl(0, 0%, 100%);
  stroke: var(--color-white);
  -webkit-transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: stroke var(--animation-duration) var(--animation-easing);
  transition: stroke var(--animation-duration) var(--animation-easing);
}

.home .site-header--stuck .site-header__logo .logo-ceph__text path,
.home .site-header--opened .site-header__logo .logo-ceph__text path {
  fill: hsl(208, 11%, 26%);
  fill: var(--color-ceph-grey);
}

.home .site-header--stuck .site-header__menu-open svg g,
.home .site-header--opened .site-header__menu-open svg g {
  stroke: hsl(235, 16%, 16%);
  stroke: var(--color-black);
}

/* media queries */

@media (max-width: 63.999em) {
  .site-header__menu {
    background: hsl(0, 0%, 100%);
    background: var(--color-white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: -webkit-transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: -webkit-transform var(--animation-duration) var(--animation-easing);
    transition: -webkit-transform var(--animation-duration) var(--animation-easing);
    transition: transform var(--animation-duration) var(--animation-easing);
    transition: transform var(--animation-duration) var(--animation-easing), -webkit-transform var(--animation-duration) var(--animation-easing);
    visibility: hidden;
    width: 100vw;
  }

  .site-header--opened .site-header__menu,
  .site-header__menu:target {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    visibility: visible;
  }

  .site-header__menu-close {
    display: block;
    margin: 1.75rem var(--site-header-menu-gutters-x) 4rem auto;
    margin: var(--size-7) var(--site-header-menu-gutters-x) var(--size-16) auto;
    width: 1.5rem;
    width: var(--size-6);
  }

  .site-header__overflow {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
    overflow-y: auto;
  }
}

@media (min-width: 64em) {
  .site-header__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .site-header__menu-open,
  .site-header__menu-close {
    display: none;
  }

  .site-header__overflow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* ---------- COMPONENT social shares ---------- */

.social-shares {
  --social-shares-gap: var(--size-2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: calc(-1 * var(--social-shares-gap));
  margin-top: calc(-1 * var(--social-shares-gap));
}

.social-shares > a {
  margin-left: var(--social-shares-gap);
  margin-top: var(--social-shares-gap);
}

.social-shares svg g {
  -webkit-transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: fill 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: fill var(--animation-duration) var(--animation-easing);
  transition: fill var(--animation-duration) var(--animation-easing);
}

.social-shares svg circle {
  -webkit-transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: stroke var(--animation-duration) var(--animation-easing);
  transition: stroke var(--animation-duration) var(--animation-easing);
}

.social-shares__facebook:hover svg g {
  fill: hsl(220, 46%, 48%);
  fill: var(--color-facebook-blue);
}

.social-shares__facebook:hover svg circle {
  stroke: hsl(220, 46%, 48%);
  stroke: var(--color-facebook-blue);
}

.social-shares__twitter:hover svg g {
  fill: hsl(203, 89%, 53%);
  fill: var(--color-twitter-blue);
}

.social-shares__twitter:hover svg circle {
  stroke: hsl(203, 89%, 53%);
  stroke: var(--color-twitter-blue);
}

/* ---------- COMPONENT sub-menu ---------- */

.sub-menu {
  display: none;
}

@media (min-width: 64em) {
  .sub-menu {
    background-attachment: local, local, scroll, scroll;
    background-color: hsl(0, 0%, 100%);
    background-color: var(--color-white);
    background-image: -webkit-gradient(linear, left top, right top, from(hsl(0, 0%, 100%)), to(hsl(0, 0%, 100%))),
      -webkit-gradient(linear, left top, right top, from(hsl(0, 0%, 100%)), to(hsl(0, 0%, 100%))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0))),
      -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 100%)),
      linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 100%)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
      linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    background-image: -webkit-gradient(linear, left top, right top, from(var(--color-white)), to(var(--color-white))),
      -webkit-gradient(linear, left top, right top, from(var(--color-white)), to(var(--color-white))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0))),
      -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to right, var(--color-white), var(--color-white)),
      linear-gradient(to right, var(--color-white), var(--color-white)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
      linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 1em 100%, 1em 100%, 0.5em 100%, 0.5em 100%;
    -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
            box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
    -webkit-box-shadow: var(--shadow-black);
            box-shadow: var(--shadow-black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1rem;
    font-size: var(--font-size-md);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5rem;
    line-height: var(--size-6);
    list-style: none;
    margin-top: calc(-1 * 2.5rem);
    margin-top: calc(-1 * var(--size-10));
    overflow-x: auto;
    padding: 0;
    padding: var(--size-0);
    position: relative;
  }

  .sub-menu > li {
    position: relative;
  }

  .sub-menu > li:nth-last-child(2):first-child,
  .sub-menu > li:nth-last-child(2):first-child ~ li {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    -ms-flex: 1 0 var(--size-1-2);
        flex: 1 0 var(--size-1-2);
  }

  .sub-menu > li:nth-last-child(3):first-child,
  .sub-menu > li:nth-last-child(3):first-child ~ li {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 33.333334%;
            flex: 1 0 33.333334%;
    -ms-flex: 1 0 var(--size-1-3);
        flex: 1 0 var(--size-1-3);
  }

  .sub-menu > li:nth-last-child(4):first-child,
  .sub-menu > li:nth-last-child(4):first-child ~ li {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 25%;
            flex: 1 0 25%;
    -ms-flex: 1 0 var(--size-1-4);
        flex: 1 0 var(--size-1-4);
  }

  .sub-menu > li:nth-last-child(5):first-child,
  .sub-menu > li:nth-last-child(5):first-child ~ li {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 20%;
            flex: 1 0 20%;
    -ms-flex: 1 0 var(--size-1-5);
        flex: 1 0 var(--size-1-5);
  }

  .sub-menu > li:not(:first-child) {
    padding-left: 1px;
    padding-left: var(--size-px);
  }

  .sub-menu > li:not(:first-child)::before {
    background: hsl(210, 29%, 87%);
    background: var(--color-grey-500);
    content: "";
    height: 66.666667%;
    height: var(--size-2-3);
    left: 0;
    position: absolute;
    top: 16.666%;
    top: var(--size-1-6);
    width: 1px;
    width: var(--size-px);
  }

  .sub-menu a {
    display: block;
    color: hsl(360, 84%, 47%);
    color: var(--color-red-500);
    height: 100%;
    height: var(--size-full);
    padding: 1rem;
    padding: var(--size-4);
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: background-color 250ms cubic-bezier(0.215, 0.61, 0.355, 1), color 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transition: background-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);
    transition: background-color var(--animation-duration) var(--animation-easing), color var(--animation-duration) var(--animation-easing);
    white-space: nowrap;
  }

  .sub-menu a:hover {
    background: hsl(210, 40%, 96%);
    background: var(--color-grey-300);
  }

  .sub-menu a:active {
    background: hsl(210, 40%, 96%);
    background: var(--color-grey-300);
    color: hsl(360, 84%, 33%);
    color: var(--color-red-600);
  }

  .sub-menu img {
    display: block;
    margin: 0 auto 1rem;
    margin: 0 auto var(--size-4);
    width: 3rem;
    width: var(--size-12);
  }
}

/* ---------- COMPONENT tint ---------- */

.tint {
  position: relative;
}

.tint::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tint--multiply::after {
  mix-blend-mode: multiply;
}

.tint--black-2::after {
  background: hsla(235, 16%, 16%, 0.2);
  background: hsla(var(--color-black-hsl), 0.2);
}

.tint--red-500-4::after {
  background: hsla(360, 84%, 47%, 0.4);
  background: hsla(var(--color-red-500-hsl), 0.4);
}

.tint--royal-4::after {
  background: hsla(237, 74%, 25%, 0.4);
  background: hsla(var(--color-royal-hsl), 0.4);
}

.tint--royal-8::after {
  background: hsla(237, 74%, 25%, 0.8);
  background: hsla(var(--color-royal-hsl), 0.8);
}

/* ---------- COMPONENT tooltip ---------- */

.tooltip {
  position: relative;
}

.tooltip__toggle {
  cursor: pointer;
  list-style: none;
}

.tooltip__toggle::-webkit-details-marker {
  display: none;
}

.tooltip[open] .tooltip__toggle::before {
  content: "";
  height: 100%;
  height: var(--size-full);
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  width: var(--size-full);
}

.tooltip__content {
  background: hsl(210, 40%, 96%);
  background: var(--color-grey-300);
  border-radius: 0.25rem;
  border-radius: var(--size-1);
  -webkit-box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
          box-shadow: 0 0.0625rem 0.125rem hsla(235, 16%, 16%, 0.05), 0 0.125rem 0.25rem hsla(235, 16%, 16%, 0.05),
    0 0.25rem 0.5rem hsla(235, 16%, 16%, 0.05), 0 0.5rem 1rem hsla(235, 16%, 16%, 0.05);
  -webkit-box-shadow: var(--shadow-black);
          box-shadow: var(--shadow-black);
  padding: 1rem;
  padding: var(--size-4);
  position: absolute;
}

.tooltip__content::before {
  background: hsl(210, 40%, 96%);
  background: var(--color-grey-300);
  content: "";
  height: 1.5rem;
  height: var(--size-6);
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 1.5rem;
  width: var(--size-6);
}

@media (min-width: 23.375em) {
  .tooltip__content {
    left: 0;
    top: 2.5rem;
    top: var(--size-10);
  }
}

@media (max-width: 63.999em) {
  .tooltip__content::before {
    left: 2.5rem;
    left: var(--size-10);
    top: calc(-1 * 0.75rem);
    top: calc(-1 * var(--size-3));
  }
}

@media (min-width: 64em) {
  .tooltip__content {
    left: 0;
    min-width: 28rem;
    min-width: var(--size-112);
    top: 50%;
    -webkit-transform: translate(calc(-100% - 1.5rem), -50%);
            transform: translate(calc(-100% - 1.5rem), -50%);
    -webkit-transform: translate(calc(-100% - var(--size-6)), -50%);
            transform: translate(calc(-100% - var(--size-6)), -50%);
  }

  .tooltip__content::before {
    right: calc(-1 * 0.75rem);
    right: calc(-1 * var(--size-3));
    top: calc(50% - 0.75rem);
    top: calc(50% - var(--size-3));
  }
}

/* utilities */

/* ---------- UTILITIES border ---------- */

.border-px {
  border-width: 1px;
  border-width: var(--size-px);
}

.border-solid {
  border-style: solid;
}

.rounded-2 {
  border-radius: 0.5rem;
  border-radius: var(--size-2);
}

.rounded-t-2 {
  border-top-left-radius: 0.5rem;
  border-top-left-radius: var(--size-2);
  border-top-right-radius: 0.5rem;
  border-top-right-radius: var(--size-2);
}

/* ---------- UTILITIES colors ---------- */

/* negative */

.bg-white {
  background-color: hsl(0, 0%, 100%);
  background-color: var(--color-white);
}

.color-white {
  color: hsl(0, 0%, 100%);
  color: var(--color-white);
}

/* navy */

.bg-navy {
  background-color: hsl(237, 74%, 13%);
  background-color: var(--color-navy);
}

.color-navy {
  color: hsl(237, 74%, 13%);
  color: var(--color-navy);
}

/* grey */

.bg-grey-300 {
  background-color: hsl(210, 40%, 96%);
  background-color: var(--color-grey-300);
}

.border-grey-500 {
  border-color: hsl(210, 29%, 87%);
  border-color: var(--color-grey-500);
}

/* gunmetal */

/* red */

.bg-red-500 {
  background-color: hsl(360, 84%, 47%);
  background-color: var(--color-red-500);
}

.color-red-500 {
  color: hsl(360, 84%, 47%);
  color: var(--color-red-500);
}

/* royal */

/* ---------- UTILITIES display ---------- */

/* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */

.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 0;
  overflow: hidden;
  position: absolute;
  top: auto;
  white-space: nowrap;
  width: 0;
}

.block {
  display: block;
}

.hidden {
  display: none;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.overflow-hidden {
  overflow: hidden;
}

@media (min-width: 64em) {
  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }
}

.js .hide-js,
.no-js .hide-no-js {
  display: none;
}

/* ---------- UTILITIES layout ---------- */

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.center {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.z-1 {
  z-index: 1;
}

@media (min-width: 64em) {
  .lg\:order-2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

/* ---------- UTILITIES list ---------- */

.list-none {
  list-style-type: none;
}

/* ---------- UTILITIES size ---------- */

/* height */

.h-full {
  height: 100%;
  height: var(--size-full);
}

.min-h-80 {
  min-height: 20rem;
  min-height: var(--size-80);
}

/* width */

.w-12 {
  width: 3rem;
  width: var(--size-12);
}

.w-20 {
  width: 5rem;
  width: var(--size-20);
}

.w-36 {
  width: 9rem;
  width: var(--size-36);
}

.w-3-4 {
  width: 75%;
  width: var(--size-3-4);
}

.w-full {
  width: 100%;
  width: var(--size-full);
}

.max-w-192 {
  max-width: 48rem;
  max-width: var(--size-192);
}

.max-w-224 {
  max-width: 56rem;
  max-width: var(--size-224);
}

.max-w-256 {
  max-width: 64rem;
  max-width: var(--size-256);
}

/* media queries */

@media (max-width: 43.749em) {
  .to-md\:max-w-56 {
    max-width: 14rem;
    max-width: var(--size-56);
  }
}

@media (min-width: 43.75em) {
  .md\:w-3-4 {
    width: 75%;
    width: var(--size-3-4);
  }
}

@media (min-width: 43.75em) and (max-width: 63.999em) {
  .md-to-lg\:h-full {
    height: 100%;
    height: var(--size-full);
  }
}

@media (max-width: 63.999em) {
  .to-lg\:max-w-160 {
    max-width: 40rem;
    max-width: var(--size-160);
  }

  .to-lg\:w-full-breakout {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
  }
}

@media (min-width: 64em) {

  .lg\:w-1-2 {
    width: 50%;
    width: var(--size-1-2);
  }
}

/* ---------- UTILITIES space ---------- */

/* margin */

.m-0 {
  margin: 0;
  margin: var(--size-0);
}

.m-4 {
  margin: 1rem;
  margin: var(--size-4);
}

.mx-auto {
  margin-left: auto;
  margin-left: var(--size-auto);
  margin-right: auto;
  margin-right: var(--size-auto);
}

.my-0 {
  margin-top: 0;
  margin-top: var(--size-0);
  margin-bottom: 0;
  margin-bottom: var(--size-0);
}

.my-16 {
  margin-top: 4rem;
  margin-top: var(--size-16);
  margin-bottom: 4rem;
  margin-bottom: var(--size-16);
}

.my-18 {
  margin-top: 4.5rem;
  margin-top: var(--size-18);
  margin-bottom: 4.5rem;
  margin-bottom: var(--size-18);
}

.mt-0 {
  margin-top: 0;
  margin-top: var(--size-0);
}

.mt-16 {
  margin-top: 4rem;
  margin-top: var(--size-16);
}

.mb-0 {
  margin-bottom: 0;
  margin-bottom: var(--size-0);
}

.mb-1 {
  margin-bottom: 0.25rem;
  margin-bottom: var(--size-1);
}

.mb-2 {
  margin-bottom: 0.5rem;
  margin-bottom: var(--size-2);
}

.mb-3 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--size-3);
}

.mb-4 {
  margin-bottom: 1rem;
  margin-bottom: var(--size-4);
}

.mb-6 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--size-6);
}

.mb-7 {
  margin-bottom: 1.75rem;
  margin-bottom: var(--size-7);
}

.mb-8 {
  margin-bottom: 2rem;
  margin-bottom: var(--size-8);
}

.mb-10 {
  margin-bottom: 2.5rem;
  margin-bottom: var(--size-10);
}

.mb-12 {
  margin-bottom: 3rem;
  margin-bottom: var(--size-12);
}

.mb-16 {
  margin-bottom: 4rem;
  margin-bottom: var(--size-16);
}

.ml-6 {
  margin-left: 1.5rem;
  margin-left: var(--size-6);
}

/* padding */

.p-0 {
  padding: 0;
  padding: var(--size-0);
}

.p-5 {
  padding: 1.25rem;
  padding: var(--size-5);
}

.p-6 {
  padding: 1.5rem;
  padding: var(--size-6);
}

.px-3 {
  padding-left: 0.75rem;
  padding-left: var(--size-3);
  padding-right: 0.75rem;
  padding-right: var(--size-3);
}

.py-0 {
  padding-top: 0;
  padding-top: var(--size-0);
  padding-bottom: 0;
  padding-bottom: var(--size-0);
}

.py-2 {
  padding-top: 0.5rem;
  padding-top: var(--size-2);
  padding-bottom: 0.5rem;
  padding-bottom: var(--size-2);
}

.py-3 {
  padding-top: 0.75rem;
  padding-top: var(--size-3);
  padding-bottom: 0.75rem;
  padding-bottom: var(--size-3);
}

.py-16 {
  padding-top: 4rem;
  padding-top: var(--size-16);
  padding-bottom: 4rem;
  padding-bottom: var(--size-16);
}

.py-32 {
  padding-top: 8rem;
  padding-top: var(--size-32);
  padding-bottom: 8rem;
  padding-bottom: var(--size-32);
}

.pt-0 {
  padding-top: 0;
  padding-top: var(--size-0);
}

.pb-0 {
  padding-bottom: 0;
  padding-bottom: var(--size-0);
}

@media (min-width: 23.375em) {
  /* margin */

  .sm\:my-20 {
    margin-top: 5rem;
    margin-top: var(--size-20);
    margin-bottom: 5rem;
    margin-bottom: var(--size-20);
  }

  /* padding */
}

@media (min-width: 43.75em) {
  /* margin */

  .md\:my-24 {
    margin-top: 6rem;
    margin-top: var(--size-24);
    margin-bottom: 6rem;
    margin-bottom: var(--size-24);
  }

  /* padding */
}

@media (max-width: 63.999em) {
  .to-lg\:mb-14 {
    margin-bottom: 3.5rem;
    margin-bottom: var(--size-14);
  }
}

@media (min-width: 64em) {
  /* margin */

  .lg\:my-28 {
    margin-top: 7rem;
    margin-top: var(--size-28);
    margin-bottom: 7rem;
    margin-bottom: var(--size-28);
  }

  .lg\:mt-24 {
    margin-top: 6rem;
    margin-top: var(--size-24);
  }

  .lg\:mb-9 {
    margin-bottom: 2.25rem;
    margin-bottom: var(--size-9);
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
    margin-bottom: var(--size-10);
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
    margin-bottom: var(--size-12);
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
    margin-bottom: var(--size-16);
  }

  /* padding */

  .lg\:py-56 {
    padding-top: 14rem;
    padding-top: var(--size-56);
    padding-bottom: 14rem;
    padding-bottom: var(--size-56);
  }
}

@media (min-width: 90em) {
  /* margin */

  .xl\:my-40 {
    margin-top: 10rem;
    margin-top: var(--size-40);
    margin-bottom: 10rem;
    margin-bottom: var(--size-40);
  }

  .xl\:mb-10 {
    margin-bottom: 2.5rem;
    margin-bottom: var(--size-10);
  }

  .xl\:mb-12 {
    margin-bottom: 3rem;
    margin-bottom: var(--size-12);
  }

  .xl\:mb-24 {
    margin-bottom: 6rem;
    margin-bottom: var(--size-24);
  }

  /* padding */
}

/* ---------- UTILITIES typography ---------- */

/* ---------- alignment ---------- */

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

.text-right {
  text-align: right;
}

/* ---------- casing ---------- */

.text-capitalise {
  text-transform: capitalize;
}

.text-lower {
  text-transform: lowercase;
}

.text-upper {
  text-transform: uppercase;
}

/* ---------- families ---------- */

/* ---------- leading ---------- */

/* ---------- sizes ---------- */

.text-xs {
  font-size: 0.75rem;
  font-size: var(--font-size-xs);
}

/* ---------- tracking ---------- */

/* ---------- weights ---------- */

.text-normal {
  font-weight: 400;
  font-weight: var(--font-weight-normal);
}

.text-semibold {
  font-weight: 600;
  font-weight: var(--font-weight-semibold);
}