:root{
  --brand:#2B2541;
}
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
     line-height:1.6; margin:0; color:#222;}
.container{max-width: 880px; margin: 0 auto; padding: 24px;}
header.site{padding:16px 24px;border-bottom:1px solid #eee;background:#fff;position:sticky;top:0}
header.site a{color:var(--brand);text-decoration:none;font-weight:700}
h1,h2,h3{line-height:1.25;color:#111}
.post-card{padding:20px;border:1px solid #eee;border-radius:12px;margin:16px 0;background:#fff}
.post-card a{color:var(--brand);text-decoration:none}
.meta{color:#666;font-size:.95rem;margin:.25rem 0 1rem}
article{position:relative;background:#fff;padding:24px;border-radius:16px;border:1px solid #eee}
article .watermark{
  position:absolute; inset:0; opacity:0.06; background:url('../assets/img/watermark.png') center/480px no-repeat; 
  pointer-events:none; mix-blend-mode:multiply; filter:grayscale(60%);
}
article p{font-size:1.05rem}
footer{margin:64px 0 24px; color:#777; text-align:center; font-size:.9rem}
blockquote{border-left:3px solid #ddd;padding-left:12px;color:#555}
code{background:#f6f6f6;padding:.15rem .35rem;border-radius:6px}
@media (max-width: 640px){ .container{padding:16px} article .watermark{background-size:62vw;} }

.cta{border:1px solid #eee;padding:16px;border-radius:12px;background:#fafafa;margin-top:24px}

/* Visual blog grid with photo cards */
.blog-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:12px}
.blog-grid .blog-card{grid-column:span 12; display:flex; align-items:flex-end; min-height:240px; border-radius:16px; background-size:cover; background-position:center; text-decoration:none; overflow:hidden; border:1px solid #e9e9e9; transition:transform .18s ease, box-shadow .18s ease}
.blog-grid .blog-card:hover{transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.18)}
.blog-grid .blog-card .overlay{padding:18px 18px 16px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45)}
.blog-grid .blog-card h2{margin:.25rem 0 .35rem; font-size:1.35rem; line-height:1.25}
.blog-grid .blog-card p{margin:0; opacity:.95}
.blog-grid .blog-card .meta{font-size:.85rem; opacity:.85; margin-bottom:4px}
@media (min-width: 760px){ .blog-grid .blog-card{grid-column:span 6; min-height:220px} }
@media (min-width: 1050px){ .blog-grid .blog-card{grid-column:span 4; min-height:240px} }

figure.hero{margin:0 0 16px 0; border-radius:14px; overflow:hidden; border:1px solid #eee}
figure.hero img{width:100%; height:360px; object-fit:cover; display:block}
@media (max-width: 720px){ figure.hero img{height:220px} }



/* readability tweak - FINAL */
.blog-grid .blog-card .overlay {
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.00) 0%,
        rgba(0,0,0,0.65) 80%
    );
    padding: 16px;
    border-radius: 16px;
}

/* Título branco */
.blog-grid .blog-card h2 {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,.65);
}

/* Data lilás */
.blog-grid .blog-card .meta {
    color: #6D3BB8;
    font-weight: 600;
    text-shadow: none;
}

/* robust image layer */
.blog-grid .blog-card{position:relative; overflow:hidden}
.blog-grid .blog-card .card-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.blog-grid .blog-card .overlay{position:relative}