:root {
  /* Values measured on https://sokolov.craft.me/portfolio. */
  --color-white: #ffffff;
  --color-ink: #1f2225;
  --color-blue: #32678a;
  --color-gray-50: #f4f4f4;
  --color-gray-200: #e9e9e9;
  --color-gray-500: #767676;
  --color-gray-850: #343434;
  --color-gray-900: #252525;
  --color-gray-400: #bcbcbc;
  --font-mono: "Roboto Mono", monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-size-body: 16px;
  --font-size-heading: 23px;
  --font-size-ui: 14px;
  --font-size-ui-small: 12px;
  --font-weight-strong: 700;
  --line-height-body: 24px;
  --line-height-heading: 28px;
  --line-height-ui: 20px;
  --letter-spacing-body: -.18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 30px;
  --space-7: 36px;
  --space-8: 40px;
  --space-9: 60px;
  --radius-sheet: 16px;
  --radius-card: 7px;
  --width-sheet: 776px;
  --height-topbar: 46px;
  --surface-topbar: rgb(222 222 222 / 88%);
  --blur-topbar: 16px;
  --shadow-card: 0 8px 16px rgb(0 0 0 / 10%);

  --page-text: var(--color-ink);
  --page-link: var(--color-blue);
  --surface-paper: var(--color-white);
  --surface-callout: var(--color-gray-50);
  --text-muted: var(--color-gray-500);
  --border-divider: var(--color-gray-200);
  --flow-gap: var(--space-3);
  --flow-marker-size: var(--space-8);
  --flow-marker-surface: var(--page-link);
  --flow-marker-text: var(--color-white);
  --sheet-padding-inline: var(--space-9);
  --sheet-padding-block: var(--space-8);
  --sheet-gap: var(--space-6);
  --block-gap: var(--space-4);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-card);
  --card-gap: 56px;
  --card-surface: var(--color-gray-900);
  --card-text: var(--color-gray-400);
  --card-title-color: var(--color-white);
  --card-callout-surface: var(--color-gray-850);
  --card-height: 240px;
  --card-padding: 32px;
  --card-column-gap: 20px;
  --card-media-width: 164px;
  --card-font-size: 13px;
  --card-line-height: 16px;
  --card-title-size: var(--font-size-heading);
  --card-title-line-height: var(--line-height-heading);
  --card-title-gap: 18px;
  --card-block-gap: var(--space-2);
  --card-callout-padding: var(--space-2);
  --card-callout-bleed: 2px;
  --card-mobile-media-height: 152px;
  --card-thumb-width: 86px;
  --card-thumb-height: 104px;
  --card-thumb-border: 2px;
  --card-thumb-radius: var(--space-1);
  --card-thumb-shadow: 0 4px 12px rgb(0 0 0 / 24%);
  --card-thumb-position: 50% 20%;
  --card-thumb-middle-x: 34px;
  --card-thumb-middle-y: 50px;
  --card-thumb-last-x: 78px;
  --card-thumb-last-y: 18px;
  --card-thumb-tilt: 3deg;
  --card-thumb-extra-display: block;
  --card-single-thumb-width: 134px;
  --card-single-thumb-height: 156px;
  --card-single-thumb-position: 50% 30%;
  --card-single-thumb-tilt: -3deg;
  --card-astrolab-focus: 80% 50%;
  --card-astrolab-focus-mobile: 72% 50%;
  --card-bartini-focus: 20% 50%;
  --card-document-width: 520px;
  --card-document-scale: .26;
  --card-document-font-size: var(--card-font-size);
  --card-document-line-height: var(--card-line-height);
  --card-document-height: 640px;
  --card-document-accent: #c586fa;
  --card-document-offset: 0px;
  --card-document-step: 8px;
  --card-document-second-layer: 0;
  --card-binology-media-width: 228px;
  --card-binology-document-offset: 48px;
  --card-binology-document-step: 132px;
  --heading-gap: 72px;
  --heading-gap-with-author: 64px;
  --avatar-size: 96px;
  --avatar-size-mobile: 80px;
  --avatar-radius-fallback: 26%;
}