/* ============================================================
   S.A.O — Sai do Asfalto Outdoor
   Folha de estilo do jornal. Impresso primeiro, tela depois.
   ============================================================ */

:root{
  /* papel-jornal: mais cinza e menos doce que creme editorial */
  --papel:#efece2;
  --papel-fundo:#e5e1d4;
  --tinta:#17150f;
  --tinta2:#55503f;
  --tinta3:#7d7563;
  --fio:#b9b2a0;
  --fio-forte:#17150f;
  --vermelho:#8a2b17;   /* tinta de segunda cor, como jornal antigo */
  --verde:#2b5535;
  --ambar:#7a5c07;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#14120e;
    --papel-fundo:#0d0c09;
    --tinta:#e9e3d4;
    --tinta2:#a9a191;
    --tinta3:#7f7969;
    --fio:#39342a;
    --fio-forte:#6b6252;
    --vermelho:#dd7a55;
    --verde:#7db98a;
    --ambar:#cfa63a;
  }
}
:root[data-theme="dark"]{
  --papel:#14120e; --papel-fundo:#0d0c09;
  --tinta:#e9e3d4; --tinta2:#a9a191; --tinta3:#7f7969;
  --fio:#39342a; --fio-forte:#6b6252;
  --vermelho:#dd7a55; --verde:#7db98a; --ambar:#cfa63a;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--papel-fundo);
  color:var(--tinta);
  font-family:"Source Serif 4","Newsreader",Georgia,"Times New Roman",serif;
  font-size:17.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* a folha: um retângulo de papel sobre a mesa */
.folha{
  max-width:1180px;
  margin:0 auto;
  background:var(--papel);
  padding:0 clamp(16px,3.4vw,52px) 64px;
  border-left:1px solid var(--fio);
  border-right:1px solid var(--fio);
  min-height:100vh;
}

/* ---------- CABEÇALHO ---------- */
.tarja{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:"Archivo",system-ui,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);
  padding:11px 0 9px;border-bottom:1px solid var(--fio);
}
.cabeca{border-bottom:3px solid var(--fio-forte);padding-bottom:10px}
.logo{
  font-family:"Libre Caslon Display","Playfair Display",Georgia,serif;
  font-weight:400;text-align:center;line-height:.9;
  font-size:clamp(52px,13vw,132px);
  letter-spacing:-.015em;margin:16px 0 0;
}
.logo a{border:0;color:inherit}
.bandeira{
  display:flex;justify-content:center;align-items:center;gap:16px;
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--tinta2);
  margin:14px 0 4px;flex-wrap:wrap;text-align:center;
}
.bandeira::before,.bandeira::after{content:"";height:1px;background:var(--fio);flex:1;max-width:120px}
.datalinha{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--fio);margin-top:12px;padding-top:8px;
  font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta2);
}

/* ---------- NAVEGAÇÃO ---------- */
nav.secoes{
  display:flex;gap:0;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--fio);border-bottom:3px double var(--fio-forte);
  margin-bottom:26px;
}
nav.secoes a{
  font-family:"Archivo",sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);
  padding:11px 16px;border:0;white-space:nowrap;
}
nav.secoes a:hover,nav.secoes a[aria-current="page"]{color:var(--vermelho)}
nav.secoes a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--vermelho)}

/* ---------- TIPOGRAFIA DE MATÉRIA ---------- */
h1,h2,h3,h4{font-family:"Libre Caslon Display","Playfair Display",Georgia,serif;font-weight:400}
.chapeu{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--vermelho);
  margin:0 0 8px;
}
.manchete{font-size:clamp(34px,5.6vw,64px);line-height:1.03;letter-spacing:-.015em;
  margin:0 0 12px;text-wrap:balance}
.manchete-2{font-size:clamp(25px,3.4vw,34px);line-height:1.1;margin:0 0 10px;text-wrap:balance}
.manchete-3{font-size:22px;line-height:1.15;margin:0 0 8px;text-wrap:balance}
.linhafina{
  font-family:"Source Serif 4",Georgia,serif;font-style:italic;
  font-size:clamp(17px,2vw,20px);line-height:1.45;color:var(--tinta2);
  margin:0 0 16px;
}
.assina{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta3);margin:0 0 14px;
}
p{margin:0 0 11px}
p.entrada::first-letter{
  float:left;font-family:"Libre Caslon Display",Georgia,serif;
  font-size:4.1em;line-height:.78;padding:.06em .09em 0 0;color:var(--vermelho);
}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--fio)}
a:hover{color:var(--vermelho);border-bottom-color:var(--vermelho)}
a:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}

/* ---------- COLUNAS ---------- */
.colunas-3{columns:3;column-gap:26px;column-rule:1px solid var(--fio)}
.colunas-2{columns:2;column-gap:26px;column-rule:1px solid var(--fio)}
.colunas-3 p,.colunas-2 p{margin-bottom:10px}
.colunas-3 h4,.colunas-2 h4{break-after:avoid}
@media(max-width:860px){.colunas-3{columns:2}}
@media(max-width:560px){.colunas-3,.colunas-2{columns:1;column-rule:0}}

/* ---------- GRADE DA CAPA ---------- */
.capa{display:grid;grid-template-columns:2.1fr 1fr;gap:0;border-bottom:3px double var(--fio-forte);
  padding-bottom:22px;margin-bottom:22px}
.capa > .principal{padding-right:26px;border-right:1px solid var(--fio)}
.capa > .lateral{padding-left:26px}
@media(max-width:820px){
  .capa{grid-template-columns:1fr}
  .capa > .principal{padding-right:0;border-right:0;border-bottom:1px solid var(--fio);padding-bottom:20px;margin-bottom:20px}
  .capa > .lateral{padding-left:0}
}

.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 24px}
.tres > *{padding:0 22px;border-right:1px solid var(--fio)}
.tres > *:first-child{padding-left:0}
.tres > *:last-child{padding-right:0;border-right:0}
@media(max-width:820px){
  .tres{grid-template-columns:1fr}
  .tres > *{padding:18px 0;border-right:0;border-bottom:1px solid var(--fio)}
  .tres > *:last-child{border-bottom:0}
}

/* ---------- FIOS E SEÇÕES ---------- */
.cabeca-secao{
  display:flex;align-items:center;gap:14px;margin:38px 0 18px;
  border-top:3px solid var(--fio-forte);padding-top:9px;
}
.cabeca-secao h2{
  font-family:"Archivo",sans-serif;font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--vermelho);margin:0;white-space:nowrap;
}
.cabeca-secao span{
  font-family:"Archivo",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta3);
}
hr.fio{border:0;border-top:1px solid var(--fio);margin:22px 0}
hr.ornamento{border:0;text-align:center;margin:26px 0}
hr.ornamento::before{content:"❊";color:var(--tinta3);font-size:14px;letter-spacing:.6em}

/* ---------- QUADROS ---------- */
.quadro{border:1px solid var(--fio-forte);padding:15px 17px;margin:0 0 18px;break-inside:avoid}
.quadro > h4{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vermelho);margin:0 0 9px;
}
.quadro p:last-child{margin-bottom:0}
.quadro.destaque{border-width:3px;border-style:double}
.quadro.alerta{border-color:var(--vermelho)}
.chamada{
  border-top:1px solid var(--fio-forte);border-bottom:1px solid var(--fio-forte);
  padding:13px 0;margin:16px 0;font-family:"Libre Caslon Display",Georgia,serif;
  font-size:21px;line-height:1.25;text-align:center;break-inside:avoid;
}
.chamada cite{
  display:block;font-family:"Archivo",sans-serif;font-style:normal;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta3);margin-top:9px;
}

/* ---------- TABELAS ---------- */
.rolagem{overflow-x:auto;margin:12px 0 18px}
table{width:100%;border-collapse:collapse;font-size:14.5px;
  font-family:"Source Serif 4",Georgia,serif}
th{
  text-align:left;border-bottom:2px solid var(--fio-forte);padding:7px 10px 7px 0;
  font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta2);white-space:nowrap;
}
td{border-bottom:1px solid var(--fio);padding:8px 10px 8px 0;vertical-align:top}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td.dia{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--vermelho);font-weight:600}

/* ---------- ETIQUETAS ---------- */
.et{
  display:inline-block;font-family:"Archivo",sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--fio);
  color:var(--tinta2);padding:1px 7px;vertical-align:middle;white-space:nowrap;
}
.et.ok{color:var(--verde);border-color:var(--verde)}
.et.nao{color:var(--vermelho);border-color:var(--vermelho)}
.et.espera{color:var(--ambar);border-color:var(--ambar)}

/* ---------- LISTAS ---------- */
ul.pontos{padding-left:17px;margin:0 0 12px}
ul.pontos li{margin-bottom:6px}
.miudo{font-size:13.5px;color:var(--tinta2)}

/* ---------- SUMÁRIO DE EDIÇÕES ---------- */
.pilha{display:flex;flex-direction:column}
.item-arq{
  display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:baseline;
  border-bottom:1px solid var(--fio);padding:15px 0;
}
.item-arq .n{
  font-family:"Libre Caslon Display",Georgia,serif;font-size:34px;color:var(--vermelho);
  line-height:1;font-variant-numeric:tabular-nums;
}
.item-arq h3{margin:0 0 4px;font-size:20px;line-height:1.2}
.item-arq .meta{
  font-family:"Archivo",sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta3);margin-bottom:6px;
}
@media(max-width:560px){.item-arq{grid-template-columns:1fr}.item-arq .n{margin-bottom:6px}}

/* ---------- RODAPÉ ---------- */
footer.pe{
  border-top:3px double var(--fio-forte);margin-top:52px;padding-top:18px;
  font-size:13.5px;color:var(--tinta2);
}
footer.pe h4{
  font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vermelho);margin:0 0 8px;
}
.expediente{columns:2;column-gap:28px;font-size:13px}
@media(max-width:640px){.expediente{columns:1}}
.carimbo{
  text-align:center;font-family:"Archivo",sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta3);margin-top:26px;
  border-top:1px solid var(--fio);padding-top:14px;
}

/* ---------- IMPRESSÃO ---------- */
@media print{
  body{background:#fff}
  .folha{border:0;max-width:none;padding:0}
  nav.secoes{display:none}
  .colunas-3{columns:3}
  a{border:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:#555}
}