/* Typography */

:root {
  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));
}

html {
  font-size: 16px;
}

body {
  font-family: system-ui, sans-serif;
  font-weight: normal;
  margin: 0 auto;
  color: var(--neutral-800);
}

.text-base-50 {
	color:var(--base-50)
}

.text-base-100 {
	color:var(--base-100)
}

.text-base-200 {
	color:var(--base-200)
}

.text-base-300 {
	color:var(--base-300)
}

.text-base-400 {
	color:var(--base-400)
}

.text-base-500 {
	color:var(--base-500)
}

.text-base-600 {
	color:var(--base-600)
}

.text-base-700 {
	color:var(--base-700)
}

.text-base-800 {
	color:var(--base-800)
}

.text-base-900 {
	color:var(--base-900)
}

.text-base-950 {
	color:var(--base-950)
}

/* Standalone text size utilities (can be used anywhere) */
.text-2x {
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

.text-xl {
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

.text-lg {
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.text-md {
  font-size: clamp(
    var(--min-font-size-md),
    var(--pref-font-size-md),
    var(--max-font-size-md)
  );
}

.text-sm {
  font-size: clamp(
    var(--min-font-size-sm),
    var(--pref-font-size-sm),
    var(--max-font-size-sm)
  );
}

.text-xs {
  font-size: clamp(
    var(--min-font-size-xs),
    var(--pref-font-size-xs),
    var(--max-font-size-xs)
  );
}

/* Heading style utilities (size + color, for use anywhere) */
.h1 {
  font-size: clamp(
    var(--min-font-size-5x),
    var(--pref-font-size-5x),
    var(--max-font-size-5x)
  );
  color: var(--base-950);
}

.h2 {
  font-size: clamp(
    var(--min-font-size-4x),
    var(--pref-font-size-4x),
    var(--max-font-size-4x)
  );
  color: var(--base-950);
}

.h3 {
  font-size: clamp(
    var(--min-font-size-3x),
    var(--pref-font-size-3x),
    var(--max-font-size-3x)
  );
  color: var(--base-950);
}

.h4 {
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
  color: var(--base-900);
}

.h5 {
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
  color: var(--base-900);
}

.h6 {
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
  color: var(--base-900);
}

/* Display Typography */

.display {
    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    font-weight: normal;
    color: var(--base-800);

  --display-heading-font-weight: 700;
  --typescale: var(--perfect-fourth);
  --min-typescale: var(--minor-second);

  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  h1 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }

  h2 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }

  h3 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }

  h4 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }

  h5 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  h6 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .h1 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }

  .h2 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }

  .h3 {
    color: var(--base-950);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }

  .h4 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }

  .h5 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  .h6 {
    color: var(--base-900);
    font-weight: var(--display-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-xl {
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  .text-lg {
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-md {
    font-size: clamp(
      var(--min-font-size-md),
      var(--pref-font-size-md),
      var(--max-font-size-md)
    );
  }

  .text-sm {
    font-size: clamp(
      var(--min-font-size-sm),
      var(--pref-font-size-sm),
      var(--max-font-size-sm)
    );
  }

  .text-xs {
    font-size: clamp(
      var(--min-font-size-xs),
      var(--pref-font-size-xs),
      var(--max-font-size-xs)
    );
  }
}

/* Builders often apply `.display` directly to the text node instead of a wrapper. */
.display h1,
h1.display,
.display .h1,
.h1.display {
  color: var(--base-950);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-5x),
    var(--pref-font-size-5x),
    var(--max-font-size-5x)
  );
}

.display h2,
h2.display,
.display .h2,
.h2.display {
  color: var(--base-950);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-4x),
    var(--pref-font-size-4x),
    var(--max-font-size-4x)
  );
}

.display h3,
h3.display,
.display .h3,
.h3.display {
  color: var(--base-950);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-3x),
    var(--pref-font-size-3x),
    var(--max-font-size-3x)
  );
}

.display h4,
h4.display,
.display .h4,
.h4.display {
  color: var(--base-900);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

.display h5,
h5.display,
.display .h5,
.h5.display {
  color: var(--base-900);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

.display h6,
h6.display,
.display .h6,
.h6.display {
  color: var(--base-900);
  font-weight: var(--display-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

/* Post Typography */

.post {
    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-weight: normal;
    color: var(--base-800);

  --post-heading-font-weight: 700;
  --typescale: var(--minor-third);
  --min-typescale: var(--minor-second);

  --min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
  --min-font-size-sm: calc(1rem / var(--min-typescale));
  --min-font-size-md: 1rem;
  --min-font-size-lg: calc(1rem * var(--min-typescale));
  --min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
  --min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
  --min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
  --min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
  --min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
  --min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

  /* Generate in PHP using MaxREM/90REM with VW unit added */
  --pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
  --pref-font-size-sm: calc(1vw / var(--typescale));
  --pref-font-size-md: calc(1vw / 90);
  --pref-font-size-lg: calc(1vw * var(--typescale));
  --pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
  --pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
  --pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
  --pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
  --pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
  --pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

  --max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
  --max-font-size-sm: calc(1rem / var(--typescale));
  --max-font-size-md: 1rem;
  --max-font-size-lg: calc(1rem * var(--typescale));
  --max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
  --max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
  --max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
  --max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
  --max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
  --max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  h1 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }

  h2 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }

  h3 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }

  h4 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }

  h5 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  h6 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .h1 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-5x),
      var(--pref-font-size-5x),
      var(--max-font-size-5x)
    );
  }

  .h2 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-4x),
      var(--pref-font-size-4x),
      var(--max-font-size-4x)
    );
  }

  .h3 {
    color: var(--base-950);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-3x),
      var(--pref-font-size-3x),
      var(--max-font-size-3x)
    );
  }

  .h4 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-2x),
      var(--pref-font-size-2x),
      var(--max-font-size-2x)
    );
  }

  .h5 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  .h6 {
    color: var(--base-900);
    font-weight: var(--post-heading-font-weight);
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-xl {
    font-size: clamp(
      var(--min-font-size-xl),
      var(--pref-font-size-xl),
      var(--max-font-size-xl)
    );
  }

  .text-lg {
    font-size: clamp(
      var(--min-font-size-lg),
      var(--pref-font-size-lg),
      var(--max-font-size-lg)
    );
  }

  .text-md {
    font-size: clamp(
      var(--min-font-size-md),
      var(--pref-font-size-md),
      var(--max-font-size-md)
    );
  }

  .text-sm {
    font-size: clamp(
      var(--min-font-size-sm),
      var(--pref-font-size-sm),
      var(--max-font-size-sm)
    );
  }

  .text-xs {
    font-size: clamp(
      var(--min-font-size-xs),
      var(--pref-font-size-xs),
      var(--max-font-size-xs)
    );
  }
}

/* UI Typography */

.ui {
--ui-font-family: system-ui, sans-serif;
--ui-heading-font-weight: 700;
  
--typescale: var(--major-second);
--min-typescale: var(--minor-second);

--min-font-size-xs: calc(var(--min-font-size-sm) / var(--min-typescale));
--min-font-size-sm: calc(1rem / var(--min-typescale));
--min-font-size-md: 1rem;
--min-font-size-lg: calc(1rem * var(--min-typescale));
--min-font-size-xl: calc(var(--min-font-size-lg) * var(--min-typescale));
--min-font-size-2x: calc(var(--min-font-size-xl) * var(--min-typescale));
--min-font-size-3x: calc(var(--min-font-size-2x) * var(--min-typescale));
--min-font-size-4x: calc(var(--min-font-size-3x) * var(--min-typescale));
--min-font-size-5x: calc(var(--min-font-size-4x) * var(--min-typescale));
--min-font-size-6x: calc(var(--min-font-size-5x) * var(--min-typescale));

/* Generate in PHP using MaxREM/90REM with VW unit added */
--pref-font-size-xs: calc(var(--pref-font-size-sm) / var(--typescale));
--pref-font-size-sm: calc(1vw / var(--typescale));
--pref-font-size-md: calc(1vw / 90);
--pref-font-size-lg: calc(1vw * var(--typescale));
--pref-font-size-xl: calc(var(--pref-font-size-lg) * var(--typescale));
--pref-font-size-2x: calc(var(--pref-font-size-xl) * var(--typescale));
--pref-font-size-3x: calc(var(--pref-font-size-2x) * var(--typescale));
--pref-font-size-4x: calc(var(--pref-font-size-3x) * var(--typescale));
--pref-font-size-5x: calc(var(--pref-font-size-4x) * var(--typescale));
--pref-font-size-6x: calc(var(--pref-font-size-5x) * var(--typescale));

--max-font-size-xs: calc(var(--max-font-size-sm) / var(--typescale));
--max-font-size-sm: calc(1rem / var(--typescale));
--max-font-size-md: 1rem;
--max-font-size-lg: calc(1rem * var(--typescale));
--max-font-size-xl: calc(var(--max-font-size-lg) * var(--typescale));
--max-font-size-2x: calc(var(--max-font-size-xl) * var(--typescale));
--max-font-size-3x: calc(var(--max-font-size-2x) * var(--typescale));
--max-font-size-4x: calc(var(--max-font-size-3x) * var(--typescale));
--max-font-size-5x: calc(var(--max-font-size-4x) * var(--typescale));
--max-font-size-6x: calc(var(--max-font-size-5x) * var(--typescale));

  font-family: var(--ui-font-family);
  color: var(--base-800);

h1 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-5x),
    var(--pref-font-size-5x),
    var(--max-font-size-5x)
  );
}

h2 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-4x),
    var(--pref-font-size-4x),
    var(--max-font-size-4x)
  );
}

h3 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-3x),
    var(--pref-font-size-3x),
    var(--max-font-size-3x)
  );
}

h4 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

h5 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

h6 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.h1 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-5x),
    var(--pref-font-size-5x),
    var(--max-font-size-5x)
  );
}

.h2 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-4x),
    var(--pref-font-size-4x),
    var(--max-font-size-4x)
  );
}

.h3 {
  color: var(--base-950);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-3x),
    var(--pref-font-size-3x),
    var(--max-font-size-3x)
  );
}

.h4 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

.h5 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

.h6 {
  color: var(--base-900);
  font-family: var(--ui-font-family);
  font-weight: var(--ui-heading-font-weight);
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.text-2x {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-2x),
    var(--pref-font-size-2x),
    var(--max-font-size-2x)
  );
}

.text-xl {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-xl),
    var(--pref-font-size-xl),
    var(--max-font-size-xl)
  );
}

.text-lg {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-lg),
    var(--pref-font-size-lg),
    var(--max-font-size-lg)
  );
}

.text-md {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-md),
    var(--pref-font-size-md),
    var(--max-font-size-md)
  );
}

.text-sm {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-sm),
    var(--pref-font-size-sm),
    var(--max-font-size-sm)
  );
}

.text-xs {
  font-family: var(--ui-font-family);
  font-size: clamp(
    var(--min-font-size-xs),
    var(--pref-font-size-xs),
    var(--max-font-size-xs)
  );
}

a {
  text-decoration:none;
}

}

/* Dashboard-generated typography tokens */
body {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-default, normal);
  line-height: var(--leading-normal, 1.55);
  letter-spacing: var(--tracking-normal, 0);
}

.text-xs {
  font-size: var(--text-xs, var(--type-default-xs));
  line-height: var(--leading-default-xs, var(--leading-normal));
}

.text-sm {
  font-size: var(--text-sm, var(--type-default-sm));
  line-height: var(--leading-default-sm, var(--leading-normal));
}

.text-md {
  font-size: var(--text-base, var(--type-default-base));
  line-height: var(--leading-default-base, var(--leading-normal));
}

.text-lg {
  font-size: var(--text-lg, var(--type-default-lg));
  line-height: var(--leading-default-lg, var(--leading-normal));
}

.text-xl {
  font-size: var(--text-xl, var(--type-default-xl));
  line-height: var(--leading-default-xl, var(--leading-normal));
}

.text-2x,
.text-2xl {
  font-size: var(--text-2xl, var(--type-display-2xl));
  line-height: var(--leading-display-2xl, var(--leading-tight));
}

.text-3x,
.text-3xl {
  font-size: var(--text-3xl, var(--type-display-3xl));
  line-height: var(--leading-display-3xl, var(--leading-tight));
}

.text-4x,
.text-4xl {
  font-size: var(--text-4xl, var(--type-display-4xl));
  line-height: var(--leading-display-4xl, var(--leading-tight));
}

.display {
  font-family: var(--font-display, Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif);
  font-weight: var(--weight-display, normal);
  line-height: var(--leading-display, 1.1);
  letter-spacing: var(--tracking-display, 0);
}

.display h1,
h1.display,
.display .h1,
.h1.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-4xl);
  line-height: var(--leading-display-4xl, var(--leading-display));
}

.display h2,
h2.display,
.display .h2,
.h2.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-3xl);
  line-height: var(--leading-display-3xl, var(--leading-display));
}

.display h3,
h3.display,
.display .h3,
.h3.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-2xl);
  line-height: var(--leading-display-2xl, var(--leading-display));
}

.display h4,
h4.display,
.display .h4,
.h4.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-xl);
  line-height: var(--leading-display-xl, var(--leading-display));
}

.display h5,
h5.display,
.display .h5,
.h5.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-lg);
  line-height: var(--leading-display-lg, var(--leading-display));
}

.display h6,
h6.display,
.display .h6,
.h6.display {
  font-weight: var(--weight-display, 700);
  font-size: var(--type-display-base);
  line-height: var(--leading-display-base, var(--leading-display));
}

.display .text-xs {
  font-size: var(--type-display-xs);
  line-height: var(--leading-display-xs, var(--leading-display));
}

.display .text-sm {
  font-size: var(--type-display-sm);
  line-height: var(--leading-display-sm, var(--leading-display));
}

.display .text-md {
  font-size: var(--type-display-base);
  line-height: var(--leading-display-base, var(--leading-display));
}

.display .text-lg {
  font-size: var(--type-display-lg);
  line-height: var(--leading-display-lg, var(--leading-display));
}

.display .text-xl {
  font-size: var(--type-display-xl);
  line-height: var(--leading-display-xl, var(--leading-display));
}

.post {
  font-family: var(--font-article, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif);
  font-weight: var(--weight-article, normal);
  line-height: var(--leading-article, 1.7);
  letter-spacing: var(--tracking-article, 0);
}

.post h1,
h1.post,
.post .h1,
.h1.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-4xl);
  line-height: var(--leading-article-4xl, var(--leading-article));
}

.post h2,
h2.post,
.post .h2,
.h2.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-3xl);
  line-height: var(--leading-article-3xl, var(--leading-article));
}

.post h3,
h3.post,
.post .h3,
.h3.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-2xl);
  line-height: var(--leading-article-2xl, var(--leading-article));
}

.post h4,
h4.post,
.post .h4,
.h4.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-xl);
  line-height: var(--leading-article-xl, var(--leading-article));
}

.post h5,
h5.post,
.post .h5,
.h5.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-lg);
  line-height: var(--leading-article-lg, var(--leading-article));
}

.post h6,
h6.post,
.post .h6,
.h6.post {
  font-weight: var(--weight-article, 700);
  font-size: var(--type-article-base);
  line-height: var(--leading-article-base, var(--leading-article));
}

.post .text-xs {
  font-size: var(--type-article-xs);
  line-height: var(--leading-article-xs, var(--leading-article));
}

.post .text-sm {
  font-size: var(--type-article-sm);
  line-height: var(--leading-article-sm, var(--leading-article));
}

.post .text-md {
  font-size: var(--type-article-base);
  line-height: var(--leading-article-base, var(--leading-article));
}

.post .text-lg {
  font-size: var(--type-article-lg);
  line-height: var(--leading-article-lg, var(--leading-article));
}

.post .text-xl {
  font-size: var(--type-article-xl);
  line-height: var(--leading-article-xl, var(--leading-article));
}

.ui {
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: var(--weight-ui, normal);
  line-height: var(--leading-ui, 1.45);
  letter-spacing: var(--tracking-ui, 0);
}

.ui h1,
h1.ui,
.ui .h1,
.h1.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-4xl);
  line-height: var(--leading-ui-4xl, var(--leading-ui));
}

.ui h2,
h2.ui,
.ui .h2,
.h2.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-3xl);
  line-height: var(--leading-ui-3xl, var(--leading-ui));
}

.ui h3,
h3.ui,
.ui .h3,
.h3.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-2xl);
  line-height: var(--leading-ui-2xl, var(--leading-ui));
}

.ui h4,
h4.ui,
.ui .h4,
.h4.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-xl);
  line-height: var(--leading-ui-xl, var(--leading-ui));
}

.ui h5,
h5.ui,
.ui .h5,
.h5.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-lg);
  line-height: var(--leading-ui-lg, var(--leading-ui));
}

.ui h6,
h6.ui,
.ui .h6,
.h6.ui {
  font-weight: var(--weight-ui, 700);
  font-size: var(--type-ui-base);
  line-height: var(--leading-ui-base, var(--leading-ui));
}

.ui .text-xs {
  font-size: var(--type-ui-xs);
  line-height: var(--leading-ui-xs, var(--leading-ui));
}

.ui .text-sm {
  font-size: var(--type-ui-sm);
  line-height: var(--leading-ui-sm, var(--leading-ui));
}

.ui .text-md {
  font-size: var(--type-ui-base);
  line-height: var(--leading-ui-base, var(--leading-ui));
}

.ui .text-lg {
  font-size: var(--type-ui-lg);
  line-height: var(--leading-ui-lg, var(--leading-ui));
}

.ui .text-xl {
  font-size: var(--type-ui-xl);
  line-height: var(--leading-ui-xl, var(--leading-ui));
}