:root {
  --font-size-100: clamp(0.7813rem, 0.7932rem - 0.0154cqi, 0.7901rem);
  --font-size-200: clamp(0.8889rem, 0.872rem + 0.0845cqi, 0.9375rem);
  --font-size-300: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem);
  --font-size-400: clamp(1.125rem, 1.0467rem + 0.3913cqi, 1.35rem);
  --font-size-500: clamp(1.2656rem, 1.1424rem + 0.6163cqi, 1.62rem);
  --font-size-600: clamp(1.4238rem, 1.2429rem + 0.9046cqi, 1.944rem);
  --font-size-700: clamp(1.6018rem, 1.3475rem + 1.2713cqi, 2.3328rem);
  --font-size-800: clamp(1.802rem, 1.4551rem + 1.7345cqi, 2.7994rem);
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-VariableFont_slnt,wght.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-regular-italic.woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-medium-italic.woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-semibold.woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-semibold-italic.woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos-text-bold-italic.woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Mono Variable Font */
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/AtkinsonHyperlegibleMonoVF-Variable.woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - ExtraLight */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraLight.woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - Light */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Light.woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-LightItalic.woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - Regular */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - Medium */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-MediumItalic.woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - SemiBold */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - Bold */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Atkinson Hyperlegible Next - ExtraBold */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
* {
  padding: 0;
  margin: 0;
  background: none;
  text-decoration: none;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  /**
   * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
   */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-size: var(--font-size-300);
  color: var(--color-text-default);
  background-color: var(--color-surface-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  font-weight: inherit;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}

table {
  width: 100%;
  border-collapse: collapse; /* Changed from collapse to separate */
  font-size: var(--font-size-200);
  margin-bottom: 2.617924rem;
}
table tr {
  border-bottom: 1px solid var(--color-border-default); /* Added to maintain border */
}
table th,
table td {
  padding: 0.3819820591rem 1rem;
}
table th {
  font-weight: 600;
  text-align: left;
}

.table-wrapper {
  max-width: 40rem;
  margin-inline: auto;
  overflow: auto;
}

blockquote {
  border-left: 4px solid var(--color-border-default);
  padding-inline: 1rem;
  margin-block: 2.617924rem;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-300);
}
blockquote p:first-child {
  margin-top: 0;
}

aside blockquote {
  border: none;
  font-size: var(--font-size-600);
  color: var(--color-text-muted);
  text-align: center;
  font-weight: 400;
}

strong {
  font-weight: 600;
}

ul,
ol {
  margin: 0;
  padding: 0;
  margin-bottom: 2.617924rem;
  padding-left: 1em;
}
ul li:last-of-type,
ol li:last-of-type {
  padding-bottom: 0;
}
ul li::marker,
ol li::marker {
  color: var(--color-text-muted);
}

figure {
  margin-bottom: 2.617924rem;
}
figure:last-child {
  margin-bottom: 0;
}

figcaption {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-200);
}

svg {
  display: block;
}

sup,
sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub {
  top: 0.4em;
}

:root {
  --color-accent-primary: oklch(56.353% 0.13636 36.062deg);
  --color-accent-secondary: oklch(61.019% 0.06639 144.074deg);
  --color-accent-tertiary: oklch(74.572% 0.12262 75.755deg);
  --color-surface-base: oklch(97.811% 0.00673 67.376deg);
  --color-surface-elevated: oklch(94.28% 0.01524 76.979deg);
  --color-surface-subtle: oklch(89.387% 0.02015 69.877deg);
  --color-surface-accent-primary: oklch(55% 0.11 36.062deg);
  --color-surface-accent-primary-active: oklch(50% 0.11 36.062deg);
  --color-surface-success: oklch(96.5% 0.007 144.074deg);
  --color-surface-warning: oklch(96.5% 0.01 80deg);
  --color-surface-danger: oklch(96.5% 0.013 15deg);
  --color-text-default: oklch(26.682% 0.01288 51.536deg);
  --color-text-muted: oklch(49.237% 0.02333 69.63deg);
  --color-text-faint: oklch(78.815% 0.02595 75.17deg);
  --color-text-accent-primary: oklch(56.353% 0.13636 36.062deg);
  --color-text-accent-primary-active: oklch(45% 0.11 36.062deg);
  --color-text-success: oklch(50% 0.08 144.074deg);
  --color-text-warning: oklch(60% 0.11 80deg);
  --color-text-danger: oklch(48% 0.14 15deg);
  --color-border-subtle: oklch(94.28% 0.01524 76.979deg);
  --color-border-default: oklch(89.387% 0.02015 69.877deg);
  --color-border-strong: oklch(49.237% 0.02333 69.63deg);
  --color-border-accent-primary: oklch(50% 0.11 36.062deg);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-code-background: #f5f0e8;
  --color-code-text: oklch(26.682% 0.01288 51.536deg);
  --color-code-comment: oklch(49.237% 0.02333 69.63deg);
  --color-code-punctuation: oklch(49.237% 0.02333 69.63deg);
  --color-code-string: oklch(56.353% 0.13636 36.062deg);
  --color-code-function: oklch(61.019% 0.06639 144.074deg);
  --color-code-number: oklch(74.572% 0.12262 75.755deg);
  --color-code-keyword: oklch(49.237% 0.02333 69.63deg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-accent-primary: oklch(73.473% 0.13199 38.782deg);
    --color-accent-secondary: oklch(75.441% 0.0493 144.203deg);
    --color-accent-tertiary: oklch(85.261% 0.10916 84.434deg);
    --color-surface-base: oklch(20.418% 0.00755 48.215deg);
    --color-surface-elevated: oklch(26.563% 0.01164 55.749deg);
    --color-surface-subtle: oklch(33.561% 0.00888 67.425deg);
    --color-surface-accent-primary: oklch(73.473% 0.13199 38.782deg);
    --color-surface-accent-primary-active: oklch(78.473% 0.13199 38.782deg);
    --color-surface-success: oklch(27% 0.018 144.203deg);
    --color-surface-warning: oklch(27% 0.029 84.434deg);
    --color-surface-danger: oklch(27% 0.039 15deg);
    --color-text-default: oklch(94.28% 0.01524 76.979deg);
    --color-text-muted: oklch(74.007% 0.03238 72.004deg);
    --color-text-faint: oklch(49.237% 0.02333 69.63deg);
    --color-text-accent-primary: oklch(73.473% 0.13199 38.782deg);
    --color-text-accent-primary-active: oklch(68.473% 0.13199 38.782deg);
    --color-text-success: oklch(72% 0.06 144.203deg);
    --color-text-warning: oklch(82% 0.095 84.434deg);
    --color-text-danger: oklch(72% 0.13 15deg);
    --color-border-subtle: oklch(26.563% 0.01164 55.749deg);
    --color-border-default: oklch(33.561% 0.00888 67.425deg);
    --color-border-accent-primary: oklch(63.473% 0.13199 38.782deg);
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-code-background: #0d0c0b;
    --color-code-text: oklch(94.28% 0.01524 76.979deg);
    --color-code-comment: oklch(49.237% 0.02333 69.63deg);
    --color-code-punctuation: oklch(74.007% 0.03238 72.004deg);
    --color-code-string: oklch(73.473% 0.13199 38.782deg);
    --color-code-function: oklch(75.441% 0.0493 144.203deg);
    --color-code-number: oklch(85.261% 0.10916 84.434deg);
    --color-code-keyword: oklch(74.007% 0.03238 72.004deg);
  }
}

h1, .font-heading-1 {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: var(--font-size-800);
  letter-spacing: -0.025em;
}

h2, .font-heading-2 {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-600);
  letter-spacing: -0.025em;
}

h3, .font-heading-3 {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-500);
  letter-spacing: -0.025em;
}

h4, .font-heading-4 {
  font-family: "Tiempos Text", Georgia, serif;
  font-size: var(--font-size-400);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h5, .font-heading-5 {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-300);
  letter-spacing: -0.025em;
}

h6, .font-heading-6 {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-200);
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .columns {
    -moz-column-count: 2;
         column-count: 2;
  }
  .columns p {
    -moz-column-break-inside: avoid;
         break-inside: avoid-column;
  }
}
#site-footer {
  font-size: var(--font-size-300);
}
#site-footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1232px;
  margin-inline: auto;
  flex-direction: column-reverse;
  padding: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  #site-footer-container {
    align-items: stretch;
    flex-direction: row;
  }
}
#site-footer {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  text-align: center;
  padding-block: 5rem;
  color: var(--color-text-default);
  border-top: 1px solid var(--color-border-default);
  margin-top: auto;
}
#site-footer .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-default);
  gap: 3rem;
}
@media (min-width: 768px) {
  #site-footer .info {
    align-items: start;
  }
}
#site-footer .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4.235801032rem;
}
@media (min-width: 768px) {
  #site-footer .columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
#site-footer .columns .caption {
  font-weight: 600;
  color: var(--color-text-default);
}
#site-footer .columns div {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
}

#intercept {
  position: absolute;
  top: 10px;
}

#site-header {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 8px;
}
#site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.6180469716rem 1.618rem;
  border-radius: 16px;
  margin-inline: auto;
  background-color: color-mix(in oklch, var(--color-surface-elevated) 80%, transparent);
  backdrop-filter: blur(24px);
  box-shadow: none;
  transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}
#site-header.active .wrap {
  background-color: color-mix(in oklch, var(--color-surface-elevated) 80%, transparent);
  backdrop-filter: blur(24px);
  box-shadow: var(--color-shadow) 0px 2px 6px 0px, var(--color-shadow) 0px 1px 1px 0px;
  transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}
#site-header #brand a {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-500);
  letter-spacing: -0.025em;
  display: block;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  #site-header #brand a:hover {
    text-decoration: none;
  }
}
#site-header #hamburger {
  display: none;
}
#site-header #hamburger:checked ~ nav {
  display: block;
}
#site-header nav {
  display: none;
  flex-basis: 100%;
  width: 0;
  margin-block: 1.618rem;
}
#site-header nav ul {
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
}
#site-header nav ul li {
  display: block;
  font-size: var(--font-size-300);
  padding: 0;
}
#site-header nav ul li a {
  display: block;
  font-weight: 500;
}

@media (min-width: 768px) {
  #site-header {
    padding: 1rem;
  }
  #site-header .wrap {
    padding-block: 1rem;
    max-width: calc(1232px + 1rem * 2);
    background-color: unset;
    backdrop-filter: unset;
  }
  #site-header label {
    display: none;
  }
  #site-header nav {
    background-color: unset;
    flex-basis: unset;
    display: block;
    position: unset;
    border: 0;
    top: unset;
    left: unset;
    width: auto;
    margin: 0;
  }
  #site-header nav ul {
    flex-direction: row;
    gap: 3rem;
  }
  #site-header nav ul a {
    text-decoration: none;
    color: var(--color-text-muted);
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  #site-header nav ul a:hover {
    color: var(--color-text-default);
  }
}
.row-narrow {
  max-width: 40rem;
  margin-inline: auto;
}

.row-medium {
  max-width: 768px;
  margin-inline: auto;
}

.row-wide {
  max-width: 1232px;
  margin-inline: auto;
}

main {
  margin-block: 8rem;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  main {
    margin-top: 10rem;
  }
}
.responsive-video {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  aspect-ratio: 16/9;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.admonition {
  margin-block: 2.617924rem;
  border-radius: 12px;
  padding: 1rem;
  color: var(--color-text-muted);
  background-color: var(--color-surface-elevated);
}
.admonition--success {
  color: var(--color-text-success);
  background: var(--color-surface-success);
}
.admonition--warning {
  color: var(--color-text-warning);
  background: var(--color-surface-warning);
}
.admonition--danger {
  color: var(--color-text-danger);
  background: var(--color-surface-danger);
}
.admonition__title {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--font-size-200);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.6180469716rem;
}
.btn {
  all: unset;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--font-size-200);
  font-weight: 500;
  line-height: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    text-decoration: none;
  }
}
.btn {
  top: -5px;
  box-shadow: 0 5px 0 0 var(--color-border-default);
  transition: top 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    cursor: pointer;
    top: -3px;
    box-shadow: 0 3px 0 0 var(--color-border-default);
  }
}
.btn:active {
  top: 0;
  box-shadow: none;
  transition: top 80ms ease-in, box-shadow 80ms ease-in, background-color 80ms ease-in;
}
.btn.btn--primary {
  background-color: var(--color-surface-accent-primary);
  color: var(--color-surface-base);
  box-shadow: 0 5px 0 0 var(--color-border-accent-primary);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn--primary:hover {
    box-shadow: 0 3px 0 0 var(--color-border-accent-primary);
  }
}
.btn.btn--primary:active {
  box-shadow: none;
  background-color: var(--color-surface-accent-primary-active);
}
.btn.btn--secondary {
  border: 2px solid var(--color-border-default);
  color: var(--color-text-default);
  box-shadow: 0 5px 0 0 var(--color-border-default);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn--secondary:hover {
    box-shadow: 0 3px 0 0 var(--color-border-default);
  }
}
.btn.btn--secondary:active {
  box-shadow: none;
  background-color: var(--color-surface-elevated);
}

.card--outlined {
  padding: var(--font-size-300);
  border-radius: 12px;
  border: 1px solid var(--color-border-default);
}
.card__media {
  display: block;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 1200/630;
  background-color: var(--color-surface-elevated);
}
.card__media .card__image {
  width: 100%;
  display: block;
  height: auto;
  transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (hover: hover) and (pointer: fine) {
  .card__media .card__image:hover {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}
.card__category {
  color: var(--color-text-accent-primary);
  font-size: var(--font-size-200);
  font-weight: 600;
  margin-bottom: 4px;
  padding: 0;
  line-height: 1;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.card__title {
  font-family: "Tiempos Text", Georgia, serif;
  font-size: var(--font-size-400);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  margin-bottom: 4px;
}
.card__body {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.618;
  font-size: var(--font-size-300);
  color: var(--color-text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .card--horizontal {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  .card--horizontal:has(.card__media) {
    grid-template-columns: 128px 1fr;
  }
  .card--horizontal .card__media {
    aspect-ratio: 1/1;
    margin: 0;
  }
  .card--horizontal .card__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 768px) {
  .card-list {
    gap: 1rem;
  }
}

.codeblock {
  border-radius: 12px;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 2.617924rem;
  background-color: color-mix(in oklch, var(--color-surface-subtle) 20%, transparent);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.codeblock__header {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-default);
  font-weight: 400;
  font-size: var(--font-size-200);
  font-family: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

pre,
code {
  font-family: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 400;
  font-size: var(--font-size-200);
  border-radius: 12px;
}

pre {
  padding: 1rem;
  background-color: transparent !important;
}

:not(pre) > code {
  line-height: 1;
  padding: 0.2360828548rem;
  border: 1px solid var(--color-border-default);
  background-color: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  border-radius: 8px;
}

.code-wrapper {
  position: relative;
}

.code-content {
  overflow: auto;
}

.copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.6180469716rem;
  border: 0;
  border-radius: 12px;
  backdrop-filter: blur(24px);
  cursor: pointer;
  z-index: 10;
  color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .copy-button:hover {
    color: var(--color-text-default);
    background-color: var(--color-surface-subtle);
  }
}
.copy-button.copied {
  color: var(--color-text-success);
}

#comments {
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: 1.618rem;
}
#comments h2 {
  margin-bottom: 0.6180469716rem;
}
#comments .comments-prompt {
  color: var(--color-text-muted);
  background-color: var(--color-surface-elevated);
  padding: 1.618rem;
  border-radius: 12px;
}
#comments .comments-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}
#comments .comment-metadata {
  color: var(--color-text-muted);
}
#comments .comment-content {
  padding-block: 8px;
}
#comments .comment-content p:not(:last-child) {
  margin-bottom: 0.6180469716rem;
}
#comments .comment-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#comments .comment-author .comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#comments .comment-author .comment-author-info .comment-author-name {
  font-weight: 500;
  line-height: 1;
}
#comments .comment-author .comment-author-info .comment-author-handle {
  color: var(--color-text-muted);
  line-height: 1;
}
#comments .comment-author .comment-avatar-link img {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
}
#comments .comment-replies {
  margin-top: 1rem;
  margin-left: 12px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-left: 1px solid var(--color-border-default);
}

.comment-metadata {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: var(--font-size-200);
  color: var(--color-text-muted);
}
.comment-metadata .comment-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comment-metadata .comment-stat svg {
  width: 16px;
  height: 16px;
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 0.6180469716rem;
}

.entry {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-default);
  padding-bottom: 0.6180469716rem;
  align-items: center;
  gap: 0.6180469716rem;
}
.entry__title {
  font-size: var(--font-size-300);
  font-weight: 400;
  flex-grow: 1;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.entry__publication-date {
  text-transform: uppercase;
  color: var(--color-text-accent-primary);
  font-size: var(--font-size-100);
  font-weight: 600;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  white-space: nowrap;
  min-width: 6ch;
}
.entry__reading-time {
  display: none;
  text-align: right;
  font-weight: 400;
  font-size: var(--font-size-200);
  white-space: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .entry__reading-time {
    display: block;
  }
}

.link--muted, .link--body, p a, .link--default {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform 120ms ease-out;
}
.link--muted:active, .link--body:active, p a:active, .link--default:active {
  color: var(--color-text-muted);
  transform: scale(0.97) translate3d(0, 0, 0);
  transition: transform 80ms ease-in;
}
.-small.link--muted, .-small.link--body, p a.-small, .-small.link--default {
  font-size: var(--font-size-200);
}
@media (hover: hover) and (pointer: fine) {
  .link--muted:hover, .link--body:hover, p a:hover, .link--default:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 3px;
  }
}
.link--muted:active, .link--body:active, p a:active, .link--default:active {
  color: var(--color-text-muted);
}

/**
 * @atom Link
 **/
.link--body, p a {
  text-decoration: underline;
  text-decoration-color: var(--color-text-accent-primary);
}
@media (hover: hover) and (pointer: fine) {
  .link--body:hover, p a:hover {
    color: var(--color-text-accent-primary);
  }
}
.link--body:active, p a:active {
  color: var(--color-text-accent-primary-active);
}

.link--muted {
  text-decoration: none;
  color: var(--color-text-muted);
}
.link--muted:active {
  color: var(--color-text-default);
}

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

.skip-link {
  z-index: 999;
  padding: 1rem;
  line-height: 1;
  color: white;
  background-color: black;
  display: inline-block;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .skip-link:hover {
    text-decoration: none;
    color: white;
  }
}

.social-media {
  display: none;
}

@media (min-width: 768px) {
  .social-media {
    display: flex;
    align-items: center;
    gap: 0.6180469716rem;
  }
  .social-media svg {
    color: var(--color-text-muted);
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .social-media svg:hover {
    color: var(--color-text-accent-primary);
  }
}
@media (min-width: 768px) {
  .social-media svg:active {
    color: var(--color-text-accent-primary-active);
  }
}
ol.steps {
  counter-reset: docs-counter;
  list-style: none;
  padding-left: 40px;
}
ol.steps li.step {
  position: relative;
  counter-increment: docs-counter;
  margin-top: 10px;
}
ol.steps li.step::before {
  content: counter(docs-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  position: absolute;
  left: -40px;
  top: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 9999px;
  font-weight: 600;
  background-color: var(--color-surface-subtle);
}

.chroma {
  background-color: var(--color-code-background);
  color: var(--color-code-text);
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs {
  color: var(--color-code-comment);
  font-style: italic;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt {
  color: var(--color-code-keyword);
  font-weight: 600;
}

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss {
  color: var(--color-code-string);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  color: var(--color-code-number);
}

.chroma .n,
.chroma .na,
.chroma .nb,
.chroma .bp,
.chroma .nc,
.chroma .no,
.chroma .nd,
.chroma .ni,
.chroma .ne,
.chroma .nf,
.chroma .fm,
.chroma .nl,
.chroma .nn,
.chroma .nx,
.chroma .py,
.chroma .nt,
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm {
  color: var(--color-code-function);
}

.chroma .o,
.chroma .ow,
.chroma .p {
  color: var(--color-code-punctuation);
}

.chroma .l,
.chroma .ld {
  color: var(--color-code-text);
}

.chroma .kc {
  color: var(--color-code-number);
}

.chroma .gd {
  color: var(--color-text-danger);
  background-color: rgba(255, 0, 0, 0.1);
}

.chroma .gi {
  color: var(--color-text-success);
  background-color: rgba(0, 255, 0, 0.1);
}

.chroma .ge {
  font-style: italic;
}

.chroma .gs {
  font-weight: bold;
}

.chroma .gh,
.chroma .gu {
  color: var(--color-code-keyword);
  font-weight: bold;
}

.chroma .go {
  color: var(--color-text-muted);
}

.chroma .gp {
  color: var(--color-code-keyword);
  font-weight: bold;
}

.chroma .gt {
  color: var(--color-text-danger);
}

.chroma .err {
  color: var(--color-text-danger);
}

.chroma .w {
  color: var(--color-code-text);
}

.chroma .ln,
.chroma .lnt {
  color: var(--color-text-faint);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.chroma .hl {
  background-color: var(--color-surface-subtle);
  display: block;
  width: 100%;
}

/**
 * @atom Tag
 **/
.tag {
  display: inline-block;
  border-radius: 8px;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--font-size-100);
  font-weight: 500;
  color: var(--color-text-default);
  padding: 0.3819820591rem;
  background-color: var(--color-surface-elevated);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .tag:hover {
    text-decoration: none;
  }
}
.tag--danger, .tag--archived {
  color: var(--color-surface-base);
  background-color: var(--color-surface-danger);
}
.tag--warning, .tag--new-maintainer {
  color: var(--color-surface-base);
  background-color: var(--color-surface-warning);
}
.tag--success {
  color: var(--color-surface-base);
  background-color: var(--color-surface-success);
}
.tag-list {
  display: flex;
  gap: 0.3819820591rem;
  flex-wrap: wrap;
}

#testimonials {
  margin-block: 4.235801032rem;
}
#testimonials svg {
  color: var(--color-text-accent-primary);
  margin-bottom: 1rem;
}
#testimonials .testimonials__title {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: var(--font-size-800);
  letter-spacing: -0.025em;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: 4.235801032rem;
}
@media (min-width: 768px) {
  #testimonials .testimonial-list {
    max-height: 65rem;
    -moz-column-count: 3;
         column-count: 3;
    -webkit-column-break-after: always;
  }
}
#testimonials .testimonial-list .testimonial {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  padding: var(--font-size-400);
  border-radius: 12px;
  margin-bottom: 1rem;
  background-color: var(--color-surface-elevated);
}
@media (prefers-color-scheme: dark) {
  #testimonials .testimonial-list .testimonial {
    border: 1px solid var(--color-border-default);
    background-color: transparent;
  }
}
#testimonials .testimonial-list .testimonial__quote {
  display: block;
  font-size: var(--font-size-400);
  line-height: 1.5;
}
#testimonials .testimonial-list .testimonial__author {
  display: flex;
  margin-top: 1rem;
}
#testimonials .testimonial-list .testimonial__author-name {
  line-height: 1;
  font-weight: 600;
  font-size: var(--font-size-200);
}

.hero {
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .hero {
    text-align: center;
    margin-block: 4rem 6rem;
    max-width: 55rem;
    margin-inline: auto;
  }
}
.hero__title {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: var(--font-size-800);
  letter-spacing: -0.025em;
  font-weight: 600;
  font-size: clamp(1.728rem, 1.4022rem + 1.629vi, 2.6647rem);
}
@media (min-width: 768px) {
  .hero__title {
    font-size: clamp(2.0736rem, 1.5594rem + 2.5711vi, 3.552rem);
  }
}
.hero__title {
  margin-bottom: 1.618rem;
}
.hero__title .accent {
  color: var(--color-accent-primary);
  font-weight: 700;
}
.hero__subtitle {
  color: var(--color-text-muted);
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.618;
  font-size: var(--font-size-400);
  font-size: clamp(1.2rem, 1.0958rem + 0.5211vi, 1.4996rem);
}
@media (min-width: 768px) {
  .hero__subtitle {
    font-size: clamp(1.44rem, 1.2456rem + 0.9722vi, 1.999rem);
  }
}
.hero__subtitle {
  line-height: 1.5;
}
.hero__cta {
  margin-top: 2rem;
  width: 100%;
  font-size: clamp(1.2rem, 1.0958rem + 0.5211vi, 1.4996rem);
}
.hero__cta .btn--primary {
  width: 100%;
}
@media (min-width: 768px) {
  .hero__cta .btn--primary {
    width: auto;
  }
}

.heading-spacing {
  margin-top: 6rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .heading-spacing {
    flex-direction: row;
    align-items: center;
  }
}

.latest-posts {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 4rem;
  border-top: 1px solid var(--color-border-default);
  padding-top: 2rem;
}

.col-2 {
  display: grid;
  grid-auto-rows: min-content min-content 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .col-2 {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}

.col-3 {
  display: grid;
  grid-auto-rows: min-content min-content 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .col-3 {
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.col-4 {
  display: grid;
  grid-auto-rows: min-content min-content 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .col-4 {
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.page__header .page__title {
  margin-bottom: 0.666em;
}
.page__header .page__summary {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.618;
  font-size: var(--font-size-400);
  color: var(--color-text-muted);
  margin-top: 0;
}
.page__content {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.618;
  font-size: var(--font-size-300);
  margin-block: 2.617924rem;
}
.page__content h1, .page__content .page__header .page__title, .page__header .page__content .page__title,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5,
.page__content h6 {
  margin-top: 2em;
  margin-bottom: 0.666em;
}
.page__content p {
  margin-bottom: 2.617924rem;
}
.page__content img:first-child {
  margin: 0;
}
.page__content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.page__content img + em {
  font-size: var(--font-size-200);
}
.page__content img + em a {
  color: var(--color-text-muted);
}

.post #toc {
  display: none;
}
@media (min-width: 1450px) {
  .post #toc {
    display: block;
  }
}
.post #toc {
  top: 150px;
  position: sticky;
  border-left: 1px solid var(--color-border-default);
  padding: 1em;
}
.post #toc > p {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.0307em;
  font-size: var(--font-size-100);
  margin-bottom: 1rem;
}
.post #toc {
  float: right;
  max-width: 300px;
  font-size: var(--font-size-200);
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.post #toc nav ul {
  list-style: none;
  margin: 0;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.post #toc nav ul li a {
  color: var(--color-text-default);
}
@media (hover: hover) and (pointer: fine) {
  .post #toc nav ul li a:hover {
    color: var(--color-text-accent-primary);
  }
}
.post #toc nav ul li a:active {
  color: var(--color-text-accent-primary-active);
}
.post #toc nav > ul {
  padding-left: 0;
}
.post img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  -o-object-fit: contain;
     object-fit: contain;
}
.post__header {
  max-width: 768px;
  margin-inline: auto;
}
.post__header img {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
@media (min-width: 768px) {
  .post__header {
    text-align: center;
  }
}
.post__header .post__title {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: var(--font-size-800);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 1rem;
}
.post__header .post__summary {
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.618;
  font-size: var(--font-size-400);
  color: var(--color-text-muted);
  margin-top: 0;
}
.post__header .post__metadata {
  margin-block: 0.6180469716rem;
  font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--font-size-200);
  color: var(--color-text-muted);
  font-weight: 500;
}
.post__header .post__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
}
@media (min-width: 768px) {
  .post__header .post__tags {
    justify-content: center;
  }
}
.post .post__cover {
  max-width: 768px;
  margin-inline: auto;
  margin-top: 1.618rem;
  max-height: unset;
}
.post .post__cover img {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.post .post__content {
  margin-top: 1rem;
}
.post .post__content img {
  max-height: 450px;
  background-color: white;
}
.post .post__content h1,
.post .post__content h2,
.post .post__content h3,
.post .post__content h4,
.post .post__content h5,
.post .post__content h6 {
  margin-top: 2.617924rem;
  margin-bottom: 1rem;
  scroll-margin-top: 120px;
}
.post .post__content p {
  margin-bottom: 2em;
}
.post .post__content li {
  margin-bottom: 0.3819820591rem;
}
.post .post__content li p {
  margin-bottom: 0.6180469716rem;
}
.post .post__content h1,
.post .post__content h2,
.post .post__content h3,
.post .post__content h4,
.post .post__content h5,
.post .post__content h6,
.post .post__content p,
.post .post__content ol,
.post .post__content ul,
.post .post__content blockquote,
.post .post__content .admonition {
  max-width: 40rem;
  margin-inline: auto;
}
.post .post__content table,
.post .post__content figure,
.post .post__content aside blockquote {
  max-width: calc(40rem + 4rem);
  margin-inline: auto;
}
.post .post__content table p,
.post .post__content figure p,
.post .post__content aside blockquote p {
  max-width: unset;
  margin-inline: unset;
}
.post .post__content aside blockquote {
  font-family: "Tiempos Text", Georgia, serif;
}
@media (min-width: 768px) {
  .post .post__content {
    margin-top: 3rem;
  }
}
.post .post__content .footnotes {
  max-width: 40rem;
  margin-inline: auto;
}
.post .post__content .footnotes hr {
  display: none;
}
.post .post__content .footnotes::before {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-600);
  letter-spacing: -0.025em;
  display: block;
  content: "References";
  margin-top: 2em;
  margin-bottom: 0.666em;
}

.post__related {
  max-width: 1232px;
  margin-inline: auto;
  margin-top: 8rem;
}
.post__related .post__related-title {
  margin-bottom: 0.666em;
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: var(--font-size-500);
  letter-spacing: -0.025em;
  text-align: center;
}

.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
}

.stack--horizontal {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-block: 1rem;
}

.color-palette-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 2rem;
}

.color-palette {
  margin: 0;
  padding: 0;
  list-style: none;
}
.color-palette p {
  font-weight: 600;
}
.color-palette__shade {
  display: block;
  padding: 8px;
  font-size: var(--font-size-200);
  font-weight: 500;
  box-shadow: 0 1px 2px 0 var(--color-shadow);
}
.color-palette__shade.-inverse {
  color: white;
}
.color-palette__shade:first-of-type {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.color-palette__shade:last-of-type {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.full-width {
  width: 100%;
}

.mb-2 {
  margin-bottom: 4rem;
}

.horizontal-bar {
  display: inline-block;
  height: 1rem;
  background-color: var(--color-surface-success);
}

.swatch {
  height: 3rem;
  border-radius: 8px;
}

.theme-surface {
  min-width: -moz-max-content;
  min-width: max-content;
  border-radius: 8px;
  display: flex;
  gap: 4px;
  flex-direction: column;
}