/* ============================================================
   ORANO · Blog (index listing + post byline)
   Post body reuses .legal / .legal-body from legal.css.
   ============================================================ */

.blog-index {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(120px, 16vh, 160px) var(--gutter) var(--s-8);
}
.blog-index-header { margin-bottom: var(--s-6); }
.blog-index-header .kicker { margin-bottom: 14px; }
.blog-index-header h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.08;
  margin-bottom: 14px;
}
.blog-index-header .lead { max-width: 52ch; }

.blog-list { display: flex; flex-direction: column; }
.blog-item {
  display: block;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
}
.blog-item:last-child { padding-bottom: 0; }
.blog-item-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.blog-item h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  margin-bottom: 10px;
  transition: color var(--d-fast) var(--ease);
}
.blog-item:hover h2 { color: var(--platinum); }
.blog-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin-bottom: 14px;
}
.blog-item .blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.blog-item .blog-read-more svg {
  width: 14px; height: 14px;
  transition: transform var(--d-fast) var(--ease);
}
.blog-item:hover .blog-read-more svg { transform: translateX(3px); }

.blog-empty {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 14px;
}

/* Post header — byline row (date · read time), used inside .legal-header */
.blog-byline {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--text-3);
}

/* Simple closing CTA block at the end of a post body */
.blog-post-cta {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.blog-post-cta p { color: var(--text-2); font-size: 15px; margin: 0; flex: 1 1 auto; min-width: 200px; }