:root {
    --dian-root-font-size: 10px;

    /* Fonts */
    --dian-bague-reg: "PF Bague Sans Pro Regular";
    --dian-bague-medium: "PF Bague Sans Pro Medium";
    --dian-bague-bold: "PF Bague Sans Pro Bold";

    --dian-regal-reg: "PF Regal Text Pro Regular A";
    --dian-regal-reg-it: "PF Regal Text Pro Regular A Italic";
    --dian-regal-med: "PF Regal Text Pro Medium";

    --dian-backend-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Spacing */
    --dian-spacing-1: 0.1rem;
    --dian-spacing-2: 0.2rem;
    --dian-spacing-3: 0.3rem;
    --dian-spacing-4: 0.4rem;
    --dian-spacing-8: 0.8rem;
    --dian-spacing-10: 1rem;
    --dian-spacing-12: 1.2rem;
    --dian-spacing-16: 1.6rem;
    --dian-spacing-24: 2.4rem;
    --dian-spacing-32: 3.2rem;
    --dian-spacing-40: 4rem;
    --dian-spacing-48: 4.8rem;
    --dian-spacing-56: 5.6rem;
    --dian-spacing-64: 6.4rem;
    --dian-spacing-72: 7.2rem;
    --dian-spacing-88: 8.8rem;
    --dian-spacing-96: 9.6rem;
    --dian-spacing-112: 11.2rem;
    --dian-spacing-section: 14rem;
    --dian-spacing-200: 20rem;

    --dian-spacing-section-responsive: clamp(7.2rem, 0rem + 9.375vw, 12rem);
    --dian-spacing-md: clamp(6.4rem, -0.8rem + 9.375vw, 11.2rem);

    /* Border Radius */
    --dian-radius-round-subtle: 0.4rem;
    --dian-radius-round-s: 1rem;
    --dian-radius-round-m: 1.6rem;
    --dian-radius-round-l: 3.2rem;
    --dian-radius-round-100: 10rem;
    --dian-radius-round-full: 999rem;

    /* Strokes */
    --dian-stroke-thin: 1;
    --dian-stroke-thick: 3;

    /* Font Sizes */
    --dian-font-size-display: clamp(3.6rem, -6rem + 12.5vw, 9rem);
    --dian-font-size-dropcap: 6.4rem;
    --dian-font-size-quote: clamp(4.2rem, 1rem + 4.1667vw, 6rem);
    --dian-font-size-quote-text: clamp(2.2rem, 1.4889rem + 0.9259vw, 2.6rem);
    --dian-font-size-h1: clamp(3.6rem, 0.0444rem + 4.6296vw, 5.6rem);
    /* --dian-font-size-h2: clamp(2rem, -0.843rem + 3.704vw, 3.6rem); */
    --dian-font-size-h2: 3.6rem;
    /* --dian-font-size-h3: clamp(2rem, 0.213rem + 2.315vw, 3rem); */
    --dian-font-size-h3: 3rem;
    --dian-font-size-h4: clamp(1.8rem, 0.3778rem + 1.8519vw, 2.6rem);
    --dian-font-size-h5: clamp(2rem, 0.3778rem + 1.8519vw, 2.4rem);
    /* --dian-font-size-body-lg: clamp(1.8rem, 1.436rem + 0.463vw, 2.2rem); */
    --dian-font-size-body-lg: 2.2rem;
    --dian-font-size-body: 2rem;
    --dian-font-size-body-md: 1.8rem;
    --dian-font-size-body-sm: 1.6rem;
    --dian-font-size-body-xs: 1.4rem;
    --dian-font-size-body-xxs: 1.2rem;

    /* Fixed font sizes */
    --dian-body-26: 2.6rem;
    --dian-body-18: 18px;
    --dian-body-16: 16px;
    --dian-body-14: 14px;
    --dian-body-12: 12px;

    /* Line Heights */
    --dian-line-height-display: clamp(4.6rem, -3.2222rem + 10.1852vw, 9rem);
    --dian-line-height-h1: clamp(4rem, 2.9333rem + 1.3889vw, 4.6rem);
    --dian-line-height-dropcap: clamp(4.2rem, 2.578rem + 2.778vw, 5.6rem);
    --dian-line-height-quote: clamp(4.6rem, 2.1111rem + 3.2407vw, 6rem);
    --dian-line-height-quote-text: clamp(3rem, 1.9333rem + 1.3889vw, 3.6rem);
    --dian-line-height-h2: clamp(3.8rem, 2.711rem + 1.389vw, 4.4rem);
    /* --dian-line-height-h3: clamp(3rem, 1.533rem + 1.852vw, 3.8rem); */
    --dian-line-height-h3: 3.8rem;
    --dian-line-height-h4: clamp(3rem, 1.533rem + 1.852vw, 3.6rem);
    /* --dian-line-height-body-lg: clamp(2.8rem, 2.444rem + 0.463vw, 3rem); */
    --dian-line-height-body-lg: 3rem;
    --dian-line-height-body-md: 2.8rem;
    --dian-line-height-body-26: 3.6rem;
    --dian-line-height-body: 2.4rem;
    --dian-line-height-body-sm: 2.2rem;
    --dian-line-height-body-xs: 2rem;
    --dian-line-height-body-xxs: 1.8rem;

    --dian-container-width: 1216px;
    --dian-sm-container-width: 1008px;

    --dian-letter-spacing-display: -1.28px;

    --dian-box-shadow: 6px 6px 0 0 rgba(0, 156, 167, 0.09);
    --dian-box-shadow-hover: 0 0 0 0 rgba(0, 156, 167, 0.09);
    --dian-box-shadow-subtle: 8px 9px 0 0 rgba(0, 156, 167, 0.09);

    --dian-btn-bg: linear-gradient(95deg, var(--primary) 1.88%, var(--primary) 96.72%);
    --dian-hover-btn-bg: linear-gradient(95deg, var(--primary) 1.88%, var(--primary-alt) 96.72%);
}

::selection {
    background-color: var(--primary);
    color: var(--surface-0);
}

html {
    font-size: var(--dian-root-font-size);
}

h1 {
    font-family: var(--dian-bague-bold);
    font-size: var(--dian-font-size-h1);
    font-weight: 700;
    line-height: var(--dian-line-height-h1);
    color: var(--surface-100);
    margin-bottom: var(--dian-spacing-32);
}

h2 {
    font-family: var(--dian-bague-bold);
    font-size: var(--dian-font-size-h2);
    font-weight: 700;
    line-height: var(--dian-line-height-h2);
    color: var(--surface-100);
    margin-bottom: var(--dian-spacing-32);
    letter-spacing: -0.68px;
}

h3 {
    font-family: var(--dian-bague-bold);
    font-size: var(--dian-font-size-h3);
    font-weight: 700;
    line-height: var(--dian-line-height-h3);
    color: var(--surface-100);
    margin-bottom: var(--dian-spacing-32);
    letter-spacing: -0.68px;
}

h4,
h5,
h6 {
    font-family: var(--dian-bague-bold);
    font-size: var(--dian-font-size-body-lg);
    font-weight: 700;
    line-height: var(--dian-line-height-body-lg);
    color: var(--dian-color-base-900);
    margin-bottom: var(--dian-spacing-32);
}

p {
    font-family: var(--dian-regal-reg);
    font-size: var(--dian-font-size-body-md);
    font-style: normal;
    font-weight: 400;
    line-height: var(--dian-line-height-body-md);
    color: var(--dian-color-base-800);
    margin-bottom: 0;
}

blockquote {
    position: relative;
    border-left: 4px solid var(--primary-alt) !important;
    padding: var(--dian-spacing-48) 0 0 var(--dian-spacing-40) !important;
    margin: var(--dian-spacing-48) 0 var(--dian-spacing-48) 0 !important;
    letter-spacing: -0.6px;
    background: url("../img/quote.svg") !important;
    background-repeat: no-repeat !important;
    background-position-x: var(--dian-spacing-40) !important;
}

blockquote p {
    font-size: var(--dian-font-size-h3) !important;
    font-family: var(--dian-bague-bold) !important;
    line-height: var(--dian-line-height-h3) !important;
}

ul li,
ol li {
    font-family: var(--dian-regal-reg);
    font-size: var(--dian-font-size-body-lg);
}

.main-post-section {
    margin-inline: 0;
}

.site-footer.grid-container {
    width: 100%;
    max-width: 100%;
}

.site-footer.grid-container > div[class^="gb-element-"],
.main-post-section > div[class^="gb-element-"] {
    padding-inline: var(--dian-spacing-16);
}

.has-drop-cap:not(:focus)::first-letter,
.has-drop-cap:focus::first-letter {
    font-family: var(--dian-regal-med);
    font-size: var(--dian-font-size-dropcap);
    line-height: var(--dian-line-height-dropcap);
    float: left;
}

@media screen and (min-width: 1563px) {
    .wide-image {
        left: 50%;
        max-width: var(--gb-container-width) !important;
        position: relative;
        transform: translateX(-50%);
        width: var(--gb-container-width) !important;
    }
}

@media screen and (min-width: 1025px) {
    .main-post-section {
        margin-inline: var(--dian-spacing-24);
    }
    .site-footer.grid-container {
        width: calc(100% - (2 * var(--dian-spacing-24)));
        max-width: calc(100% - (2 * var(--dian-spacing-24)));
        margin-left: var(--dian-spacing-24);
        margin-right: var(--dian-spacing-24);
    }

    .site-footer.grid-container > div[class^="gb-element-"],
    .main-post-section > div[class^="gb-element-"] {
        padding-inline: 0;
    }
}