/* ============================================================
   blog.css — índice de blog (bitácora) y artículo de lectura
   ============================================================ */

/* —— índice: bitácora de obra —— */
.log { border-top: 1px solid var(--line-strong); }
.log a {
  display: grid; grid-template-columns: 1fr; gap: .4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background .2s var(--ease-out);
}
.log a:hover { background: rgba(252, 251, 245, .8); }
.log .meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-ink); }
.log .t { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); letter-spacing: -.022em; line-height: 1.08; }
.log .x { color: var(--ink-65); max-width: 62ch; font-size: .95rem; }
@media (min-width: 900px) {
  .log a { grid-template-columns: 150px 1fr; column-gap: 2rem; row-gap: .2rem; }
  .log .meta { grid-row: span 3; align-self: start; }
}

/* —— artículo —— */
.art { max-width: 68ch; margin-inline: auto; padding-top: var(--sp-3); padding-bottom: var(--sp-4); }
.art .meta { margin-bottom: .9rem; }
.art h1 { font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.7rem); }
.art .standfirst { margin-top: 1rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.35; color: var(--ink-80); }
.art .rule { width: 6.5rem; height: 1px; background: var(--green); margin: 1.5rem 0 0; }
.art-body { margin-top: 2.4rem; display: grid; gap: 1.25rem; }
.art-body h2 { font-size: var(--step-2); margin-top: 1.1rem; }
.art-body p { color: var(--ink-80); }
.art-body ul { padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--ink-80); }
.art-body b, .art-body strong { color: var(--ink); }
.art-foot { margin-top: var(--sp-4); padding-top: 1.2rem; border-top: 1px solid var(--line-strong); display: grid; gap: .8rem; }