/* Citação editorial com itálico real */
blockquote {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: #cbd5e1;
}
 
/* Protege o site contra itálico artificial deformado pelo navegador */
body {
    font-synthesis: none; /* Impede o navegador de inventar faux bold ou faux italic */
}

/* ❌ O ERRO: line-height com unidade relativa (1.5em ou 150%) */
body {
    font-size: 16px;
    line-height: 1.5em; /* O navegador computa: 16px * 1.5 = 24px FIXOS! */
}
 
/* O título herda o estilo: */
h1 {
    font-size: 40px;
    /* O h1 NÃO herda a proporção 1.5! Ele herda o valor computado FIXO de 24px! */
}
 
/* RESULTADO CATASTRÓFICO:
   Um título com letras gigantes de 40px é espremido dentro de linhas de 24px!
   As linhas de texto do título SE ATROPELAM e ficam UMA POR CIMA DA OUTRA! */

/* ✅ O JEITO CORRETO: Número puro sem unidades */
body {
    font-size: 16px;
    line-height: 1.5; /* Fator multiplicador universal */
}
 
h1 {
    font-size: 40px;
    /* O navegador calcula automaticamente: 40px * 1.5 = 60px de entrelinha! Perfeito! */
}

/* Ordem: [style] [weight] [size] / [line-height] [family] */
.destaque-editorial {
    font: italic 700 1.25rem / 1.6 'Outfit', sans-serif;
}

<article class="card-artigo">
    <span class="categoria-tag">Design Systems</span>
    
    <h1 class="artigo-h1">A Harmonia Oculta do Ritmo Tipográfico na Web Moderna</h1>
    
    <p class="artigo-resumo">
        Por que o line-height sem unidades e o controle milimétrico de pesos de 100 a 900 garantem interfaces limpas e leitura sem fadiga visual.
    </p>
 
    <div class="artigo-corpo">
        <p>
            A legibilidade não é um acidente estético: é uma ciência geométrica. Quando alinhamos o peso semântico das fontes ao espaçamento vertical correto, os olhos do leitor deslizam suavemente sem esforço cognitivo.
        </p>
        <blockquote class="artigo-citacao">
            "Tipografia boa é aquela que transmite a mensagem sem que o leitor perceba o esforço mecânico da leitura."
        </blockquote>
    </div>
 
    <footer class="artigo-rodape">
        <button class="btn-leitura">Continuar Lendo →</button>
    </footer>
</article>

/* Reset e base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    background-color: #0b0f19;
    color: #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Proteção global contra distorções sintéticas de negrito/itálico */
    font-synthesis: none;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
}
 
.card-artigo {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
 
.categoria-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #38bdf8;
    display: inline-block;
    margin-bottom: 0.75rem;
}
 
/* 1. Título H1: Peso 800 e entrelinha coesa de 1.2 */
.artigo-h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;          /* Entrelinha compacta sem unidades! */
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
}
 
/* 2. Resumo: Peso 500 (Medium) e entrelinha 1.45 */
.artigo-resumo {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.45;
    color: #94a3b8;
    margin-bottom: 1.75rem;
}
 
/* 3. Parágrafo corrido: Peso 400 (Regular) e entrelinha WCAG 1.65 */
.artigo-corpo p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;         /* Entrelinha confortável para leitura contínua */
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}
 
/* 4. Citação em Itálico Real */
.artigo-citacao {
    border-left: 3px solid #38bdf8;
    padding-left: 1.25rem;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #f1f5f9;
    margin-bottom: 2rem;
}
 
/* 5. Botão de linha única: line-height 1 para alinhamento geométrico perfeito */
.btn-leitura {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;            /* O line-height 1 evita vãos fantasmas no botão */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 
.btn-leitura:hover {
    background-color: #0369a1;
}