.blog-index { padding: 96px 0; }
.blog-index h1 { font-size: clamp(36px, 6vw, 64px); margin: 16px 0 48px; }
.post-list { display: flex; flex-direction: column; }
.post-item { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 28px 0; border-top: 2px solid var(--rs-ink); align-items: baseline; transition: opacity 160ms var(--rs-ease); }
.post-item:hover { opacity: 0.6; }
.post-item-date { font-family: monospace; font-size: 13px; color: var(--rs-stone); }
.post-item-title { font-size: 28px; }
.post-item-excerpt { grid-column: 2; font-size: 15px; color: var(--rs-stone); margin-top: 4px; }
.post-empty { color: var(--rs-stone); font-size: 16px; }

.post-article { padding: 96px 0; max-width: 760px; }
.post-title { font-size: clamp(32px, 6vw, 56px); margin: 16px 0 48px; }
.post-body p { font-size: 18px; line-height: 1.65; color: var(--rs-graphite); margin: 0 0 24px; }
.post-body h2 { font-size: 28px; margin: 48px 0 20px; }
.post-body h3 { font-size: 20px; margin: 32px 0 14px; }
.post-body a { color: var(--rs-coral); text-decoration: underline; }
.post-back { display: inline-block; margin-top: 48px; padding: 12px 24px; border: 2px solid var(--rs-ink); font-weight: 600; font-size: 14px; transition: background 160ms var(--rs-ease), color 160ms var(--rs-ease); }
.post-back:hover { background: var(--rs-ink); color: var(--rs-bone); }

/* topbar/header ajustado pro logo real (bate com Header.tsx) */
.topbar-inner { padding-top: 24px; padding-bottom: 24px; }
.brand-logo { height: 40px; }

/* footer real (bate com Footer.tsx: logo + nav + linha de baixo) */
.footer-inner-real { display: flex; flex-direction: column; gap: 40px; padding: 48px 0; }
@media (min-width: 768px) {
  .footer-inner-real { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
}
.footer-logo { height: 48px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; font-family: var(--rs-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 18px; }
.footer-nav a:hover { color: var(--rs-coral); }
.footer-bottom { grid-column: 1 / -1; margin-top: 24px; padding-top: 24px; border-top: 2px solid rgba(51,51,51,0.2); display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-stone); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }