/**
 * ==================================================
 * TYPOGRAPHY
 * Francesco Cugini Theme
 * Design System v2.0
 * ==================================================
 */


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

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

    margin:0 0 var(--space-lg);

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

    font-weight:var(--font-weight-semibold);

    line-height:var(--line-height-heading);

    color:var(--color-text);

}

h1{

    font-size:clamp(3rem,7vw,var(--font-size-6xl));

    letter-spacing:var(--letter-spacing-lg);

}

h2{

    font-size:clamp(2.4rem,5vw,var(--font-size-4xl));

}

h3{

    font-size:clamp(1.9rem,4vw,var(--font-size-3xl));

}

h4{

    font-size:var(--font-size-2xl);

}

h5{

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

}

h6{

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

}


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

p{

    margin:0 0 var(--space-lg);

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

    line-height:var(--line-height);

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

}


/*==================================================
INLINE ELEMENTS
==================================================*/

strong{

    font-weight:var(--font-weight-bold);

    color:var(--color-text);

}

em{

    font-style:italic;

}

small{

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

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

}

mark{

    padding:.1em .25em;

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

}


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

a{

    color:inherit;

}

.content a{

    color:var(--color-accent);

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:3px;

    transition:color var(--transition);

}

.content a:hover{

    color:var(--color-gold);

}


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

.display-title{

    font-size:clamp(4rem,9vw,7rem);

    line-height:1.05;

    letter-spacing:var(--letter-spacing-lg);

    text-transform:uppercase;

}

.hero-title{

    font-size:clamp(3.5rem,8vw,6rem);

    line-height:1.05;

    letter-spacing:var(--letter-spacing-md);

    text-transform:uppercase;

}


/*==================================================
LEAD
==================================================*/

.lead{

    max-width:var(--reading-width);

    margin-inline:auto;

    font-size:clamp(1.2rem,2vw,1.45rem);

    line-height:1.8;

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

}


/*==================================================
SECTION TITLES
==================================================*/

.section-title{

    margin-bottom:var(--space-md);

}

.section-subtitle{

    max-width:var(--reading-width);

    margin:0 auto var(--space-3xl);

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

}


/*==================================================
BLOCKQUOTE
==================================================*/

blockquote{

    margin:var(--space-3xl) 0;

    padding-left:var(--space-xl);

    border-left:4px solid var(--color-gold);

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

    font-size:clamp(1.4rem,2vw,1.8rem);

    font-style:italic;

    color:var(--color-text);

}

blockquote p{

    margin:0;

    color:inherit;

}


/*==================================================
CONTENT
==================================================*/

.content{

    max-width:var(--reading-width);

}

.content p{

    margin-bottom:var(--space-lg);

}

.content ul,

.content ol{

    margin-bottom:var(--space-xl);

    padding-left:1.5rem;

}

.content ul{

    list-style:disc;

}

.content ol{

    list-style:decimal;

}

.content li{

    margin-bottom:var(--space-sm);

}


/*==================================================
TABLES
==================================================*/

.content table{

    width:100%;

    margin:var(--space-xl) 0;

    border-collapse:collapse;

}

.content th,

.content td{

    padding:var(--space-md);

    border:1px solid var(--color-border);

}

.content th{

    background:var(--color-surface-alt);

    font-weight:var(--font-weight-semibold);

}


/*==================================================
CODE
==================================================*/

code{

    padding:.15rem .35rem;

    border-radius:var(--radius-sm);

    background:var(--color-surface-alt);

    font-family:monospace;

    font-size:.9em;

}

pre{

    margin:var(--space-xl) 0;

    padding:var(--space-lg);

    overflow:auto;

    border-radius:var(--radius-md);

    background:var(--color-surface-alt);

}

pre code{

    padding:0;

    background:none;

}


/*==================================================
READABILITY
==================================================*/

.reading-width{

    max-width:var(--reading-width);

}

.text-balance{

    text-wrap:balance;

}

.text-nowrap{

    white-space:nowrap;

}