:root {
    /* Font fluido: min 48px (3rem) a 320px, 120px (7.5rem) a 1440px, poi continua a crescere */
    --font-h1: clamp( 3rem, /* minimo: 48px @ 320px */
    calc(1.714rem + 6.43vw),
    9999rem);

    /* Font fluido: min 36px (2.25rem) a 320px, 80px (5rem) a 1440px, poi continua a crescere */
    --font-h2: clamp( 2.25rem, /* minimo: 36px @ 320px */
    calc(1.464rem + 3.93vw), 
    9999rem);

  /* Font fluido: min 20px (1.25rem) a 320px, 32px (2rem) a 1440px, poi continua a crescere */
  --font-h3: clamp(
    1.25rem, /* minimo: 20px @ 320px */
    calc(1.036rem + 1.07vw), 
    9999rem);
}

/* ===============================
   Fallback con WOFF (tutti i browser)
   =============================== */

@font-face {
    font-family: 'Hatton';
    src: url('../font/Hatton/PPHatton-Medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'AnzeigenGroteskStd';
    src: url('../font/AnzeigenGroteskStdStandard/font.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* ===============================
   Sovrascrittura con WOFF2 (browser moderni)
   =============================== */

@supports (font-variation-settings: normal) {
    @font-face {
        font-family: 'Hatton';
        src: url('../font/Hatton/PPHatton-Medium.woff2') format('woff2');
        font-style: normal;
        font-weight: 500;
        font-display: swap;
    }

    @font-face {
        font-family: 'AnzeigenGroteskStd';
        src: url('../font/AnzeigenGroteskStdStandard/font.woff2') format('woff2');
        font-style: normal;
        font-weight: 400;
        font-display: swap;
    }

    @font-face {
        font-family: "altesse-std-24pt";
        src: url('../font/Altesse-24/altesse-24.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
}

/* ===============================
   Abode Altesse STD
   =============================== */

.altesse-24 {
    font-family: "altesse-std-24pt", sans-serif;
    text-transform: lowercase;
}

/*.altesse-64 {
    font-family: "altesse-std-64pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: lowercase;
}*/

/* ===============================
   AnzeigenGroteskStd
   =============================== */

.AnzeigenGroteskStd {
    font-family: 'AnzeigenGroteskStd', Arial, sans-serif !important;
    text-transform: uppercase;
}

/* ===============================
   Hatton
   =============================== */

.hatton {
    font-family: 'Hatton', Arial, sans-serif !important;
    text-transform: uppercase;
}

/* ===============================
   Titoli
   =============================== */

.h1 {
    font-family: 'AnzeigenGroteskStd', Arial, sans-serif;
    font-size: var(--font-h1);
    text-transform: uppercase;
}

.h2 {
    font-family: 'AnzeigenGroteskStd', Arial, sans-serif;
    font-size: var(--font-h2);
    text-transform: uppercase;
}

.h3 {
    font-family: 'Hatton', Arial, sans-serif;
    font-size: var(--font-h3);
    text-transform: uppercase;
}

.h4 {
    font-family: 'Hatton', Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
}

.model-name {
    /* Font fluido: min 100px (6.25rem) a 320px, 120px (7.5rem) a 1440px, poi continua a crescere */
    font-family: 'AnzeigenGroteskStd', Arial, sans-serif;
    font-size: clamp( 6.25rem, calc(5.893rem + 1.79vw), 9999rem );
}

/* ===============================
   Text
   =============================== */

.text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

/* ===============================
   Line height
   =============================== */

.lh-075 {
    line-height: 0.75 !important;
}

.lh-085 {
    line-height: 0.85 !important;
}

.lh-125 {
    line-height: 1.25 !important;
}

.lh-150 {
    line-height: 1.5 !important;
}

/* ===============================
   Buttons
   =============================== */

.btn-itama-midnight {
    display: inline-block;
    font-family: 'Hatton', serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-ivory);
    border: 1px solid var(--color-ivory);
    background-color: var(--color-midnight);
    text-decoration: none;
    padding: 1.25rem 2.5rem 1rem 2.5rem;
    transition: all 0.25s ease-in-out;
}

    .btn-itama-midnight:hover {
        background-color: var(--color-sand);
        border: 1px solid var(--color-sand);
    }

.btn-itama-white {
    display: inline-block;
    font-family: 'Hatton', serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-midnight);
    border: 1px solid var(--color-midnight);
    background-color: var(--color-ivory);
    text-decoration: none;
    padding: 1.25rem 2.5rem 1rem 2.5rem;
    transition: all 0.25s ease-in-out;
}

    .btn-itama-white:hover {
        color: var(--color-ivory);
        background-color: var(--color-midnight);
        border: 1px solid var(--color-ivory);
    }