/* Quando a conversa fecha — folha de estilo da leitura.

   Uma regra governa este arquivo: nada de caixa. Sem tarja, sem gaveta,
   sem cartão, sem borda em volta de ideia. O texto se diferencia por
   medida, espaço e ritmo tipográfico, e nunca por moldura — porque foi
   a moldura que fez a versão anterior parecer manual.

   A paleta e as fontes são as mesmas do resto do acervo. O que mudou
   foi a mobília.                                                        */

:root{
  --papel:#EFF1EE; --superficie:#FAFBF9;
  --tinta:#161B18; --tinta-2:#2E3A34; --apagado:#6F7A75;
  --linha:#D5DAD5; --linha-forte:#B9C1BB; --ocre:#8A6320;
  --medida:34rem;          /* ~66 caracteres na fonte serifada */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --papel:#101413; --superficie:#171C1A;
    --tinta:#E9ECEA; --tinta-2:#C0C8C4; --apagado:#8C9691;
    --linha:#273029; --linha-forte:#3A453E; --ocre:#D3AC5E;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--serif); font-size:1.22rem; line-height:1.72;
  font-weight:300;
}

/* ---------- barra ---------- */
.topo{
  border-bottom:1px solid var(--linha); background:var(--superficie);
  position:sticky; top:0; z-index:5;
}
.topo .interno{
  max-width:var(--medida); margin:0 auto; padding:.7rem 1.4rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.topo a{color:inherit; text-decoration:none}
.topo .marca{font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.01em}
.topo .onde{font-family:var(--mono); font-size:.72rem; color:var(--apagado); letter-spacing:.06em; text-transform:uppercase}

/* ---------- corpo ---------- */
main{max-width:var(--medida); margin:0 auto; padding:3.6rem 1.4rem 1rem}
/* primeiro parágrafo: entra sem cerimônia, um pouco maior */
.abertura{font-size:1.3rem; line-height:1.66}

/* ---------- diálogo ---------- */
/* Sem rótulo, sem caixa. Só uma medida menor e um respiro maior:
   o leitor reconhece fala por travessão, como em qualquer livro.   */
.fala{margin:1.9rem 0 2.1rem; padding-left:.2rem}
.fala p{margin:0 0 .7rem; text-indent:-1.1rem; padding-left:1.1rem}
.fala p:last-child{margin-bottom:0}
.cena{color:var(--tinta-2); font-style:italic}

/* ---------- a única frase destacada do livro ---------- */
.destaque{
  font-size:1.5rem; line-height:1.35; font-weight:400;
  margin:2.6rem 0; padding-left:1.1rem;
  border-left:2px solid var(--ocre); color:var(--tinta);
}

/* ---------- fim de capítulo ---------- */
/* ---------- capa ---------- */
@media (max-width:640px){
  body{font-size:1.13rem}
  main{padding-top:2.4rem}
  h1{font-size:1.95rem}
  .na-capa h1{font-size:2.2rem}
  .destaque{font-size:1.3rem}
}

@media print{
  .topo,.adiante{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  main{max-width:none}
}

/* ---------- topo: seta, nome, mapa, e um fio ---------- */
.topo .interno{max-width:var(--medida); margin:0 auto; padding:.65rem 1.4rem;
  display:flex; align-items:center; gap:1rem}
.topo .voltar{font-size:1.05rem; color:var(--apagado); line-height:1}
.topo .marca{flex:1; font-family:var(--sans); font-size:.86rem; font-weight:600}
.topo .onde{font-family:var(--mono); font-size:.7rem; color:var(--apagado); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.topo .fio{max-width:var(--medida); margin:0 auto; padding:0 1.4rem; height:2px; background:transparent}
.topo .fio i{display:block; height:2px; background:var(--ocre); opacity:.55; transition:width .3s}

.mapa{font-family:var(--sans); font-size:.8rem; position:relative}
.mapa summary{list-style:none; cursor:pointer; color:var(--apagado)}
.mapa summary::-webkit-details-marker{display:none}
.mapa[open] summary{color:var(--tinta)}
.mapa ol{
  position:absolute; right:0; top:1.9rem; z-index:9; margin:0;
  padding:.7rem 1.1rem .8rem 2.2rem; width:min(21rem,78vw);
  background:var(--superficie); border:1px solid var(--linha);
  box-shadow:0 12px 34px -20px rgba(0,0,0,.4);
}
.mapa li{margin:.42rem 0}
.mapa a{color:inherit; text-decoration:none; font-size:.92rem}
.mapa a:hover{text-decoration:underline; text-decoration-color:var(--ocre)}
.mapa li[aria-current] a{color:var(--apagado)}

/* ---------- a entrada, acima do título ---------- */
.entrada{font-size:1.32rem; line-height:1.62; margin-bottom:2.2rem}
main h1{margin-top:.4rem}

/* ---------- rubrica dentro da fala ---------- */
.rubrica{color:var(--apagado); font-style:italic; text-indent:0; padding-left:1.1rem}

/* ---------- experimento ---------- */
/* Não é quiz: não há certo, não há placar, e a escolha só muda o que vem
   depois. Por isso não tem moldura nem ícone — só um respiro maior.     */
.experimento{margin:2.8rem 0}
.experimento .pergunta{font-family:var(--sans); font-size:1rem; line-height:1.55; margin-bottom:1rem}
.opcoes{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem}
.opcao{
  font-family:var(--sans); font-size:.92rem; line-height:1.35;
  background:transparent; color:var(--tinta); cursor:pointer;
  border:1px solid var(--linha-forte); border-radius:2px;
  padding:.5rem .8rem; text-align:left; max-width:100%;
}
.opcao:hover{border-color:var(--ocre)}
.opcao[aria-pressed="true"]{border-color:var(--ocre); box-shadow:inset 0 0 0 1px var(--ocre)}
.revela{margin:0; padding-left:1.1rem; border-left:2px solid var(--ocre); color:var(--tinta-2)}

/* ---------- passagem para o trecho seguinte ---------- */
/* Sem "próximo capítulo": uma frase que declara o que ficou faltando,
   e um gesto.                                                           */
.segue{margin:4.6rem 0 0; padding-top:2rem; border-top:1px solid var(--linha)}
.segue p{font-size:1.24rem; line-height:1.55; margin-bottom:1.6rem}
.segue .volta{font-size:1.1rem; color:var(--tinta-2); margin-top:2.4rem}
.continuar{
  display:inline-block; font-family:var(--sans); font-size:.95rem; font-weight:500;
  color:inherit; text-decoration:none; border-bottom:2px solid var(--ocre);
  padding-bottom:.15rem;
}
.continuar:hover{color:var(--ocre)}
.capa-segue{border-top:none; margin-top:3rem; padding-top:0}
.miudo{font-family:var(--sans); font-size:.86rem; line-height:1.6; color:var(--apagado); margin-top:3.4rem}
.miudo a{color:var(--tinta-2)}

/* ---------- a fala de abertura da capa ---------- */
.fala.abre{margin:0 0 2.6rem; font-size:1.35rem; line-height:1.6}

@media (max-width:640px){
  .entrada{font-size:1.18rem}
  .fala.abre{font-size:1.18rem}
  .segue p{font-size:1.12rem}
}

/* ---------- tipografia do corpo ----------
   (reposta aqui depois da limpeza dos blocos da versão anterior) */
h1{
  font-family:var(--serif); font-weight:400; font-size:2.35rem;
  line-height:1.16; letter-spacing:-.012em; margin:.4rem 0 2.4rem;
}
h2{
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  line-height:1.3; margin:3.2rem 0 1.1rem;
}
p{margin:0 0 1.35rem}
em{font-style:italic}
main a{color:inherit; text-decoration-color:var(--ocre); text-underline-offset:.2em}
main{padding-bottom:2rem}

@media (max-width:640px){
  h1{font-size:1.95rem}
}

/* a capa: o título entra depois da cena, nomeando o que se acabou de ver */
.na-capa main > h1:not(:first-child){margin-top:2.8rem}
.sub{font-family:var(--sans); font-size:1.02rem; line-height:1.5; color:var(--apagado); margin:-1.6rem 0 2.2rem}

/* rodapé mínimo, nos trechos do meio: não anuncia fim de artigo */
.rodape.minimo{margin-top:3.2rem; padding:1rem 1.4rem 2.6rem; font-size:.78rem}
.rodape.minimo p{margin:0}

/* ---------- rodapé ----------
   Faltava a regra base: o rodapé voltava para a margem da tela depois de
   toda a leitura acontecer numa coluna central, e trocava o eixo da página
   no último momento. Some com o texto, obedece à mesma medida. */
.rodape{
  max-width:var(--medida); margin:4rem auto 0; padding:1.6rem 1.4rem 3.2rem;
  border-top:1px solid var(--linha);
  font-family:var(--sans); font-size:.83rem; line-height:1.6; color:var(--apagado);
}
.rodape p{margin:0 0 .6rem}
.rodape a{color:var(--tinta-2); text-decoration-color:var(--ocre); text-underline-offset:.18em}

/* na capa a seta não tem para onde ir: some, sem mexer no alinhamento */
.na-capa .voltar{visibility:hidden; pointer-events:none}

/* ==========================================================================
   Os cinco objetos.

   Existem porque quase todo o argumento deste texto tem forma de oposição,
   de mapa ou de lista, e estava sendo entregue como parágrafo — o que
   obrigava o leitor a atravessar 100% do pensamento para chegar à próxima
   recompensa. Nenhum deles é cartão: separam-se por fio, medida e espaço,
   como o resto da leitura. Nenhum deles carrega informação que não esteja
   no texto em volta.
   ========================================================================== */

/* rótulo comum aos três objetos com título */
.compara .rotulo,.quadrantes .rotulo,.sequencia .rotulo{
  font-family:var(--sans); font-size:.94rem; font-weight:600; line-height:1.4;
  color:var(--tinta); margin:0 0 .9rem;
}

/* ---------- 1. comparação: a oposição que o texto já faz ---------- */
.compara{margin:2.9rem 0}
.compara .grade{
  display:grid; grid-template-columns:1fr 1fr;
  font-family:var(--sans); font-size:.92rem; line-height:1.45;
  border-top:1px solid var(--linha-forte);
}
.compara .grade>div{padding:.62rem 1.1rem .62rem 0; border-bottom:1px solid var(--linha)}
.compara .grade>div:nth-child(2n){padding-right:0; padding-left:1.1rem}
.compara .grade>.cab{
  font-size:.78rem; color:var(--apagado); font-weight:500;
  padding-top:.5rem; padding-bottom:.5rem;
}
.compara .remate{
  font-family:var(--serif); font-size:1.16rem; line-height:1.55;
  margin:1.5rem 0 0; color:var(--tinta);
}

/* ---------- 2. quadrantes: as quatro situações de uma vez ---------- */
.quadrantes{margin:3rem 0}
/* só a cruz interna e o fio de cima: uma moldura fechada aqui seria a
   caixa que a versão anterior tinha, com melhor gosto */
.quadrantes .grade{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--linha-forte);
}
.quadrantes .q{padding:1rem 1.4rem 1.15rem 0}
.quadrantes .q:nth-child(odd){border-right:1px solid var(--linha)}
.quadrantes .q:nth-child(even){padding-left:1.4rem; padding-right:0}
.quadrantes .q:nth-child(-n+2){border-bottom:1px solid var(--linha)}
.quadrantes .q b{
  display:block; font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--apagado);
  margin-bottom:.5rem;
}
.quadrantes .q span{
  display:block; font-family:var(--sans); font-size:.92rem; line-height:1.45;
}
.quadrantes .q span+span{color:var(--apagado); margin-top:.3rem}

/* ---------- 3. sequência: o que varia, e o que resulta ---------- */
.sequencia{margin:2.9rem 0}
.sequencia .itens{
  font-family:var(--sans); font-size:.95rem; line-height:1.6; color:var(--tinta-2);
  margin:0 0 .9rem;
}
.sequencia .resulta{margin:0; font-size:1.16rem; line-height:1.5}
.sequencia .resulta::before{
  content:"↓"; display:block; margin-bottom:.55rem;
  font-family:var(--sans); font-size:.95rem; color:var(--ocre); line-height:1;
}

/* ---------- 4. item numerado: número e tipografia, sem cartão ---------- */
.numero{
  margin:2.6rem 0 .9rem; font-size:1.24rem; line-height:1.4; font-weight:400;
}
.numero b{
  display:block; font-family:var(--mono); font-size:1.05rem; font-weight:500;
  color:var(--ocre); letter-spacing:.1em; margin-bottom:.45rem;
}

/* ---------- 5. lateral: o que não se perde por não abrir ---------- */
/* O rótulo diz o que tem dentro. Não existe "saiba mais": se o leitor
   precisa abrir para saber se vale, o recolhimento virou obstáculo.     */
.lateral{margin:2.2rem 0}
.lateral summary{
  list-style:none; cursor:pointer;
  font-family:var(--sans); font-size:.92rem; line-height:1.45; color:var(--tinta-2);
  padding-left:1.35rem; position:relative;
}
.lateral summary::-webkit-details-marker{display:none}
.lateral summary::before{
  content:"+"; position:absolute; left:0; top:0;
  font-family:var(--mono); color:var(--ocre); font-size:1rem; line-height:1.3;
}
.lateral[open] summary::before{content:"–"}
.lateral summary:hover{color:var(--tinta)}
.lateral .dentro{
  margin:1.4rem 0 0 0; padding-left:1.35rem; border-left:1px solid var(--linha);
}
.lateral .dentro>*:last-child{margin-bottom:0}

@media (max-width:640px){
  .compara .grade{font-size:.85rem}
  .compara .grade>div{padding-right:.7rem}
  .compara .grade>div:nth-child(2n){padding-left:.7rem}
  .compara .remate{font-size:1.06rem}
  .quadrantes .grade{grid-template-columns:1fr}
  .quadrantes .q,.quadrantes .q:nth-child(even){border-right:none; padding-left:0; padding-right:0}
  .quadrantes .q:nth-child(-n+3){border-bottom:1px solid var(--linha)}
  .sequencia .resulta,.numero{font-size:1.08rem}
}

@media print{
  .lateral .dentro{display:block !important}
  .lateral summary{display:none}
}
/* ==========================================================================
   Versão editorial — seis trechos.
   A capa entra por uma cena, não por uma taxonomia. A faixa cromática é
   identidade, não navegação; o conteúdo continua sendo uma leitura.
   ========================================================================== */

:root{
  --azul:#31587f;
  --verde:#2f705c;
  --ocre-faixa:#9a6c20;
  --capa-largura:72rem;
}

/* lombada cromática: larga na capa, mínima na leitura */
body{padding-left:14px; overflow-x:hidden}
body::before{
  content:""; position:fixed; inset:0 auto 0 0; width:14px; z-index:30;
  background:linear-gradient(to bottom,var(--azul) 0 34%,var(--verde) 34% 68%,var(--ocre-faixa) 68% 100%);
}
.na-capa{padding-left:78px}
.na-capa::before{width:78px}

/* acessibilidade */
.pular{
  position:fixed; left:1rem; top:-5rem; z-index:99; padding:.55rem .8rem;
  background:var(--tinta); color:var(--papel); font-family:var(--sans);
  font-size:.84rem; text-decoration:none;
}
.pular:focus{top:1rem}

/* capa: sem barra funcional, sem mapa, sem aparência de curso */
.na-capa .capa-topo{display:none}
.na-capa .capa-principal{
  max-width:var(--capa-largura); min-height:calc(100vh - 7rem); margin:0 auto;
  padding:3.6rem clamp(2.6rem,5vw,5.3rem) 3rem;
}
.capa-selo{
  margin:0 0 2.1rem; font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--apagado);
}
.capa-selo span{padding:0 .45em; color:var(--ocre)}
.capa-dialogo{
  max-width:58rem; margin:0 0 2.55rem; font-size:1.34rem; line-height:1.52;
}
.capa-dialogo p{margin:0 0 .35rem}
.capa-dialogo .capa-rubrica{
  margin:.45rem 0 .42rem 2.5rem; color:var(--apagado); font-size:1.02rem;
}
.na-capa .capa-principal h1{
  max-width:54rem; margin:.6rem 0 1.4rem; font-size:clamp(4.2rem,7vw,6.7rem);
  line-height:.92; letter-spacing:-.035em; font-weight:400;
}
.na-capa .sub{
  max-width:34rem; margin:0 0 1.8rem; font-family:var(--serif); font-size:1.48rem;
  line-height:1.42; color:var(--tinta-2);
}
.capa-nota{max-width:46rem; color:var(--tinta-2); font-size:1.04rem; line-height:1.62}
.capa-nota p{margin:0 0 .7rem}
.capa-base{
  margin-top:2.3rem; padding-top:1.75rem; border-top:1px solid var(--linha-forte);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:end;
}
.capa-autoria{font-family:var(--sans); line-height:1.35}
.capa-autoria strong{display:block; font-size:1rem; font-weight:600; color:var(--tinta)}
.capa-autoria span{display:block; margin-top:.18rem; font-size:.9rem; color:var(--apagado)}
.capa-entrada{text-align:right; font-family:var(--sans)}
.botao-entrar{
  display:inline-flex; align-items:center; gap:1.3rem; min-width:20rem; justify-content:center;
  padding:.9rem 1.25rem; background:var(--ocre); color:#fff; border-radius:2px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; transition:transform .16s ease,filter .16s ease;
}
.botao-entrar:hover{transform:translateY(-1px); filter:brightness(.96)}
.botao-entrar:focus-visible{outline:3px solid color-mix(in srgb,var(--ocre) 40%, transparent); outline-offset:3px}
.capa-entrada p{margin:.55rem 0 0; font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--apagado)}
.na-capa .capa-rodape{
  max-width:var(--capa-largura); margin:0 auto; padding:1.2rem clamp(2.6rem,5vw,5.3rem) 2.2rem;
  border-top:0; font-size:.72rem;
}

/* leitura interna: uma coluna editorial, com navegação apenas como orientação */
body:not(.na-capa) .topo{margin-left:0}
body:not(.na-capa) main{padding-top:3.9rem}
body:not(.na-capa) .entrada{color:var(--tinta-2)}
.topo .onde{margin-left:auto}
.topo .mapa{margin-left:.15rem}

/* o mapa abre como índice de leitura, não como menu de curso */
.mapa ol{border-radius:2px}
.mapa li::marker{font-family:var(--mono); color:var(--apagado); font-size:.72rem}

/* manter os objetos silenciosos; eles entram só quando fazem trabalho próprio */
.compara,.quadrantes,.sequencia,.experimento,.lateral{scroll-margin-top:5rem}

/* melhora de foco sem adicionar ruído visual */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ocre); outline-offset:4px}

/* fim de leitura mais literário */
.segue .continuar::after{content:"  →"; color:var(--ocre)}

@media (max-width:900px){
  .na-capa .capa-principal{padding-left:2.7rem; padding-right:2.7rem}
  .capa-base{grid-template-columns:1fr; align-items:start}
  .capa-entrada{text-align:left}
  .botao-entrar{min-width:0}
}

@media (max-width:640px){
  body,.na-capa{padding-left:0; padding-top:8px}
  body::before,.na-capa::before{
    inset:0 0 auto 0; width:100%; height:8px;
    background:linear-gradient(to right,var(--azul) 0 34%,var(--verde) 34% 68%,var(--ocre-faixa) 68% 100%);
  }
  .na-capa .capa-principal{min-height:auto; padding:2.1rem 1.35rem 1.8rem}
  .capa-selo{font-size:.68rem; letter-spacing:.18em; margin-bottom:1.65rem}
  .capa-dialogo{font-size:1.08rem; line-height:1.52; margin-bottom:2rem}
  .capa-dialogo .capa-rubrica{margin-left:1.2rem; font-size:.9rem}
  .na-capa .capa-principal h1{font-size:clamp(3rem,15vw,4.3rem); line-height:.94; margin-bottom:1.15rem}
  .na-capa .sub{font-size:1.2rem; margin-bottom:1.4rem}
  .capa-nota{font-size:.98rem}
  .capa-base{margin-top:1.8rem; padding-top:1.3rem; gap:1.4rem}
  .botao-entrar{width:100%; padding:.9rem .9rem}
  .capa-entrada p{text-align:left}
  .na-capa .capa-rodape{padding:1rem 1.35rem 2rem}
  .topo .interno{padding-left:1rem; padding-right:1rem; gap:.65rem}
  .topo .marca{font-size:.78rem}
  .topo .onde{font-size:.62rem}
  .mapa{font-size:.75rem}
  body:not(.na-capa) main{padding-top:2.7rem}
}

@media print{
  body,.na-capa{padding-left:0}
  body::before,.na-capa::before{display:none}
  .na-capa .capa-principal{min-height:auto; max-width:none; padding:0}
  .capa-base{break-inside:avoid}
  .botao-entrar{border:1px solid #000; background:none; color:#000}
}