/* =========================================
   JORNAL DA MEMÓRIA PRO v1.0
   ESTILO JORNAL ANTIGO / ANOS 70
========================================= */

body{
margin:0;
font-family: Georgia, "Times New Roman", serif;
background:#e6dcc8;
color:#1a1a1a;
}

/* =========================
   TOPO DO JORNAL
========================= */
.topo{
text-align:center;
padding:20px 10px;
background:#f4ecd8;
border-bottom:4px double #000;
box-shadow: inset 0 0 15px rgba(0,0,0,0.05);
}

.topo h1{
margin:0;
font-size:clamp(32px,5vw,70px);
letter-spacing:4px;
text-transform:uppercase;
}

.subinfo{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
opacity:0.7;
margin-top:6px;
}

/* =========================
   NAVEGAÇÃO
========================= */
.nav{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:10px;
flex-wrap:wrap;
}

.nav button{
padding:8px 14px;
border:1px solid #000;
background:#fff;
cursor:pointer;
font-family:Georgia,serif;
transition:0.2s;
}

.nav button:hover{
background:#000;
color:#fff;
}

#info{
font-weight:bold;
}

/* =========================
   JORNAL ABERTO
========================= */
.jornal{
max-width:1100px;
margin:30px auto;
display:flex;
gap:0;
background:#f7f0de;

/* leve textura de papel */
background-image:
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
background-size:20px 20px;
}

/* =========================
   PÁGINAS
========================= */
.pagina{
flex:1;
padding:25px;
min-height:70vh;
overflow:hidden;
}

.pagina.esquerda{
border-right:2px solid #000;
box-shadow: inset -10px 0 20px rgba(0,0,0,0.05);
}

.pagina.direita{
box-shadow: inset 10px 0 20px rgba(0,0,0,0.05);
}

/* =========================
   MATÉRIAS
========================= */
.post{
margin-bottom:25px;
padding-bottom:15px;
border-bottom:1px solid rgba(0,0,0,0.2);
}

.post img{
width:100%;
height:160px;
object-fit:cover;
margin-bottom:10px;
border:1px solid #000;

/* efeito impresso antigo */
filter: grayscale(20%) contrast(1.1) sepia(0.2);
}

.post h3{
font-size:18px;
margin:8px 0;
text-transform:uppercase;
letter-spacing:1px;
}

.post h3 a{
color:#111;
text-decoration:none;
}

.post h3 a:hover{
text-decoration:underline;
}

.post p{
font-size:14px;
line-height:1.6;
text-align:justify;
}

/* link de continuidade */
.lerMais{
margin-top:8px;
font-size:13px;
text-align:right;
}

.lerMais a{
color:#444;
text-decoration:none;
font-style:italic;
}

.lerMais a:hover{
text-decoration:underline;
}

/* =========================
   EFEITO VISUAL LEVE
========================= */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:radial-gradient(circle, rgba(0,0,0,0.05), transparent 70%);
opacity:0.3;
}

/* =========================
   RESPONSIVO
========================= */
@media(max-width:900px){
.jornal{
flex-direction:column;
}

.pagina{
min-height:auto;
}
}