/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Typography System

Responsibility
• Global Typography
• Hero Typography
• Tamil Typography
• English Typography
• Headings
• Paragraphs
• Labels
• Highlights
• Responsive Typography

======================================================================*/


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

html{

    font-size:16px;

}

body{

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

    color:var(--text-primary);

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

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

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

    background:var(--bg-page);

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

    font-feature-settings:

        "kern" 1,

        "liga" 1,

        "clig" 1;

    font-kerning:normal;

}


/*==================================================
Headings
==================================================*/

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

    margin:0;

    color:var(--text-primary);

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

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

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

}

h1{

    font-size:4.75rem;

}

h2{

    font-size:3.80rem;

}

h3{

    font-size:2.90rem;

}

h4{

    font-size:2.20rem;

}

h5{

    font-size:1.60rem;

}

h6{

    font-size:1.25rem;

}


/*==================================================
Paragraph
==================================================*/

p{

    margin:0;

    color:var(--text-secondary);

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

    letter-spacing:.015em;

}


/*==================================================
Hero Title
==================================================*/

.hero-title{

    max-width:760px;

    margin:0 auto;

    text-align:center;

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

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

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

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

    color:var(--text-hero);

}


/*==================================================
Hero Subtitle
==================================================*/

.hero-subtitle{

    max-width:720px;

    margin:0 auto;

    text-align:center;

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

    font-size:1.40rem;

    font-weight:300;

    line-height:2;

    letter-spacing:.08em;

    color:var(--text-secondary);

}


/*==================================================
Tamil Hero
==================================================*/

.tamil{

    max-width:760px;

    margin:0 auto;

    text-align:center;

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

    font-size:4.60rem;

    font-weight:500;

    line-height:1.36;

    letter-spacing:-0.03em;

    color:var(--text-hero);

}


/*==================================================
Tamil Welcome
==================================================*/

.tamil-welcome{

    font-size:3.55rem;

    font-weight:500;

    line-height:1.18;

    letter-spacing:-0.02em;

    color:var(--text-gold);

}


/*==================================================
Tamil Introduction
==================================================*/

.tamil-intro{

    max-width:680px;

    margin:0 auto;

    text-align:center;

    font-size:3.05rem;

    font-weight:400;

    line-height:1.42;

    letter-spacing:-0.02em;

    color:var(--text-primary);

}

/*==================================================
English Hero
==================================================*/

.english{

    max-width:660px;

    margin:0 auto;

    text-align:center;

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

    font-size:2.15rem;

    font-weight:300;

    font-style:normal;

    line-height:1.95;

    letter-spacing:.06em;

    color:var(--text-secondary);

    text-wrap:balance;

    text-rendering:optimizeLegibility;

}


/*==================================================
English Welcome
==================================================*/

.english-welcome{

    display:block;

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

    font-size:2.80rem;

    font-weight:400;

    font-style:italic;

    line-height:1.18;

    letter-spacing:.08em;

    color:var(--text-hero);

    text-wrap:balance;

}


/*==================================================
English Welcome Highlight
==================================================*/

.english .highlight{

    display:block;

    margin-bottom:28px;

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

    font-size:3.70rem;

    font-weight:400;

    font-style:italic;

    line-height:1.08;

    letter-spacing:.04em;

    color:var(--text-hero);

}


/*==================================================
Hero Name
==================================================*/

.hero-name{

    display:inline-block;

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

    font-size:1.12em;

    font-weight:500;

    font-style:italic;

    letter-spacing:.05em;

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

}


/*==================================================
Gold Highlight
==================================================*/

.text-gold{

    color:var(--text-gold);

}


/*==================================================
Green Highlight
==================================================*/

.text-green{

    color:var(--text-green);

}


/*==================================================
Inline Highlight
==================================================*/

.highlight{

    color:var(--text-gold);

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

}


/*==================================================
Screen Caption
==================================================*/

.screen-caption{

    display:inline-block;

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

    font-size:.90rem;

    font-weight:600;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:var(--text-gold);

}


/*==================================================
Section Title
==================================================*/

.section-title{

    max-width:820px;

    margin:0 auto;

    text-align:center;

    font-size:2.90rem;

    font-weight:500;

    line-height:1.20;

    letter-spacing:-0.02em;

    color:var(--text-primary);

}


/*==================================================
Section Subtitle
==================================================*/

.section-subtitle{

    max-width:760px;

    margin:0 auto;

    text-align:center;

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

    font-size:1.30rem;

    font-weight:300;

    line-height:2;

    letter-spacing:.05em;

    color:var(--text-secondary);

}

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

small{

    font-size:.85rem;

    line-height:1.75;

    letter-spacing:.02em;

    color:var(--text-muted);

}


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

label{

    display:block;

    margin-bottom:10px;

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

    font-size:.95rem;

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

    letter-spacing:.04em;

    color:var(--text-secondary);

}


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

a{

    color:var(--text-gold);

    text-decoration:none;

    transition:

        color var(--speed-normal),

        opacity var(--speed-normal);

}

a:hover{

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

}


/*==================================================
Strong
==================================================*/

strong{

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

    color:var(--text-primary);

}


/*==================================================
Selection
==================================================*/

::selection{

    background:var(--color-accent);

    color:#111111;

}


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

@media (max-width:1200px){

    h1{

        font-size:4.20rem;

    }

    .hero-title{

        font-size:4.10rem;

    }

    .tamil{

        font-size:3.90rem;

    }

    .tamil-welcome{

        font-size:3.10rem;

    }

    .tamil-intro{

        font-size:2.70rem;

    }

    .english{

        font-size:1.95rem;

    }

    .english-welcome{

        font-size:2.40rem;

    }

    .english .highlight{

        font-size:3.20rem;

    }

    .section-title{

        font-size:2.60rem;

    }

}


@media (max-width:992px){

    h1{

        font-size:3.60rem;

    }

    .hero-title{

        font-size:3.50rem;

    }

    .tamil{

        font-size:3.30rem;

    }

    .tamil-welcome{

        font-size:2.70rem;

    }

    .tamil-intro{

        font-size:2.35rem;

    }

    .english{

        font-size:1.65rem;

    }

    .english-welcome{

        font-size:2rem;

    }

    .english .highlight{

        font-size:2.70rem;

    }

}

@media (max-width:768px){

    h1{

        font-size:3rem;

    }

    .hero-title{

        font-size:2.80rem;

    }

    .hero-subtitle{

        font-size:1.18rem;

    }

    .tamil{

        font-size:2.55rem;

        line-height:1.45;

    }

    .tamil-welcome{

        font-size:2.20rem;

    }

    .tamil-intro{

        font-size:2rem;

    }

    .english{

        max-width:100%;

        font-size:1.28rem;

        line-height:1.80;

        letter-spacing:.04em;

    }

    .english-welcome{

        font-size:1.60rem;

        line-height:1.22;

    }

    .english .highlight{

        font-size:2rem;

        margin-bottom:18px;

    }

    .section-title{

        font-size:2.15rem;

    }

    .section-subtitle{

        font-size:1.08rem;

    }

}


@media (max-width:480px){

    .tamil{

        font-size:2rem;

    }

    .tamil-welcome{

        font-size:1.80rem;

    }

    .tamil-intro{

        font-size:1.65rem;

    }

    .english{

        font-size:1.08rem;

        line-height:1.75;

    }

    .english-welcome{

        font-size:1.30rem;

    }

    .english .highlight{

        font-size:1.65rem;

    }

    .section-title{

        font-size:1.85rem;

    }

    .section-subtitle{

        font-size:1rem;

    }

    .screen-caption{

        font-size:.75rem;

        letter-spacing:.18em;

    }

}