@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./bricolage-grotesque-v8-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('./bricolage-grotesque-v8-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('./bricolage-grotesque-v8-latin-800.woff2') format('woff2');
}

:root {
	--color-blue-base: #313450;
	--color-blue-05: #0d0a35;
	--color-blue-10: #18144d;
	--color-blue-20: #292476;
	--color-blue-30: #3a359a;
	--color-blue-40: #4a44be;
	--color-blue-50: #6361e9;
	--color-blue-60: #8085fe;
	--color-blue-70: #9ca5ff;
	--color-blue-80: #bcc4ff;
	--color-blue-90: #dee3ff;
	--color-blue-95: #eef1ff;

	--color-primary: var(--color-blue-base);
	--color-primary-muted: var(--color-blue-05);
	--color-primary-accent: var(--color-blue-10);

	--color-text-normal: #000;
	--color-text-link: var(--color-blue-30);
	--color-text-link-hover: var(--color-blue-50);
	--decoration-text-link: underline;
	--decoration-text-link-hover: underline;

	--font-title: 'Bricolage Grotesque', sans-serif;
	--font-body: 'Bricolage Grotesque', sans-serif;

	--header-height: 85px;
}

*:focus-visible {
	outline: 0.125em solid var(--color-primary);
	outline-offset: 0.125em;
}

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

* {
	margin: 0;
}

html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	font-size: 112.5%;
	font-synthesis: none;
	font-family: var(--font-body);
	line-height: 1.5;
	text-wrap: pretty;
	color: var(--color-text-normal);
	-webkit-font-smoothing: antialiased;
}

.site-header, .site-footer {
	flex-grow: 0;
	flex-shrink: 0;
}

.site-main {
	flex-grow: 1;
}

.template-home a {
	--color-text-link: #fff;
	--color-text-link-hover: var(--color-blue-95);
}

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

input,
button,
textarea,
select {
	font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-family: var(--font-title);
	text-wrap: balance;
	line-height: 1;
	color: var(--color-primary);
}

h1 {
	font-size: 2em;
	font-weight: normal;
}

h2 {
	margin-top: 2em;
}

@media (min-width: 600px) {
	h1 {
		font-size: 3.5em;
	}
}

p,
ol,
ul,
dl,
dd,
form,
fieldset,
audio,
video,
iframe,
blockquote,
details,
table,
pre,
figure,
address {
	margin: 0 0 calc(1.5 * 1em);
}

li {
	margin-bottom: 1em;
}

a {
	color: var(--color-text-link);
	text-decoration-line: var(--decoration-text-link);
	text-decoration-style: solid;
}

a:hover,
a:focus {
	color: var(--color-text-link-hover);
	text-decoration-line: var(--decoration-text-link-hover);
	text-decoration-style: solid;
}

button {
  --background-color: var(--color-primary);
  --background-color-hover: var(--color-primary-muted);
  --background-color-active: var(--color-primary-accent);
  --color: #fff;
  --color-hover: #fff;
  --color-active: #fff;
  --gap: 0.5em;
  display: inline-flex;
  gap: var(--gap);
  align-items: center;
  border: none;
  background-color: var(--background-color);
  border-radius: 0.25em;
  color: var(--color);
}

button:hover, button:focus {
  background-color: var(--background-color-hover);
  color: var(--color-hover);
}

button:active {
  background-color: var(--background-color-active);
  color: var(--color-active);
}

[class*="container"] {
	--width: 45em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
	max-width: var(--width);
	width: 100%;
}

.container-l {
	--width: 56em;
}

.flow {
	--gap: 1em;
}

.flow > * {
	margin-top: 0;
	margin-bottom: 0;
}

.flow > * + * {
	margin-top: var(--gap);
}

.gap-0 {
	--gap: 0em;
}

.split {
	--gap: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap);
}

.split > * {
	margin: 0;
}

.cluster {
	--gap: 1em;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.cluster > * {
	margin: 0;
}

.grid {
	--gap: 1em;
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: var(--gap);
}

@media (min-width: 45em) {
	.grid {
		--gap: 3em;
		grid-template-columns: repeat(12, 1fr);
	}
}

[class*="item-"] {
	--span: 1;
	grid-column: auto / span var(--span);
}

.item-two-thirds {
	--span: 8;
}

.item-third {
	--span: 4;
}

.reset-list-style {
	margin-bottom: 0;
	padding: 0;
	list-style-type: none;
}

.site-header {
	padding-top: 2em;
	z-index: 20;
	color: #fff;
}

.site-main {
  --gap: 2.75em;
}

.site-footer {
	margin-top: 6.5em;
	padding-top: 4.5em;
	padding-bottom: 2.5em;
	background-color: var(--color-primary);
	color: #fff;
}

.site-footer p {
	font-size: 0.889em;
}

.template-home {
	background-color: #000;
}

.template-home .site-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.template-home .site-footer {
	background-color: rgba(49, 52, 80, 0.65);
}

.nav-links a, .site-footer a {
	--color-text-link: #fff;
	--color-text-link-hover: var(--color-blue-95);
	--decoration-text-link: none;
}

.nav-links a[aria-current="page"], .site-footer a[aria-current="page"] {
	--color-text-link: #fff;
	--color-text-link-hover: #fff;
	--decoration-text-link: none;
	--decoration-text-link-hover: none;
	text-decoration-style: solid;
	font-weight: 800;
}

.site-navigation {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-navigation button[aria-expanded] {
	display: none;
}

.site-navigation button[aria-expanded="true"] .icon.closed {
	display: none;
}

.site-navigation button[aria-expanded="false"] .icon.opened {
	display: none;
}

.dialog,
.dialog-overlay {
	position: fixed;
	inset: 0;
}

.dialog {
	z-index: 50;
	background-color: var(--color-primary-accent);
	animation: fade-in 400ms both, slide-down 400ms both;
}

.dialog :focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .dialog {
    animation: none;
  }
}

.dialog[aria-hidden='true'] {
	display: none;
}

.dialog-content {
	padding: 1em;
	padding-top: 2em;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.dialog button {
	--background-color-hover: var(--color-blue-95);
	--background-color: #fff;
	color: var(--color-primary);
}

.nav-links.mobile {
	--decoration-text-link: none;
	margin-top: auto;
	margin-bottom: auto;
	flex-direction: column;
	align-items: center;
	font-size: 1.25em;
}

.nav-links.mobile li[aria-hidden="true"] {
	display: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-10%);
  }
}

@media (max-width: 941px) {
	.site-navigation {
		display: none;
	}
	.no-js .site-navigation {
		display: flex;
	}
}

@media (min-width: 941px) {
	.site-header button[data-a11y-dialog-show="mobile-menu"] {
		display: none;
	}
}

.no-js .site-header button[data-a11y-dialog-show] {
	display: none;
}

.fixed-bg {
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

[class*="hero"] {
	--height: calc(323px - var(--header-height));
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: var(--height);
}

.overlay, .absolute {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.overlay {
	background-color: var(--color-primary-accent);
	opacity: 0.5;
}

.template-home .overlay {
	position: fixed;
}

[class*="hero"] .overlay {
	z-index: 0;
}

[class*="hero"] .absolute {
	top: calc(var(--header-height) * -1);
	height: calc(var(--height) + var(--header-height));
}

[class*="hero"] [class*="container"] {
	position: relative;
	z-index: 1;
}

[class*="hero"] [class*="container"] a {
	--color-text-link: #fff;
	--color-text-link-hover: #ddd;
}

[class*="hero"] [class*="container"] h1 {
	margin: 0;
	color: #fff;
}

[class*="hero"] img {
	object-fit: cover;
}

.article,
.article span {
	display: block;
}

.article {
	--decoration-text-link: none;
	--decoration-text-link-hover: none;
}

.article-source {
	color: var(--color-text-normal);
	font-size: 0.8em;
	font-weight: 600;
}

.article .article-title {
	font-style: italic;
}

a.article .article-title {
	text-decoration: underline;
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.items-end {
	align-items: end;
}

@media (min-width: 800px) {
	.items-center-lg {
		align-items: center;
	}
}

.text-white {
	color: #fff;
}