/**
 * Fluid
 * A responsive function that interpolates between a minimum and maximum value based on the viewport width.
 * The function uses a linear equation to interpolate and clamps the output to stay within the specified range.
 * @function fluid
 * @access public
 * @param {Number} $min-px - The minimum value for the output in pixels.
 * @param {Number} $max-px - The maximum value for the output in pixels.
 * @param {Number} [$breakpoint-min-px: 320] - The minimum viewport width in pixels where the output starts to change.
 * @param {Number} [$breakpoint-max-px: 1660] - The maximum viewport width in pixels where the output stops changing.
 * @return {String} - The interpolated and clamped CSS value.
 * @example
 * // If the viewport width is 320px, the output will be 1.6rem (16px). If the viewport width is 1660px, the output will be 2.4rem (24px).
 * // For viewport widths between 320px and 1660px, the output will linearly interpolate between 1.6rem (16px) and 2.4rem (24px).
 * font-size: fluid(1.6, 2.4);
 * @throws {Error} If $min is not a number, or if $max is not a number, or if $breakpoint-min-px is not a number, or if $breakpoint-max-px is not a number.
*/
/**
 * Fluid
 * A responsive function that interpolates between a minimum and maximum value based on the viewport width.
 * The function uses a linear equation to interpolate and clamps the output to stay within the specified range.
 * @function fluid
 * @access public
 * @param {Number} $min-px - The minimum value for the output in pixels.
 * @param {Number} $max-px - The maximum value for the output in pixels.
 * @param {Number} [$breakpoint-min-px: 320] - The minimum viewport width in pixels where the output starts to change.
 * @param {Number} [$breakpoint-max-px: 1660] - The maximum viewport width in pixels where the output stops changing.
 * @return {String} - The interpolated and clamped CSS value.
 * @example
 * // If the viewport width is 320px, the output will be 1.6rem (16px). If the viewport width is 1660px, the output will be 2.4rem (24px).
 * // For viewport widths between 320px and 1660px, the output will linearly interpolate between 1.6rem (16px) and 2.4rem (24px).
 * font-size: fluid(1.6, 2.4);
 * @throws {Error} If $min is not a number, or if $max is not a number, or if $breakpoint-min-px is not a number, or if $breakpoint-max-px is not a number.
*/
/**
 * @mixin set-typography-vars
 * Sets typography-related CSS custom properties for a given primary prefix and, optionally, a fallback prefix.
 *
 * @param {String} $primary-prefix - The primary prefix used for the custom properties.
 * @param {String} [$fallback-prefix=null] - The optional fallback prefix used for the custom properties.
 * @param {String} [$font-family-default=null] - The default font-family value.
 * @param {String} [$font-size-default=null] - The default font-size value.
 * @param {String} [$line-height-default=null] - The default line-height value.
 * @param {String} [$font-weight-default=null] - The default font-weight value.
 * @param {String} [$text-transform-default=null] - The default text-transform value.
 * @param {String} [$color-default=null] - The default color value.
 * @param {Boolean} [$important=false] - Whether to append !important to the generated CSS declarations.
 */
/**
 * Fluid
 * A responsive function that interpolates between a minimum and maximum value based on the viewport width.
 * The function uses a linear equation to interpolate and clamps the output to stay within the specified range.
 * @function fluid
 * @access public
 * @param {Number} $min-px - The minimum value for the output in pixels.
 * @param {Number} $max-px - The maximum value for the output in pixels.
 * @param {Number} [$breakpoint-min-px: 320] - The minimum viewport width in pixels where the output starts to change.
 * @param {Number} [$breakpoint-max-px: 1660] - The maximum viewport width in pixels where the output stops changing.
 * @return {String} - The interpolated and clamped CSS value.
 * @example
 * // If the viewport width is 320px, the output will be 1.6rem (16px). If the viewport width is 1660px, the output will be 2.4rem (24px).
 * // For viewport widths between 320px and 1660px, the output will linearly interpolate between 1.6rem (16px) and 2.4rem (24px).
 * font-size: fluid(1.6, 2.4);
 * @throws {Error} If $min is not a number, or if $max is not a number, or if $breakpoint-min-px is not a number, or if $breakpoint-max-px is not a number.
*/
/**
 * @mixin set-margin-vars
 * Sets margin-related CSS custom properties for a given prefix and assigns them to the margin property.
 *
 * @param {String} $prefix - The prefix used for the custom properties.
 * @param {*} [$my=null] - The margin value for the top and bottom.
 * @param {*} [$mx=null] - The margin value for the left and right.
 * @param {*} [$mt=null] - The margin value for the top.
 * @param {*} [$mr=null] - The margin value for the right.
 * @param {*} [$mb=null] - The margin value for the bottom.
 * @param {*} [$ml=null] - The margin value for the left.
 * @param {*} [$my-default=0] - The default margin value for the top and bottom.
 * @param {*} [$mx-default=0] - The default margin value for the left and right.
 * @param {*} [$mt-default=0] - The default margin value for the top.
 * @param {*} [$mr-default=0] - The default margin value for the right.
 * @param {*} [$mb-default=0] - The default margin value for the bottom.
 * @param {*} [$ml-default=0] - The default margin value for the left.
 * @param {Boolean} [$important=false] - Whether to append !important to the generated CSS declaration.
 */
/**
* Sets custom padding variables for an element using CSS variables.
* @param {string} $prefix - The prefix to use for the CSS variable names.
* @param {number} [$py=null] - The padding value for top and bottom sides.
* @param {number} [$px=null] - The padding value for left and right sides.
* @param {number} [$pt=null] - The padding value for the top side.
* @param {number} [$pr=null] - The padding value for the right side.
* @param {number} [$pb=null] - The padding value for the bottom side.
* @param {number} [$pl=null] - The padding value for the left side.
* @param {number} [$py-default=0] - The default padding value for top and bottom sides.
* @param {number} [$px-default=0] - The default padding value for left and right sides.
* @param {number} [$pt-default=0] - The default padding value for the top side.
* @param {number} [$pr-default=0] - The default padding value for the right side.
* @param {number} [$pb-default=0] - The default padding value for the bottom side.
* @param {number} [$pl-default=0] - The default padding value for the left side.
* @param {boolean} [$important=false] - Whether to use "!important" modifier for the CSS "padding" property.
*/
/**
 * @mixin set-var
 * Sets a single CSS custom property for a given primary prefix and, optionally, a fallback prefix.
 *
 * @param {String} $property - The CSS property to set.
 * @param {String} $primary-prefix - The primary prefix used for the custom property.
 * @param {String} [$fallback-prefix=null] - The optional fallback prefix used for the custom property.
 * @param {String} [$var-name=null] - The custom property name, if different from the CSS property.
 * @param {*} [$default=null] - The default value for the custom property.
 * @param {Boolean} [$important=false] - Whether to append !important to the generated CSS declaration.
 */
@import '../fonts/stylesheet.css';
.button.not-prose {
  padding: var(--button-pt, var(--button-py, var(--space-xs))) var(--button-pr, var(--button-px, var(--space-m))) var(--button-pb, var(--button-py, var(--space-xs))) var(--button-pl, var(--button-px, var(--space-m))) !important;
  font-family: var(--button-font-family , var(--base-font-family)) !important;
  font-size: var(--button-font-size , var(--step-0)) !important;
  line-height: var(--button-line-height , var(--leading-normal)) !important;
  font-weight: var(--button-font-weight , var(--base-font-weight)) !important;
  text-transform: var(--button-text-transform , inherit) !important;
  color: var(--button-color , var(--base-color)) !important;
  border-radius: var(--button-border-radius, 0);
  border: var(--button-border, unset);
  background: var(--button-background-color, transparent);
  transition: var(--button-transition, var(--transition));
}
.button.not-prose:hover, .button.not-prose:active, .button.not-prose:focus {
  color: var(--button-focus-color, var(--button-color)) !important;
  background: var(--button-focus-background-color, var(--button-background-color)) !important;
  border: var(--button-focus-border, var(--button-border)) !important;
}

.prose-link {
  font-family: var(--link-font-family , var(--base-font-family)) !important;
  font-size: var(--link-font-size , var(--base-font-size)) !important;
  line-height: var(--link-line-height , var(--base-line-height)) !important;
  font-weight: var(--link-font-weight , var(--base-font-weight)) !important;
  text-transform: var(--link-text-transform , inherit) !important;
  color: var(--link-color , var(--base-color)) !important;
}
.prose-link:hover, .prose-link:focus {
  color: var(--link-focus-color, var(--link-color)) !important;
  text-decoration: var(--link-text-decoration) !important;
}

@keyframes link-underline {
  0% {
    transform: scaleX(100%);
    transform-origin: center right;
  }
  50% {
    transform: scaleX(0);
    transform-origin: center right;
  }
  51% {
    transform-origin: center left;
  }
  100% {
    transform-origin: center left;
    transform: scaleX(100%);
  }
}
:root {
  --base-50: #F7F7F7;
  --base-100: #E3E3E3;
  --base-200: #C8C8C8;
  --base-300: #A4A4A4;
  --base-400: #818181;
  --base-500: #666666;
  --base-600: #515151;
  --base-700: #434343;
  --base-800: #383838;
  --base-900: #111111;
}

:root {
  --border-color: var(--base-200);
  --easing: cubic-bezier(.49,.11,.24,1);
  --transition: 0.3s all var(--easing);
  --section-vertical-space: var(--space-l-2xl);
  --content-module-pr: var(--space-xl-3xl);
  --sidebar-image-mb: var(--space-xs-s);
  --button-color: var(--base-800);
  --button-border-radius: 5rem;
  --button-border: 1px solid var(--border-color);
  --button-focus-color: var(--base-50);
  --button-focus-background-color: var(--base-900);
  --button-focus-border: 1px solid var(--base-900);
  --ICON-PLUS-DARK: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIHdpZHRoPSIxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMxMTEiPjxwYXRoIGQ9Im04IDEzLjQ1ODR2LTkuOTE2NjkiLz48cGF0aCBkPSJtMy4xODc1IDguMzU0MTNoOS45MTY3Ii8+PC9nPjwvc3ZnPg==");
  --ICON-PLUS-MID: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIHdpZHRoPSIxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiM4MTgxODEiPjxwYXRoIGQ9Im04IDEzLjQ1ODR2LTkuOTE2NjkiLz48cGF0aCBkPSJtMy4xODc1IDguMzU0MTNoOS45MTY3Ii8+PC9nPjwvc3ZnPg==");
  --ICON-ARROW-RIGHT-MID: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIHdpZHRoPSIxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAuNjE5NSAzLjY3OTIzIDQuODIwOCA0LjgyMDc3bTAgMC00LjgyMDggNC44MjA4bTQuODIwOC00LjgyMDhoLTE0LjAyNDI4IiBzdHJva2U9IiM4MTgxODEiLz48L3N2Zz4=");
  --ICON-ARROW-RIGHT-DARK: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE3IiB2aWV3Qm94PSIwIDAgMTcgMTciIHdpZHRoPSIxNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAuNjE5NSAzLjY3OTIzIDQuODIwOCA0LjgyMDc3bTAgMC00LjgyMDggNC44MjA4bTQuODIwOC00LjgyMDhoLTE0LjAyNDI4IiBzdHJva2U9IiMxMTEiLz48L3N2Zz4=");
}

:root {
  --leading-normal: 1.27;
  --leading-relaxed: 1.4;
  --leading-loose: 1.6;
  --base-font-family: "Stempel Garamond LT Std", "Times", "serif";
  --base-font-weight: 400;
  --base-line-height: var(--leading-normal);
  --heading-font-weight: 400;
  --heading-color: var(--text-primary);
  --page-heading-font-size: var(--step-5);
  --page-subheading-font-size: var(--step-5);
  --hero-heading-font-size: var(--page-heading-font-size);
  --hero-subheading-font-size: var(--step-1);
  --caption-color: var(--text-secondary);
  --caption-mt: var(--space-s);
}

.display_1,
.display_2,
.display_3,
.display_4,
.display_5,
.display_6 {
  color: var(--text-primary);
}

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

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

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

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

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

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

.button.not-prose {
  float: unset;
  display: inline-flex;
  text-decoration: none;
}
.button.not-prose > * {
  padding: unset;
}

.prose-link {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
}
.prose-link::after {
  content: "";
  position: absolute;
  bottom: 0.1em;
  border-bottom: 1px solid var(--border-color);
  left: 0;
  width: 100%;
  transform: scaleX(100%);
}
.prose-link:hover::after {
  animation-name: link-underline;
  animation-duration: 0.6s;
  transform-origin: center right;
  animation-timing-function: var(--easing);
}

/* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1660,15,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(1.106rem, 1.1408656716rem - 0.10895522vw, 0.96rem);
  --step--1: clamp(1.244rem, 1.2545074627rem - 0.03283582vw, 1.2rem);
  --step-0: clamp(1.4rem, 1.376119403rem + 0.07462687vw, 1.5rem);
  --step-1: clamp(1.575rem, 1.503358209rem + 0.2238806vw, 1.875rem);
  --step-2: clamp(1.772rem, 1.6354029851rem + 0.42686567vw, 2.344rem);
  --step-3: clamp(1.993rem, 1.769238806rem + 0.69925373vw, 2.93rem);
  --step-4: clamp(2.243rem, 1.9041343284rem + 1.05895522vw, 3.662rem);
  --step-5: clamp(2.523rem, 2.0322537313rem + 1.53358209vw, 4.578rem);
}

:root {
  --space-3xs: clamp(0.4rem, 0.4rem + 0vw, 0.4rem);
  --space-2xs: clamp(0.7rem, 0.676119403rem + 0.07462687vw, 0.8rem);
  --space-xs: clamp(1.1rem, 1.1rem + 0vw, 1.1rem);
  --space-s: clamp(1.4rem, 1.376119403rem + 0.07462687vw, 1.5rem);
  --space-m: clamp(2.1rem, 2.052238806rem + 0.14925373vw, 2.3rem);
  --space-l: clamp(3.2rem, 3.152238806rem + 0.14925373vw, 3.4rem);
  --space-xl: clamp(4.2rem, 4.128358209rem + 0.2238806vw, 4.5rem);
  --space-2xl: clamp(5.6rem, 5.5044776119rem + 0.29850746vw, 6rem);
  --space-3xl: clamp(8.4rem, 8.2567164179rem + 0.44776119vw, 9rem);
  --space-4xl: clamp(11.2rem, 11.0089552239rem + 0.59701493vw, 12rem);
  --space-5xl: clamp(14rem, 13.7611940299rem + 0.74626866vw, 15rem);
  --space-6xl: clamp(16.8rem, 16.5134328358rem + 0.89552239vw, 18rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.4rem, 0.3044776119rem + 0.29850746vw, 0.8rem);
  --space-2xs-xs: clamp(0.7rem, 0.6044776119rem + 0.29850746vw, 1.1rem);
  --space-xs-s: clamp(1.1rem, 1.0044776119rem + 0.29850746vw, 1.5rem);
  --space-s-m: clamp(1.4rem, 1.1850746269rem + 0.67164179vw, 2.3rem);
  --space-m-l: clamp(2.1rem, 1.7895522388rem + 0.97014925vw, 3.4rem);
  --space-l-xl: clamp(3.2rem, 2.8895522388rem + 0.97014925vw, 4.5rem);
  --space-xl-2xl: clamp(4.2rem, 3.7701492537rem + 1.34328358vw, 6rem);
  --space-2xl-3xl: clamp(5.6rem, 4.7880597015rem + 2.53731343vw, 9rem);
  --space-3xl-4xl: clamp(8.4rem, 7.5402985075rem + 2.68656716vw, 12rem);
  --space-4xl-5xl: clamp(11.2rem, 10.2925373134rem + 2.8358209vw, 15rem);
  --space-5xl-6xl: clamp(14rem, 13.0447761194rem + 2.98507463vw, 18rem);
  /* Custom pairs */
  --space-2xs-s: clamp(0.7rem, 0.5089552239rem + 0.59701493vw, 1.5rem);
  --space-xs-m: clamp(1.1rem, 0.8134328358rem + 0.89552239vw, 2.3rem);
  --space-xs-l: clamp(1.1rem, 0.5507462687rem + 1.71641791vw, 3.4rem);
  --space-s-l: clamp(1.4rem, 0.9223880597rem + 1.49253731vw, 3.4rem);
  --space-s-xl: clamp(1.4rem, 0.6597014925rem + 2.31343284vw, 4.5rem);
  --space-m-xl: clamp(2.1rem, 1.5268656716rem + 1.79104478vw, 4.5rem);
  --space-m-2xl: clamp(2.1rem, 1.1686567164rem + 2.91044776vw, 6rem);
  --space-l-2xl: clamp(3.2rem, 2.5313432836rem + 2.08955224vw, 6rem);
  --space-l-5xl: clamp(3.2rem, 3.152238806rem + 0.14925373vw, 3.4rem);
  --space-xl-3xl: clamp(4.2rem, 3.0537313433rem + 3.58208955vw, 9rem);
  --space-2xl-4xl: clamp(5.6rem, 4.071641791rem + 4.7761194vw, 12rem);
}

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