@charset "UTF-8";
.is-layout-flow > * {
  margin-block-start: unset;
  margin-block-end: unset;
}

.is-layout-flow > :last-child {
  margin-block-end: unset;
}

.is-layout-flex > :is(*, div) {
  margin: unset;
}

:where(.wp-block-social-links:not(.is-style-logos-only)) [class*=wp-social-link-] {
  background-color: unset;
  color: unset;
}

:where(.wp-block-social-links .wp-social-link a) {
  padding: unset;
}

.wp-site-blocks {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--holy-grid-gap, 3rem);
}

@layer base, compositions, utilities, components, others;
:root {
  --color-primary-50: oklch(0.957 0.017 279.11);
  --color-primary-100: oklch(0.924 0.031 279.88);
  --color-primary-200: oklch(0.839 0.066 277.32);
  --color-primary-300: oklch(0.763 0.1 274.96);
  --color-primary-400: oklch(0.68 0.138 272.11);
  --color-primary-500: oklch(0.602 0.173 268.46);
  --color-primary-600: oklch(0.518 0.18 265.34);
  --color-primary-700: oklch(0.44 0.152 265.45);
  --color-primary-800: oklch(0.35 0.122 265.41);
  --color-primary-900: oklch(0.271 0.094 265.49);
  --color-primary-950: oklch(0.202 0.071 265.65);
  --color-secondary-50: oklch(95.56% 0.053 91.75);
  --color-secondary-100: oklch(92.23% 0.108 94.74);
  --color-secondary-200: oklch(84.26% 0.143 96.77);
  --color-secondary-300: oklch(75.79% 0.129 96.6);
  --color-secondary-400: oklch(66.36% 0.112 96.76);
  --color-secondary-500: oklch(57.67% 0.097 96.55);
  --color-secondary-600: oklch(48.97% 0.083 96.42);
  --color-secondary-700: oklch(40.47% 0.068 97.67);
  --color-secondary-800: oklch(30.97% 0.052 96.26);
  --color-secondary-900: oklch(22.21% 0.037 96.93);
  --color-secondary-950: oklch(17.78% 0.031 96.91);
  --color-neutral-0: oklch(99% 0 0);
  --color-neutral-50: oklch(96.42% 0 0);
  --color-neutral-100: oklch(92.19% 0 0);
  --color-neutral-200: oklch(85.45% 0 0);
  --color-neutral-300: oklch(77.63% 0 0);
  --color-neutral-400: oklch(70.58% 0 0);
  --color-neutral-500: oklch(63.34% 0 0);
  --color-neutral-600: oklch(53.48% 0 0);
  --color-neutral-700: oklch(43.13% 0 0);
  --color-neutral-800: oklch(33.68% 0 0);
  --color-neutral-900: oklch(23.08% 0 0);
  --color-neutral-950: oklch(18.67% 0 0);
  --color-neutral-1000: oklch(1% 0 0);
  --color-positive-50: oklch(95.03% 0.058 156.55);
  --color-positive-100: oklch(90.9% 0.113 156.37);
  --color-positive-200: oklch(82.72% 0.138 156.33);
  --color-positive-300: oklch(74.31% 0.124 156.3);
  --color-positive-400: oklch(66.82% 0.111 156.33);
  --color-positive-500: oklch(58.23% 0.096 156.34);
  --color-positive-600: oklch(48.98% 0.081 156.29);
  --color-positive-700: oklch(40.58% 0.067 156.35);
  --color-positive-800: oklch(31.33% 0.052 156.36);
  --color-positive-900: oklch(22.92% 0.038 155.81);
  --color-positive-950: oklch(17.38% 0.029 156.89);
  --color-negative-50: oklch(95.82% 0.016 12.9);
  --color-negative-100: oklch(92.6% 0.03 15.21);
  --color-negative-200: oklch(85.25% 0.065 14.95);
  --color-negative-300: oklch(77.08% 0.11 15.68);
  --color-negative-400: oklch(69.99% 0.158 17.28);
  --color-negative-500: oklch(63% 0.213 20.1);
  --color-negative-600: oklch(53.1% 0.183 20.41);
  --color-negative-700: oklch(43.14% 0.149 19.95);
  --color-negative-800: oklch(34.16% 0.117 20.21);
  --color-negative-900: oklch(24.31% 0.083 20.44);
  --color-negative-950: oklch(18.45% 0.065 20.52);
  --color-informative-50: oklch(95.66% 0.017 247.99);
  --color-informative-100: oklch(92.11% 0.032 251.12);
  --color-informative-200: oklch(83.39% 0.07 245.45);
  --color-informative-300: oklch(75.46% 0.11 241.35);
  --color-informative-400: oklch(66.8% 0.111 240.3);
  --color-informative-500: oklch(57.54% 0.094 239.81);
  --color-informative-600: oklch(48.94% 0.08 239.68);
  --color-informative-700: oklch(40.35% 0.067 240.39);
  --color-informative-800: oklch(31.6% 0.053 240.83);
  --color-informative-900: oklch(22.19% 0.038 241.71);
  --color-informative-950: oklch(17.55% 0.029 241.89);
  --color-notice-50: oklch(96.72% 0.018 48.57);
  --color-notice-100: oklch(92.59% 0.042 48.26);
  --color-notice-200: oklch(86.02% 0.087 53.16);
  --color-notice-300: oklch(78.72% 0.152 60.4);
  --color-notice-400: oklch(70.12% 0.159 63.44);
  --color-notice-500: oklch(60.38% 0.137 63.51);
  --color-notice-600: oklch(50.7% 0.115 63.44);
  --color-notice-700: oklch(41.99% 0.096 62.62);
  --color-notice-800: oklch(32.34% 0.073 63.83);
  --color-notice-900: oklch(23.76% 0.054 63.5);
  --color-notice-950: oklch(18.07% 0.041 63.61);
  --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
  --font-stack-sans: 'Alegreya Sans', sans-serif;
  --font-stack-serif: 'EB Garamond', serif;
  --font-stack-mono: "SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace";
  --font-test: 'Switzer-Variable';
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);
}

:root {
  --color-text: #202020;
  --color-text-muted: var(--color-neutral-500);
  --color-page-background: #faf6f5;
  --color-img-background: var(--color-neutral-100);
  --color-border: var(--color-neutral-100);
  --card-bg-hover: var();
  --color-active: var(--color-primary-900);
  --gutter: var(--space-xl);
  --gutter-sm: var(--space-s-m);
  --grid-gap: var(--gutter);
  --wrapper-max-width: none;
  --region-space: var(--space-xl);
  --holy-grid-gap: var(--space-3xl);
  --article-gap: var(--space-3xl);
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

:root {
  --font-family-primary: var(--font-stack-sans);
  --font-family-secondary: var(--font-stack-serif);
  --font-family-text: var(--font-test);
  --font-family-heading: var(--font-test);
  --font-test-heading: 500.0;
  --font-test-text: 300.0;
  --font-test-bold: 500.0;
  --line-height-tight: 1.2;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.8;
  --max-width-text: 65ch;
  --max-width-heading: 30ch;
}

:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease;
}

:root {
  --state-color-primary: var(--color-neutral-0);
  --state-bg-primary: var(--color-primary-500);
  --state-border-primary: var(--color-primary-500);
  --state-color-hover-primary: var(--color-primary-500);
  --state-bg-hover-primary: var(--color-primary-100);
  --state-border-hover-primary: var(--color-primary-100);
  --state-color-secondary: var(--color-neutral-0);
  --state-bg-secondary: var(--color-secondary-500);
  --state-border-secondary: var(--color-secondary-500);
  --state-color-hover-secondary: var(--color-secondary-500);
  --state-bg-hover-secondary: var(--color-secondary-100);
  --state-border-hover-secondary: var(--color-secondary-100);
  --state-color-positive: var(--color-neutral-0);
  --state-bg-positive: var(--color-positive-500);
  --state-border-positive: var(--color-positive-500);
  --state-color-hover-positive: var(--color-positive-500);
  --state-bg-hover-positive: var(--color-positive-50);
  --state-border-hover-positive: var(--color-positive-50);
  --state-color-negative: var(--color-neutral-0);
  --state-bg-negative: var(--color-negative-500);
  --state-border-negative: var(--color-negative-500);
  --state-color-hover-negative: var(--color-negative-500);
  --state-bg-hover-negative: var(--color-negative-100);
  --state-border-hover-negative: var(--color-negative-100);
  --state-color-informative: var(--color-informative-700);
  --state-bg-informative: var(--color-informative-100);
  --state-border-informative: var(--color-informative-100);
  --state-color-hover-informative: var(--color-informative-100);
  --state-bg-hover-informative: var(--color-informative-700);
  --state-border-hover-informative: var(--color-informative-100);
  --state-color-notice: var(--color-notice-800);
  --state-bg-notice: var(--color-notice-200);
  --state-border-notice: var(--color-notice-200);
  --state-color-hover-notice: var(--color-notice-500);
  --state-bg-hover-notice: var(--color-notice-50);
  --state-border-hover-notice: var(--color-notice-50);
  --state-color-disabled: var(--color-neutral-400);
  --state-bg-disabled: var(--color-neutral-100);
  --state-border-disabled: var(--color-neutral-100);
  --state-cursor-disabled: not-allowed;
}

:root {
  --btn-radius: var(--radius-md);
  --btn-font-weight: 600;
  --btn-transition: var(--transition-base);
  --btn-padding-sm: var(--space-3xs) var(--space-xs);
  --btn-padding-md: var(--space-xs) var(--space-m);
  --btn-padding-lg: var(--space-s) var(--space-l);
  --btn-fs-sm: var(--step--2);
  --btn-fs-md: var(--step--1);
  --btn-fs-lg: var(--step-0);
  --btn-primary-color: var(--color-neutral-0);
  --btn-primary-bg: var(--color-primary-500);
  --btn-primary-border: var(--color-primary-500);
  --btn-primary-color-hover: var(--color-neutral-0);
  --btn-primary-bg-hover: var(--color-primary-600);
  --btn-primary-border-hover: var(--color-primary-600);
  --btn-secondary-color: var(--color-primary-500);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--color-primary-500);
  --btn-secondary-color-hover: var(--color-neutral-0);
  --btn-secondary-bg-hover: var(--color-primary-500);
  --btn-secondary-border-hover: var(--color-primary-500);
  --btn-ghost-color: var(--color-text);
  --btn-ghost-bg: transparent;
  --btn-ghost-border: var(--color-border);
  --btn-ghost-color-hover: var(--color-primary-500);
  --btn-ghost-bg-hover: var(--color-neutral-50);
  --btn-ghost-border-hover: var(--color-primary-500);
  --btn-danger-color: var(--color-neutral-0);
  --btn-danger-bg: var(--color-negative-500);
  --btn-danger-border: var(--color-negative-500);
  --btn-danger-color-hover: var(--color-neutral-0);
  --btn-danger-bg-hover: var(--color-negative-600);
  --btn-danger-border-hover: var(--color-negative-600);
}

:root {
  --badge-fs: .6em;
  --badge-color: unset;
  --badge-background-color: unset;
}

:root {
  --brand-color: unset;
  --brand-color-hover: var(--color-active);
  --brand-transtion: color var(--transition-base);
  --brand-logo-height: unset;
  --brand-baseline-ff: var(--font-test);
  --brand-baseline-fs: 2rem;
  --brand-baseline-fw: 600;
}

:root {
  --header-bg: var(--color-page-background);
  --header-border: var(--color-border);
  --header-padding-block: var(--space-s);
  --header-logo-color: var(--color-text);
  --header-logo-color-hover: var(--color-primary-500);
}

:root {
  --menu-link-color: unset;
  --menu-link-color-hover: var(--color-active);
  --menu-link-color-active: var(--color-active);
  --menu-link-fs: var(--step--1);
  --menu-link-fw: var(--font-test-bold);
  --menu-dropdown-bg: var(--color-page-background);
  --menu-dropdown-border: var(--color-border);
  --menu-dropdown-radius: var(--border-radius-m, 0.5rem);
  --menu-dropdown-shadow: 0 4px 24px oklch(0% 0 0 / 0.08), 0 1px 4px oklch(0% 0 0 / 0.06);
}

:root {
  --footer-border: var(--color-border);
  --footer-copy-color: var(--color-text-muted);
  --footer-copy-fs: var(--step--1);
}

:root {
  --hero-bg: var(--color-neutral-50);
  --hero-min-height: 60dvh;
  --hero-title-fs: var(--step-3);
  --hero-subtitle-color: var(--color-text-muted);
  --hero-subtitle-fs: var(--step-1);
  --hero-cta-bg: var(--color-primary-500);
  --hero-cta-bg-hover: var(--color-primary-600);
  --hero-cta-color: var(--color-neutral-0);
  --hero-overlay: rgb(0 0 0 / 0.45);
}

:root {
  --card-bg: var(--color-page-background);
  --card-border: unset;
  --card-radius: unset;
  --card-padding: var(--space-s);
  --card-gap: var(--space-3xs);
  --card-title-fs: var(--step-0);
  --card-title-color: var(--color-text);
  --card-desc-color: unset;
  --card-desc-fs: var(--step--1);
  --card-tag-color: var(--color-primary-500);
  --card-tag-fs: var(--step--2);
  --card-bg-hover: rgba(255, 255, 255, 0.50);
  --card-color-hover: unset;
}

:root {
  --breadcrumb-fs: var(--step--2);
  --breadcrumb-color: unset;
  --breadcrumb-color-hover: var(--color-primary-500);
  --breadcrumb-color-current: var(--color-text);
  --breadcrumb-separator: unset;
}

:root {
  --social-color: var(--color-text-muted);
  --social-color-hover: var(--color-primary-500);
  --social-icon-size: 1.25rem;
  --social-label-fs: var(--step--1);
}

:root {
  --tag-color: unset;
  --tag-background-color: unset;
  --tag-fs: unset;
  --tag-fw: unset;
  --tag-type-case: unset;
  --tag-border-width: unset;
  --tage-border-style: unset;
  --tag-border-color: unset;
  --tag-border-radius: unset;
  --tag-color-active: var(--color-primary-500);
  --tag-background-color-active: unset;
  --tag-border-color-active: var(--color-primary-500);
}

:root {
  --prose-max-width: 72ch;
  --prose-font-size: var(--step-0);
  --prose-line-height: var(--line-height-relaxed);
  --prose-color: var(--color-text);
  --prose-muted: var(--color-text-muted);
  --prose-heading-color: var(--color-text);
  --prose-heading-weight: 700;
  --prose-link-color: var(--color-primary-500);
  --prose-link-hover: var(--color-primary-700);
  --prose-code-bg: var(--color-neutral-100);
  --prose-code-color: var(--color-negative-600);
  --prose-code-radius: var(--radius-sm);
  --prose-pre-bg: var(--color-neutral-950);
  --prose-pre-color: var(--color-neutral-100);
  --prose-pre-radius: var(--radius-md);
  --prose-blockquote-border: var(--color-primary-300);
  --prose-blockquote-color: var(--color-text-muted);
  --prose-hr-color: var(--color-border);
  --prose-img-radius: var(--radius-md);
}

:root {
  --article-max-width: 80ch;
  --article-header-gap: var(--space-s);
  --article-title-fs: var(--step-3);
  --article-title-color: var(--color-text);
  --article-desc-fs: var(--step-1);
  --article-desc-color: unset;
  --article-date-fs: var(--step--1);
  --article-date-color: unset;
  --article-tag-fs: var(--step--2);
  --article-tag-color: var(--color-primary-500);
  --article-tag-bg: var(--color-primary-50);
  --article-tag-radius: var(--radius-full);
  --article-cover-radius: var(--radius-lg);
}

:root {
  --filter-gap: var(--space-m);
  --filter-input-bg: var(--color-neutral-0);
  --filter-input-border: var(--color-border);
  --filter-input-radius: var(--radius-md);
  --filter-input-fs: var(--step--1);
  --filter-input-color: var(--color-text);
  --filter-input-padding: var(--space-xs) var(--space-s);
  --filter-tag-fs: var(--step--2);
  --filter-tag-radius: var(--radius-full);
  --filter-tag-color: var(--color-text-muted);
  --filter-tag-bg: var(--color-neutral-100);
  --filter-tag-border: var(--color-neutral-200);
  --filter-tag-color-active: var(--color-neutral-0);
  --filter-tag-bg-active: var(--color-primary-500);
  --filter-tag-border-active: var(--color-primary-500);
}

:root {
  --submenu-border: var(--color-border);
  --submenu-radius: var(--border-radius-s, 0.375rem);
  --submenu-link-color: var(--color-text-muted);
  --submenu-link-color-hover: var(--color-primary-600);
  --submenu-link-color-active: var(--color-primary-600);
  --submenu-link-bg-hover: var(--color-primary-50);
  --submenu-link-bg-active: var(--color-primary-50);
}

:root {
  --sg-sidebar-width: 260px;
  --sg-sidebar-bg: var(--color-neutral-0);
  --sg-sidebar-color: var(--color-neutral-950);
  --sg-sidebar-active: var(--color-neutral-950);
  --sg-sidebar-accent: var(--color-primary-400);
  --sg-content-bg: var(--color-neutral-50);
  --sg-content-padding: var(--space-xl);
  --sg-section-bg: var(--color-neutral-0);
  --sg-section-radius: var(--radius-lg);
  --sg-section-padding: var(--space-l);
  --sg-section-gap: var(--space-xl);
  --sg-label-fs: var(--step--2);
  --sg-label-color: var(--color-neutral-500);
  --sg-swatch-size: 3rem;
  --sg-swatch-radius: var(--radius-md);
}

/**
 * Font Family: Switzer
 * Designed by: Jérémie Hornus — https://www.fontshare.com/fonts/switzer
 * © 2023 Indian Type Foundry
 */
@font-face {
  font-family: "Switzer-Variable";
  src: url("../fonts/switzer/Switzer-Variable.woff2") format("woff2"), url("../fonts/switzer/Switzer-Variable.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Switzer-Variable";
  src: url("../fonts/switzer/Switzer-VariableItalic.woff2") format("woff2"), url("../fonts/switzer/Switzer-VariableItalic.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}
/* --- reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
@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;
  }
}
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
  overflow: hidden;
}

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

input, button, textarea, select,
input::file-selector-button {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: currentColor;
}

fieldset,
legend {
  border: 0;
}

textarea:not([rows]) {
  min-height: 10em;
}

button, input, label,
h1, h2, h3, h4 {
  line-height: 1.1;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  hyphens: auto;
}

ol, ul {
  list-style: none;
  padding-inline-start: 0;
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

address {
  font-style: normal;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.1rem;
  color: currentColor;
  display: inline-block;
}

:is(h1, h2, h3, h4, h5, h6):has(a) a {
  text-decoration: none;
}

:target {
  scroll-margin-block: 5ex;
}

:focus {
  scroll-padding-block-end: 8vh;
}

html {
  accent-color: var(--color-primary-500);
}

body {
  background: var(--color-page-background);
  color: var(--color-text);
  font-family: var(--font-family-text);
  font-size: var(--step-0);
  line-height: var(--line-height-base);
  font-variation-settings: "wght" var(--font-test-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  text-wrap: balance;
  max-width: var(--max-width-heading);
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

:is(h1, h2, h3) {
  font-variation-settings: "wght" var(--font-test-heading);
}

p {
  text-wrap: pretty;
  max-width: var(--max-width-text);
}

a {
  color: currentColor;
}
a:hover {
  color: var(--color-link-hover, currentColor);
}
a:active {
  color: var(--color-link-active, currentColor);
}

:focus-visible {
  --outline-size: max(2px, 0.15em);
  outline: var(--outline-size) solid currentColor;
  outline-offset: var(--outline-size);
}

::selection {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
}

/* --- Form */
form input, form button, form textarea, form select,
form input::file-selector-button {
  color: var(--color-field);
}
form input:not([type=checkbox],
[type=radio],
[type=color],
[type=range],
[type=submit],
[type=reset],
[type=file]),
form select,
form textarea {
  border: var(--border-field-weight, 1px) var(--border-field-style, solid) var(--border-field-color, currentcolor);
  border-radius: var(--border-field-radius, 0.25em);
  padding: var(--padding-field, 0.2em 0.25em);
  width: var(--width-field, 100%);
}
form input, form label {
  line-height: var(--line-height-tight);
}
form label::after {
  content: "\a";
  white-space: pre;
}
form label:has(input) {
  display: var(--label-display, flex);
  flex-direction: var(--label-flex-direction, row);
  align-items: var(--label-align-items, flex-start);
  gap: var(--label-gap, 0.5em);
  cursor: pointer;
}
form input[type=checkbox],
form input[type=radio] {
  appearance: none;
  width: var(--check-size, 0.8em);
  height: var(--check-size, 0.8em);
  border: var(--check-border, 1px solid currentcolor);
  border-radius: var(--check-border-radius, 0);
  display: grid;
  grid-template-areas: "mark";
  place-content: center;
}
form input[type=checkbox]::before,
form input[type=radio]::before {
  content: "";
  display: block;
  grid-area: mark;
  width: var(--check-mark-size, 0.6em);
  height: var(--check-mark-size, 0.6em);
  border-radius: var(--check-mark-radius, 0.15em);
  background-color: var(--check-mark-color, var(--color-action, #000));
  mask-image: var(--check-mark-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transform: scale(0);
  transition: var(--transition-base);
}
form input[type=checkbox]:checked::before,
form input[type=radio]:checked::before {
  transform: scale(1);
}
form input[type=radio] {
  --check-border-radius: 50%;
  --check-mark-radius: 50%;
}
form .select {
  display: grid;
  grid-template-columns: auto 2em;
  position: relative;
}
form .select select {
  grid-column: 1/3;
  grid-row: 1;
  appearance: none;
  background-color: transparent;
  color: var(--color-text);
  width: var(--width-field, 100%);
  padding: var(--padding-field, 0.5em 0.75em);
  border: var(--border-field-weight, 1px) var(--border-field-style, solid) var(--border-field-color, currentcolor);
  border-radius: var(--border-field-radius, 0.25em);
}
form .select select::-ms-expand {
  display: none;
}
form .select::after {
  content: "";
  display: block;
  grid-column: 2;
  grid-row: 1;
  pointer-events: none;
  align-self: center;
  justify-self: center;
  width: var(--select-icon-size, 1em);
  height: var(--select-icon-size, 1em);
  mask-image: var(--select-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2013.2L17%208.2l1.4%201.4-6.4%206.4-6.4-6.4L7%208.2z%22/%3E%3C/svg%3E"));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--select-icon-color, currentColor);
}
form :is(::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button) {
  color: var(--color-action);
}
form input:valid {
  --border-field-color: var(--color-positive, #009900);
}
form input:invalid {
  --border-field-color: var(--color-negative, #FF0000);
}
form input:disabled,
form label input:disabled + * {
  --border-field-color: var(--color-disable, var(--color-neutral-200, #AAAAAA));
  --color-field: var(--color-disable, var(--color-neutral-200, #AAAAAA));
  cursor: not-allowed;
}
form input:required {
  --border-field-color: var(--color-notice, #000);
}
form input:read-only {
  cursor: default;
}

.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 100rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.header .wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "brand . nav1 nav1 nav2";
}
.header .wrapper .brand {
  grid-area: brand;
}
.header .wrapper .nav--primary {
  grid-area: nav1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.header .wrapper .nav--primary .menu {
  justify-content: center;
}
.header .wrapper .nav--secondary {
  grid-area: nav2;
  justify-self: end;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.grid {
  display: grid;
  grid-gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-colmun-min-width, 15rem), 100%), 1fr));
}

.holy-grid {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--holy-grid-gap, 3rem);
}

.grid-content {
  display: grid;
  grid-gap: var(--grid-gap, 1rem);
  grid-template-columns: repeat(5, minmax(min(var(--grid-colmun-min-width, 15rem), 100%), 1fr));
}

[class^=span-] {
  grid-column: span var(--grid-span-value);
}

.span-1 {
  --grid-span-value: 1;
}

.span-2 {
  --grid-span-value: 2;
}

.span-3 {
  --grid-span-value: 3;
}

.span-4 {
  --grid-span-value: 4;
}

.span-5 {
  --grid-span-value: 5;
}

[class*=stack] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--stack-space, 1.5rem);
}

.stack--sm {
  --stack-space: 1rem;
}

.stack--l {
  --stack-space: 3rem;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1rem);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

.center {
  margin-inline: auto;
  max-inline-size: var(--measure, fit-content);
}

.centering-stack {
  display: grid;
  grid-template-areas: "stack";
  place-content: center;
}
.centering-stack > * {
  grid-area: stack;
}

html:has(.full-bleed-container) {
  container-type: inline-size;
}

.full-bleed-container {
  --w: var(--wrapper-max-width);
  --m: var(--full-bleed-marge-inline, 1em);
  margin-inline: max(var(--m), 50cqw - var(--w) / 2);
}

.full-bleed {
  margin-inline: var(--full-bleed, min(-1 * var(--m), var(--w) / 2 - 50cqw));
}
.full-bleed--margin {
  --full-bleed: min( 0px,var(--w)/2 - 50cqw + var(--m));
}
.full-bleed--margin-on-wide {
  --full-bleed: min(-1*var(--m),var(--w)/2 - 50cqw + var(--m));
}
.full-bleed--margin-on-narrow {
  --full-bleed: min( 0px,var(--w)/2 - 50cqw);
}

.reel {
  --reel-thumb-color: var(--scrollbar-thumb-color, #fff);
  --reel-track-color: var(--scrollbar-track-color, #000);
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--reel-thumb-color) var(--reel-track-color);
}

.reel::-webkit-scrollbar {
  block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--reel-track-color);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--reel-track-color);
  background-image: linear-gradient(var(--reel-track-color) 0, var(--reel-track-color) 0.25rem, var(--reel-thumb-color) 0.25rem, var(--reel-thumb-color) 0.75rem, var(--reel-track-color) 0.75rem);
}

.reel > * {
  flex: 0 0 auto;
}

.reel > img {
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.reel > * + * {
  margin-inline-start: var(--gutter, 1rem);
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, 1rem);
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1rem);
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1rem);
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 20rem) - 100%) * 999);
}

.switcher > :nth-child(n+4) {
  flex-basis: 100%;
}

.color-primary-50 {
  color: var(--color-primary-50);
}

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

.color-primary-100 {
  color: var(--color-primary-100);
}

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

.color-primary-200 {
  color: var(--color-primary-200);
}

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

.color-primary-300 {
  color: var(--color-primary-300);
}

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

.color-primary-400 {
  color: var(--color-primary-400);
}

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

.color-primary-500 {
  color: var(--color-primary-500);
}

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

.color-primary-600 {
  color: var(--color-primary-600);
}

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

.color-primary-700 {
  color: var(--color-primary-700);
}

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

.color-primary-800 {
  color: var(--color-primary-800);
}

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

.color-primary-900 {
  color: var(--color-primary-900);
}

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

.color-primary-950 {
  color: var(--color-primary-950);
}

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

.color-secondary-50 {
  color: var(--color-secondary-50);
}

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

.color-secondary-100 {
  color: var(--color-secondary-100);
}

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

.color-secondary-200 {
  color: var(--color-secondary-200);
}

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

.color-secondary-300 {
  color: var(--color-secondary-300);
}

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

.color-secondary-400 {
  color: var(--color-secondary-400);
}

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

.color-secondary-500 {
  color: var(--color-secondary-500);
}

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

.color-secondary-600 {
  color: var(--color-secondary-600);
}

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

.color-secondary-700 {
  color: var(--color-secondary-700);
}

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

.color-secondary-800 {
  color: var(--color-secondary-800);
}

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

.color-secondary-900 {
  color: var(--color-secondary-900);
}

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

.color-secondary-950 {
  color: var(--color-secondary-950);
}

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

.color-neutral-50 {
  color: var(--color-neutral-50);
}

.bg-neutral-50 {
  background-color: var(--color-neutral-50);
}

.color-neutral-100 {
  color: var(--color-neutral-100);
}

.bg-neutral-100 {
  background-color: var(--color-neutral-100);
}

.color-neutral-200 {
  color: var(--color-neutral-200);
}

.bg-neutral-200 {
  background-color: var(--color-neutral-200);
}

.color-neutral-300 {
  color: var(--color-neutral-300);
}

.bg-neutral-300 {
  background-color: var(--color-neutral-300);
}

.color-neutral-400 {
  color: var(--color-neutral-400);
}

.bg-neutral-400 {
  background-color: var(--color-neutral-400);
}

.color-neutral-500 {
  color: var(--color-neutral-500);
}

.bg-neutral-500 {
  background-color: var(--color-neutral-500);
}

.color-neutral-600 {
  color: var(--color-neutral-600);
}

.bg-neutral-600 {
  background-color: var(--color-neutral-600);
}

.color-neutral-700 {
  color: var(--color-neutral-700);
}

.bg-neutral-700 {
  background-color: var(--color-neutral-700);
}

.color-neutral-800 {
  color: var(--color-neutral-800);
}

.bg-neutral-800 {
  background-color: var(--color-neutral-800);
}

.color-neutral-900 {
  color: var(--color-neutral-900);
}

.bg-neutral-900 {
  background-color: var(--color-neutral-900);
}

.color-neutral-950 {
  color: var(--color-neutral-950);
}

.bg-neutral-950 {
  background-color: var(--color-neutral-950);
}

.color-positive-50 {
  color: var(--color-positive-50);
}

.bg-positive-50 {
  background-color: var(--color-positive-50);
}

.color-positive-100 {
  color: var(--color-positive-100);
}

.bg-positive-100 {
  background-color: var(--color-positive-100);
}

.color-positive-200 {
  color: var(--color-positive-200);
}

.bg-positive-200 {
  background-color: var(--color-positive-200);
}

.color-positive-300 {
  color: var(--color-positive-300);
}

.bg-positive-300 {
  background-color: var(--color-positive-300);
}

.color-positive-400 {
  color: var(--color-positive-400);
}

.bg-positive-400 {
  background-color: var(--color-positive-400);
}

.color-positive-500 {
  color: var(--color-positive-500);
}

.bg-positive-500 {
  background-color: var(--color-positive-500);
}

.color-positive-600 {
  color: var(--color-positive-600);
}

.bg-positive-600 {
  background-color: var(--color-positive-600);
}

.color-positive-700 {
  color: var(--color-positive-700);
}

.bg-positive-700 {
  background-color: var(--color-positive-700);
}

.color-positive-800 {
  color: var(--color-positive-800);
}

.bg-positive-800 {
  background-color: var(--color-positive-800);
}

.color-positive-900 {
  color: var(--color-positive-900);
}

.bg-positive-900 {
  background-color: var(--color-positive-900);
}

.color-positive-950 {
  color: var(--color-positive-950);
}

.bg-positive-950 {
  background-color: var(--color-positive-950);
}

.color-negative-50 {
  color: var(--color-negative-50);
}

.bg-negative-50 {
  background-color: var(--color-negative-50);
}

.color-negative-100 {
  color: var(--color-negative-100);
}

.bg-negative-100 {
  background-color: var(--color-negative-100);
}

.color-negative-200 {
  color: var(--color-negative-200);
}

.bg-negative-200 {
  background-color: var(--color-negative-200);
}

.color-negative-300 {
  color: var(--color-negative-300);
}

.bg-negative-300 {
  background-color: var(--color-negative-300);
}

.color-negative-400 {
  color: var(--color-negative-400);
}

.bg-negative-400 {
  background-color: var(--color-negative-400);
}

.color-negative-500 {
  color: var(--color-negative-500);
}

.bg-negative-500 {
  background-color: var(--color-negative-500);
}

.color-negative-600 {
  color: var(--color-negative-600);
}

.bg-negative-600 {
  background-color: var(--color-negative-600);
}

.color-negative-700 {
  color: var(--color-negative-700);
}

.bg-negative-700 {
  background-color: var(--color-negative-700);
}

.color-negative-800 {
  color: var(--color-negative-800);
}

.bg-negative-800 {
  background-color: var(--color-negative-800);
}

.color-negative-900 {
  color: var(--color-negative-900);
}

.bg-negative-900 {
  background-color: var(--color-negative-900);
}

.color-negative-950 {
  color: var(--color-negative-950);
}

.bg-negative-950 {
  background-color: var(--color-negative-950);
}

.color-informative-50 {
  color: var(--color-informative-50);
}

.bg-informative-50 {
  background-color: var(--color-informative-50);
}

.color-informative-100 {
  color: var(--color-informative-100);
}

.bg-informative-100 {
  background-color: var(--color-informative-100);
}

.color-informative-200 {
  color: var(--color-informative-200);
}

.bg-informative-200 {
  background-color: var(--color-informative-200);
}

.color-informative-300 {
  color: var(--color-informative-300);
}

.bg-informative-300 {
  background-color: var(--color-informative-300);
}

.color-informative-400 {
  color: var(--color-informative-400);
}

.bg-informative-400 {
  background-color: var(--color-informative-400);
}

.color-informative-500 {
  color: var(--color-informative-500);
}

.bg-informative-500 {
  background-color: var(--color-informative-500);
}

.color-informative-600 {
  color: var(--color-informative-600);
}

.bg-informative-600 {
  background-color: var(--color-informative-600);
}

.color-informative-700 {
  color: var(--color-informative-700);
}

.bg-informative-700 {
  background-color: var(--color-informative-700);
}

.color-informative-800 {
  color: var(--color-informative-800);
}

.bg-informative-800 {
  background-color: var(--color-informative-800);
}

.color-informative-900 {
  color: var(--color-informative-900);
}

.bg-informative-900 {
  background-color: var(--color-informative-900);
}

.color-informative-950 {
  color: var(--color-informative-950);
}

.bg-informative-950 {
  background-color: var(--color-informative-950);
}

.color-notice-50 {
  color: var(--color-notice-50);
}

.bg-notice-50 {
  background-color: var(--color-notice-50);
}

.color-notice-100 {
  color: var(--color-notice-100);
}

.bg-notice-100 {
  background-color: var(--color-notice-100);
}

.color-notice-200 {
  color: var(--color-notice-200);
}

.bg-notice-200 {
  background-color: var(--color-notice-200);
}

.color-notice-300 {
  color: var(--color-notice-300);
}

.bg-notice-300 {
  background-color: var(--color-notice-300);
}

.color-notice-400 {
  color: var(--color-notice-400);
}

.bg-notice-400 {
  background-color: var(--color-notice-400);
}

.color-notice-500 {
  color: var(--color-notice-500);
}

.bg-notice-500 {
  background-color: var(--color-notice-500);
}

.color-notice-600 {
  color: var(--color-notice-600);
}

.bg-notice-600 {
  background-color: var(--color-notice-600);
}

.color-notice-700 {
  color: var(--color-notice-700);
}

.bg-notice-700 {
  background-color: var(--color-notice-700);
}

.color-notice-800 {
  color: var(--color-notice-800);
}

.bg-notice-800 {
  background-color: var(--color-notice-800);
}

.color-notice-900 {
  color: var(--color-notice-900);
}

.bg-notice-900 {
  background-color: var(--color-notice-900);
}

.color-notice-950 {
  color: var(--color-notice-950);
}

.bg-notice-950 {
  background-color: var(--color-notice-950);
}

.color-neutral-0 {
  color: var(--color-neutral-0);
}

.color-neutral-1000 {
  color: var(--color-neutral-1000);
}

.bg-neutral-0 {
  background-color: var(--color-neutral-0);
}

.bg-neutral-1000 {
  background-color: var(--color-neutral-1000);
}

.m-3xs {
  margin: var(--space-3xs);
}

.mt-3xs {
  margin-block-start: var(--space-3xs);
}

.mb-3xs {
  margin-block-end: var(--space-3xs);
}

.mx-3xs {
  margin-inline: var(--space-3xs);
}

.my-3xs {
  margin-block: var(--space-3xs);
}

.p-3xs {
  padding: var(--space-3xs);
}

.pt-3xs {
  padding-block-start: var(--space-3xs);
}

.pb-3xs {
  padding-block-end: var(--space-3xs);
}

.px-3xs {
  padding-inline: var(--space-3xs);
}

.py-3xs {
  padding-block: var(--space-3xs);
}

.gap-3xs {
  gap: var(--space-3xs);
}

.m-2xs {
  margin: var(--space-2xs);
}

.mt-2xs {
  margin-block-start: var(--space-2xs);
}

.mb-2xs {
  margin-block-end: var(--space-2xs);
}

.mx-2xs {
  margin-inline: var(--space-2xs);
}

.my-2xs {
  margin-block: var(--space-2xs);
}

.p-2xs {
  padding: var(--space-2xs);
}

.pt-2xs {
  padding-block-start: var(--space-2xs);
}

.pb-2xs {
  padding-block-end: var(--space-2xs);
}

.px-2xs {
  padding-inline: var(--space-2xs);
}

.py-2xs {
  padding-block: var(--space-2xs);
}

.gap-2xs {
  gap: var(--space-2xs);
}

.m-xs {
  margin: var(--space-xs);
}

.mt-xs {
  margin-block-start: var(--space-xs);
}

.mb-xs {
  margin-block-end: var(--space-xs);
}

.mx-xs {
  margin-inline: var(--space-xs);
}

.my-xs {
  margin-block: var(--space-xs);
}

.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-block-start: var(--space-xs);
}

.pb-xs {
  padding-block-end: var(--space-xs);
}

.px-xs {
  padding-inline: var(--space-xs);
}

.py-xs {
  padding-block: var(--space-xs);
}

.gap-xs {
  gap: var(--space-xs);
}

.m-s {
  margin: var(--space-s);
}

.mt-s {
  margin-block-start: var(--space-s);
}

.mb-s {
  margin-block-end: var(--space-s);
}

.mx-s {
  margin-inline: var(--space-s);
}

.my-s {
  margin-block: var(--space-s);
}

.p-s {
  padding: var(--space-s);
}

.pt-s {
  padding-block-start: var(--space-s);
}

.pb-s {
  padding-block-end: var(--space-s);
}

.px-s {
  padding-inline: var(--space-s);
}

.py-s {
  padding-block: var(--space-s);
}

.gap-s {
  gap: var(--space-s);
}

.m-m {
  margin: var(--space-m);
}

.mt-m {
  margin-block-start: var(--space-m);
}

.mb-m {
  margin-block-end: var(--space-m);
}

.mx-m {
  margin-inline: var(--space-m);
}

.my-m {
  margin-block: var(--space-m);
}

.p-m {
  padding: var(--space-m);
}

.pt-m {
  padding-block-start: var(--space-m);
}

.pb-m {
  padding-block-end: var(--space-m);
}

.px-m {
  padding-inline: var(--space-m);
}

.py-m {
  padding-block: var(--space-m);
}

.gap-m {
  gap: var(--space-m);
}

.m-l {
  margin: var(--space-l);
}

.mt-l {
  margin-block-start: var(--space-l);
}

.mb-l {
  margin-block-end: var(--space-l);
}

.mx-l {
  margin-inline: var(--space-l);
}

.my-l {
  margin-block: var(--space-l);
}

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

.pt-l {
  padding-block-start: var(--space-l);
}

.pb-l {
  padding-block-end: var(--space-l);
}

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

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

.gap-l {
  gap: var(--space-l);
}

.m-xl {
  margin: var(--space-xl);
}

.mt-xl {
  margin-block-start: var(--space-xl);
}

.mb-xl {
  margin-block-end: var(--space-xl);
}

.mx-xl {
  margin-inline: var(--space-xl);
}

.my-xl {
  margin-block: var(--space-xl);
}

.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-block-start: var(--space-xl);
}

.pb-xl {
  padding-block-end: var(--space-xl);
}

.px-xl {
  padding-inline: var(--space-xl);
}

.py-xl {
  padding-block: var(--space-xl);
}

.gap-xl {
  gap: var(--space-xl);
}

.m-2xl {
  margin: var(--space-2xl);
}

.mt-2xl {
  margin-block-start: var(--space-2xl);
}

.mb-2xl {
  margin-block-end: var(--space-2xl);
}

.mx-2xl {
  margin-inline: var(--space-2xl);
}

.my-2xl {
  margin-block: var(--space-2xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

.pt-2xl {
  padding-block-start: var(--space-2xl);
}

.pb-2xl {
  padding-block-end: var(--space-2xl);
}

.px-2xl {
  padding-inline: var(--space-2xl);
}

.py-2xl {
  padding-block: var(--space-2xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

.m-3xl {
  margin: var(--space-3xl);
}

.mt-3xl {
  margin-block-start: var(--space-3xl);
}

.mb-3xl {
  margin-block-end: var(--space-3xl);
}

.mx-3xl {
  margin-inline: var(--space-3xl);
}

.my-3xl {
  margin-block: var(--space-3xl);
}

.p-3xl {
  padding: var(--space-3xl);
}

.pt-3xl {
  padding-block-start: var(--space-3xl);
}

.pb-3xl {
  padding-block-end: var(--space-3xl);
}

.px-3xl {
  padding-inline: var(--space-3xl);
}

.py-3xl {
  padding-block: var(--space-3xl);
}

.gap-3xl {
  gap: var(--space-3xl);
}

.step--2 {
  font-size: var(--step--2);
}

.step--1 {
  font-size: var(--step--1);
}

.step-0 {
  font-size: var(--step-0);
}

.step-1 {
  font-size: var(--step-1);
}

.step-2 {
  font-size: var(--step-2);
}

.step-3 {
  font-size: var(--step-3);
}

.step-4 {
  font-size: var(--step-4);
}

.step-5 {
  font-size: var(--step-5);
}

.primary {
  --state-color: var(--state-color-primary);
  --state-background-color: var(--state-background-color-primary);
  --state-border-color: var(--state-border-color-primary);
  --state-color-hover: var(--state-color-hover-primary);
  --state-background-color-hover: var(--state-background-color-hover-primary);
  --state-border-color-hover: var(--state-border-color-hover-primary);
}

.secondary {
  --state-color: var(--state-color-secondary);
  --state-background-color: var(--state-background-color-secondary);
  --state-border-color: var(--state-border-color-secondary);
  --state-color-hover: var(--state-color-hover-secondary);
  --state-background-color-hover: var(--state-background-color-hover-secondary);
  --state-border-color-hover: var(--state-border-color-hover-secondary);
}

.positive {
  --state-color: var(--state-color-positive);
  --state-background-color: var(--state-background-color-positive);
  --state-border-color: var(--state-border-color-positive);
  --state-color-hover: var(--state-color-hover-positive);
  --state-background-color-hover: var(--state-background-color-hover-positive);
  --state-border-color-hover: var(--state-border-color-hover-positive);
}

.negative {
  --state-color: var(--state-color-negative);
  --state-background-color: var(--state-background-color-negative);
  --state-border-color: var(--state-border-color-negative);
  --state-color-hover: var(--state-color-hover-negative);
  --state-background-color-hover: var(--state-background-color-hover-negative);
  --state-border-color-hover: var(--state-border-color-hover-negative);
}

.notice {
  --state-color: var(--state-color-notice);
  --state-background-color: var(--state-background-color-notice);
  --state-border-color: var(--state-border-color-notice);
  --state-color-hover: var(--state-color-hover-notice);
  --state-background-color-hover: var(--state-background-color-hover-notice);
  --state-border-color-hover: var(--state-border-color-hover-notice);
}

.informative {
  --state-color: var(--state-color-informative);
  --state-background-color: var(--state-background-color-informative);
  --state-border-color: var(--state-border-color-informative);
  --state-color-hover: var(--state-color-hover-informative);
  --state-background-color-hover: var(--state-background-color-hover-informative);
  --state-border-color-hover: var(--state-border-color-hover-informative);
}

.mute,
.muted,
.disabled,
:disabled {
  --state-color: var(--state-color-disabled);
  --state-background-color: var(--state-background-color-disabled);
  --state-border-color: var(--state-border-color-disabled);
  --state-color-hover: var(--state-color-hover-disabled);
  --state-background-color-hover: var(--state-background-color-hover-disabled);
  --state-border-color-hover: var(--state-border-color-hover-disabled);
  --state-cursor-type: var(--state-cursor-type-disabled);
}
.mute.outline:hover,
.muted.outline:hover,
.disabled.outline:hover,
:disabled.outline:hover {
  --state-color-hover: var(--state-border-color-disabled);
  --state-background-color-hover: transparent;
  --state-border-color-hover: var(--state-border-color-disabled);
}

.cover {
  position: absolute;
  inset: 0;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.region {
  padding-block: var(--region-space, 1.5rem);
}

.full-background {
  border-image: conic-gradient(var(--full-background-color) 0 0) fill 0;
}

a[href^=http] a[href^=http]:not([href^="#"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
a[href^=http] a[href^=http]:not([href^="#"])::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  mask: var(--icon-external-link, url("data:image/svg+xml,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22translate(6%206)%22%3E%3Cpath%20d%3D%22m8.5%207.5v-7h-7%22%2F%3E%3Cpath%20d%3D%22m8.5.5-8%208%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"));
  mask-size: cover;
  mask-position: center;
  background-color: currentcolor;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--btn-transition), background var(--btn-transition), border-color var(--btn-transition);
}
.btn:disabled {
  opacity: 0.5;
  cursor: var(--state-cursor-disabled);
  pointer-events: none;
}
.btn--sm {
  padding: var(--btn-padding-sm);
  font-size: var(--btn-fs-sm);
}
.btn--md {
  padding: var(--btn-padding-md);
  font-size: var(--btn-fs-md);
}
.btn--lg {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-fs-lg);
}
.btn--primary {
  color: var(--btn-primary-color);
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
}
.btn--primary:hover {
  color: var(--btn-primary-color-hover);
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
}
.btn--secondary {
  color: var(--btn-secondary-color);
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover {
  color: var(--btn-secondary-color-hover);
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
}
.btn--ghost {
  color: var(--btn-ghost-color);
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover {
  color: var(--btn-ghost-color-hover);
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
}
.btn--danger {
  color: var(--btn-danger-color);
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
}
.btn--danger:hover {
  color: var(--btn-danger-color-hover);
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border-hover);
}

.badge {
  font-size: var(--badge-fs, 0.8em);
  font-weight: 700;
  line-height: 1;
  color: var(--badge-color, #FFF);
  background-color: var(--badge-background-color, #000);
  border-radius: 9999px;
  width: 1.5em;
  aspect-ratio: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.brand {
  --_logo-height: var(--brand-logo-height, 2rem);
  color: var(--brand-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5em;
  transition: var(--brand-transition);
}
.brand a {
  display: block;
  text-decoration: none;
}
.brand__logo, .brand__logo :is(svg, img) {
  width: auto;
  height: var(--_logo-height);
}
.brand__baseline {
  font-family: var(--brand-baseline-ff);
  font-size: var(--brand-baseline-fs, 0.8rem);
  font-weight: var(--brand-baseline-fw, 600);
  font-variation-settings: "wght" var(--font-test-heading);
}
.brand:hover {
  --brand-color: var(--brand-color-hover);
}

.header {
  padding-block: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
}
.header > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.header > * > * {
  margin-block: unset;
}

.menu {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.menu__item {
  position: relative;
}
.menu a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  color: var(--menu-link-color);
  text-decoration: none;
  font-size: var(--menu-link-fs);
  font-weight: var(--menu-link-fw);
  letter-spacing: 0.025em;
  transition: color var(--transition-base);
}
.menu a:hover, .menu a[aria-current=page] {
  color: var(--menu-link-color-hover);
  font-variation-settings: "wght" var(--font-test-bold);
}

.footer {
  padding-block: 2rem;
}
.footer > * {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer__top, .footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.footer__copy {
  font-size: var(--footer-copy-fs);
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-min-height);
  background-color: var(--hero-bg);
}
.hero--bg {
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}
.hero--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrapper-max-width);
  width: 100%;
  margin: 0 auto;
  padding-block: var(--space-xl);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.hero__title {
  font-size: var(--hero-title-fs);
}
.hero--bg .hero__title {
  color: var(--color-neutral-0);
}
.hero__subtitle {
  color: var(--hero-subtitle-color);
  font-size: var(--hero-subtitle-fs);
}
.hero--bg .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}
.hero__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: var(--space-m);
  background: var(--hero-cta-bg);
  color: var(--hero-cta-color);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: background var(--transition-base);
}
.hero__cta:hover {
  background: var(--hero-cta-bg-hover);
}

.card {
  display: flex;
  flex-direction: column;
  color: var(--card-color, currentcolor);
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: all var(--transition-base);
}
.card:hover {
  --card-bg: var(--card-bg-hover);
  --card-color: var(--card-color-hover);
}
.card:has(a) {
  position: relative;
}
.card__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--color-img-background);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-padding);
  flex: 1;
}
.card__category, .card__tag {
  position: relative;
  z-index: 1;
}
.card__title {
  font-size: var(--card-title-fs);
  font-weight: 600;
  color: var(--card-title-color);
}
.card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__description {
  color: var(--card-desc-color);
  font-size: var(--card-desc-fs);
  max-width: unset;
  margin-block-start: var(--card-desk-mbs, 0.5em);
}
.card__date {
  font-size: var(--car-date-fs, 0.7em);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--breadcrumb-fs);
}
.breadcrumb__item:nth-child(n+2)::before {
  content: "/";
  color: var(--breadcrumb-separator);
}
.breadcrumb__item:first-child a::before {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  background-color: currentcolor;
  border-radius: 9999px;
}
.breadcrumb__item:first-child a span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.breadcrumb__link {
  color: var(--breadcrumb-color);
  text-decoration: none;
  transition: color var(--transition-base);
}
.breadcrumb__link:hover {
  color: var(--breadcrumb-color-hover);
}
.breadcrumb__current {
  color: var(--breadcrumb-color-current);
  font-weight: 500;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--social-color);
  text-decoration: none;
  transition: color var(--transition-base);
}
.social:hover {
  color: var(--social-color-hover);
}
.social__icon {
  display: flex;
}
.social__icon svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}
.social__label {
  font-size: var(--social-label-fs);
}

.socials-list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.tag {
  text-decoration: none;
  appearance: none;
  border: 0;
  background: 0;
  display: inline-flex;
  gap: 0.25em;
  flex-wrap: nowrap;
  align-items: baseline;
  font-variation-settings: "wght" 400;
}
.tag::before {
  --_point-size: var(--_point-size-current, .2em);
  content: "";
  display: block;
  width: var(--_point-size);
  height: var(--_point-size);
  background-color: currentcolor;
  border-radius: 9999px;
  margin-left: calc((var(--_point-size) + 0.25em) * -1);
}
.tag[aria-pressed=true] {
  --_point-size-current: .4em;
  font-variation-settings: "wght" 600;
}
.tag__name {
  font-size: var(--category-label-fs, 1em);
  text-wrap: nowrap;
}
.tag > span:last-child {
  font-size: 0.7em;
}
.tag[aria-current=page] {
  --_point-size-current: .4em;
  font-variation-settings: "wght" 600;
}

.label {
  font-size: var(--_label-fs, 0.6em);
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  font-variation-settings: "wght" var(--font-test-bold);
}

.prose {
  max-width: var(--prose-max-width);
  font-size: var(--prose-font-size);
  line-height: var(--prose-line-height);
  color: var(--prose-color);
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--prose-heading-color);
  font-weight: var(--prose-heading-weight);
  line-height: var(--line-height-tight);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-s);
  max-width: unset;
}
.prose h1 {
  font-size: var(--step-4);
}
.prose h2 {
  font-size: var(--step-3);
}
.prose h3 {
  font-size: var(--step-2);
}
.prose h4 {
  font-size: var(--step-1);
}
.prose p {
  margin-block-end: var(--space-m);
  max-width: unset;
}
.prose a {
  color: var(--prose-link-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-base);
}
.prose a:hover {
  color: var(--prose-link-hover);
}
.prose ul, .prose ol {
  padding-inline-start: var(--space-m);
  margin-block-end: var(--space-m);
}
.prose ul li, .prose ol li {
  margin-block-end: var(--space-2xs);
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose blockquote {
  border-inline-start: 3px solid var(--prose-blockquote-border);
  padding-inline-start: var(--space-m);
  margin-inline: 0;
  margin-block: var(--space-l);
  color: var(--prose-blockquote-color);
  font-style: italic;
}
.prose :not(pre) > code {
  background: var(--prose-code-bg);
  color: var(--prose-code-color);
  border-radius: var(--prose-code-radius);
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  font-family: var(--font-stack-mono);
}
.prose pre {
  background: var(--prose-pre-bg);
  color: var(--prose-pre-color);
  border-radius: var(--prose-pre-radius);
  padding: var(--space-m);
  overflow-x: auto;
  margin-block: var(--space-l);
  font-family: var(--font-stack-mono);
  font-size: var(--step--1);
  line-height: 1.7;
}
.prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}
.prose hr {
  border: none;
  border-block-start: 1px solid var(--prose-hr-color);
  margin-block: var(--space-xl);
}
.prose img {
  border-radius: var(--prose-img-radius);
  margin-block: var(--space-l);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-l);
  font-size: var(--step--1);
}
.prose th, .prose td {
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-border);
  text-align: left;
}
.prose th {
  background: var(--color-neutral-50);
  font-weight: 600;
}

.article {
  padding-block: var(--space-xl);
  display: flex;
  gap: var(--article-gap);
  align-items: flex-start;
}
.article > div {
  max-width: var(--article-max-width);
}
.article > div:first-child {
  width: 32%;
}
.article__header {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--article-header-gap);
  margin-block-end: var(--space-xl);
}
.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.article__tag {
  font-size: var(--article-tag-fs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--article-tag-color);
  background: var(--article-tag-bg);
  border-radius: var(--article-tag-radius);
  padding: var(--space-3xs) var(--space-xs);
}
.article__title {
  font-size: var(--article-title-fs);
  color: var(--article-title-color);
  max-width: unset;
}
.article__description {
  font-size: var(--article-desc-fs);
  color: var(--article-desc-color);
  max-width: unset;
  text-wrap: balance;
}
.article__date {
  font-size: var(--article-date-fs);
  color: var(--article-date-color);
}
.article__cover {
  flex: 0 1 32%;
  margin-block-end: var(--space-xl);
  overflow: hidden;
  position: sticky;
  top: 160px;
}
.article__cover img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.blog-filter {
  display: flex;
  flex-direction: column;
  gap: var(--filter-gap);
  margin-block-end: var(--space-xl);
}
.blog-filter__controls {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.blog-filter__search {
  flex: 1;
  min-width: 200px;
  padding: var(--filter-input-padding);
  background: var(--filter-input-bg);
  border: 1px solid var(--filter-input-border);
  border-radius: var(--filter-input-radius);
  font-size: var(--filter-input-fs);
  color: var(--filter-input-color);
  transition: border-color var(--transition-base);
}
.blog-filter__search:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.blog-filter__search::placeholder {
  color: var(--color-text-muted);
}
.blog-filter__sort {
  padding: var(--filter-input-padding);
  background: var(--filter-input-bg);
  border: 1px solid var(--filter-input-border);
  border-radius: var(--filter-input-radius);
  font-size: var(--filter-input-fs);
  color: var(--filter-input-color);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.blog-filter__sort:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.blog-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) 1em;
  align-items: center;
}
.blog-filter__count {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-block-end: var(--space-s);
}
.blog-filter__empty {
  display: none;
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--step-0);
}
.blog-filter__empty--visible {
  display: block;
}

.submenu {
  display: flex;
  gap: 1.5em;
  min-width: 1px;
}
.submenu:has(.submenu__count) {
  font-variation-settings: "wght" 400;
  flex-wrap: wrap;
  gap: var(--space-2xs) 1.5em;
}
.submenu:has(.submenu__count) .submenu__link {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
}
.submenu__count {
  font-size: 0.7em;
  font-variation-settings: "wght" 500;
}
.submenu--compact {
  padding-inline: 1em;
  margin-inline-start: -1em;
}

.dropdown {
  position: relative;
}
.dropdown__icon {
  width: 0.8em;
  transform: var(--_dropdown-icon-rotate);
  transition: transform var(--transition-base);
}
.dropdown__content {
  position: absolute;
  top: calc(100% - 1px);
  left: -1em;
  z-index: 200;
  min-width: 1px;
  height: var(--_dropdown-content-height, 0);
  overflow: hidden;
  padding-block: var(--_dropdown-content-padding);
  padding-inline: 1em;
  transition: all var(--transition-base);
}
.dropdown:hover, .dropdown:focus-within {
  --_dropdown-content-height: auto;
  --_dropdown-content-padding: .5em;
  --_dropdown-icon-rotate: rotate(180deg);
}

.category {
  text-decoration: none;
  appearance: none;
  border: 0;
  background: 0;
  display: inline-flex;
  gap: 0.25em;
  flex-wrap: nowrap;
  align-items: baseline;
}
.category::before {
  --_point-size: var(--_point-size-current, .2em);
  content: "";
  display: block;
  width: var(--_point-size);
  height: var(--_point-size);
  background-color: currentcolor;
  border-radius: 9999px;
  margin-left: calc((var(--_point-size) + 0.25em) * -1);
}
.category__label {
  font-size: var(--category-label-fs, 1em);
  text-wrap: nowrap;
}
.category[aria-current=page] {
  --_point-size-current: .4em;
  font-variation-settings: "wght" 600;
}

.header .brand__baseline {
  margin-inline-start: -0.14em;
}

.triptyque__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}
.triptyque__grid > * {
  aspect-ratio: 6/8;
  background-color: white;
}
.triptyque__grid > * img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.triptyque__legend {
  font-size: var(--step--1);
}

main h1 {
  display: inline-flex;
  gap: 0.05em;
  flex-wrap: nowrap;
  align-items: baseline;
}
main h1::before {
  --_point-size: var(--_point-size-current, .25em);
  content: "";
  display: block;
  width: var(--_point-size);
  height: var(--_point-size);
  background-color: currentcolor;
  border-radius: 9999px;
  margin-left: calc((var(--_point-size) + 0.15em) * -1);
}
main > .wrapper:has(> .article) .main-header h1 {
  font-size: var(--step-2);
}

.cards {
  margin-inline: calc(var(--card-padding) * -1);
}
.cards.grid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-colmun-min-width, 15rem), 100%), 1fr));
}

.card {
  max-width: 20rem;
}

main > .stack {
  --stack-space: var(--space-m);
}

.main-header {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 77px;
  z-index: 3;
  background-color: var(--color-page-background);
  padding-block-end: var(--space-s);
}

.article__header {
  position: sticky;
  top: calc(200px + var(--space-m));
  z-index: 2;
}
.article__image {
  position: sticky;
  top: calc(200px + var(--space-m));
  z-index: 2;
}
.article .prose *:first-child {
  margin-block-start: 0;
  line-height: calc(var(--article-title-fs) + 0.5em);
}
.article img {
  max-height: 70dvh;
  object-fit: contain;
  object-position: top left;
}

/*# sourceMappingURL=main.css.map */