:root {
  --color-primary: #4d4d4d;
  --color-primary--muted: hsl(0, 0%, 60%);
  --color-primary--extra-muted: color-mix(var(--color-primary), #fff 75%);
  --color-bg: #f2f2f2;
  --color-bg--overlay: rgba(242, 242, 242, 0.9);
  --color-bg--muted: color-mix(var(--color-bg), #fff 75%);

  --padding: 1rem;
  --padding-sm: calc(var(--padding) * 0.5);
  --padding-lg: calc(var(--padding) * 2);
  --padding-xl: calc(var(--padding) * 4);
  --gap: 0.625rem;
  --gap-xs: calc(var(--gap) * 0.25);
  --gap-sm: calc(var(--gap) * 0.5);
  --gap-lg: 3.125rem;
  --gap-xl: calc(var(--gap-lg) * 2);
  --gap-body: calc(var(--font-size-body) * var(--font-line-height-body));
  --gap-body--double: calc(var(--gap-body) * 2);
  --gap-body-medium: calc(
    var(--font-size-body--quote) * var(--font-line-height-body)
  );
  --gap-paragraph-medium: calc(var(--gap-body-medium) * 0.75);
  --gap-paragraph-medium--double: calc(
    var(--gap-paragraph-medium) * 2 + var(--gap-body-medium)
  );

  --font-nhg: "Neue Haas Grotesk", "Helvetica", "Arial", sans-serif;
  --font-fm: "Fragment Mono", monospace;
  --font-size-body: 0.75rem;
  --font-size-body--quote: 0.95rem;
  --font-size-body--medium: 1.3125rem;
  --font-size-medium: 1.5rem;
  --font-size-title: 2.25rem;
  --font-line-height-body: 1.2;
  --font-line-height-body--quote: calc(
    var(--font-line-height-body) * var(--font-size-body--medium)
  );
  --font-line-height-body--quote: 1.4;
  --font-line-height-trim: 0.8;
  --font-letter-spacing-body: -0.0075rem;
  --font-letter-spacing-quote: -0.01125rem;

  --sizes-header-height--inner: calc(
    var(--font-size-medium) * var(--font-line-height-trim)
  );
  --sizes-header-height: calc(
    var(--sizes-header-height--inner) + var(--gap) * 2
  );
  --sizes-content-height: calc(100dvh - var(--sizes-top-offset--absolute));
  --gallery-slide-min-ratio: 0.75;
  --sizes-top-offset--absolute: clamp(175px, 25.4dvh, 500px);
  --sizes-top-offset: calc(
    var(--sizes-top-offset--absolute) - var(--sizes-header-height)
  );
  --z-index-top: 990;
  --z-index-max: 999;

  --transition-hover: var(--transition-hover-duration)
    var(--transition-hover-ease);
  --transition-hover-ease: ease-out;
  --transition-hover-duration: 0.1;

  --transition-smooth: var(--transition-smooth-duration)
    var(--transition-smooth-ease);
  --transition-smooth-ease: ease-out;
  --transition-smooth-duration: 0.3;
}

@media screen and (width < 1000px) {
  :root {
    --font-size-body--quote: var(--font-size-body);
    --font-size-body--medium: 1.1rem;
    --font-size-title: 1.5rem;

    --gap-body-medium: calc(
      var(--font-size-body--quote) * var(--font-line-height-body)
    );
    --gap-paragraph-medium: calc(var(--gap-body-medium) * 0.75);
    --gap-paragraph-medium--double: calc(
      var(--gap-paragraph-medium) * 2 + var(--gap-body-medium)
    );

    --sizes-top-offset: calc(
      var(--sizes-top-offset--absolute) - var(--sizes-header-height)
    );
    --sizes-top-offset--absolute: clamp(50px, 25.4dvh, 500px);
    --sizes-content-height: calc(100dvh - var(--sizes-top-offset--absolute));
  }
}