/* ==========================================================
   AXN Portfolio
   Typography System
   ========================================================== */

/* ==========================================================
   Base
   ========================================================== */

body {

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

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

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

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

    color: var(--color-text);

}



/* ==========================================================
   Display
   Hero Headlines
   ========================================================== */

.display {

    font-size: var(--text-hero);

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

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

    letter-spacing: var(--tracking-tight);

    max-width: 12ch;

}



/* ==========================================================
   Section Heading
   ========================================================== */

.heading {

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

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

    line-height: 1;

    letter-spacing: -0.05em;

    max-width: 14ch;

}



/* ==========================================================
   Large Body
   ========================================================== */

.lead {

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

    line-height: 1.9;

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

    max-width: 38rem;

}



/* ==========================================================
   Normal Body
   ========================================================== */

.body {

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

    line-height: 1.9;

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

    max-width: 42rem;

}



/* ==========================================================
   Small Caption
   ========================================================== */

.caption {

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

    line-height: 1.7;

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

}



/* ==========================================================
   Eyebrow
   ========================================================== */

.eyebrow {

    display: inline-block;

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

    font-size: var(--text-xs);

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

    letter-spacing: .24em;

    text-transform: uppercase;

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

}



/* ==========================================================
   Labels
   ========================================================== */

.label {

    font-size: var(--text-xs);

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

    letter-spacing: .18em;

    text-transform: uppercase;

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

}



/* ==========================================================
   Links
   ========================================================== */

.link {

    display: inline-flex;

    align-items: center;

    gap: .45rem;

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

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

    transition: opacity var(--transition-base);

}

.link:hover {

    opacity: .55;

}



/* ==========================================================
   Navigation
   ========================================================== */

.nav-link {

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

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

    transition: color var(--transition-base);

}

.nav-link:hover {

    color: var(--color-text);

}



/* ==========================================================
   Project Title
   ========================================================== */

.project-title {

    font-size: clamp(2rem, 4vw, 3rem);

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

    letter-spacing: -.05em;

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

}



/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:768px) {

    .display {

        max-width: 9ch;

    }

    .heading {

        max-width: 11ch;

    }

    .lead {

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

    }

}