/* ReasonHub — pagina de Post (single), derivada do prototipo artigo.html.
   Carregada so em is_single(). Globais (header/footer/newsletter) vivem em theme.css. */

:root{ --read-scale:1; } /* controlado por A- / A+ */

/* Barra de progresso de leitura */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--reddish-brown);z-index:60;transition:width 80ms linear}

/* Estrutura */
.article{padding:var(--space-12) 0 var(--space-16)}
.col{max-width:640px;margin:0 auto} /* ~75 caracteres por linha a 18px; conforto de leitura */

/* Topo */
/* Kicker (editoria do topo do post) = badge Sky solido (§12.5) */
.kicker{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--badge-fg);background:var(--badge-bg);padding:4px 11px;border-radius:var(--radius-pill);display:inline-block;line-height:1.35;margin-bottom:var(--space-5)}
a.kicker{cursor:pointer;text-decoration:none} a.kicker:hover{background:var(--sky-blue);filter:brightness(.94)}
.article-title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.018em;color:var(--prussian-blue);margin:0 0 var(--space-5)}
.article-dek{font-family:var(--font-serif);font-weight:300;font-size:var(--fs-dek);line-height:1.4;color:var(--dim-grey);margin:0 0 var(--space-8)}

/* Assinatura */
.byline{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--dust-grey)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--sky-tint-solid,#EAF1F8);border:1px solid var(--sky-blue);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--prussian-blue);flex:none;overflow:hidden}
/* Zoom no rosto: a foto de bio e retrato de meio corpo — o cover puro mostra
   rosto pequeno + paleto. object-position ancora no topo e o transform amplia
   1.8x reposicionando para a cabeca preencher o circulo (o overflow do .avatar
   corta o resto). Valores calculados para a retrato-bio 200x300 (rosto no
   quarto superior); trocar a foto de bio pede reconferir. */
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.8) translateY(12.5%);border-radius:50%}
.byline-meta{display:flex;flex-direction:column;gap:2px}
.byline-name{font-weight:600;font-size:var(--fs-small);color:var(--gunmetal)}
.byline-sub{font-family:var(--font-mono);font-size:12px;color:var(--dim-grey)}
.byline-spacer{flex:1}
.share{display:flex;align-items:center;gap:var(--space-4)}
.share .sh{display:inline-flex;align-items:center;justify-content:center;color:var(--gunmetal);transition:color var(--dur-2),transform var(--dur-2)}
.share .sh:hover{color:var(--reddish-brown);transform:translateY(-1px)}
.share .sh svg{width:20px;height:20px;fill:currentColor;display:block}

/* Ferramentas de leitura */
.tools{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-8) 0 0;padding:var(--space-3) 0;border-top:1px solid var(--dust-grey);border-bottom:1px solid var(--dust-grey)}
.tools .tlbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-grey);margin-right:var(--space-2)}
.tool{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-sans);font-weight:500;font-size:13px;color:var(--gunmetal);background:transparent;border:1px solid var(--dust-grey);border-radius:var(--radius-pill);padding:7px 13px;cursor:pointer;transition:all var(--dur-2)}
.tool:hover{border-color:var(--dim-grey)} .tool.is-on{background:var(--gunmetal);color:var(--off-white);border-color:var(--gunmetal)}
.tool.aa{font-weight:600} .tool.aa .s{font-size:11px} .tool.aa .l{font-size:16px}
.tools .grow{flex:1}

/* Prosa */
.prose{margin-top:var(--space-10);font-size:calc(var(--fs-body) * var(--read-scale));line-height:1.50;color:#2b2f2f}
.prose p{margin:0 0 1.35em;line-height:1.50;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.prose li{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Paragrafo de abertura (lead): NAO e mais automatico no 1o paragrafo.
   So vale quando a classe .lead e aplicada de proposito no editor. */
.prose p.lead{font-size:calc(var(--fs-dek) * var(--read-scale));line-height:1.55;color:var(--gunmetal)}
.prose h2{font-family:var(--font-serif);font-weight:600;font-size:calc(var(--fs-h2) * var(--read-scale));line-height:1.2;letter-spacing:-.01em;color:var(--prussian-blue);margin:2em 0 .7em;padding-top:.2em}
.prose h2::before{content:"";display:block;width:34px;height:3px;background:var(--reddish-brown);margin-bottom:var(--space-5);border-radius:2px}
.prose h3{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--fs-h3) * var(--read-scale));color:var(--gunmetal);margin:1.6em 0 .5em}
.prose h4{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--fs-h4) * var(--read-scale));color:var(--gunmetal);margin:1.4em 0 .4em}
.prose h5{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--fs-h5) * var(--read-scale));color:var(--gunmetal);margin:1.3em 0 .4em}
.prose h6{font-family:var(--font-sans);font-weight:600;font-size:calc(var(--fs-h6) * var(--read-scale));color:var(--gunmetal);margin:1.2em 0 .4em}
/* Imagens, legendas e videos no corpo (artigos migrados): nunca estouram a coluna */
.prose figure{margin:var(--space-8) 0}
.prose img{display:block;max-width:100%;height:auto;margin-inline:auto}
.prose figcaption{font-family:var(--font-sans);font-size:var(--fs-h5);line-height:1.4;color:var(--gunmetal);text-align:center;margin-top:.6em}
.prose iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;margin:var(--space-8) 0}
/* Listas (marcador e numero em vermelho da marca) */
.prose ul,.prose ol{margin:0 0 1.5em}
.prose ul{list-style:none;padding-left:1.6em}
.prose ul li{position:relative;margin:0 0 .6em;line-height:1.5}
.prose ul li::before{content:"";position:absolute;left:-1.15em;top:.58em;width:7px;height:7px;background:var(--reddish-brown);border-radius:50%}
.prose ol{list-style:none;counter-reset:li;padding-left:0}
.prose ol li{counter-increment:li;position:relative;padding-left:2.4em;margin:0 0 .8em;line-height:1.5}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:-.05em;width:1.7em;height:1.7em;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.82em;font-weight:600;color:var(--reddish-brown);border:1.5px solid var(--reddish-brown);border-radius:50%}
.prose strong{font-weight:600;color:var(--gunmetal)}
/* Notas de rodape (sobrescrito) */
.prose sup.fn{line-height:0}
.prose sup.fn a{font-size:.7em;color:var(--reddish-brown);font-weight:700;text-decoration:none;padding:0 1px}
.prose sup.fn a:hover{text-decoration:underline}
/* Matriz de resultados (tabela) */
.prose .matrix{margin:2em 0}
.prose .matrix table{border-collapse:collapse;width:100%;font-family:var(--font-sans);font-size:15px}
.prose .matrix th,.prose .matrix td{border:1px solid var(--dust-grey);padding:var(--space-4);text-align:center;vertical-align:middle}
.prose .matrix thead th{background:var(--prussian-blue);color:var(--off-white);font-weight:600;font-size:13px}
.prose .matrix thead th.corner{background:var(--gunmetal);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;font-weight:600}
.prose .matrix tbody th{background:var(--dust-grey-light);color:var(--prussian-blue);font-weight:600;font-size:13px;text-align:left;width:34%}
.prose .matrix th .sub{display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.02em;opacity:.85;margin-top:3px}
.prose .matrix td{font-family:var(--font-mono);font-size:15px;color:var(--gunmetal)}
.prose .matrix td.eq{background:rgba(153,59,44,.07);font-weight:600;color:var(--reddish-brown)}
.prose .matrix figcaption{font-family:var(--font-mono);font-size:12px;color:var(--dim-grey);margin-top:var(--space-3);line-height:var(--lh-snug)}
.prose .matrix figcaption b{color:var(--gunmetal)}
/* Callout / caixa de destaque */
.prose .callout{margin:2em 0;padding:var(--space-6) var(--space-8);background:var(--dust-grey-light);border:1px solid var(--dust-grey);border-left:3px solid var(--reddish-brown);border-radius:var(--radius-md)}
.prose .callout h4{margin:0 0 var(--space-3);font-size:var(--fs-h4);color:var(--prussian-blue)}
.prose .callout p{margin:0;font-size:16px;color:var(--gunmetal);line-height:1.55}
@media (max-width:560px){
	.prose .matrix th,.prose .matrix td{padding:var(--space-2)}
	.prose .matrix table,.prose .matrix td{font-size:13px}
}
/* Links: azul Prussia sublinhado — distinto do destaque (negrito vermelho), que nao e clicavel */
.prose a,.prose a.inl{color:var(--prussian-blue);border-bottom:1px solid rgba(11,30,47,.4)} .prose a:hover{color:var(--prussian-blue);border-color:var(--prussian-blue)}
.prose .kw{color:var(--reddish-brown);font-weight:600}
.prose em,.prose i{font-style:italic}
.prose blockquote{margin:1.8em 0;padding:.2em 0 .2em var(--space-8);border-left:3px solid var(--reddish-brown);font-family:var(--font-serif);font-weight:400;font-size:calc(var(--fs-body) * var(--read-scale));line-height:1.6;color:var(--gunmetal)}
.prose blockquote p{margin:0 0 .5em}
.prose blockquote cite{display:block;font-family:var(--font-mono);font-style:normal;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--dim-grey);margin-top:.6em}
.prose blockquote.pull,.prose blockquote.is-style-pull{border-left:0;text-align:left;padding:0;margin:1.6em 0}
.prose blockquote.pull p,.prose blockquote.is-style-pull p{font-size:calc(var(--fs-h3) * var(--read-scale));line-height:1.4;color:var(--prussian-blue);font-weight:500}

/* Notas de rodape nativas do Gutenberg (bloco "Notas de rodape"): mesmo visual do bloco .refs.
   Anula o marcador-bolinha das listas comuns e usa o numero pequeno em vermelho. */
.prose ol.wp-block-footnotes{margin:var(--space-6) 0 0;padding:var(--space-6) 0 0;border-top:1px solid var(--dust-grey);list-style:none;counter-reset:r}
.prose ol.wp-block-footnotes li{counter-increment:r;position:relative;padding-left:var(--space-8);margin-bottom:var(--space-4);font-size:var(--fs-h5);line-height:var(--lh-normal);color:var(--dim-grey)}
.prose ol.wp-block-footnotes li::before{content:counter(r);position:absolute;left:0;top:0;width:auto;height:auto;border:0;background:none;display:inline;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--reddish-brown)}
.prose ol.wp-block-footnotes li a{border-bottom:0}

/* Referencias */
.refs{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--dust-grey)}
.refs h3{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-grey);margin-bottom:var(--space-5)}
.refs ol{margin:0;padding:0;list-style:none;counter-reset:r li} /* reset tambem do contador li: a numeracao visivel vem de .prose ol li::before; sem isso, o bloco continua a contagem de uma lista numerada anterior do artigo */
.refs li{counter-increment:r;position:relative;padding-left:var(--space-8);margin-bottom:var(--space-4);font-size:var(--fs-h5);line-height:var(--lh-normal);color:var(--dim-grey)}
.refs li::before{content:counter(r);position:absolute;left:0;top:0;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--reddish-brown)}
.refs cite{font-style:italic}

/* Tags do artigo (fim do corpo, antes da caixa do autor). Discretas de
   proposito: sao navegacao secundaria, nao podem competir com a leitura nem
   com a editoria do topo. Filete acima separa do texto sem criar caixa. */
.tagbox{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--dust-grey)}
.tagbox-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-grey);flex:none}
.tagbox-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tagpill{display:inline-block;font-size:var(--fs-caption);color:var(--dim-grey);text-decoration:none;border:1px solid var(--dust-grey);border-radius:var(--radius-pill);padding:5px 13px;transition:border-color var(--dur-2),color var(--dur-2),background var(--dur-2)}
.tagpill::before{content:"#";color:var(--sky-blue);margin-right:3px}
.tagpill:hover{border-color:var(--prussian-blue);color:var(--prussian-blue);background:#fff}

/* Caixa do autor */
.authorbox{display:flex;gap:var(--space-6);align-items:flex-start;margin-top:var(--space-12);padding:var(--space-6);background:var(--dust-grey-light);border:1px solid var(--dust-grey);border-radius:var(--radius-lg)}
.authorbox .avatar{width:56px;height:56px;font-size:18px}
.authorbox h4{margin:0 0 var(--space-2);font-size:var(--fs-h4)}
.authorbox p{margin:0;font-size:var(--fs-small);color:var(--dim-grey);line-height:var(--lh-normal)}
/* Bloco "Conheca a ReasonHub" (editavel em Blocos de conteudo), apos a bio.
   Fundo Prussian: da um momento escuro antes da Newsletter (ritmo de fundo, §12.1). */
.aboutbox{margin-top:var(--space-6);padding:var(--space-8);background:var(--prussian-blue);border:0;border-radius:var(--radius-lg)}
.aboutbox>:first-child{margin-top:0}
.aboutbox>:last-child{margin-bottom:0}
.aboutbox h3,.aboutbox h4{font-size:var(--fs-h4);margin:0 0 var(--space-2);color:var(--off-white)}
.aboutbox p{margin:0 0 var(--space-3);font-size:var(--fs-small);color:var(--sky-blue);line-height:var(--lh-normal)}
.aboutbox a{color:var(--sky-blue);text-decoration:underline;text-underline-offset:3px}
.aboutbox a:hover{color:var(--off-white)}

/* Relacionados (grade propria de 2 colunas — nao confundir com o .grid-3 das outras paginas) */
.grid-rel{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8)}
.acard{display:flex;flex-direction:column;border:1px solid var(--dust-grey);border-radius:var(--radius-lg);overflow:hidden;background:#fff;transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2)}
.acard:hover{border-color:var(--dim-grey);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.acard-body{padding:var(--space-6);display:flex;flex-direction:column;flex:1}
/* Editoria = badge Sky solido (§12.5) */
.ar-cat{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--badge-fg);background:var(--badge-bg);padding:3px 9px;border-radius:var(--radius-pill);margin-bottom:var(--space-3);line-height:1.35}
.acard-body h3{font-family:var(--font-serif);font-weight:600;font-size:calc(var(--fs-h4) + 2pt);margin:0;line-height:var(--lh-snug)}
.acard-sub{font-size:var(--fs-small);color:var(--dim-grey);line-height:var(--lh-snug);margin:var(--space-2) 0 0}

/* Toast (avisos v2) */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--prussian-blue);color:var(--off-white);font-size:14px;padding:12px 20px;border-radius:var(--radius-pill);box-shadow:0 6px 24px rgba(11,30,47,.28);opacity:0;pointer-events:none;transition:opacity var(--dur-2),transform var(--dur-2);z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:680px){
	.byline-spacer{display:none} .share{width:100%;margin-top:var(--space-3)}
	.grid-rel{grid-template-columns:1fr}
}
@media print{
	.progress,.site-header,.tools,.share,.footer,.toast,.section--prussian,section.section--tint{display:none!important}
	body{background:#fff;color:#000} .article{padding:0} .prose{margin-top:var(--space-6)}
	.article-title,.kicker,.byline-name{color:#000}
}