:root {
   --ground: #161C22;
   --slab: #1F2830;
   --steel: #3A4651;
   --mist: #9AA6B2;
   --paper: #ECEFF1;
   --ink: #0F1418;
   --frost: #7FD1D8;

   --ground-raise: #1B232A;
   --slab-raise: #25303A;
   --steel-soft: #2C3640;
   --mist-ink: #4D5966;
   --paper-dim: #D5DADE;
   --frost-deep: #3E8C93;
   --frost-press: #A9E2E7;
   --frost-wash: rgba(127, 209, 216, 0.08);
   --frost-line: rgba(127, 209, 216, 0.42);
   --paper-wash: rgba(236, 239, 241, 0.04);
   --alert: #F2A79E;
   --alert-ink: #9B2C22;
   --ok: #9ED8B4;

   --text: var(--paper);
   --text-soft: var(--mist);
   --line: var(--steel);
   --surface: var(--ground);

   --vazi-c4c: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
   --vazi-55f: 'Instrument Sans', "Avenir Next", 'Segoe UI', "Helvetica Neue", Arial, sans-serif;
   --vazi-fae: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

   --fs-mono: 0.78125rem;
   --fs-mono-lg: 0.8125rem;
   --fs-small: 0.9375rem;
   --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
   --fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
   --fs-h4: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
   --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
   --fs-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3.5rem);
   --fs-h1: clamp(2.125rem, 1.2rem + 4.4vw, 5.25rem);
   --fs-hero: clamp(2.25rem, 1.2rem + 6vw, 7.5rem);
   --fs-display: clamp(2rem, 1rem + 5.2vw, 6.25rem);
   --fs-giant: clamp(2.25rem, 0.9rem + 6.8vw, 8.5rem);

   --lh-tight: 1.02;
   --lh-head: 1.1;
   --lh-snug: 1.3;

   --lh-body: 1.6;
   --track-display: -0.02em;
   --track-head: -0.015em;
   --track-mono: 0.08em;

   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1.125rem;
   --space-5: 1.75rem;
   --space-6: 2.75rem;
   --space-7: 4.25rem;
   --space-8: 6.5rem;
   --space-9: 9.75rem;

   --shell: 1320px;
   --shell-narrow: 920px;
   --gutter: clamp(1rem, 4vw, 3rem);
   --measure: 64ch;
   --measure-narrow: 46ch;
   --block-pad: clamp(4rem, 10vw, 9rem);
   --block-pad-tight: clamp(2.75rem, 6vw, 5.5rem);
   --rule: 6px;
   --hairline: 1px;
   --radius: 2px;
   --radius-0: 0;

   --header-h: 4.75rem;
   --tap: 2.75rem;

   --dur-1: 120ms;
   --dur-2: 180ms;
   --dur-3: 320ms;

   --dur-4: 640ms;
   --dur-5: 1100ms;
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
   --magnet-max: 6px;
   --stamp-tilt: -8deg;

   --z-header: 50;
   --z-nav: 55;
   --z-consent: 70;
   --z-chat: 65;
   --z-preview: 40;
   --z-skip: 100;

   color-scheme: dark;
}

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

html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-h) + 1rem);
   overflow-x: clip;
}

body {
   margin: 0;
   min-height: 100vh;
   background: var(--ground);
   color: var(--text);
   font-family: var(--vazi-55f);
   font-size: var(--fs-body);
   font-weight: 400;
   line-height: var(--lh-body);
   font-kerning: normal;
   font-variant-ligatures: common-ligatures;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: clip;
}

body.is-locked {
   overflow: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
   margin: 0;
}

ul[role="list"],
ol[role="list"] {
   list-style: none;
   padding: 0;
}

img,
picture,
video,
svg,
canvas {
   display: block;
   max-width: 100%;
}

img {
   height: auto;
   font-style: italic;
   background-color: var(--slab);
}

img[src$=".svg"] {
   background: none;
}

input,
button,
textarea,
select {
   font: inherit;
   color: inherit;
   letter-spacing: inherit;
}

button {
   cursor: pointer;
   background: none;
   border: 0;
   padding: 0;
}

a {
   color: inherit;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.22em;
}

table {
   border-collapse: collapse;
   width: 100%;
}

[hidden] {
   display: none !important;
}

:focus {
   outline: none;
}

:focus-visible {
   outline: 2px solid var(--frost);
   outline-offset: 4px;
   border-radius: var(--radius);
}

::selection {
   background: var(--frost);
   color: var(--ink);
}

.icon {
   width: 1.125em;
   height: 1.125em;
   flex: none;
   fill: none;
   stroke: currentColor;
   vertical-align: middle;
}

h1, h2, h3, .h1, .h2, .h3, .display {
   font-family: var(--vazi-c4c);
   font-weight: 400;
   font-optical-sizing: auto;
   font-variation-settings: "opsz" 144;
   letter-spacing: var(--track-display);
   line-height: var(--lh-head);
   text-wrap: balance;
   overflow-wrap: break-word;
   hyphens: manual;
}

h1, .h1 {
   font-size: var(--fs-h1);
   line-height: var(--lh-tight);
}

h2, .h2 {
   font-size: var(--fs-h2);
   line-height: 1.06;
}

h3, .h3 {
   font-size: var(--fs-h3);
   font-variation-settings: "opsz" 72;
   letter-spacing: var(--track-head);
   line-height: 1.15;
}

h4, .h4 {
   font-family: var(--vazi-55f);
   font-size: var(--fs-h4);
   font-weight: 600;
   line-height: var(--lh-snug);
   letter-spacing: -0.005em;
}

h1 em, h2 em, h3 em, .display em {
   font-style: italic;
   font-weight: 400;
   letter-spacing: -0.01em;
}

h1 strong, h2 strong, h3 strong {
   font-weight: 600;
}

.display {
   font-size: var(--fs-display);
   line-height: 1;
}

.display--hero {
   font-size: var(--fs-hero);
   line-height: 0.98;
}

.display--giant {
   font-size: var(--fs-giant);
   line-height: 0.98;
}

p {
   text-wrap: pretty;
}

.lead {
   font-size: var(--fs-lead);
   line-height: 1.5;
   color: var(--text);
   max-width: 40ch;
}

.small,
small {
   font-size: var(--fs-small);
}

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

.label,
.mono {
   font-family: var(--vazi-fae);
   font-size: var(--fs-mono);
   font-weight: 500;
   letter-spacing: var(--track-mono);
   text-transform: uppercase;
   line-height: 1.5;
}

.label {
   display: inline-flex;
   align-items: center;
   gap: 0.6em;
   color: var(--text-soft);
}

.label--frost {
   color: var(--frost);
}

.num {
   font-family: var(--vazi-fae);
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.02em;
}

.hang {
   text-indent: -0.42em;
}

blockquote,
.pull {
   hanging-punctuation: first last;
}

.prose {
   max-width: var(--measure);
   color: var(--text);
}

.prose > * + * {
   margin-top: 1.1em;
}

.prose h2 {
   font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
   margin-top: 2.2em;
}

.prose h3 {
   font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
   margin-top: 1.9em;
}

.prose h4 {
   margin-top: 1.6em;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
   margin-top: 0.6em;
}

.prose a {
   color: var(--paper);
   text-decoration-color: var(--frost);
   transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}

.prose a:hover {
   color: var(--frost);
}

.prose ul,
.prose ol {
   padding-left: 1.25em;
}

.prose li + li {
   margin-top: 0.45em;
}

.prose ul li::marker {
   color: var(--frost);
}

.prose ol li::marker {
   font-family: var(--vazi-fae);
   font-size: 0.85em;
   color: var(--mist);
}

.prose strong {
   font-weight: 600;
}

.prose blockquote {
   border-left: 2px solid var(--frost);
   padding-left: 1.1em;
   font-family: var(--vazi-c4c);
   font-size: 1.25em;
   line-height: 1.35;
   font-style: italic;
}

.prose hr {
   border: 0;
   border-top: 1px solid var(--line);
   margin: 2.5em 0;
}

.prose code {
   font-family: var(--vazi-fae);
   font-size: 0.88em;
   background: var(--paper-wash);
   padding: 0.1em 0.35em;
   border-radius: var(--radius);
   overflow-wrap: anywhere;
}

.shell {
   width: 100%;
   max-width: calc(var(--shell) + var(--gutter) * 2);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

.shell--narrow {
   max-width: calc(var(--shell-narrow) + var(--gutter) * 2);
}

.block {
   position: relative;
   padding-block: var(--block-pad);
   background: var(--surface);
   color: var(--text);
   border-top: var(--rule) solid var(--steel);
}

.block--tight {
   padding-block: var(--block-pad-tight);
}

.block--flush-top {
   border-top: 0;
}

.block--ground {
   --surface: var(--ground);
}

.block--slab {
   --surface: var(--slab);
}

.block--paper {
   --surface: var(--paper);
   --text: var(--ink);
   --text-soft: var(--mist-ink);
   --line: #C3CAD0;
   color-scheme: light;
   border-top-color: var(--ink);
}

.block--paper + .block {
   border-top-color: var(--ink);
}

.block--ink {
   --surface: var(--ink);
}

.block--paper ::selection {
   background: var(--ink);
   color: var(--paper);
}

.block--paper :focus-visible {
   outline-color: var(--ink);
}

.block--paper .prose a {
   color: var(--ink);
   text-decoration-color: var(--frost-deep);
}

.block--paper .prose a:hover {
   color: var(--frost-deep);
}

.rule {
   height: var(--rule);
   border: 0;
   margin: 0;
   background: var(--steel);
   transform-origin: left center;
}

.rule--hair {
   height: 1px;
}

.stack > * + * {
   margin-top: var(--stack-gap, var(--space-4));
}

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

.stack--lg {
   --stack-gap: var(--space-6);
}

.cluster {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--cluster-gap, var(--space-3));
}

.cluster > * {
   min-width: 0;
}

.split {
   display: grid;
   gap: var(--space-6) clamp(2rem, 5vw, 6rem);
   grid-template-columns: minmax(0, 1fr);
}

.split > * {
   min-width: 0;
}

@media (min-width: 900px) {
   .split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }

   .split--wide-left {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   }

   .split--wide-right {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   }
}

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

.grid-auto > * {
   min-width: 0;
}

.measure {
   max-width: var(--measure);
}

.measure-narrow {
   max-width: var(--measure-narrow);
}

.frame {
   position: relative;
   margin: 0;
   overflow: hidden;
}

.frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.frame--landscape {
   aspect-ratio: 3 / 2;
}

.frame--portrait {
   aspect-ratio: 4 / 5;
}

.frame--wide {
   aspect-ratio: 16 / 9;
}

.caption {
   margin-top: var(--space-3);
   font-family: var(--vazi-fae);
   font-size: var(--fs-mono);
   letter-spacing: var(--track-mono);
   text-transform: uppercase;
   color: var(--text-soft);
}

.sr-only,
.visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

.hp {
   position: absolute !important;
   left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
   opacity: 0;
   pointer-events: none;
}

.text-center {
   text-align: center;
}

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

@media (prefers-reduced-motion: reduce) {
   :root {
      --dur-1: 0ms;
      --dur-2: 0ms;
      --dur-3: 0ms;
      --dur-4: 0ms;
      --dur-5: 0ms;
      --magnet-max: 0px;
   }

   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

@media print {
   .site-header,
   .consent,
   .chat,
   .site-footer .footer-legal__btn {
      display: none !important;
   }

   body,
   .block {
      background: #FFF;
      color: #000;
      border-color: #000;
   }
}