*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
@font-face {
	font-family: 'DM Sans';
	src: url('fonts/DMSans-Italic-VariableFont.ttf')
		format('truetype-variations');
	src: url('fonts/DMSans-Italic-VariableFont.ttf') format('truetype')
		tech('variations');
	font-weight: 100 1000;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('fonts/DMSans-VariableFont.ttf') format('truetype-variations');
	src: url('fonts/DMSans-VariableFont.ttf') format('truetype')
		tech('variations');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-green: #1f4d36;
  --color-gray-100: #f6f6f6;
  --color-gray-300: #cccccc;
  --color-gray-800: #666666;
  --color-surface-page: var(--color-gray-100);
  --color-text-default: var(--color-black);
  --color-text-subtle: var(--color-gray-800);
  --color-text-link: var(--color-green);
  --color-border: var(--color-gray-300);
  --gutter: var(--space-s-l);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --leading-standard: 1.5;
}
/* 
  Global styles 

  Low-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html
*/
body {
	background: var(--color-surface-page);
	color: var(--color-text-default);
	font-family: 'DM Sans', sans-serif;
	line-height: 1.3;
	margin: 0;
}

h1,
h2,
h3,
h4 {
	line-height: 0.9;
}

sup {
	font-size: 0.5em;
	margin-inline: 0.25em;
	vertical-align: top;
}

p {
	margin: 0;
}

p:not(:last-child) {
	margin-bottom: 1em;
}

.accordion {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5em;
	color: var(--color-text-subtle);
}

.accordion ul {
	display: flex;
	margin: 0;
	margin-left: 0.35em;
	padding: 0.5em 1em !important;
	flex-direction: column;
	gap: 1em;
	border-left: 1px solid var(--color-border);
}

.nav-link a,
a.nav-link {
	color: var(--color-text-subtle);
	text-decoration: none;
	font-weight: 400;
}

.nav-link:hover a,
a.nav-link:hover {
	color: var(--color-text-default);
}

.nav-link a[aria-current='page'],
a.nav-link[aria-current='page'] {
	color: var(--color-text-default);
	font-weight: 500;
}

.sidebar {
	display: flex;
	height: 100vh;
	padding-bottom: 4rem;
	flex-direction: column;
	gap: 1.5rem;
	background: var(--color-surface-page);
	border-right: 1px solid var(--color-border);
}

.sidebar header {
	display: flex;
	padding-top: 1.5rem;
	flex-direction: column;
	gap: 1.5rem;
}

.sidebar header > div {
	display: flex;
	padding: 0 1.5rem 1.5rem 1.5rem;
	flex-direction: column;
	gap: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.sidebar header strong {
	font-size: 1.5em;
}

.sidebar header nav {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.sidebar nav {
	display: flex;
	padding-inline: 1.5rem;
	flex-direction: column;
	gap: 1.25rem;
}

.sidebar nav ul {
	padding: 0;
	list-style: none;
}
.with-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
}

.with-sidebar > :first-child {
	flex-grow: 1;
}

.with-sidebar > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: 50%;
}
.no-decoration {
	text-decoration: none;
	color: inherit;
}
/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}