/* ==========================================================
   SINHOI 2026
   TYPOGRAPHY
========================================================== */


/* ----------------------------------------------------------
BODY
---------------------------------------------------------- */

body{

    font-family:'Montserrat',sans-serif;
    font-size:17px;
    font-weight:400;
    line-height:1.75;
    color:var(--text);

}


/* ----------------------------------------------------------
HEADINGS
---------------------------------------------------------- */

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

    font-family:'Montserrat',sans-serif;
    font-weight:700;
    color:var(--dark);
    line-height:1.15;
    letter-spacing:-0.03em;
    margin-bottom:24px;

}

h1{

    font-size:clamp(3rem,7vw,5.5rem);

}

h2{

    font-size:clamp(2.5rem,5vw,4rem);

}

h3{

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

}

h4{

    font-size:1.75rem;

}

h5{

    font-size:1.3rem;

}

h6{

    font-size:1.1rem;

}


/* ----------------------------------------------------------
DISPLAY TITLES
---------------------------------------------------------- */

.display-xl{

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

    font-weight:800;

    line-height:1;

}

.display-lg{

    font-size:clamp(3.5rem,7vw,5.8rem);

    font-weight:800;

}

.display-md{

    font-size:clamp(2.8rem,5vw,4rem);

    font-weight:700;

}


/* ----------------------------------------------------------
PARAGRAPHS
---------------------------------------------------------- */

p{

    margin-bottom:24px;

    color:var(--text-muted);

    font-size:1.05rem;

    line-height:1.85;

}

p:last-child{

    margin-bottom:0;

}


/* ----------------------------------------------------------
LEAD
---------------------------------------------------------- */

.lead{

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

    font-weight:400;

    line-height:1.8;

    color:var(--text);

    max-width:760px;

}


/* ----------------------------------------------------------
SMALL TEXT
---------------------------------------------------------- */

.small{

    font-size:.875rem;

}

.tiny{

    font-size:.75rem;

}


/* ----------------------------------------------------------
EYEBROW
---------------------------------------------------------- */

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.32em;

}

.eyebrow::before{

    content:"";

    width:30px;

    height:2px;

    background:var(--secondary);

}


/* ----------------------------------------------------------
TEXT COLORS
---------------------------------------------------------- */

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-dark{

    color:var(--dark);

}

.text-light{

    color:var(--text-light);

}

.text-muted{

    color:var(--text-muted);

}

.text-white{

    color:#fff;

}


/* ----------------------------------------------------------
TEXT ALIGNMENT
---------------------------------------------------------- */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}


/* ----------------------------------------------------------
FONT WEIGHTS
---------------------------------------------------------- */

.fw-300{

    font-weight:300;

}

.fw-400{

    font-weight:400;

}

.fw-500{

    font-weight:500;

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

.fw-800{

    font-weight:800;

}


/* ----------------------------------------------------------
TEXT TRANSFORM
---------------------------------------------------------- */

.uppercase{

    text-transform:uppercase;

}

.lowercase{

    text-transform:lowercase;

}

.capitalize{

    text-transform:capitalize;

}


/* ----------------------------------------------------------
LETTER SPACING
---------------------------------------------------------- */

.tracking-sm{

    letter-spacing:.05em;

}

.tracking-md{

    letter-spacing:.12em;

}

.tracking-lg{

    letter-spacing:.25em;

}


/* ----------------------------------------------------------
LINKS
---------------------------------------------------------- */

p a,

.entry-content a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    position:relative;

}

p a::after,

.entry-content a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:100%;

    height:2px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

}

p a:hover::after,

.entry-content a:hover::after{

    transform:scaleX(1);

}


/* ----------------------------------------------------------
LISTS
---------------------------------------------------------- */

.entry-content ul,

.content ul{

    margin:24px 0;

    padding-left:28px;

    list-style:disc;

}

.entry-content ol,

.content ol{

    margin:24px 0;

    padding-left:28px;

    list-style:decimal;

}

.entry-content li,

.content li{

    margin-bottom:12px;

    color:var(--text-muted);

}


/* ----------------------------------------------------------
BLOCKQUOTE
---------------------------------------------------------- */

blockquote{

    position:relative;

    padding:40px;

    margin:60px 0;

    background:var(--paper);

    border-left:5px solid var(--primary);

    font-size:1.3rem;

    font-weight:500;

    line-height:1.7;

    color:var(--dark);

    box-shadow:var(--shadow-sm);

}

blockquote::before{

    content:"“";

    position:absolute;

    top:-20px;

    left:20px;

    font-size:5rem;

    color:var(--secondary);

    opacity:.25;

}

blockquote cite{

    display:block;

    margin-top:20px;

    font-size:.9rem;

    font-weight:600;

    color:var(--primary);

}


/* ----------------------------------------------------------
CODE
---------------------------------------------------------- */

code{

    padding:4px 8px;

    background:#ECE8DD;

    border-radius:4px;

    font-size:.9rem;

}

pre{

    overflow:auto;

    padding:30px;

    background:#10120D;

    color:#fff;

    border-radius:8px;

}


/* ----------------------------------------------------------
HR
---------------------------------------------------------- */

hr{

    margin:80px 0;

}


/* ----------------------------------------------------------
TEXT UTILITIES
---------------------------------------------------------- */

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}

.max-900{

    max-width:900px;

}

.max-1000{

    max-width:1000px;

}


/* ----------------------------------------------------------
ELEMENTOR TYPOGRAPHY
---------------------------------------------------------- */

.elementor-heading-title{

    font-family:'Montserrat',sans-serif !important;

    letter-spacing:-.03em;

}

.elementor-widget-text-editor{

    color:var(--text-muted);

}

.elementor-widget-heading p{

    margin-bottom:0;

}


/* ----------------------------------------------------------
HERO TITLES
---------------------------------------------------------- */

.hero-title{

    max-width:14ch;

    line-height:1.05;

    font-weight:800;

}

.hero-subtitle{

    margin-top:32px;

    max-width:720px;

    font-size:1.3rem;

    color:var(--text-muted);

}


/* ----------------------------------------------------------
DARK SECTIONS
---------------------------------------------------------- */

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6{

    color:#fff;

}

.section-dark p{

    color:rgba(255,255,255,.75);

}

.section-dark .eyebrow{

    color:var(--secondary);

}