/**
* Color variables
*/
:root{
    --pk-page-bg-color: #ffffff;
    --pk-heading-color: #312019;
    --pk-text-color: #312019;

    /**
    * Grid variables
    */
    --container-width: 100svw;
    --site-gutter: 112px;
    --column-gap: 24px;
    --row-spacing: 100px;

    /**
    * Font variables
    */
    --pk-heading-font-family: 'orpheuspro';
    --pk-heading-font-weight: 500;
    --pk-heading-line-height: 1.1;

    --pk-text-line-height: 1.33;
    --pk-text-font-family: 'neue-haas-unica';
    --pk-text-font-weight: 350;
    --text-desktop-font-size: 16px;
    --text-tablet-font-size: 16px;
    --text-mobile-font-size: 16px;

    /**
    * Button variables
    */
    --button-font-size: 18px;
    --pk-button-font-family: 'neue-haas-unica';
    --pk-button-font-weight: 350;

/*Base unit*/
    --scaling-h1: max(3rem, calc(4 * var(--su)));
    --scaling-h1-sm: max(2rem, calc(3 * var(--su)));
    --scaling-h2: max(1.55rem, calc(2.5 * var(--su)));
    --scaling-h3: max(1.4rem, calc(2.25 * var(--su)));
    --scaling-h4: max(1.15rem, calc(2 * var(--su)));
    --scaling-h5: max(1.075rem, calc(1.5 * var(--su)));
    --scaling-h6: max(1.025rem, calc(1.375 * var(--su)));

    /*32px in design*/
    --desktop-body-intro: max(1.75rem, calc(2 * var(--su)));
    /*24px in design*/
    --desktop-body-xl: max(1.125rem, calc(1.5 * var(--su)));
    /*20px in design*/
    --desktop-body-lg: max(1.125rem, calc(1.25 * var(--su)));
    /*18px in design*/
    --desktop-body-md: max(1rem, (1 * var(--su)));
    /*16px in design*/
    --desktop-body-sm: max(0.875rem, var(--su));
    /*14px in design*/
    --desktop-body-xs: max(0.75rem, calc(0.875 * var(--su)));
    /*12px in design*/
    --desktop-body-xxs: max(12px, calc(0.75 * var(--su)));
}


    /**
    * New variables
    */

  /* --body-large: 1.25rem;
  --body-regular: 1.125rem;
  --body-small: 1rem;
  --body-xtra-small: 0.75rem;

  --heading-xl: max(46px, 5.08vw);
  --heading-1: max(52px, 3.67vw);
  --heading-2: max(42px, 2.68vw);

  --heading-3-xl: max(36px, 2.26vw);
  --heading-3: max(32px, 2.26vw);

  --heading-4: max(24px, 1.98vw);
  --heading-5: max(20px, 1.55vw);
  --heading-6: max(18px, 1.24vw);
}

 */



/**
* Relative scaling
*/
:root{
    --pk-container-width: var(--container-width);
    --pk-site-gutter: var(--site-gutter);
    --pk-column-gap: var(--column-gap);
    --pk-row-spacing: var(--row-spacing);

    --pk-button-font-size: var(--button-font-size);
}

body.relative-scaling{
    --pk-column-gap: calc((var(--column-gap) / 16px) * var(--su));
    --pk-row-spacing: calc((var(--row-spacing) / 16px) * var(--su));
    --pk-site-gutter: calc((var(--site-gutter) / 16px) * var(--su));

    --pk-button-font-size: max(1rem, calc((var(--button-font-size) / 16px) * var(--su)));
    --pk-text-font-size: max(var(--text-mobile-font-size), calc((var(--text-desktop-font-size) / 16px) * var(--su)));
}

@media only screen and (min-width: 993px){
    :root{
        --pk-text-font-size: var(--text-desktop-font-size);
    }
}

@media only screen and (max-width: 992px){
    :root{
        --pk-text-font-size: var(--text-tablet-font-size);
    }
}

@media only screen and (max-width: 767px){
    :root{
        --pk-text-font-size: var(--text-mobile-font-size);
    }
}







/* Temporary */
body {
    font-size: var(--desktop-body-md) !important;
}

body h1 {
    font-size: var(--scaling-h1) !important;
  letter-spacing: -0.36px;
}

body h1.small {
    font-size: var(--scaling-h1-sm) !important;
  letter-spacing: -0.36px;
}

body h2 {
    font-size: var(--scaling-h2) !important;
  letter-spacing: -0.36px;
}

body h3 {
    font-size: var(--scaling-h3) !important;
  letter-spacing: -0.36px;
}

body h4 {
    font-size: var(--scaling-h4) !important;
  letter-spacing: -0.36px;
}

body h5 {
    font-size: var(--scaling-h5) !important;
  letter-spacing: -0.36px;
}

body h6 {
    font-size: var(--scaling-h6) !important;
  letter-spacing: -0.36px;
}