/* Shared styles for individual blog post pages.
   Mirrors the tokens used inline in index.html / blog.html. */

:root{
  --ink: #17140F;
  --paper: #FBF7F2;
  --hair: rgba(23,20,15,0.14);
  --muted: #6B655B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Onest', sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 6vw;}
.wordmark{display:inline-flex; align-items:center; font-weight:500; font-size:1.35rem;}
.wordmark .boxed{border:1.5px solid currentColor; padding:0.18em 0.55em; margin-left:0.35em;}
.boxed{border:2px solid currentColor; padding:0 0.22em; display:inline-block;}
.line-h{height:5px; border-radius:3px; background:var(--ink);}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 6vw;
  background:rgba(251,247,242,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
  flex-wrap:wrap; gap:1rem;
}
.nav-links{display:flex; gap:1.6rem; align-items:center; font-size:0.76rem; font-weight:500; flex-wrap:wrap;}
.nav-links a{opacity:0.65; transition:opacity 0.2s ease; text-transform:uppercase; letter-spacing:0.02em;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.btn{
  font-weight:600; font-size:0.8rem;
  background:var(--ink); color:var(--paper);
  padding:0.75rem 1.4rem; border-radius:1px; white-space:nowrap;
  display:inline-block;
}
.btn-outline{
  font-weight:600; font-size:0.8rem;
  border:1.5px solid var(--ink); color:var(--ink);
  padding:0.7rem 1.3rem; border-radius:1px; white-space:nowrap;
  display:inline-block;
}

/* ---------- ARTICLE ---------- */
.article-wrap{max-width:760px; margin:0 auto; padding:0 6vw;}
.post-head{padding:5vw 0 0;}
.back-link{
  display:inline-block; font-size:0.8rem; font-weight:600;
  color:var(--muted); margin-bottom:2.2rem;
  text-transform:uppercase; letter-spacing:0.03em;
  transition:color 0.2s ease;
}
.back-link:hover{color:var(--ink);}
.post-head .line-h{width:88px; margin-bottom:1.6rem;}
.post-head h1{
  font-weight:900; font-size:clamp(2rem, 5vw, 3.2rem);
  line-height:1.08; letter-spacing:-0.015em; margin-bottom:1.4rem;
}
.post-meta{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted);
  padding-bottom:2.4rem; border-bottom:1px solid var(--hair);
}

.post-body{padding:3rem 0 4rem;}
.post-body p{
  font-size:1.06rem; font-weight:300; line-height:1.78;
  margin-bottom:1.5rem; text-align:justify; hyphens:auto;
}
.post-body p.lead{
  font-size:1.22rem; font-weight:400; line-height:1.62;
  color:var(--ink); text-align:left; hyphens:none; margin-bottom:2rem;
}
.post-body h2{
  font-size:1.5rem; font-weight:700; letter-spacing:-0.01em;
  margin:2.8rem 0 1.1rem; line-height:1.25;
}
.post-body blockquote{
  border-left:5px solid var(--ink); border-radius:3px;
  padding-left:1.6rem; margin:2.4rem 0;
}
.post-body blockquote p{
  font-size:1.24rem; font-weight:700; line-height:1.42;
  text-align:left; hyphens:none; margin-bottom:0;
}

/* ---------- CTA ---------- */
.post-cta{
  background:var(--ink); color:var(--paper);
  padding:2.8rem 2.4rem; border-radius:1px;
  margin:1rem 0 4rem;
}
.post-cta h2{font-size:1.35rem; font-weight:700; margin-bottom:0.7rem;}
.post-cta p{
  font-size:0.98rem; font-weight:300; line-height:1.7;
  color:#DAD3C8; margin-bottom:1.6rem; max-width:520px;
}
.post-cta .btn{background:var(--paper); color:var(--ink);}

/* ---------- RELATED ---------- */
.related{padding:0 0 6vw;}
.related h2{
  font-size:0.78rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.9rem; margin-bottom:2rem;
}
.related h2 .line-h{width:40px;}
.related-item{
  display:block; padding:1.8rem 0; border-top:1px solid var(--hair);
}
.related-item:last-child{border-bottom:1px solid var(--hair);}
.related-date{font-size:0.76rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted);}
.related-title{font-size:1.2rem; font-weight:700; margin:0.4rem 0 0.4rem; transition:opacity 0.2s ease;}
.related-item:hover .related-title{opacity:0.6;}
.related-excerpt{font-size:0.95rem; font-weight:300; line-height:1.65; color:var(--muted); text-align:justify; hyphens:auto;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink); color:var(--paper); padding:3.5rem 0 2.5rem;}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:2.8rem; flex-wrap:wrap; gap:1.2rem;
}
.footer-grid{
  display:grid; grid-template-columns:0.7fr 1.3fr 1.3fr; gap:4vw;
  margin-bottom:2.4rem;
}
.footer-grid p{font-size:0.98rem; font-weight:300; line-height:1.65; color:#DAD3C8;}
.footer-grid a{border-bottom:1px solid rgba(240,233,221,0.35);}
.footer-note{font-size:0.82rem; color:var(--muted); margin-top:0.5rem;}
.contato-label{
  font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  color:#B08D57; margin-bottom:0.5rem;
}
.footer-divider{height:1px; background:rgba(240,233,221,0.16); margin-bottom:2.2rem;}
.crisis-note{
  font-size:0.82rem; font-weight:400; color:var(--muted);
  line-height:1.6; max-width:700px; margin-bottom:1.6rem;
}
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:0.78rem; color:var(--muted);
}
.foot-bottom a{opacity:0.8;}
.foot-bottom a:hover{opacity:1;}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-top{flex-direction:column; align-items:flex-start;}
  .nav-links{display:none;}
}