/* ===========================================================================
   casa.css - a casa DIRERP
   ---------------------------------------------------------------------------
   CONCEITO: livro-razao. O assunto desta casa e partida dobrada - duas colunas
   que fecham - e o artigo-mae ja e numerado por fatos e deducoes. Entao a
   estrutura da pagina nao decora o assunto, ela o repete: coluna de leitura
   com marginalia numerada, e FILETE DUPLO (o traco de fechamento do razao)
   como divisor. Nada de card arredondado com barra de acento.

   PALETA: herdada do kares.com.br, valor por valor (ordem do dono 22/08) -
   na transicao o cliente antigo ve mudanca de NOME, nao de empresa.

   CADA COR FOI MEDIDA. Os contrastes estao anotados. Texto exige 4,5 (AA).
   O escuro nao usa preto nem branco: branco puro sobre preto puro da 21:1,
   e esse extremo faz a letra vibrar. E a mesma familia com a luz apagada.
=========================================================================== */

/* --- CLARO: o padrao ----------------------------------------------------- */
:root {
  --mesa:      #e7d8bf;   /* o fundo da tela: a mesa onde a folha senta */
  --ground:    #f5ede0;   /* a FOLHA: o papel onde o texto mora */
  --ground2:   #ede0cc;
  --ground3:   #e0d0b8;
  --rule:      #c4a97a;
  --rule2:     #a8845a;
  --ink:       #2e1e0a;   /* 13,84 sobre --ground */
  --ink2:      #5a3a18;   /*  8,80 */
  --accent:    #F58634;
  --accent-dk: #c96820;
  /* o laranja REPROVA como texto no claro: --accent 2,17 / --accent-dk 3,30.
     #9c4a10 e o tom mais claro da familia que passa nos dois fundos:
     5,31 sobre --ground e 4,74 sobre --ground2. */
  --link:      #9c4a10;
  --rodape-bg: #c4a060;
  --rodape-tx: #fff8f0;

  --texto:  'Spectral', Georgia, 'Times New Roman', serif;
  --dados:  'IBM Plex Mono', Consolas, 'Courier New', monospace;

  --u:      8px;      /* ritmo: todo espaco vertical e multiplo desta unidade */
  --medida: 63ch;     /* linha longa perde o olho no retorno                  */
  --folha:  46rem;    /* largura da folha; cabecalho e rodape alinham nela    */
  --margem: 8.5rem;   /* faixa da marginalia numerada                         */
  --corpo:  1.1rem;
  --leia:   1.68;
}

/* --- ESCURO: mesma familia, luz apagada ---------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --mesa:    #0f0b07;   /* a mesa apaga junto */
    --ground:  #17120d;   /* marrom quase-preto: 1,13 de distancia do preto */
    --ground2: #1f1913;
    --ground3: #2a2119;
    --rule:    #453a2c;
    --rule2:   #5a4a38;
    --ink:     #e3d6c4;   /* 13,01 - confortavel, nao extremo */
    --ink2:    #b9a68d;   /*  7,89 */
    --link:    #F58634;   /*  7,39 - no escuro a PROPRIA marca serve de link */
    --rodape-bg: #221b14;
    --rodape-tx: #d9cab5;
  }
}
:root[data-tema="escuro"] {
  --mesa: #0f0b07;
  --ground: #17120d;  --ground2: #1f1913;  --ground3: #2a2119;
  --rule: #453a2c;    --rule2: #5a4a38;
  --ink: #e3d6c4;     --ink2: #b9a68d;     --link: #F58634;
  --rodape-bg: #221b14; --rodape-tx: #d9cab5;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mesa);
  color: var(--ink);
  font-family: var(--texto);
  font-size: var(--corpo);
  line-height: var(--leia);
  font-variant-numeric: oldstyle-nums;   /* numeros que pertencem ao texto */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #17120d; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- O FILETE DUPLO ------------------------------------------------------
   Vocabulario do livro-razao: o traco de fechamento e duplo, nao simples.
   E o unico divisor estrutural da casa - substitui borda de card.        */
.filete-duplo {
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 3px;
  margin: 0;
}

/* --- progresso: em texto longo, saber quanto falta segura quem le -------- */
#progresso {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--accent); z-index: 50;
}

/* --- marca ---------------------------------------------------------------
   Wordmark de texto ate o logotipo existir. NAO e o logotipo - e o lugar
   dele. DIR e ERP no mesmo peso; o sinal > como unico ponto de cor.      */
.marca {
  font-family: var(--dados);
  font-weight: 500; font-size: 1.06rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .14em;
}
.marca svg { display: block; }
.marca .seta { color: var(--accent); }

/* --- topo ---------------------------------------------------------------- */
.topo { border-bottom: 1px solid var(--rule); }
.topo .faixa {
  max-width: var(--folha); margin: 0 auto;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 6);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--u) * 3); flex-wrap: wrap;
}
.topo nav { display: flex; align-items: baseline; gap: calc(var(--u) * 3.5); }
.topo nav a {
  font-family: var(--dados); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink2); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.topo nav a:hover { color: var(--ink); }
.topo nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.tema {
  font-family: var(--dados); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--ink2); cursor: pointer; padding: 0 0 2px;
}
.tema:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* --- o razao: marginalia + coluna de leitura -----------------------------
   Uma grade de duas colunas. A da esquerda carrega o numero do fato, a
   fonte, o rotulo - o que num razao mora na margem. Em tela estreita ela
   colapsa e a marginalia vira nota antes do paragrafo.                   */
/* MOLDURA (dono 22/08, receita Stripe + Hey): a coluna de leitura CENTRA na
   tela e a pagina TERMINA - texto nao flutua no infinito. A margem de
   anotacao so existe onde ha anotacao (.com-margem, o dossie). */
/* A FOLHA (dono 22/08, olhando o Linear): o assunto se separa do fundo por
   uma superficie propria - a folha do razao sobre a mesa. Canto suave e
   sombra rasa; o texto mora NELA, os contrastes medidos nao mudam. */
.razao {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(20, 12, 4, .18);
  width: min(100%, var(--folha));
  margin: calc(var(--u) * 4) auto calc(var(--u) * 6);
  padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 10);
  display: grid;
  grid-template-columns: minmax(0, var(--medida));
  justify-content: center;
  align-items: start;
}
.razao > * { grid-column: 1; }
.razao.com-margem {
  grid-template-columns: var(--margem) minmax(0, var(--medida));
  column-gap: calc(var(--u) * 4);
}
.razao.com-margem > * { grid-column: 2; }

/* a marginalia sai pra coluna 1 e alinha pelo topo da linha que anota */
.nota {
  grid-column: 1;
  font-family: var(--dados); font-size: .72rem; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink2); text-align: right;
  padding-top: .55em; text-wrap: balance;
}
.nota b { display: block; color: var(--accent-dk); font-weight: 500; }

/* --- tipografia ----------------------------------------------------------
   Escala 1,25. Titulo cola no que vem DEPOIS: espaco acima sempre maior
   que o de baixo, senao ele flutua entre dois blocos.                    */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  line-height: 1.1; font-weight: 600; letter-spacing: -.022em;
  text-wrap: balance; margin: 0 0 calc(var(--u) * 2);
}
h2 {
  font-size: 1.4rem; line-height: 1.25; font-weight: 600; letter-spacing: -.012em;
  text-wrap: balance; margin: calc(var(--u) * 6) 0 calc(var(--u) * 1.5);
}
h3 { font-size: 1.12rem; font-weight: 600; margin: calc(var(--u) * 4) 0 var(--u); }
p  { margin: 0 0 calc(var(--u) * 2.5); }

/* link tem que se ANUNCIAR: sublinha grossa na cor da marca, nao fio de cabelo.
   O leitor da casa enxerga pouco - sutileza aqui e defeito, nao elegancia. */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
a:hover { color: var(--ink); text-decoration-thickness: 3px; }

em { font-style: italic; }   /* Spectral tem italico verdadeiro, nao inclinado */

/* a chamada e a ponte entre titulo e texto */
.chamada {
  font-size: 1.32rem; line-height: 1.45; color: var(--ink2);
  font-style: italic; text-wrap: pretty;
  margin: 0 0 calc(var(--u) * 4);
}

/* o portao: primeiro paragrafo, o trecho que casa com a busca */
.portao { font-size: 1.16rem; }

/* --- lancamento: a linha de autoria, composta como assento de razao ------ */
.lancamento {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3);
  font-family: var(--dados); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink2); font-variant-numeric: tabular-nums;
  padding: calc(var(--u) * 1.5) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 0 0 calc(var(--u) * 5);
}
.lancamento strong { color: var(--ink); font-weight: 500; }

/* --- listagem de artigos ------------------------------------------------- */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.lista li { border-bottom: 1px solid var(--rule); padding: calc(var(--u) * 3.5) 0; }
.lista li:first-child { padding-top: calc(var(--u) * 1.5); }
.lista h2 { margin: 0 0 calc(var(--u) * .75); font-size: 1.3rem; }
.lista h2 a { text-decoration: none; }
.lista h2 a:hover { text-decoration: underline; }
.lista p { margin: 0; color: var(--ink2); }
.lista .verbete {
  display: block; font-family: var(--dados); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-dk); margin-bottom: calc(var(--u) * .75);
}

/* --- o produto existe, discreto, e nunca vende ---------------------------
   Sem card, sem borda arredondada, sem barra de acento: filete duplo em
   cima e filete simples embaixo, como o fecho de uma conta.             */
.fecho {
  border-top: 3px double var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: calc(var(--u) * 2.5) 0;
  margin: calc(var(--u) * 7) 0 0;
  font-size: 1rem; color: var(--ink2);
}
.fecho strong { color: var(--ink); font-weight: 600; }
.fecho p:last-child { margin-bottom: 0; }

/* --- tabela: composta como conta do razao -------------------------------- */
.rolagem { overflow-x: auto; margin: calc(var(--u) * 4) 0; }
table {
  border-collapse: collapse; width: 100%; font-size: .97rem;
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  text-align: left; color: var(--ink2);
  font-family: var(--dados); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: calc(var(--u) * 1.5);
}
th, td { text-align: left; padding: var(--u) calc(var(--u) * 2) var(--u) 0; }
thead th {
  font-family: var(--dados); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink2);
  border-bottom: 1px solid var(--rule);
}
tbody td { border-bottom: 1px solid var(--rule); }
tbody tr:last-child td { border-bottom: 3px double var(--rule); }  /* fecho da conta */

code {
  font-family: var(--dados); font-size: .86em;
  background: var(--ground2); border-bottom: 1px solid var(--rule);
  padding: .1em .3em;
}

blockquote {
  margin: calc(var(--u) * 5) 0; padding: 0;
  border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: calc(var(--u) * 2.5);
  font-size: 1.18rem; line-height: 1.5; font-style: italic; color: var(--ink);
  text-wrap: pretty;
}

/* --- rodape -------------------------------------------------------------- */
footer { background: var(--rodape-bg); color: var(--rodape-tx); margin-top: calc(var(--u) * 8); }
footer .faixa {
  max-width: var(--folha); margin: 0 auto;
  padding: calc(var(--u) * 4) calc(var(--u) * 6);
  font-family: var(--dados); font-size: .76rem; line-height: 1.9;
  text-transform: uppercase; letter-spacing: .06em;
}
footer a { color: var(--rodape-tx); }

/* --- tarja de canteiro: sai quando o dominio definitivo subir ------------ */
.canteiro {
  background: var(--accent-dk); color: #fff8f0;
  font-family: var(--dados); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em;
  text-align: center; padding: 5px calc(var(--u) * 2);
}

/* --- telas estreitas: a marginalia desce e vira nota inline -------------- */
@media (max-width: 900px) {
  :root { --corpo: 1.05rem; }
  .razao, .razao.com-margem {
    grid-template-columns: minmax(0, 1fr);
    padding: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 8);
    width: auto; border-radius: 0; border-inline: 0;
    margin: 0;                      /* em tela estreita a folha E a mesa */
  }
  .razao > *, .razao.com-margem > * { grid-column: 1; }
  .nota {
    text-align: left; padding-top: 0;
    margin: 0 0 calc(var(--u) * 1.5);
    border-left: 2px solid var(--accent); padding-left: calc(var(--u) * 1.5);
  }
  .nota b { display: inline; }
  .nota b::after { content: " · "; color: var(--ink2); }
  .topo .faixa { padding: calc(var(--u) * 2) calc(var(--u) * 3); }
  .topo nav { gap: calc(var(--u) * 2.5); }
  .lancamento { gap: calc(var(--u) * 2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   A CASCA DE CEBOLA
   ---------------------------------------------------------------------------
   O dossie abre pelo VEREDITO e desce ate a prova. A numeracao aqui NAO e
   decoracao: camada 1, 2, 3 e profundidade real, e o leitor para onde lhe
   basta. Cada peca leva na margem a remissao clicavel para a camada de baixo.
=========================================================================== */

/* --- a escada: onde o leitor escolhe ate onde desce ---------------------- */
.escada {
  border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule);
  padding: calc(var(--u) * 3) 0;
  margin: calc(var(--u) * 2) 0 calc(var(--u) * 7);
}
.escada-diz {
  font-size: 1rem; color: var(--ink2); text-wrap: pretty;
  margin: 0 0 calc(var(--u) * 2.5);
}
.escada ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.escada li { counter-increment: degrau; background: var(--ground); }
.escada a {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  text-decoration: none; color: var(--ink);
}
.escada a::before {
  content: counter(degrau);
  font-family: var(--dados); font-size: .8rem; color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
}
.escada a:hover { background: var(--ground2); }
.escada b { font-weight: 600; }
.escada span {
  grid-column: 2; font-size: .92rem; color: var(--ink2); line-height: 1.45;
}
.escada ol { counter-reset: degrau; }

/* --- cabeca de camada ---------------------------------------------------- */
h2.camada {
  border-top: 3px double var(--rule);
  padding-top: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 9);
  font-size: 1.7rem;
}
.camada-n {
  display: block; font-family: var(--dados); font-size: .72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent-dk);
  margin-bottom: calc(var(--u) * .75);
}
.camada-diz {
  font-size: .98rem; font-style: italic; color: var(--ink2);
  margin-bottom: calc(var(--u) * 4); text-wrap: pretty;
}

/* --- cada peca: conclusao ou deducao ------------------------------------- */
.peca { margin-bottom: calc(var(--u) * 5); scroll-margin-top: calc(var(--u) * 3); }
.peca h3 {
  font-size: 1.24rem; line-height: 1.3; margin: 0 0 calc(var(--u) * 1.5);
  text-wrap: balance;
}
.peca-n {
  display: block; font-family: var(--dados); font-size: .7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .09em; color: var(--accent-dk);
  margin-bottom: 3px; font-variant-numeric: tabular-nums;
}
.peca p:last-child { margin-bottom: 0; }

/* a remissao na margem: rotulo por cima, numeros ligados por baixo */
.nota b { display: block; color: var(--ink2); font-weight: 400; opacity: .8; }
.nota a {
  color: var(--accent-dk); text-decoration: none;
  border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums;
}
.nota a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* --- os fatos: a base, numerada e ancorada ------------------------------- */
ol.fatos {
  list-style: none; counter-reset: fato; padding: 0; margin: 0;
  border-top: 1px solid var(--rule);
}
ol.fatos li {
  counter-increment: fato; position: relative;
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 2) 3.2rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.6;
  scroll-margin-top: calc(var(--u) * 3);
}
ol.fatos li::before {
  content: counter(fato);
  position: absolute; left: 0; top: calc(var(--u) * 2);
  font-family: var(--dados); font-size: .78rem; color: var(--ink2);
  font-variant-numeric: tabular-nums;
  width: 2.2rem; text-align: right;
}
ol.fatos li b { font-weight: 600; color: var(--ink); }
ol.fatos li b::after { content: " — "; font-weight: 400; color: var(--ink2); }

/* --- quem chega por remissao precisa ver ONDE caiu ----------------------- */
:target { position: relative; }
.peca:target::before,
ol.fatos li:target::after {
  content: ""; position: absolute; left: -14px; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
ol.fatos li:target::after { left: -14px; }

@media (max-width: 900px) {
  h2.camada { font-size: 1.45rem; margin-top: calc(var(--u) * 6); }
  .escada a { grid-template-columns: 2rem 1fr; }
  .peca:target::before, ol.fatos li:target::after { left: -8px; }
}

/* ===========================================================================
   REFERENCIAS EM DOIS NIVEIS (pedido do dono 22/08: ele enxerga pouco, e
   sutileza aqui e defeito). A palavra da duvida leva asterisco clicavel; logo
   abaixo do paragrafo, um botao COMPRIDO nomeia a peca que sustenta.
=========================================================================== */
.ref-marca a {
  text-decoration: none; color: var(--accent);
  font-weight: 700; font-size: .9em; padding: 0 .1em;
}
.referencias {
  display: grid; gap: calc(var(--u) * 1);
  margin: calc(var(--u) * -1) 0 calc(var(--u) * 3);
}
.btn-ref {
  display: block; width: 100%;
  font-family: var(--dados); font-size: .85rem; line-height: 1.45;
  color: var(--ink); text-decoration: none;
  background: var(--ground2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
}
.btn-ref:hover, .btn-ref:focus-visible {
  background: var(--ground3); color: var(--ink);
  border-left-width: 6px;
}

/* A PALAVRA E O LINK (dono 22/08): negrito, italico e sublinha grossa na cor
   da marca - visivel a ponto de dispensar botao de referencia embaixo. */
a.ref {
  font-weight: 600; font-style: italic;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: .2em;
}
a.ref:hover, a.ref:focus-visible { color: var(--accent-dk); }


/* o FIM da pagina (receita Hey): a leitura encerra num traco, nao no abismo */
main::after {
  content: ""; grid-column: 1 / -1; justify-self: center;
  width: 6rem; height: 3px; margin-top: calc(var(--u) * 8);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}