/* @link https://utopia.fyi/clamp/calculator?a=992,1440,36—36 */

:root {
    --fluid-12-12: clamp(0.75rem, 0.75rem + 0vw, 0.75rem); /* tiny */
    --fluid-14-14: clamp(0.875rem, 0.875rem + 0vw, 0.875rem); /* small */
    --fluid-16-16: clamp(1rem, 1rem + 0vw, 1rem);  
    --fluid-20-20: clamp(1.25rem, 1.25rem + 0vw, 1.25rem); /* h5 - big */
    --fluid-20-24: clamp(1.25rem, 0.6964rem + 0.8929vw, 1.5rem); /* h4 */
    --fluid-24-28: clamp(1.5rem, 0.9464rem + 0.8929vw, 1.75rem); /* h3 */
    --fluid-36-46: clamp(2.25rem, 0.8661rem + 2.2321vw, 2.875rem); /* h2 */
    --fluid-48-80: clamp(3rem, -1.4286rem + 7.1429vw, 5rem); /* h1 */
    --fluid-42-80: clamp(2.625rem, -2.6339rem + 8.4821vw, 5rem); /* h1 - hero-image */

    --fluid-16-18: clamp(1rem, 0.7232rem + 0.4464vw, 1.125rem);
    
    --fluid-24-32: clamp(1.5rem, 0.3929rem + 1.7857vw, 2rem); /* lead */
    --fluid-16-20: clamp(1rem, 0.4464rem + 0.8929vw, 1.25rem); /* button */

    --fs-tiny: var(--fluid-12-12);
    --fs-small: var(--fluid-14-14);
    --fs-base: var(--fluid-16-16);
    --fs-big: var(--fluid-20-20);
    --fs-lead: var(--fluid-24-32);
}

html,
body,
button,
input,
select,
optgroup,
textarea {
    text-wrap-style: balance;
    font-size: var(--fluid-16-16);
}

h1, .h1 {
    font-size: var(--fluid-48-80);
    font-weight: 700;
    line-height: 1.125;
    font-family: var(--font-family-headline);
}

h2, .h2 {
    font-size: var(--fluid-36-46);
    font-weight: 700;
    line-height: 1.125;
    font-family: var(--font-family-headline);
}

h3, .h3 {
    font-size: var(--fluid-24-28);
    font-weight: 700;
    line-height: 1.125;
    font-family: var(--font-family-headline);
}

h4, .h4 {
    font-size: var(--fluid-20-24);
    font-weight: 700;
    line-height: 1.125;
    font-family: var(--font-family-headline);
}

h5, .h5 {
    font-size: var(--fluid-20-20);
    font-weight: 700;
    line-height: 1.125;
    font-family: var(--font-family-headline);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
    hyphens: auto;
    text-wrap: pretty;
    hyphenate-limit-chars: 6 6;
}

@media screen and (min-width: 62rem) {
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5 {
        hyphens: none;
        hyphenate-limit-chars: unset;
    }
}

.lead {
    font-size: var(--fluid-24-32);
    line-height: 1.1875;
}

.huge {
    font-size: var(--fluid-20-24);
    line-height: 1.2;
}

.big {
    font-size: var(--fluid-20-20);
    line-height: 1.2;
}

small, sup, sub, .small {
    font-size: var(--fluid-14-14);
    line-height: 1.2;
}

.tiny {
    font-size: var(--fluid-12-12);
    line-height: 1.25;
}

b, .strong, .bold, strong {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

p {
    text-wrap-style: pretty;
}

.align-center {
    text-align: center;
}

.align-end {
    text-align: right;
}