/* === Te Lo Digo Claro — Blog === */
/* Extends /css/style.css */

.blog-header{padding:4rem 0 2rem;border-bottom:1px solid var(--rule)}
.blog-header h1{font-family:var(--grotesque);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;margin-bottom:.5rem}
.blog-header p{font-size:.9rem;color:var(--ink-soft);max-width:500px}

/* Listing table */
.blog-list{margin:0;padding:0;list-style:none}
.blog-entry{border-bottom:1px solid var(--rule-light)}
.blog-entry a{display:grid;grid-template-columns:1fr;gap:.25rem;padding:1.75rem 0;text-decoration:none;color:inherit;transition:background .15s}
.blog-entry a:hover{background:var(--paper-warm);margin:0 -1rem;padding-left:1rem;padding-right:1rem}
.blog-entry-date{font-family:var(--grotesque);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.blog-entry-title{font-family:var(--grotesque);font-size:clamp(1rem,2.5vw,1.2rem);font-weight:700;line-height:1.3;color:var(--ink);transition:color .15s}
.blog-entry a:hover .blog-entry-title{color:var(--red)}
.blog-entry-excerpt{font-size:.9rem;color:var(--ink-soft);line-height:1.6;max-width:600px}
@media(min-width:640px){
  .blog-entry a{grid-template-columns:120px 1fr;gap:0 2rem;align-items:baseline}
  .blog-entry-excerpt{grid-column:2}
}

/* Article */
.article{padding:4rem 0 6rem}
.article-header{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--rule)}
.article-date{font-family:var(--grotesque);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:1rem;display:block}
.article-header h1{font-family:var(--grotesque);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:1rem}
.article-header .article-lead{font-family:var(--serif);font-size:clamp(1.05rem,2.5vw,1.2rem);font-style:italic;color:var(--ink-mid);line-height:1.55;max-width:560px}

.article-body p{font-size:1rem;color:var(--ink-mid);line-height:1.85;margin-bottom:1.4rem}
.article-body h2{font-size:clamp(1rem,2.5vw,1.15rem);margin-top:3rem;margin-bottom:1rem}
.article-body blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.5vw,1.25rem);color:var(--ink);line-height:1.5;margin:2.5rem 0;padding-left:1.25rem;border-left:3px solid var(--red)}
.article-body .ref{font-size:.8rem;color:var(--ink-soft);line-height:1.6;margin-bottom:.5rem}

.article-footer{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.article-footer p{font-size:.9rem;color:var(--ink-soft)}
.article-cta{margin-top:2rem}

.article-nav{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule-light);display:flex;gap:1.5rem;flex-wrap:wrap}