/* ==========================================================
   HERITAGE COLLECTION™
   TYPOGRAPHY
========================================================== */

body{

    font-family:var(--font-family);

    font-size:var(--font-size-md);

    font-weight:400;

    line-height:1.7;

    color:var(--color-text);

    background:var(--color-background);

}

/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    color:var(--color-white);

    font-weight:800;

    line-height:1.1;

    letter-spacing:-0.03em;

}

h1{

    font-size:clamp(58px,6vw,92px);

    font-weight:900;

}

h2{

    font-size:clamp(42px,4vw,64px);

}

h3{

    font-size:clamp(28px,3vw,36px);

}

h4{

    font-size:28px;

}

h5{

    font-size:22px;

}

h6{

    font-size:18px;

}

/* ==========================================================
   PARAGRAPHS
========================================================== */

p{

    margin:0;

    color:var(--color-text);

    font-size:18px;

    line-height:1.85;

}

small{

    font-size:13px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:var(--transition);

}

a:hover{

    color:var(--color-primary);

}

/* ==========================================================
   TEXT UTILITIES
========================================================== */

.text-white{

    color:var(--color-white);

}

.text-primary{

    color:var(--color-primary);

}

.text-muted{

    color:var(--color-text-muted);

}

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.uppercase{

    text-transform:uppercase;

}

.capitalize{

    text-transform:capitalize;

}

.gold{

    color:var(--color-primary);

}

/* ==========================================================
   DISPLAY
========================================================== */

.display{

    font-size:clamp(72px,8vw,120px);

    font-weight:900;

    line-height:.95;

    letter-spacing:-0.05em;

}

/* ==========================================================
   EYEBROW
========================================================== */

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(212,175,55,.08);

    color:var(--color-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.eyebrow::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--color-primary);

    box-shadow:0 0 14px var(--color-primary);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    body{

        font-size:15px;

    }

    p{

        font-size:17px;

    }

}

@media(max-width:768px){

    p{

        font-size:16px;

        line-height:1.75;

    }

    .display{

        font-size:56px;

    }

}