/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   typography.css

   Caminho:
   assets/css/typography.css

   Versão:
   2.0.0

   Descrição:
   Sistema tipográfico oficial da Maison Das Almas.

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


/* =============================================================================
   BODY
   ========================================================================== */

body{

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

    font-size:var(--fs-body);

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

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

    color:var(--color-text);

}


/* =============================================================================
   TÍTULOS
   ========================================================================== */

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

    color:var(--color-title);

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

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

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

    letter-spacing:.02em;

    text-wrap:balance;

}


/* =============================================================================
   H1
   ========================================================================== */

h1{

    font-size:var(--fs-display);

}


/* =============================================================================
   H2
   ========================================================================== */

h2{

    font-size:var(--fs-h1);

}


/* =============================================================================
   H3
   ========================================================================== */

h3{

    font-size:var(--fs-h2);

}


/* =============================================================================
   H4
   ========================================================================== */

h4{

    font-size:var(--fs-h3);

}


/* =============================================================================
   PARÁGRAFOS
   ========================================================================== */

p{

    max-width:70ch;

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

    color:var(--color-text);

    text-wrap:pretty;

}

p:last-child{

    margin-bottom:0;

}


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

a{

    color:inherit;

    text-decoration:none;

}


/* =============================================================================
   TEXTO PEQUENO
   ========================================================================== */

small{

    font-size:var(--fs-small);

}


/* =============================================================================
   CAPÍTULO
   ========================================================================== */

.chapter{

    display:inline-block;

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

    color:var(--color-accent);

    font-size:var(--fs-caption);

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

    letter-spacing:.35em;

    text-transform:uppercase;

}


/* =============================================================================
   LINHA EDITORIAL
   ========================================================================== */

.editorial-line{

    width:72px;

    height:1px;

    margin:

        var(--space-md)

        0

        var(--space-lg);

    background:var(--color-line);

}


/* =============================================================================
   INTRODUÇÃO DAS SEÇÕES
   ========================================================================== */

.section-intro{

    font-size:1.25rem;

    line-height:1.9;

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

    max-width:760px;

}


/* =============================================================================
   MANIFESTO
   ========================================================================== */

.manifesto-text{

    font-size:1.35rem;

    line-height:2;

    color:var(--color-text);

}


/* =============================================================================
   MAISON
   ========================================================================== */

.maison-text{

    font-size:1.18rem;

    line-height:2;

}


/* =============================================================================
   PILARES
   ========================================================================== */

.pillar-number{

    display:block;

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

    color:var(--color-accent);

    font-size:var(--fs-caption);

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

    letter-spacing:.30em;

    text-transform:uppercase;

}

.pillar h3{

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

}

.pillar p{

    max-width:680px;

}


/* =============================================================================
   LEGENDAS
   ========================================================================== */

figcaption{

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

}

.photo-code{

    display:block;

    margin-bottom:12px;

    color:var(--color-accent);

    font-size:var(--fs-caption);

    letter-spacing:.30em;

    text-transform:uppercase;

}

figcaption h3{

    margin-bottom:10px;

    font-size:2rem;

}

figcaption p{

    font-size:var(--fs-small);

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

}


/* =============================================================================
   BOTÕES
   ========================================================================== */

.button-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        18px

        34px;

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

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

    color:var(--color-title);

    font-size:.95rem;

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

    letter-spacing:.12em;

    text-transform:uppercase;

    transition:var(--transition-default);

}

.button-whatsapp:hover{

    background:var(--color-title);

    color:var(--color-white);

}


/* =============================================================================
   RODAPÉ
   ========================================================================== */

.footer-brand{

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

    font-size:2rem;

    letter-spacing:.18em;

    margin-bottom:18px;

}

.footer-tagline{

    font-size:.95rem;

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

    letter-spacing:.08em;

}

.footer-copy{

    font-size:.82rem;

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

}