@use "sass:color";
:root {
  /**
   * NEUTRAL COLORS
   **/
  --color-base-50-hsl: 43, 33%, 96%;
  --color-base-50-display-p3: color(display-p3 0.98 0.98 0.97);
  --color-base-50: #f8f6f1;
  --color-base-100: #e9e5da;
  --color-base-200: #dcd7c9;
  --color-base-300: #c7c1b3;
  --color-base-600: #4b4943;
  --color-base-950: #1d1b16;
  /**
   * BASE COLORS
   **/
  --color-red-600: #e22222;
  --color-red-700: #bd1b1b;
  /**
   * SEMANTIC COLORS
   **/
  --color-accent-600: var(--color-red-600);
  --color-accent-700: var(--color-red-700);
  --color-background: var(--color-base-50);
  --color-border: var(--color-base-100);
  --color-shadow: rgba(var(--color-base-950), 0.1); }

:root {
  --color-text-default: var(--color-base-950);
  --color-text-muted: var(--color-base-600);
  --color-text-faint: var(--color-base-300);
  --color-text-link: inherit;
  --color-text-link-hover: var(--color-accent-700);
  --color-text-on-accent: var(--color-base-50); }

:root {
  --button-primary: var(--color-base-600);
  --button-primary-hover: var(--color-base-950);
  --button-primary-text: var(--color-base-50);
  --button-primary-hover-text: var(--color-base-50);
  --button-secondary: var(--color-base-100);
  --button-secondary-hover: var(--color-base-200);
  --button-secondary-text: var(--color-base-950);
  --button-secondary-hover-text: var(--color-base-950); }

:root {
  --color-surface--info: #c7d6e9;
  --color-surface-hover--info: #a7bfdc;
  --color-surface-text--info: #133964;
  --color-surface--success: #d1d9b5;
  --color-surface-hover--success: #b6c38b;
  --color-surface-text--success: #425207;
  --color-surface--warning: #e3d4a7;
  --color-surface-hover--warning: #d2bb74;
  --color-surface-text--warning: #473600;
  --color-surface--danger: #eccecc;
  --color-surface-hover--danger: #e1b1af;
  --color-surface-text--danger: #691d19; }

* {
  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 {
  color: var(--color-text-default);
  background-color: var(--color-background);
  font-size: var(--font-size-300);
  min-height: 100vh;
  display: flex;
  flex-direction: column; }

a {
  color: inherit;
  font-weight: inherit; }
  a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em; }

table {
  width: 100%;
  border-collapse: separate;
  /* Changed from collapse to separate */
  border-spacing: 0;
  background-color: white;
  border-radius: var(--border-radius);
  /* Added for rounded corners */
  border: 1px solid var(--color-border);
  /* Added to maintain border */
  font-size: var(--font-size-200);
  margin-bottom: var(--space-paragraph); }

table th,
table td {
  border: 1px solid var(--color-border);
  border-top: 0;
  /* Remove top border to avoid double borders */
  border-left: 0;
  /* Remove left border to avoid double borders */
  padding: var(--space-75) var(--space-150); }

table th:last-child,
table td:last-child {
  border-right: 0;
  /* Remove right border on last column */ }

table tr:last-child td {
  border-bottom: 0;
  /* Remove bottom border on last row */ }

table th {
  background-color: var(--color-base-50);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  font-family: var(--font-family-ui); }

.table-wrapper {
  max-width: var(--layout-narrow);
  margin-inline: auto;
  overflow: auto; }

blockquote {
  border-left: var(--space-50) solid var(--color-border);
  padding-inline: var(--space-200);
  margin-block: var(--space-paragraph);
  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: var(--font-weight-semibold); }

ul,
ol {
  margin: 0;
  padding: 0;
  margin-bottom: var(--space-paragraph);
  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-base-300); }

figure {
  margin-bottom: var(--space-paragraph); }
  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 {
  --space-25: 0.125rem;
  --space-50: 0.25rem;
  --space-75: 0.375rem;
  --space-100: 0.5rem;
  --space-150: 0.75rem;
  --space-200: 1rem;
  --space-250: 1.25rem;
  --space-300: 1.5rem;
  --space-400: 2rem;
  --space-500: 2.5rem;
  --space-600: 3rem;
  --space-800: 4rem;
  --space-1000: 5rem;
  --space-unit: 1em;
  --space-xxs: calc(var(--space-xs) / 1.618);
  --space-xs: calc(var(--space-sm) / 1.618);
  --space-sm: calc(var(--space-md) / 1.618);
  --space-md: calc(var(--space-unit));
  --space-lg: calc(var(--space-md) * 1.618);
  --space-xl: calc(var(--space-lg) * 1.618);
  --space-xxl: calc(var(--space-xl) * 1.618);
  --space-paragraph: var(--space-lg); }

.mt-400 {
  margin-top: var(--space-400); }

@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; }

:root {
  --font-family-body: "Tiempos Text", Georgia, serif;
  --font-family-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-weight-heavy: 900; }

: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-size-landing-100: clamp(0.6331rem, 0.7158rem + -0.1066vi, 0.6944rem);
  --font-size-landing-200: clamp(0.8333rem, 0.8296rem + 0.0185vi, 0.844rem);
  --font-size-landing-300: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
  --font-size-landing-400: clamp(1.2rem, 1.0958rem + 0.5211vi, 1.4996rem);
  --font-size-landing-500: clamp(1.44rem, 1.2456rem + 0.9722vi, 1.999rem);
  --font-size-landing-600: clamp(1.728rem, 1.4022rem + 1.629vi, 2.6647rem);
  --font-size-landing-700: clamp(2.0736rem, 1.5594rem + 2.5711vi, 3.552rem);
  --font-size-landing-800: clamp(2.4883rem, 1.7069rem + 3.907vi, 4.7348rem); }

body {
  font-family: var(--font-family-body);
  line-height: 1.618; }

/*
 * HEADINGS
 */
h1, .font-heading-1, .page__header .page__title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-800);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.0307em; }

h2, .font-heading-2 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-600);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

h3, .font-heading-3 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-500);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

h4, .font-heading-4 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-400);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

h5, .font-heading-5 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-300);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

h6, .font-heading-6 {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-200);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

:root {
  --border-radius: var(--space-sm);
  --border-radius-pill: 9999px;
  --layout-narrow: 40rem;
  --layout-medium: 768px;
  --layout-wide: 1024px; }

.admonition {
  margin-block: var(--space-paragraph);
  background-color: var(--color-base-50);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  border: 1px solid var(--color-base-300);
  border-bottom-width: 4px; }
  .admonition__title {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-200); }
  .admonition__content *:first-child {
    margin-top: 0; }
  .admonition--info {
    background-color: #e8eef6;
    border-color: #3d73b2;
    color: #3d73b2; }
    .admonition--info .admonition__title {
      color: #3d73b2; }
  .admonition--success {
    background-color: #ecefe1;
    border-color: #526709;
    color: #526709; }
    .admonition--success .admonition__title {
      color: #526709; }
  .admonition--warning {
    background-color: #f3eedb;
    border-color: #8e6c01;
    color: #8e6c01; }
    .admonition--warning .admonition__title {
      color: #8e6c01; }
  .admonition--danger {
    background-color: #f7ebea;
    border-color: #bb4e48;
    color: #bb4e48; }
    .admonition--danger .admonition__title {
      color: #bb4e48; }

.btn--icon, .btn--secondary, .btn--primary {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  line-height: 1.618;
  font-size: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: inline-flex;
  border-radius: var(--border-radius-pill);
  padding: 0.6em 1em;
  line-height: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: 2px solid transparent;
  position: relative; }
  .btn--icon:hover, .btn--secondary:hover, .btn--primary:hover {
    text-decoration: none;
    cursor: pointer; }

/**
 * @atom Button
 **/
.btn--primary {
  background-color: var(--button-primary);
  color: var(--button-primary-text); }
  .btn--primary:hover {
    background-color: var(--button-primary-hover);
    color: var(--button-primary-hover-text); }

.btn--secondary {
  background-color: var(--button-secondary);
  color: var(--button-secondary-text); }
  .btn--secondary:hover {
    color: black;
    background-color: var(--button-secondary-hover);
    color: var(--button-secondary-hover-text); }

.btn--icon {
  padding: var(--space-xs);
  border-radius: var(--border-radius-pill);
  background-color: var(--color-base-100); }
  .btn--icon:hover {
    background-color: var(--color-base-200); }

.card--outlined {
  padding: var(--font-size-300);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border); }

.card__category {
  color: var(--color-accent-700);
  font-size: var(--font-size-200);
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: var(--font-family-ui); }

.card__media {
  display: block;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: var(--border-radius);
  aspect-ratio: 1200 / 630;
  background-color: var(--color-base-100); }
  .card__media .card__image {
    width: 100%;
    display: block;
    height: auto;
    transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }
    .card__media .card__image:hover {
      transform: scale(1.05) translate3d(0, 0, 0); }

.card .card__title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-300);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm); }

.card .card__subtitle {
  font-size: var(--font-size-200);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm); }

.card__body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-200);
  font-weight: var(--font-size-regular);
  line-height: 1.618;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: var(--space-sm); }

.card--large .card__title {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-400);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em; }

.card--large .card__body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-300);
  font-weight: var(--font-size-regular);
  line-height: 1.618; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 4rem; }

.card--horizontal {
  display: flex;
  flex-direction: row; }

.badge-list {
  background-color: var(--color-base-100);
  padding: var(--space-lg);
  border-radius: 30px;
  margin-block: 5rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center; }
  @media (min-width: 768px) {
    .badge-list {
      grid-template-columns: 1fr 1fr; } }
.entry-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); }

.entry {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
  align-items: center;
  gap: var(--space-sm); }
  .entry__title {
    font-size: var(--font-size-300);
    font-weight: 400;
    flex-grow: 1; }
  .entry__publication-date {
    text-transform: uppercase;
    color: var(--color-accent-700);
    font-size: var(--font-size-100);
    font-weight: 600;
    font-family: var(--font-family-ui);
    white-space: nowrap;
    min-width: 6ch; }
  .entry__reading-time {
    display: none;
    text-align: right;
    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; } }
.codeblock {
  border-radius: var(--border-radius);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-paragraph);
  background-color: rgba(0, 0, 0, 0.02);
  display: grid;
  overflow-x: auto;
  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: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-200);
    font-family: var(--font-family-mono); }

pre,
code {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-200);
  border-radius: var(--border-radius); }

pre {
  padding: var(--space-md);
  background-color: transparent !important; }

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

.hamburger {
  border: none;
  cursor: pointer;
  padding: var(--space-100); }
  .hamburger:hover {
    background-color: var(--color-base-100);
    border-radius: 9999px; }

.link--muted, .link--body, p a, .link--default {
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px; }
  .-small.link--muted, .-small.link--body, p a.-small, .-small.link--default {
    font-size: var(--font-size-200); }
  .link--muted:hover, .link--body:hover, p a:hover, .link--default:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 3px; }

/**
 * @atom Link
 **/
.link--body, p a {
  color: var(--color-text-link);
  text-decoration: underline; }
  .link--body:hover, p a:hover {
    color: var(--color-text-link-hover); }

.link--muted {
  color: var(--color-base-600); }
  .link--muted:hover {
    color: var(--color-base-950); }

.page__header .page__title {
  margin-bottom: 0.666em; }

.page__header .page__summary {
  font-family: var(--font-family-body);
  font-size: var(--font-size-400);
  font-weight: var(--font-size-regular);
  line-height: 1.618;
  color: var(--color-text-muted);
  margin-top: 0; }

.page__content {
  font-family: var(--font-family-body);
  font-size: var(--font-size-300);
  font-weight: var(--font-size-regular);
  line-height: 1.618;
  margin-top: var(--space-400);
  margin-bottom: var(--space-1000); }
  .page__content h1, .page__content .font-heading-1, .page__content .page__header .page__title, .page__header .page__content .page__title,
  .page__content h2,
  .page__content .font-heading-2,
  .page__content h3,
  .page__content .font-heading-3,
  .page__content h4,
  .page__content .font-heading-4,
  .page__content h5,
  .page__content .font-heading-5,
  .page__content h6,
  .page__content .font-heading-6 {
    margin-top: 2em;
    margin-bottom: 0.666em; }
  .page__content p {
    margin-bottom: var(--space-paragraph); }
  .page__content img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius); }
    .page__content img:first-child {
      margin: 0; }
    .page__content img + em {
      font-size: var(--font-size-200); }
      .page__content img + em a {
        color: var(--color-text-muted); }

.post #toc {
  display: none;
  top: 150px;
  position: sticky;
  border-left: 1px solid var(--color-border);
  padding: 1em;
  float: right;
  max-width: 300px;
  font-size: var(--font-size-200);
  font-family: var(--font-family-ui); }
  @media (min-width: 1450px) {
    .post #toc {
      display: block; } }
  .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 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-base-600); }
      .post #toc nav ul li a:hover {
        color: var(--color-base-950); }
  .post #toc nav > ul {
    padding-left: 0; }

.post img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  -o-object-fit: contain;
     object-fit: contain; }

.post__header {
  max-width: var(--layout-medium);
  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: var(--font-family-ui);
    font-size: var(--font-size-800);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.0307em;
    text-wrap: balance;
    margin-bottom: 1rem; }
  .post__header .post__summary {
    font-family: var(--font-family-body);
    font-size: var(--font-size-400);
    font-weight: var(--font-size-regular);
    line-height: 1.618;
    color: var(--color-text-muted);
    margin-top: 0; }
  .post__header .post__metadata {
    margin-block: var(--space-200);
    font-family: var(--font-family-ui);
    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__related {
  max-width: var(--layout-wide);
  margin-inline: auto;
  margin-top: 8rem; }
  .post .post__related .post__related-title {
    margin-bottom: 0.666em;
    font-family: var(--font-family-ui);
    font-size: var(--font-size-500);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
    text-align: center; }

.post .post__cover {
  max-width: var(--layout-medium);
  margin-inline: auto;
  margin-top: var(--space-300);
  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; }
  .post .post__content h1, .post .post__content .font-heading-1, .post .post__content .page__header .page__title, .page__header .post .post__content .page__title,
  .post .post__content h2,
  .post .post__content .font-heading-2,
  .post .post__content h3,
  .post .post__content .font-heading-3,
  .post .post__content h4,
  .post .post__content .font-heading-4,
  .post .post__content h5,
  .post .post__content .font-heading-5,
  .post .post__content h6,
  .post .post__content .font-heading-6 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    scroll-margin-top: 120px; }
  .post .post__content p {
    margin-bottom: var(--space-paragraph); }
  .post .post__content li {
    margin-bottom: var(--space-sm); }
    .post .post__content li p {
      margin-bottom: var(--space-md); }
  .post .post__content h1, .post .post__content .font-heading-1, .post .post__content .page__header .page__title, .page__header .post .post__content .page__title,
  .post .post__content h2,
  .post .post__content .font-heading-2,
  .post .post__content h3,
  .post .post__content .font-heading-3,
  .post .post__content h4,
  .post .post__content .font-heading-4,
  .post .post__content h5,
  .post .post__content .font-heading-5,
  .post .post__content h6,
  .post .post__content .font-heading-6,
  .post .post__content p,
  .post .post__content ol,
  .post .post__content ul,
  .post .post__content blockquote,
  .post .post__content .admonition {
    max-width: var(--layout-narrow);
    margin-inline: auto; }
  .post .post__content table,
  .post .post__content figure,
  .post .post__content aside blockquote {
    max-width: calc(var(--layout-narrow) + 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; }
  @media (min-width: 768px) {
    .post .post__content {
      margin-top: 3rem; } }
  .post .post__content .footnotes {
    max-width: var(--layout-narrow);
    margin-inline: auto; }
    .post .post__content .footnotes hr {
      display: none; }
    .post .post__content .footnotes::before {
      font-family: var(--font-family-ui);
      font-size: var(--font-size-600);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.025em;
      display: block;
      content: "References";
      margin-top: 2em;
      margin-bottom: 0.666em; }

.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: var(--space-md);
  line-height: 1;
  color: white;
  background-color: black;
  display: inline-block;
  text-align: center; }
  .skip-link:hover {
    text-decoration: none;
    color: white; }

/**
 * @atom Tag
 **/
.tag {
  display: inline-block;
  border-radius: var(--border-radius);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-default);
  padding: var(--space-xs);
  background-color: var(--color-base-100);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none; }
  .tag:hover {
    text-decoration: none;
    background-color: var(--color-base-200); }
  .tag--info, .tag--new-maintainer {
    background-color: var(--color-surface--info);
    color: var(--color-surface-text--info); }
    .tag--info:hover, .tag--new-maintainer:hover {
      background-color: var(--color-surface-hover--info); }
  .tag--danger, .tag--archived {
    background-color: var(--color-surface--danger);
    color: var(--color-surface-text--danger); }
    .tag--danger:hover, .tag--archived:hover {
      background-color: var(--color-surface-hover--danger); }
  .tag--warning {
    background-color: var(--color-surface--warning);
    color: var(--color-surface-text--warning); }
    .tag--warning:hover {
      background-color: var(--color-surface-hover--warning); }
  .tag--success {
    background-color: var(--color-surface--success);
    color: var(--color-surface-text--success); }
    .tag--success:hover {
      background-color: var(--color-surface-hover--success); }

.tag-list {
  display: flex;
  gap: var(--space-100);
  flex-wrap: wrap; }

#testimonials {
  margin-block: 5rem; }
  #testimonials svg {
    color: var(--color-accent-600);
    margin-bottom: var(--space-200); }
  #testimonials .testimonials__overline {
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    margin-bottom: 0;
    text-align: center; }
  #testimonials .testimonials__title {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-800);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.0307em;
    text-align: center;
    max-width: var(--layout-narrow);
    margin-inline: auto;
    margin-bottom: 1.5em; }
  @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;
    background-color: var(--color-base-100);
    padding: var(--font-size-400);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-200); }
    #testimonials .testimonial-list .testimonial__quote {
      display: block;
      font-size: var(--font-size-400);
      line-height: 1.44;
      margin-bottom: var(--space-md); }
    #testimonials .testimonial-list .testimonial__author-name {
      line-height: 1;
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-200);
      margin-bottom: var(--space-xxs); }
    #testimonials .testimonial-list .testimonial__author-role {
      margin: 0;
      font-size: var(--font-size-100);
      font-family: var(--font-family-ui);
      font-weight: var(--font-weight-medium); }

.social-media {
  display: flex;
  align-items: center;
  gap: var(--space-xs); }
  .social-media svg {
    color: var(--color-base-600); }
    .social-media svg:hover {
      color: var(--color-base-950); }

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

#site-header {
  font-family: var(--font-family-ui);
  z-index: 99;
  position: fixed;
  top: 0;
  padding-inline: 8px;
  width: 100%;
  padding-top: 8px;
  transition: padding 200ms ease, box-shadow 200ms ease; }
  #site-header .wrap {
    padding-block: var(--space-100);
    padding-inline: 24px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin-inline: auto;
    background-color: rgba(248, 246, 241, 0.8);
    -webkit-backdrop-filter: blur(24px);
            backdrop-filter: blur(24px);
    transition: box-shadow 200ms ease;
    display: flex;
    flex-wrap: wrap; }
  #site-header.active .wrap {
    box-shadow: rgba(143, 149, 163, 0.15) 0px 2px 6px 0px, rgba(143, 149, 163, 0.15) 0px 1px 1px 0px;
    transition: box-shadow 200ms ease; }
  #site-header #brand a {
    display: block;
    line-height: 1;
    font-weight: 500;
    font-family: var(--font-family-body);
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--color-base-600); }
  #site-header #hamburger {
    display: none; }
    #site-header #hamburger:checked ~ nav {
      display: block; }
  #site-header nav {
    display: none;
    flex-basis: 100%;
    width: 0; }
    #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-200);
        padding: 0; }
        #site-header nav ul li a {
          display: block;
          font-weight: var(--font-weight-medium); }

@media (min-width: 768px) {
  #site-header {
    padding-block: var(--space-200);
    padding-inline: 3rem; }
    #site-header .wrap {
      padding-block: 1.2rem;
      max-width: calc(var(--layout-wide) + var(--space-200) * 2); }
    #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; }
      #site-header nav ul {
        flex-direction: row; }
        #site-header nav ul a {
          text-decoration: none;
          color: var(--color-text-muted); }
          #site-header nav ul a:hover {
            color: var(--color-text-default); } }

main {
  margin-top: 8rem;
  padding-inline: var(--space-300); }

@media (min-width: 768px) {
  main {
    margin-top: 10rem; } }

#site-footer {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-200);
  text-align: center;
  padding-block: 5rem;
  color: rgba(255, 255, 255, 0.87);
  background-color: var(--color-base-950);
  margin-top: auto; }
  #site-footer-container {
    display: flex;
    justify-content: space-between;
    max-width: var(--layout-wide);
    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 a {
    text-decoration: none; }
  #site-footer a:hover {
    color: rgba(255, 255, 255, 0.56); }
  #site-footer .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.56);
    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: var(--space-600); }
    @media (min-width: 768px) {
      #site-footer .columns {
        grid-template-columns: 1fr 1fr 1fr; } }
    #site-footer .columns .caption {
      color: rgba(255, 255, 255, 0.56); }
    #site-footer .columns div {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px; }

.row-narrow {
  max-width: var(--layout-narrow);
  margin-inline: auto; }

.row-wide {
  max-width: var(--layout-wide);
  margin-inline: auto; }

.hero {
  margin-bottom: 10rem; }
  .hero__title {
    font-family: var(--font-family-ui);
    font-size: var(--font-size-800);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.0307em;
    font-weight: 600;
    font-size: var(--font-size-landing-600);
    margin-bottom: var(--space-200); }
    .hero__title .accent {
      color: var(--color-accent-600);
      font-weight: 700; }
  .hero__subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-400);
    font-weight: var(--font-size-regular);
    line-height: 1.618; }
  .hero__cta {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 2rem;
    flex-wrap: wrap; }
    @media (min-width: 768px) {
      .hero__cta {
        flex-direction: row; } }
.heading-spacing {
  margin-top: 2em;
  margin-bottom: 0.666em; }

.featured-posts {
  gap: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2rem; }
  @media (min-width: 768px) {
    .featured-posts {
      grid-template-columns: 1fr 1fr; } }
.latest-posts {
  padding-top: 4rem;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 4rem; }
  @media (min-width: 768px) {
    .latest-posts {
      grid-template-columns: 1fr 1fr 1fr; } }
.card-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: var(--space-200); }

.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: var(--font-weight-semibold); }
  .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: var(--border-radius);
      border-top-right-radius: var(--border-radius); }
    .color-palette__shade:last-of-type {
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius); }

.full-width {
  width: 100%; }

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

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

.responsive-video {
  position: relative;
  max-width: var(--layout-narrow);
  margin-inline: auto;
  aspect-ratio: 16 / 9; }
  .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

@media (min-width: 768px) {
  .columns {
    -moz-column-count: 2;
         column-count: 2; }
    .columns p {
      -moz-column-break-inside: avoid;
           break-inside: avoid-column; } }