/* ============================================================
   ensaio.css · camada clássica para posts de alexmerovic.com.br/blog
   Ativa só com <article class="post ensaio">. Não altera nada fora disso.
   A moldura (topo, byline, partilha, assinar, rodapé) segue o blog.css.
   O quadro (títulos, epígrafe, capitular, citações, figuras) fica clássico.
   ============================================================ */
:root{
  --classica:"Instrument Serif",Georgia,"Times New Roman",serif;
  --verm:#C2574A;
}
:root[data-tema="claro"],:root[data-theme="light"]{--verm:#A33D31}
@media (prefers-color-scheme:light){:root:not([data-tema="escuro"]):not([data-theme="dark"]){--verm:#A33D31}}

/* título: serifa (Instrument Serif) no lugar do Inter bold */
.ensaio .rubrica{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ambar);font-weight:500;margin-bottom:14px}
.ensaio .post-cab h1{font-family:var(--classica);font-weight:400;font-size:clamp(44px,7.6vw,70px);letter-spacing:0;line-height:1}
.ensaio .post-cab h1 i{color:var(--ambar);font-weight:400}
.ensaio .post-sub{font-family:var(--sans);font-weight:300;font-style:normal;font-size:17px;line-height:1.6;color:var(--dim)}

/* quadro de abertura e obras: cor cheia, moldura fina, legenda de museu */
.ensaio .quadro{margin:32px 0 0}
.ensaio .quadro img{display:block;width:100%;height:auto;border-radius:2px;border:1px solid var(--line)}
.ensaio .quadro figcaption{font-family:var(--sans);font-size:12.5px;color:var(--dim-2);text-align:left;margin-top:10px;line-height:1.5}
.ensaio .quadro figcaption b{color:var(--dim);font-weight:500}
.corpo .quadro img{border-radius:2px}

/* epígrafe */
.ensaio .epigrafe{margin:40px 0 8px;padding-left:22px;border-left:1px solid var(--ambar)}
.ensaio .epigrafe p{font-family:var(--sans);font-style:normal;font-weight:300;font-size:20px;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.ensaio .epigrafe cite{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--dim-2)}

/* capítulos: numeral romano + título em serifa; o sumário lateral lê os h2 normalmente */
.ensaio .corpo h2{font-family:var(--classica);font-weight:400;font-size:38px;letter-spacing:0;line-height:1.1;margin-top:2.2em}
/* numeral romano automático: o markdown fica limpo e o sumário lateral mostra só o nome */
.ensaio .corpo{counter-reset:cap}
.ensaio .corpo h2::before{counter-increment:cap;content:counter(cap,lower-roman) ".";display:block;font-style:italic;font-weight:400;font-size:18px;color:var(--ambar);margin-bottom:6px}
.ensaio .corpo .abre::first-letter{font-family:var(--classica);float:left;font-size:4.4em;line-height:.8;padding:.08em .12em 0 0;color:var(--ambar)}

/* citação de autor: Inter, filete âmbar (regra do Alex: serifa só em texto de até 2 linhas) */
.ensaio .corpo blockquote{border-left:1px solid var(--ambar);font-family:var(--sans);font-style:normal;font-weight:400;font-size:19px;line-height:1.5;padding-left:22px}
.ensaio .corpo blockquote cite{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--dim-2)}

/* frase de destaque */
.ensaio .corpo .destaca{font-family:var(--sans);font-weight:500;font-size:clamp(19px,2.6vw,22px);line-height:1.45;letter-spacing:-.015em;color:var(--ink);
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2em 0}
.ensaio .corpo .destaca span{color:var(--ambar)}

/* ornamento binário entre capítulos */
.ensaio .corpo .binario{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim-2);text-align:center;word-break:break-all}
.ensaio .corpo .binario b{color:var(--ambar);font-weight:400}

/* figuras de dado: cartão do blog, rótulo em versalete, título clássico */
.ensaio .fig{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px 20px 16px;margin:2.2em 0}
.ensaio .fig .rot-fig{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-weight:500}
.ensaio .fig .tit{font-family:var(--classica);font-size:25px;line-height:1.25;color:var(--ink);margin-top:4px}
.ensaio .fig svg{display:block;width:100%;height:auto;margin-top:12px}
.ensaio .fig svg text{font-family:var(--sans);fill:var(--dim)}
.ensaio .fig .nota{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--dim-2);margin-top:12px}
.ensaio .legenda{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--sans);font-size:12.5px;color:var(--dim);margin-top:10px}
.ensaio .legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* retrato ao lado do texto: cinza até o hover, como a aba Sobre */
.ensaio .lado{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;align-items:start}
.ensaio .lado .quadro{margin:6px 0 0}
.ensaio .lado .quadro img{filter:grayscale(1) contrast(1.05);transition:filter .7s var(--ease)}
.ensaio .lado .quadro:hover img{filter:none}
.ensaio .lado > div > p + p{margin-top:1.1em}

/* calculadora */
.ensaio .calc{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:22px;align-items:center;margin-top:14px;font-family:var(--sans)}
.ensaio .calc label{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);margin-bottom:4px}
.ensaio .calc label output{color:var(--ink);font-variant-numeric:tabular-nums}
.ensaio .calc .ctl{display:grid;gap:14px}
.ensaio .calc input[type=range]{width:100%;accent-color:var(--ambar)}
.ensaio .leitura{text-align:center;border-left:1px solid var(--line);padding-left:20px}
.ensaio .leitura .big{font-family:var(--classica);font-size:54px;line-height:1;color:var(--ink);display:block;font-variant-numeric:tabular-nums}
.ensaio .leitura .delta{display:block;font-size:13.5px;margin-top:8px}
.ensaio .leitura small{display:block;font-size:11.5px;color:var(--dim-2);margin-top:8px;line-height:1.45}
.ensaio .botoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* fecho */
.ensaio .corpo .fim{font-family:var(--classica);font-style:italic;font-size:27px;text-align:center;color:var(--ambar);margin-top:2.4em}

@media (max-width:760px){
  .ensaio .lado,.ensaio .calc{grid-template-columns:minmax(0,1fr)}
  .ensaio .leitura{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}
  .ensaio .corpo h2{font-size:29px}
  .ensaio .epigrafe p{font-size:21px}
}

/* regra do Alex: serifa só em texto de até duas linhas. O build liga um medidor que conta as linhas
   reais de cada elemento serifado na largura da tela; passou de duas, ganha .serif-longo e vira Inter. */
.ensaio .serif-longo{font-family:var(--sans)!important;font-style:normal!important;font-weight:600;
  letter-spacing:-.02em;line-height:1.3}
.ensaio .corpo h2.serif-longo{font-size:26px}
.ensaio .fig .tit.serif-longo{font-size:17px;line-height:1.4}
.ensaio .post-cab h1.serif-longo{font-size:clamp(30px,5vw,42px);line-height:1.12}
.ensaio .corpo .fim.serif-longo{font-size:18px;font-weight:500}