/* #region COLORS */
:root {
  /** Colors **/
  --fg-contrast: 0 0% 10%;
  --fg-default: 0 0% 30%;
  --fg-subtle: 0 0% 50%;
  --fg-non-essential: 0 0% 70%;
  --bg-primary: 0 0% 95%;
  --bg-secondary: 0 0% 80%;
  --bg-accent: 0 0% 70%;
  --bg-non-essential: 0 0 50%;
  --primary-500: 43, 94%, 61%;
  --yellow-900: 35 100% 15%;
  --yellow-700: 38 100% 40%;
  --yellow-500: 43 90% 50%;
  --yellow-300: 43 100% 70%;
  --yellow-100: 38 90% 90%;
  --orange-900: 22 96% 18%;
  --orange-700: 22 96% 38%;
  --orange-500: 22 86% 68%;
  --orange-300: 22 96% 58%;
  --orange-100: 22 96% 88%;
  --green-900: 115 58% 19%;
  --green-700: 115 38% 19%;
  --green-500: 115 48% 39%;
  --green-300: 115 48% 59%;
  --green-100: 115 58% 79%;
  --blue-900: 241 50% 21%;
  --blue-700: 241 30% 35%;
  --blue-500: 241 50% 45%;
  --blue-300: 241 50% 65%;
  --blue-100: 241 60% 85%;
  --red-900: 360 57% 29%;
  --red-700: 360 57% 49%;
  --red-500: 360 87% 59%;
  --red-300: 360 87% 79%;
  --red-100: 360 100% 89%;
}

@media (prefers-color-scheme: dark) {
  :root.no-js {
    --fg-contrast: 0 0% 100%;
    --fg-default: 0 0% 80%;
    --fg-subtle: 0 0% 60%;
    --fg-non-essential: 0 0% 40%;
    --bg-primary: 0 0% 10%;
    --bg-secondary: 0 0% 20%;
    --bg-accent: 0 0% 30%;
    --bg-non-essential: 0 0% 40%;
    --primary-500: 43, 94%, 61%;
    --yellow-100: 35 100% 15%;
    --yellow-300: 38 100% 40%;
    --yellow-500: 43 90% 50%;
    --yellow-700: 43 100% 70%;
    --yellow-900: 38 90% 90%;
    --orange-100: 22 96% 18%;
    --orange-300: 22 96% 38%;
    --orange-500: 22 86% 68%;
    --orange-700: 22 96% 58%;
    --orange-900: 22 96% 88%;
    --green-100: 115 58% 19%;
    --green-300: 115 38% 19%;
    --green-500: 115 48% 39%;
    --green-700: 115 48% 59%;
    --green-900: 115 58% 79%;
    --blue-100: 241 50% 21%;
    --blue-300: 241 30% 35%;
    --blue-500: 241 50% 45%;
    --blue-700: 241 50% 65%;
    --blue-900: 241 60% 85%;
    --red-100: 360 57% 29%;
    --red-300: 360 57% 49%;
    --red-500: 360 87% 59%;
    --red-700: 360 87% 79%;
    --red-900: 360 100% 89%;
  }
}

.light-mode {
  --fg-contrast: 0 0% 10%;
  --fg-default: 0 0% 30%;
  --fg-subtle: 0 0% 50%;
  --fg-non-essential: 0 0% 70%;
  --bg-primary: 0 0% 95%;
  --bg-secondary: 0 0% 80%;
  --bg-accent: 0 0% 70%;
  --bg-non-essential: 0 0% 50%;
  --primary-500: 43, 94%, 61%;
}

.dark-mode {
  --fg-contrast: 0 0% 100%;
  --fg-default: 0 0% 80%;
  --fg-subtle: 0 0% 60%;
  --fg-non-essential: 0 0% 40%;
  --bg-primary: 0 0% 10%;
  --bg-secondary: 0 0% 20%;
  --bg-accent: 0 0% 30%;
  --bg-non-essential: 0 0% 40%;
  --primary-500: 43, 94%, 61%;
  --yellow-100: 35 100% 15%;
  --yellow-300: 38 100% 40%;
  --yellow-500: 43 90% 50%;
  --yellow-700: 43 100% 70%;
  --yellow-900: 38 90% 90%;
  --orange-100: 22 96% 18%;
  --orange-300: 22 96% 38%;
  --orange-500: 22 86% 68%;
  --orange-700: 22 96% 58%;
  --orange-900: 22 96% 88%;
  --green-100: 115 58% 19%;
  --green-300: 115 38% 19%;
  --green-500: 115 48% 39%;
  --green-700: 115 48% 59%;
  --green-900: 115 58% 79%;
  --blue-100: 241 50% 21%;
  --blue-300: 241 30% 35%;
  --blue-500: 241 50% 45%;
  --blue-700: 241 50% 65%;
  --blue-900: 241 60% 85%;
  --red-100: 360 57% 29%;
  --red-300: 360 57% 49%;
  --red-500: 360 87% 59%;
  --red-700: 360 87% 79%;
  --red-900: 360 100% 89%;
}

/* #endregion */
/* #region SPACE */
:root {
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-xxl: 4rem;
  --space-auto: auto;
  --space-none: none;
}

/* #endregion */
/* #region SHAPES */
:root {
  --ideal-radius: 1em;
  --small-radius: 8px;
}

/* #endregion */
/* #region TYPOGRAPHY */
:root {
  --font-sans: sans-serif;
  --font-serif: serif;
  --font-display: serif;
  --font-code: monospace;
  /* Aliases */
  --font-mono: var(--font-code);
  --font-monospace: var(--font-code);
  --font-monospaced: var(--font-code);
}

/*  #endregion */
/* #region SIZES */
:root {
  --content-width: 65ch;
  --min-content-width: 45ch;
  --max-content-width: 75ch;
  --page-width: calc(var(--content-width) * 2);
}

/* #endregion */
/* #region SCSS Variables */
/* #endregion */
/*
* A Modern CSS Reset
* https://piccalil.li/blog/a-modern-css-reset/
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 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 root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

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

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

/* 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;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.details {
  border: 1px solid hsl(var(--bg-accent));
}
.details summary {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
}
.details summary::before {
  border: 7px solid transparent;
  content: '';
  display: block;
  height: 0;
  width: 0;
}
.details[open] summary::before {
  border-top: 0;
  border-bottom-color: currentColor;
}
.details:not([open]) summary::before {
  border-bottom: 0;
  border-top-color: currentColor;
}

.details + .details {
  border-top: 0;
}

*::-webkit-scrollbar {
  width: 1rem;
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(var(--bg-accent));
  border-radius: 100px;
  border: 0.25rem solid hsl(var(--bg-primary));
}

table {
  border-collapse: collapse;
}

thead {
  background-color: hsl(var(--bg-secondary));
}

th {
  color: hsl(var(--fg-contrast));
}

td,
th {
  border: 1px solid hsl(var(--bg-accent));
  padding: var(--space-xs);
  vertical-align: baseline;
}

.box {
  padding: var(--box-padding, var(--space-s));
  color: var(--box-fg);
  background-color: var(--box-bg);
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
  --box-fg: hsl(var(--fg-default));
  --box-bg: hsl(var(--bg-secondary));
}
.box * {
  color: inherit;
}
.box.inverted {
  color: var(--box-bg);
  background-color: var(--box-fg);
}
.box.transparent {
  background-color: transparent;
  border: 1px solid var(--box-bg);
}
.box.transparent + .box.transparent.transparent {
  border-top: none;
}

.center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);
  padding-left: var(--center-padding, var(--space-s));
  padding-right: var(--center-padding, var(--space-s));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-xs));
}
.cluster.spaced {
  justify-content: space-between;
}
.cluster.end-justified {
  justify-content: flex-end;
}
.cluster.center-aligned {
  align-items: center;
}
.cluster.center-justified {
  justify-content: center;
}

.container,
.content-wrapper {
  margin: auto;
  width: 100%;
  max-width: var(--page-width);
}

.content-wrapper {
  max-width: var(--content-width);
}

.flex {
  display: flex;
}
.flex.wrapping {
  flex-wrap: wrap;
}
.flex.responsive > *,
.post__content h2.flex > * {
  flex: 1 1 var(--flex-item-size, 25ch);
}
.flex.vertical {
  flex-direction: column;
}
.flex.vertical.reverse {
  flex-direction: column-reverse;
}
.flex.horizontal {
  flex-direction: row;
}
.flex.horizontal.reverse {
  flex-direction: row-reverse;
}

.page {
  min-height: 100vh;
}
.page.with-sidebar {
  display: grid;
  grid-template-columns: 0fr min-content 4fr;
  transition: grid-template-columns 300ms;
  border-top: 1px solid hsl(var(--bg-secondary));
  border-bottom: 1px solid hsl(var(--bg-secondary));
}
.page.with-sidebar[data-sidebar-shown] {
  grid-template-columns: 1fr min-content 4fr;
}
.page:not(.with-sidebar) .sidebar {
  display: none;
}
.page .content {
  padding: var(--space-m);
}

.post {
  padding: var(--space-l);
}

#main .post__content > * + * {
  margin-top: 2em;
}
#main .post__content > * + *:is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.75em;
}

.post__content {
  padding-block: var(--space-l);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.5;
}
.post__content h2 {
  max-width: 35ch;
}
.post__content > :is(h2, h3, h4, h5, h6) {
  max-width: 50rem;
}
.post__content > * {
  margin: auto;
  max-width: 65ch;
  width: 100%;
}
.post__content h6 {
  margin: 0;
}
.post__content img {
  height: auto;
}
.post__content .quotation {
  font-size: 2rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-family: var(--font-serif);
  max-width: 45ch;
}
.post__content .quotation:is(blockquote),
.post__content .quotation blockquote {
  background-image: url('/assets/images/quote.png');
  background-size: 4rem;
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 2rem;
  padding-top: 2rem;
}
.post__content .quotation:is(blockquote) > * + *,
.post__content .quotation blockquote > * + * {
  margin-top: 1em;
}
.post__content .quotation figcaption,
.post__content .quotation figcaption cite,
.post__content .quotation:is(blockquote) cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1rem;
  text-align: center;
  display: inline-block;
  width: 100%;
}
.post__content .image img {
  width: 100%;
}
.post__content .image figcaption {
  text-align: center;
  font-size: 0.8em;
  padding: 1em;
}
.post__content .footnotes-list {
  font-size: 1rem;
  font-family: var(--font-sans);
}
.post__content i,
.post__content em {
  font-family: var(--font-serif);
}

#main .post__content > .table-wrapper {
  max-width: 130ch;
  max-height: 60vh;
  overflow: auto;
  margin-inline: auto;
  overscroll-behavior: contain;
}

.table-wrapper table {
  width: 100%;
}

.table-wrapper thead {
  position: sticky;
  top: -1px;
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.with-sidebar * {
  overflow-wrap: break-word;
}

.sidebar {
  flex-grow: 1;
  flex-basis: 15ch;
}

.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
}

.stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  white-space: pre-wrap;
  width: 100%;
  /* #region SIZES */
  /* #endregion */
}
.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.stack > * + * {
  margin-top: var(--stack-gap, 0);
}
.stack > .push-to-end {
  margin-top: auto;
}
.stack.recursive * + * {
  margin-bottom: var(--stack-gap, 0);
}
.stack.centered {
  align-items: center;
}
.stack-exception,
.stack-exception > * {
  --stack-gap: 3rem;
}
.stack.xx-small {
  --stack-gap: var(--space-xxs);
}
.stack.x-small {
  --stack-gap: var(--space-xs);
}
.stack.small {
  --stack-gap: var(--space-s);
}
.stack.medium {
  --stack-gap: var(--space-m);
}
.stack.large {
  --stack-gap: var(--space-l);
}
.stack.x-large {
  --stack-gap: var(--space-xl);
}
.stack.xx-large {
  --stack-gap: var(--space-xxl);
}

.justify-content--end {
  justify-content: flex-end;
}
.justify-content--start {
  justify-content: flex-start;
}
.justify-content--normal {
  justify-content: normal;
}
.justify-content--space-between,
.justify-content--spaced {
  justify-content: space-between;
}
.justify-content--space-around {
  justify-content: space-around;
}
.justify-content--space-evenly {
  justify-content: space-evenly;
}

.align-self--auto {
  align-self: auto;
}
.align-self--normal {
  align-self: normal;
}
.align-self--start {
  align-self: flex-start;
}
.align-self--end {
  align-self: flex-end;
}
.align-self--self-start {
  align-self: self-start;
}
.align-self--self-end {
  align-self: self-end;
}
.align-self--center {
  align-self: center;
}

.align-items--auto {
  align-items: auto;
}
.align-items--normal {
  align-items: normal;
}
.align-items--start {
  align-items: flex-start;
}
.align-items--end {
  align-items: flex-end;
}
.align-items--center {
  align-items: center;
}

.text-align--left {
  text-align: left;
}
.text-align--right {
  text-align: right;
}
.text-align--center {
  text-align: center;
}
.text-align--end {
  text-align: end;
}
.text-align--start {
  text-align: start;
}

.fg-contrast {
  color: hsl(var(--fg-contrast));
}

.fg-default {
  color: hsl(var(--fg-default));
}

.fg-subtle {
  color: hsl(var(--fg-subtle));
}

.fg-non-essential {
  color: hsl(var(--fg-non-essential));
}

.bg-primary {
  background-color: hsl(var(--bg-primary));
}

.bg-secondary {
  background-color: hsl(var(--bg-secondary));
}

.bg-accent {
  background-color: hsl(var(--bg-accent));
}

.bg-non-essential {
  background-color: hsl(var(--bg-non-essential));
}

.invert-on-light {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  .invert-on-dark {
    filter: invert(1);
  }

  .invert-on-light {
    filter: invert(0);
  }
}
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.static {
  position: static !important;
}

.sticky {
  position: sticky !important;
  top: 0;
}

.padding-none {
  padding: var(--space-none) !important;
}
.padding-xs {
  padding: var(--space-xs) !important;
}
.padding-s {
  padding: var(--space-s) !important;
}
.padding-m {
  padding: var(--space-m) !important;
}
.padding-l {
  padding: var(--space-l) !important;
}
.padding-xl {
  padding: var(--space-xl) !important;
}
.padding-xxl {
  padding: var(--space-xxl) !important;
}
.padding-inline-none {
  padding-left: var(--space-none) !important;
  padding-right: var(--space-none) !important;
  padding-inline: var(--space-none) !important;
}
.padding-inline-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
  padding-inline: var(--space-xs) !important;
}
.padding-inline-s {
  padding-left: var(--space-s) !important;
  padding-right: var(--space-s) !important;
  padding-inline: var(--space-s) !important;
}
.padding-inline-m {
  padding-left: var(--space-m) !important;
  padding-right: var(--space-m) !important;
  padding-inline: var(--space-m) !important;
}
.padding-inline-l {
  padding-left: var(--space-l) !important;
  padding-right: var(--space-l) !important;
  padding-inline: var(--space-l) !important;
}
.padding-inline-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
  padding-inline: var(--space-xl) !important;
}
.padding-inline-xxl {
  padding-left: var(--space-xxl) !important;
  padding-right: var(--space-xxl) !important;
  padding-inline: var(--space-xxl) !important;
}
.padding-block-none {
  padding-top: var(--space-none) !important;
  padding-bottom: var(--space-none) !important;
  padding-block: var(--space-none) !important;
}
.padding-block-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
  padding-block: var(--space-xs) !important;
}
.padding-block-s {
  padding-top: var(--space-s) !important;
  padding-bottom: var(--space-s) !important;
  padding-block: var(--space-s) !important;
}
.padding-block-m {
  padding-top: var(--space-m) !important;
  padding-bottom: var(--space-m) !important;
  padding-block: var(--space-m) !important;
}
.padding-block-l {
  padding-top: var(--space-l) !important;
  padding-bottom: var(--space-l) !important;
  padding-block: var(--space-l) !important;
}
.padding-block-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
  padding-block: var(--space-xl) !important;
}
.padding-block-xxl {
  padding-top: var(--space-xxl) !important;
  padding-bottom: var(--space-xxl) !important;
  padding-block: var(--space-xxl) !important;
}
.padding-left-none {
  padding-left: var(--space-none) !important;
}
.padding-left-xs {
  padding-left: var(--space-xs) !important;
}
.padding-left-s {
  padding-left: var(--space-s) !important;
}
.padding-left-m {
  padding-left: var(--space-m) !important;
}
.padding-left-l {
  padding-left: var(--space-l) !important;
}
.padding-left-xl {
  padding-left: var(--space-xl) !important;
}
.padding-left-xxl {
  padding-left: var(--space-xxl) !important;
}
.padding-top-none {
  padding-top: var(--space-none) !important;
}
.padding-top-xs {
  padding-top: var(--space-xs) !important;
}
.padding-top-s {
  padding-top: var(--space-s) !important;
}
.padding-top-m {
  padding-top: var(--space-m) !important;
}
.padding-top-l {
  padding-top: var(--space-l) !important;
}
.padding-top-xl {
  padding-top: var(--space-xl) !important;
}
.padding-top-xxl {
  padding-top: var(--space-xxl) !important;
}
.padding-right-none {
  padding-right: var(--space-none) !important;
}
.padding-right-xs {
  padding-right: var(--space-xs) !important;
}
.padding-right-s {
  padding-right: var(--space-s) !important;
}
.padding-right-m {
  padding-right: var(--space-m) !important;
}
.padding-right-l {
  padding-right: var(--space-l) !important;
}
.padding-right-xl {
  padding-right: var(--space-xl) !important;
}
.padding-right-xxl {
  padding-right: var(--space-xxl) !important;
}
.padding-bottom-none {
  padding-bottom: var(--space-none) !important;
}
.padding-bottom-xs {
  padding-bottom: var(--space-xs) !important;
}
.padding-bottom-s {
  padding-bottom: var(--space-s) !important;
}
.padding-bottom-m {
  padding-bottom: var(--space-m) !important;
}
.padding-bottom-l {
  padding-bottom: var(--space-l) !important;
}
.padding-bottom-xl {
  padding-bottom: var(--space-xl) !important;
}
.padding-bottom-xxl {
  padding-bottom: var(--space-xxl) !important;
}

@media (max-width: 385px) {
  .padding-mobile-none {
    padding: var(--space-none) !important;
  }
  .padding-mobile-xs {
    padding: var(--space-xs) !important;
  }
  .padding-mobile-s {
    padding: var(--space-s) !important;
  }
  .padding-mobile-m {
    padding: var(--space-m) !important;
  }
  .padding-mobile-l {
    padding: var(--space-l) !important;
  }
  .padding-mobile-xl {
    padding: var(--space-xl) !important;
  }
  .padding-mobile-xxl {
    padding: var(--space-xxl) !important;
  }
  .padding-mobile-inline-none {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
    padding-inline: var(--space-none) !important;
  }
  .padding-mobile-inline-xs {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
    padding-inline: var(--space-xs) !important;
  }
  .padding-mobile-inline-s {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
    padding-inline: var(--space-s) !important;
  }
  .padding-mobile-inline-m {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
    padding-inline: var(--space-m) !important;
  }
  .padding-mobile-inline-l {
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important;
    padding-inline: var(--space-l) !important;
  }
  .padding-mobile-inline-xl {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
    padding-inline: var(--space-xl) !important;
  }
  .padding-mobile-inline-xxl {
    padding-left: var(--space-xxl) !important;
    padding-right: var(--space-xxl) !important;
    padding-inline: var(--space-xxl) !important;
  }
  .padding-mobile-block-none {
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important;
    padding-block: var(--space-none) !important;
  }
  .padding-mobile-block-xs {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
    padding-block: var(--space-xs) !important;
  }
  .padding-mobile-block-s {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
    padding-block: var(--space-s) !important;
  }
  .padding-mobile-block-m {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
    padding-block: var(--space-m) !important;
  }
  .padding-mobile-block-l {
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important;
    padding-block: var(--space-l) !important;
  }
  .padding-mobile-block-xl {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
    padding-block: var(--space-xl) !important;
  }
  .padding-mobile-block-xxl {
    padding-top: var(--space-xxl) !important;
    padding-bottom: var(--space-xxl) !important;
    padding-block: var(--space-xxl) !important;
  }
  .padding-mobile-left-none {
    padding-left: var(--space-none) !important;
  }
  .padding-mobile-left-xs {
    padding-left: var(--space-xs) !important;
  }
  .padding-mobile-left-s {
    padding-left: var(--space-s) !important;
  }
  .padding-mobile-left-m {
    padding-left: var(--space-m) !important;
  }
  .padding-mobile-left-l {
    padding-left: var(--space-l) !important;
  }
  .padding-mobile-left-xl {
    padding-left: var(--space-xl) !important;
  }
  .padding-mobile-left-xxl {
    padding-left: var(--space-xxl) !important;
  }
  .padding-mobile-top-none {
    padding-top: var(--space-none) !important;
  }
  .padding-mobile-top-xs {
    padding-top: var(--space-xs) !important;
  }
  .padding-mobile-top-s {
    padding-top: var(--space-s) !important;
  }
  .padding-mobile-top-m {
    padding-top: var(--space-m) !important;
  }
  .padding-mobile-top-l {
    padding-top: var(--space-l) !important;
  }
  .padding-mobile-top-xl {
    padding-top: var(--space-xl) !important;
  }
  .padding-mobile-top-xxl {
    padding-top: var(--space-xxl) !important;
  }
  .padding-mobile-right-none {
    padding-right: var(--space-none) !important;
  }
  .padding-mobile-right-xs {
    padding-right: var(--space-xs) !important;
  }
  .padding-mobile-right-s {
    padding-right: var(--space-s) !important;
  }
  .padding-mobile-right-m {
    padding-right: var(--space-m) !important;
  }
  .padding-mobile-right-l {
    padding-right: var(--space-l) !important;
  }
  .padding-mobile-right-xl {
    padding-right: var(--space-xl) !important;
  }
  .padding-mobile-right-xxl {
    padding-right: var(--space-xxl) !important;
  }
  .padding-mobile-bottom-none {
    padding-bottom: var(--space-none) !important;
  }
  .padding-mobile-bottom-xs {
    padding-bottom: var(--space-xs) !important;
  }
  .padding-mobile-bottom-s {
    padding-bottom: var(--space-s) !important;
  }
  .padding-mobile-bottom-m {
    padding-bottom: var(--space-m) !important;
  }
  .padding-mobile-bottom-l {
    padding-bottom: var(--space-l) !important;
  }
  .padding-mobile-bottom-xl {
    padding-bottom: var(--space-xl) !important;
  }
  .padding-mobile-bottom-xxl {
    padding-bottom: var(--space-xxl) !important;
  }
}
.margin-none {
  margin: var(--space-none) !important;
}
.margin-auto {
  margin: var(--space-auto) !important;
}
.margin-xs {
  margin: var(--space-xs) !important;
}
.margin-s {
  margin: var(--space-s) !important;
}
.margin-m {
  margin: var(--space-m) !important;
}
.margin-l {
  margin: var(--space-l) !important;
}
.margin-xl {
  margin: var(--space-xl) !important;
}
.margin-xxl {
  margin: var(--space-xxl) !important;
}
.margin-inline-none {
  margin-left: var(--space-none) !important;
  margin-right: var(--space-none) !important;
  margin-inline: var(--space-none) !important;
}
.margin-inline-auto {
  margin-left: var(--space-auto) !important;
  margin-right: var(--space-auto) !important;
  margin-inline: var(--space-auto) !important;
}
.margin-inline-xs {
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-xs) !important;
  margin-inline: var(--space-xs) !important;
}
.margin-inline-s {
  margin-left: var(--space-s) !important;
  margin-right: var(--space-s) !important;
  margin-inline: var(--space-s) !important;
}
.margin-inline-m {
  margin-left: var(--space-m) !important;
  margin-right: var(--space-m) !important;
  margin-inline: var(--space-m) !important;
}
.margin-inline-l {
  margin-left: var(--space-l) !important;
  margin-right: var(--space-l) !important;
  margin-inline: var(--space-l) !important;
}
.margin-inline-xl {
  margin-left: var(--space-xl) !important;
  margin-right: var(--space-xl) !important;
  margin-inline: var(--space-xl) !important;
}
.margin-inline-xxl {
  margin-left: var(--space-xxl) !important;
  margin-right: var(--space-xxl) !important;
  margin-inline: var(--space-xxl) !important;
}
.margin-block-none {
  margin-top: var(--space-none) !important;
  margin-bottom: var(--space-none) !important;
  margin-block: var(--space-none) !important;
}
.margin-block-auto {
  margin-top: var(--space-auto) !important;
  margin-bottom: var(--space-auto) !important;
  margin-block: var(--space-auto) !important;
}
.margin-block-xs {
  margin-top: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
  margin-block: var(--space-xs) !important;
}
.margin-block-s {
  margin-top: var(--space-s) !important;
  margin-bottom: var(--space-s) !important;
  margin-block: var(--space-s) !important;
}
.margin-block-m {
  margin-top: var(--space-m) !important;
  margin-bottom: var(--space-m) !important;
  margin-block: var(--space-m) !important;
}
.margin-block-l {
  margin-top: var(--space-l) !important;
  margin-bottom: var(--space-l) !important;
  margin-block: var(--space-l) !important;
}
.margin-block-xl {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-xl) !important;
  margin-block: var(--space-xl) !important;
}
.margin-block-xxl {
  margin-top: var(--space-xxl) !important;
  margin-bottom: var(--space-xxl) !important;
  margin-block: var(--space-xxl) !important;
}
.margin-left-none {
  margin-left: var(--space-none) !important;
}
.margin-left-auto {
  margin-left: var(--space-auto) !important;
}
.margin-left-xs {
  margin-left: var(--space-xs) !important;
}
.margin-left-s {
  margin-left: var(--space-s) !important;
}
.margin-left-m {
  margin-left: var(--space-m) !important;
}
.margin-left-l {
  margin-left: var(--space-l) !important;
}
.margin-left-xl {
  margin-left: var(--space-xl) !important;
}
.margin-left-xxl {
  margin-left: var(--space-xxl) !important;
}
.margin-top-none {
  margin-top: var(--space-none) !important;
}
.margin-top-auto {
  margin-top: var(--space-auto) !important;
}
.margin-top-xs {
  margin-top: var(--space-xs) !important;
}
.margin-top-s {
  margin-top: var(--space-s) !important;
}
.margin-top-m {
  margin-top: var(--space-m) !important;
}
.margin-top-l {
  margin-top: var(--space-l) !important;
}
.margin-top-xl {
  margin-top: var(--space-xl) !important;
}
.margin-top-xxl {
  margin-top: var(--space-xxl) !important;
}
.margin-right-none {
  margin-right: var(--space-none) !important;
}
.margin-right-auto {
  margin-right: var(--space-auto) !important;
}
.margin-right-xs {
  margin-right: var(--space-xs) !important;
}
.margin-right-s {
  margin-right: var(--space-s) !important;
}
.margin-right-m {
  margin-right: var(--space-m) !important;
}
.margin-right-l {
  margin-right: var(--space-l) !important;
}
.margin-right-xl {
  margin-right: var(--space-xl) !important;
}
.margin-right-xxl {
  margin-right: var(--space-xxl) !important;
}
.margin-bottom-none {
  margin-bottom: var(--space-none) !important;
}
.margin-bottom-auto {
  margin-bottom: var(--space-auto) !important;
}
.margin-bottom-xs {
  margin-bottom: var(--space-xs) !important;
}
.margin-bottom-s {
  margin-bottom: var(--space-s) !important;
}
.margin-bottom-m {
  margin-bottom: var(--space-m) !important;
}
.margin-bottom-l {
  margin-bottom: var(--space-l) !important;
}
.margin-bottom-xl {
  margin-bottom: var(--space-xl) !important;
}
.margin-bottom-xxl {
  margin-bottom: var(--space-xxl) !important;
}

@media (max-width: 959px) {
  .margin-mobile-none {
    margin: var(--space-none) !important;
  }
  .margin-mobile-auto {
    margin: var(--space-auto) !important;
  }
  .margin-mobile-xs {
    margin: var(--space-xs) !important;
  }
  .margin-mobile-s {
    margin: var(--space-s) !important;
  }
  .margin-mobile-m {
    margin: var(--space-m) !important;
  }
  .margin-mobile-l {
    margin: var(--space-l) !important;
  }
  .margin-mobile-xl {
    margin: var(--space-xl) !important;
  }
  .margin-mobile-xxl {
    margin: var(--space-xxl) !important;
  }
  .margin-mobile-inline-none {
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important;
    margin-inline: var(--space-none) !important;
  }
  .margin-mobile-inline-auto {
    margin-left: var(--space-auto) !important;
    margin-right: var(--space-auto) !important;
    margin-inline: var(--space-auto) !important;
  }
  .margin-mobile-inline-xs {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
    margin-inline: var(--space-xs) !important;
  }
  .margin-mobile-inline-s {
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important;
    margin-inline: var(--space-s) !important;
  }
  .margin-mobile-inline-m {
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important;
    margin-inline: var(--space-m) !important;
  }
  .margin-mobile-inline-l {
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important;
    margin-inline: var(--space-l) !important;
  }
  .margin-mobile-inline-xl {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
    margin-inline: var(--space-xl) !important;
  }
  .margin-mobile-inline-xxl {
    margin-left: var(--space-xxl) !important;
    margin-right: var(--space-xxl) !important;
    margin-inline: var(--space-xxl) !important;
  }
  .margin-mobile-block-none {
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important;
    margin-block: var(--space-none) !important;
  }
  .margin-mobile-block-auto {
    margin-top: var(--space-auto) !important;
    margin-bottom: var(--space-auto) !important;
    margin-block: var(--space-auto) !important;
  }
  .margin-mobile-block-xs {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
    margin-block: var(--space-xs) !important;
  }
  .margin-mobile-block-s {
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important;
    margin-block: var(--space-s) !important;
  }
  .margin-mobile-block-m {
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important;
    margin-block: var(--space-m) !important;
  }
  .margin-mobile-block-l {
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important;
    margin-block: var(--space-l) !important;
  }
  .margin-mobile-block-xl {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
    margin-block: var(--space-xl) !important;
  }
  .margin-mobile-block-xxl {
    margin-top: var(--space-xxl) !important;
    margin-bottom: var(--space-xxl) !important;
    margin-block: var(--space-xxl) !important;
  }
  .margin-mobile-left-none {
    margin-left: var(--space-none) !important;
  }
  .margin-mobile-left-auto {
    margin-left: var(--space-auto) !important;
  }
  .margin-mobile-left-xs {
    margin-left: var(--space-xs) !important;
  }
  .margin-mobile-left-s {
    margin-left: var(--space-s) !important;
  }
  .margin-mobile-left-m {
    margin-left: var(--space-m) !important;
  }
  .margin-mobile-left-l {
    margin-left: var(--space-l) !important;
  }
  .margin-mobile-left-xl {
    margin-left: var(--space-xl) !important;
  }
  .margin-mobile-left-xxl {
    margin-left: var(--space-xxl) !important;
  }
  .margin-mobile-top-none {
    margin-top: var(--space-none) !important;
  }
  .margin-mobile-top-auto {
    margin-top: var(--space-auto) !important;
  }
  .margin-mobile-top-xs {
    margin-top: var(--space-xs) !important;
  }
  .margin-mobile-top-s {
    margin-top: var(--space-s) !important;
  }
  .margin-mobile-top-m {
    margin-top: var(--space-m) !important;
  }
  .margin-mobile-top-l {
    margin-top: var(--space-l) !important;
  }
  .margin-mobile-top-xl {
    margin-top: var(--space-xl) !important;
  }
  .margin-mobile-top-xxl {
    margin-top: var(--space-xxl) !important;
  }
  .margin-mobile-right-none {
    margin-right: var(--space-none) !important;
  }
  .margin-mobile-right-auto {
    margin-right: var(--space-auto) !important;
  }
  .margin-mobile-right-xs {
    margin-right: var(--space-xs) !important;
  }
  .margin-mobile-right-s {
    margin-right: var(--space-s) !important;
  }
  .margin-mobile-right-m {
    margin-right: var(--space-m) !important;
  }
  .margin-mobile-right-l {
    margin-right: var(--space-l) !important;
  }
  .margin-mobile-right-xl {
    margin-right: var(--space-xl) !important;
  }
  .margin-mobile-right-xxl {
    margin-right: var(--space-xxl) !important;
  }
  .margin-mobile-bottom-none {
    margin-bottom: var(--space-none) !important;
  }
  .margin-mobile-bottom-auto {
    margin-bottom: var(--space-auto) !important;
  }
  .margin-mobile-bottom-xs {
    margin-bottom: var(--space-xs) !important;
  }
  .margin-mobile-bottom-s {
    margin-bottom: var(--space-s) !important;
  }
  .margin-mobile-bottom-m {
    margin-bottom: var(--space-m) !important;
  }
  .margin-mobile-bottom-l {
    margin-bottom: var(--space-l) !important;
  }
  .margin-mobile-bottom-xl {
    margin-bottom: var(--space-xl) !important;
  }
  .margin-mobile-bottom-xxl {
    margin-bottom: var(--space-xxl) !important;
  }
}
.row-gap-none {
  row-gap: 0 !important;
}
.row-gap-xs {
  row-gap: var(--space-xs) !important;
}
.row-gap,
.row-gap-s {
  row-gap: var(--space-s) !important;
}
.row-gap-m {
  row-gap: var(--space-m) !important;
}
.row-gap-l {
  row-gap: var(--space-l) !important;
}
.row-gap-xl {
  row-gap: calc(var(--space-l) * 2) !important;
}

.column-gap-none {
  column-gap: 0 !important;
}
.column-gap-xs {
  column-gap: var(--space-xs) !important;
}
.column-gap,
.column-gap-s {
  column-gap: var(--space-s) !important;
}
.column-gap-m {
  column-gap: var(--space-m) !important;
}
.column-gap-l {
  column-gap: var(--space-l) !important;
}
.column-gap-xl {
  column-gap: calc(var(--space-l) * 2) !important;
}

.gap-none {
  gap: var(--space-none) !important;
}
.gap-auto {
  gap: var(--space-auto) !important;
}
.gap-xs {
  gap: var(--space-xs) !important;
}
.gap-s {
  gap: var(--space-s) !important;
}
.gap-m {
  gap: var(--space-m) !important;
}
.gap-l {
  gap: var(--space-l) !important;
}
.gap-xl {
  gap: var(--space-xl) !important;
}
.gap-xxl {
  gap: var(--space-xxl) !important;
}

.item-padding-top-xs > * {
  padding-top: var(--space-xs);
}
.item-padding-top-s > * {
  padding-top: var(--space-s);
}
.item-padding-top-m > * {
  padding-top: var(--space-m);
}
.item-padding-top-l > * {
  padding-top: var(--space-l);
}
.item-padding-top-xl > * {
  padding-top: var(--space-xl);
}
.item-padding-top-xxl > * {
  padding-top: var(--space-xxl);
}
.item-padding-bottom-xs > * {
  padding-bottom: var(--space-xs);
}
.item-padding-bottom-s > * {
  padding-bottom: var(--space-s);
}
.item-padding-bottom-m > * {
  padding-bottom: var(--space-m);
}
.item-padding-bottom-l > * {
  padding-bottom: var(--space-l);
}
.item-padding-bottom-xl > * {
  padding-bottom: var(--space-xl);
}
.item-padding-bottom-xxl > * {
  padding-bottom: var(--space-xxl);
}
.item-padding-left-xs > * {
  padding-left: var(--space-xs);
}
.item-padding-left-s > * {
  padding-left: var(--space-s);
}
.item-padding-left-m > * {
  padding-left: var(--space-m);
}
.item-padding-left-l > * {
  padding-left: var(--space-l);
}
.item-padding-left-xl > * {
  padding-left: var(--space-xl);
}
.item-padding-left-xxl > * {
  padding-left: var(--space-xxl);
}
.item-padding-right-xs > * {
  padding-right: var(--space-xs);
}
.item-padding-right-s > * {
  padding-right: var(--space-s);
}
.item-padding-right-m > * {
  padding-right: var(--space-m);
}
.item-padding-right-l > * {
  padding-right: var(--space-l);
}
.item-padding-right-xl > * {
  padding-right: var(--space-xl);
}
.item-padding-right-xxl > * {
  padding-right: var(--space-xxl);
}

.item-margin-top-xs > * {
  margin-top: var(--space-xs);
}
.item-margin-top-xs > *:first-child {
  margin-top: 0;
}
.item-margin-top-s > * {
  margin-top: var(--space-s);
}
.item-margin-top-s > *:first-child {
  margin-top: 0;
}
.item-margin-top-m > * {
  margin-top: var(--space-m);
}
.item-margin-top-m > *:first-child {
  margin-top: 0;
}
.item-margin-top-l > * {
  margin-top: var(--space-l);
}
.item-margin-top-l > *:first-child {
  margin-top: 0;
}
.item-margin-top-xl > * {
  margin-top: var(--space-xl);
}
.item-margin-top-xl > *:first-child {
  margin-top: 0;
}
.item-margin-top-xxl > * {
  margin-top: var(--space-xxl);
}
.item-margin-top-xxl > *:first-child {
  margin-top: 0;
}
.item-margin-bottom-xs > * {
  margin-bottom: var(--space-xs);
}
.item-margin-bottom-xs > *:last-child {
  margin-bottom: 0;
}
.item-margin-bottom-s > * {
  margin-bottom: var(--space-s);
}
.item-margin-bottom-s > *:last-child {
  margin-bottom: 0;
}
.item-margin-bottom-m > * {
  margin-bottom: var(--space-m);
}
.item-margin-bottom-m > *:last-child {
  margin-bottom: 0;
}
.item-margin-bottom-l > * {
  margin-bottom: var(--space-l);
}
.item-margin-bottom-l > *:last-child {
  margin-bottom: 0;
}
.item-margin-bottom-xl > * {
  margin-bottom: var(--space-xl);
}
.item-margin-bottom-xl > *:last-child {
  margin-bottom: 0;
}
.item-margin-bottom-xxl > * {
  margin-bottom: var(--space-xxl);
}
.item-margin-bottom-xxl > *:last-child {
  margin-bottom: 0;
}
.item-margin-left-xs > * {
  margin-left: var(--space-xs);
}
.item-margin-left-s > * {
  margin-left: var(--space-s);
}
.item-margin-left-m > * {
  margin-left: var(--space-m);
}
.item-margin-left-l > * {
  margin-left: var(--space-l);
}
.item-margin-left-xl > * {
  margin-left: var(--space-xl);
}
.item-margin-left-xxl > * {
  margin-left: var(--space-xxl);
}
.item-margin-right-xs > * {
  margin-right: var(--space-xs);
}
.item-margin-right-s > * {
  margin-right: var(--space-s);
}
.item-margin-right-m > * {
  margin-right: var(--space-m);
}
.item-margin-right-l > * {
  margin-right: var(--space-l);
}
.item-margin-right-xl > * {
  margin-right: var(--space-xl);
}
.item-margin-right-xxl > * {
  margin-right: var(--space-xxl);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.post__content h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 1.3;
  color: HSL(var(--fg-contrast));
  font-size: var(--font-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

h1,
.h1 {
  margin-top: 0;
  --font-size: 4.209rem;
}

h2,
.h2,
.post__content h2 {
  --font-size: 3.157rem;
}

h3,
.h3 {
  --font-size: 2.369rem;
}

h4,
.h4 {
  --font-size: 1.777rem;
}

h5,
.h5 {
  --font-size: 1.333rem;
}

h6,
.h6 {
  --font-size: 1.1rem;
}

.h1,
.h2,
.post__content h2,
.h3,
.h4,
.h5,
.h6 {
  font-size: var(--font-size) !important;
}

.responsive.h1,
.post__content h2.h1 {
  font-size: 4.209rem;
  font-size: clamp(3.2rem, 10vw + 1rem, 4.209rem);
}
.responsive.h2,
.post__content h2 {
  font-size: 3.157rem;
  font-size: clamp(2.4rem, 10vw + 1rem, 3.157rem);
}
.responsive.h3,
.post__content h2.h3 {
  font-size: 2.369rem;
  font-size: clamp(1.8rem, 10vw + 1rem, 2.369rem);
}
.responsive.h4,
.post__content h2.h4 {
  font-size: 1.777rem;
  font-size: clamp(1.4rem, 10vw + 1rem, 1.777rem);
}
.responsive.h5,
.post__content h2.h5 {
  font-size: 1.333rem;
  font-size: clamp(1.1rem, 10vw + 1rem, 1.333rem);
}
.responsive.h6,
.post__content h2.h6 {
  font-size: 1.333rem;
  font-size: clamp(1rem, 10vw + 1rem, 1.1rem);
}

.font-serif {
  font-family: var(--font-serif);
}
.font-sans {
  font-family: var(--font-sans);
}
.font-code {
  font-family: var(--font-code);
}
.font-mono {
  font-family: var(--font-mono);
}
.font-monospace {
  font-family: var(--font-monospace);
}
.font-monospaced {
  font-family: var(--font-monospaced);
}

.weight-100 {
  font-weight: 100;
}
.weight-200 {
  font-weight: 200;
}
.weight-300 {
  font-weight: 300;
}
.weight-400 {
  font-weight: 400;
}
.weight-500 {
  font-weight: 500;
}
.weight-600 {
  font-weight: 600;
}
.weight-700 {
  font-weight: 700;
}
.weight-800 {
  font-weight: 800;
}
.weight-900 {
  font-weight: 900;
}
.weight-lighter {
  font-weight: lighter;
}
.weight-bold {
  font-weight: bold;
}
.weight-bolder {
  font-weight: bolder;
}
.weight-normal {
  font-weight: normal;
}

pre.poetry {
  font-family: var(--font-serif);
  font-weight: lighter;
  letter-spacing: 0.2px;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.hide--on-mobile {
  display: none !important;
}
@media screen and (min-width: 810px) {
  .hide--on-mobile {
    display: revert !important;
  }
}
@media screen and (min-width: 810px) {
  .hide--on-desktop {
    display: none !important;
  }
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
