*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#030712; --bg:#fff; --cinza:#6b7280;
  --gut:34px; --nav:86px;
  --gap-col:37px; --gap-lin:74px;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
    "Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.625; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{font-size:18px; font-weight:500; line-height:1.35; margin:0}
p{margin:0 0 1.05em}
ul{list-style:none; margin:0; padding:0}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
.sr,.pular{position:absolute; left:-9999px}
.pular:focus{left:var(--gut); top:8px; z-index:99; background:#fff; padding:6px 10px}

/* ---------------------------------------------------------------- cabeçalho */
#cabecalho{position:sticky; top:0; z-index:50; background:var(--bg)}
#cabecalho .interno{
  height:var(--nav); padding:0 var(--gut);
  display:flex; align-items:center; justify-content:space-between;
}
.marca{font-size:18px; font-weight:500; letter-spacing:-.01em}
#nav ul{display:flex; gap:24px}
#nav a{font-size:18px; font-weight:500}
#nav li.ativo a{text-decoration:underline; text-underline-offset:3px}
#menu-btn{display:none; font-size:18px; font-weight:500}

/* -------------------------------------------------------------------- home */
body.home #conteudo{padding:0}
#capa{position:relative; height:calc(100svh - var(--nav)); overflow:hidden}
#capa .slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
#capa .slide.on{opacity:1}
#capa .slide a{display:block; height:100%; position:relative}
#capa img{width:100%; height:100%; object-fit:cover}
#capa .slide a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0)); pointer-events:none;
}
.slide-legenda{
  position:absolute; left:var(--gut); bottom:calc(var(--gut) + 6px); z-index:2;
  color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.55); max-width:min(560px,80vw);
}
.slide-legenda p{margin:0}
.slide-legenda .l1{font-size:18px; font-weight:500}
.slide-legenda .l2{font-size:18px; font-weight:500; margin-bottom:6px}
.slide-legenda .l3{font-size:15px}
#capa .seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  color:#fff; font-size:22px; padding:18px; text-shadow:0 1px 12px rgba(0,0,0,.5);
  opacity:0; transition:opacity .25s;
}
#capa:hover .seta,#capa .seta:focus-visible{opacity:1}
#capa .prev{left:6px} #capa .next{right:6px}

/* ------------------------------------------------------------------ páginas */
#conteudo{padding:17px var(--gut) 0; max-width:1600px; margin:0 auto}
.titulo-pagina{margin-bottom:44px}
.titulo-pagina .migalha{margin:0 0 2px; font-size:15px; color:var(--cinza)}
.titulo-pagina .sub{margin:0; font-size:15px; color:var(--cinza)}
.subnav ul{display:flex; flex-direction:column; margin-top:12px}
.subnav a{font-size:18px; font-weight:500}
.subnav li.ativo a{text-decoration:underline; text-underline-offset:3px}
.subtitulo{margin:0 0 20px; font-size:18px; font-weight:500}

/* listas de texto (séries, busca) — colunas de jornal, preenchem de cima para baixo */
.lista-texto{column-gap:var(--gap-col)}
.lista-texto.col-3{column-count:3}
.lista-texto.col-2{column-count:2}
.lista-texto li{margin-bottom:9px; break-inside:avoid; -webkit-column-break-inside:avoid}
.lista-texto h2{display:inline}
.lista-texto .resumo{display:block; font-size:15px; color:var(--cinza)}
.lista-texto a:hover h2{text-decoration:underline; text-underline-offset:3px}
.lista-texto a:hover{text-decoration:none}

/* grades de imagem */
.grade{display:grid; column-gap:var(--gap-col); row-gap:var(--gap-lin); margin:0 0 var(--gap-lin)}
.grade.col-2{grid-template-columns:repeat(2,1fr)}
.grade.col-3{grid-template-columns:repeat(3,1fr)}
.grade li{display:grid; gap:9px}
.grade .img{display:block; background:#f4f4f5}
.grade img{width:100%}
.grade .legenda{display:block; font-size:15px; color:var(--cinza)}
.grade a:hover{text-decoration:none}
.grade a:hover .legenda{text-decoration:underline; text-underline-offset:3px}
.grade.exposicoes h2{margin-top:0}
.grade.exposicoes .meta{display:block; font-size:15px; color:var(--cinza)}
.grade.exposicoes li{gap:9px}

/* prosa */
.prosa{max-width:640px; margin:0 0 var(--gap-lin); font-size:15px}
.prosa.recuo{margin-top:0}
.prosa h2{margin:0 0 .6em}
.prosa .epigrafe{font-size:18px; font-weight:500; margin-bottom:1.4em}
.prosa .destaque{margin-top:1.6em}
.paginacao{display:flex; justify-content:space-between; gap:20px;
  margin:0 0 var(--gap-lin); font-size:18px; font-weight:500}

/* contato */
.contato{display:grid; grid-template-columns:repeat(3,1fr); column-gap:var(--gap-col);
  row-gap:40px; margin-bottom:var(--gap-lin); max-width:1100px}
.contato h2{margin-bottom:.5em}
.mapa{margin-bottom:var(--gap-lin)}
.mapa iframe{width:100%; height:420px; border:0; filter:grayscale(1) contrast(1.05)}

/* busca */
.busca input{
  width:100%; max-width:640px; font:inherit; font-size:18px; font-weight:500;
  padding:10px 0; border:0; border-bottom:1px solid var(--ink); background:none;
  outline-offset:4px;
}
.busca #contagem{margin:14px 0 30px; color:var(--cinza)}

/* lightbox */
#lightbox{position:fixed; inset:0; z-index:100; background:rgba(255,255,255,.98);
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:60px var(--gut)}
#lightbox.on{display:flex}
#lightbox img{max-width:100%; max-height:calc(100vh - 160px); width:auto; object-fit:contain}
#lightbox .legenda{margin-top:14px; font-size:15px; color:var(--cinza); text-align:center}
#lightbox .fechar{position:absolute; top:24px; right:var(--gut); font-size:18px; font-weight:500}

/* rodapé */
#rodape{padding:30px 0 60px; margin-top:auto}
#rodape .interno{padding:0 var(--gut); display:grid; grid-template-columns:repeat(4,1fr);
  column-gap:var(--gap-col); row-gap:24px; max-width:1600px; margin:0 auto;
  border-top:1px solid #e5e7eb; padding-top:30px}
#rodape p{margin:0 0 .9em}
#rodape .creditos{font-size:13px; color:var(--cinza)}

/* --------------------------------------------------------------- responsivo */
@media (max-width:1000px){
  .lista-texto.col-3{column-count:2}
  .grade.col-3{grid-template-columns:repeat(2,1fr)}
  #rodape .interno{grid-template-columns:repeat(2,1fr)}
  .contato{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  :root{--gut:20px; --nav:64px; --gap-col:20px; --gap-lin:44px}
  #menu-btn{display:block}
  #nav{display:none; position:absolute; left:0; right:0; top:var(--nav);
    background:var(--bg); padding:8px var(--gut) 26px}
  #nav.aberto{display:block}
  #nav ul{flex-direction:column; gap:8px}
  .lista-texto.col-3,.lista-texto.col-2{column-count:1}
  .grade.col-2,.grade.col-3,.contato,#rodape .interno{grid-template-columns:1fr}
  .marca,#nav a,#menu-btn,h1,h2,h3,.subnav a,.paginacao{font-size:17px}
  .mapa iframe{height:300px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}