/* recto — blog layout (article + hub). Inherits tokens.css + components.css.
   Zero JS, zero box-shadow, hairline borders only. Light-only. Every value is a
   token from tokens.css — no hardcoded colors, spaces, or radii. */

/* ===== Article shell ===== */
.blog-article { padding: var(--s-7) 0 var(--s-9); }
.blog-prose { max-width: var(--w-prose); }

.blog-crumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.blog-crumb a { color: var(--ink-soft); }

.blog-byline { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.blog-byline__author { color: var(--ink-mid); font-weight: 500; }
.blog-byline time { font-variant-numeric: tabular-nums; }

.blog-dek { font-family: var(--font-display); font-size: 21px; line-height: 1.4; color: var(--ink-mid); margin: 0 0 var(--s-6); max-width: var(--w-prose); }

/* ===== TL;DR ===== */
.blog-tldr {
  border: 1px solid var(--rule); border-left: 3px solid var(--indigo-dye);
  background: var(--ground-raised); border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-6); max-width: var(--w-prose);
}
.blog-tldr__h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mid); margin: 0 0 var(--s-2); }
.blog-tldr ul { margin: 0; padding-left: var(--s-5); }
.blog-tldr li { margin: 0 0 var(--s-1); font-size: 15px; color: var(--ink-mid); }

/* ===== Table of contents ===== */
.blog-toc {
  border: 1px solid var(--rule); background: var(--ground-recessed);
  border-radius: var(--r-2); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-6); max-width: var(--w-prose);
}
.blog-toc__h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mid); margin: 0 0 var(--s-2); }
.blog-toc ol { margin: 0; padding-left: var(--s-5); }
.blog-toc li { margin: 0 0 var(--s-1); font-size: 14px; }
.blog-toc a { color: var(--ink-mid); text-decoration: none; }
.blog-toc a:hover { color: var(--ink-deep); text-decoration: underline; }

/* ===== Prose ===== */
.blog-prose > p { font-size: 17px; line-height: 1.7; margin: 0 0 var(--s-5); color: var(--ink-deep); }
.blog-prose h2 { font-size: 28px; margin: var(--s-8) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); scroll-margin-top: var(--s-5); }
.blog-prose h3 { font-size: 20px; margin: var(--s-6) 0 var(--s-2); }
.blog-prose ul, .blog-prose ol { margin: 0 0 var(--s-5); padding-left: var(--s-5); font-size: 17px; line-height: 1.7; }
.blog-prose li { margin: 0 0 var(--s-2); }
.blog-prose li > strong { color: var(--ink-deep); }
.blog-prose a { color: var(--indigo-dye); text-decoration-color: var(--rule-strong); }
.blog-prose a:hover { text-decoration-color: var(--indigo-dye); }
.blog-prose code { background: var(--ground-recessed); padding: 1px 5px; border-radius: var(--r-1); font-size: 0.85em; }
.blog-prose blockquote {
  margin: 0 0 var(--s-5); padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--rule-strong); color: var(--ink-mid);
  font-family: var(--font-display); font-size: 19px; font-style: italic; line-height: 1.5;
}
.blog-prose hr { margin: var(--s-6) 0; }

/* Pipe tables (comparison spokes) */
.blog-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-5); font-size: 15px; }
.blog-prose th, .blog-prose td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.blog-prose thead th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); border-bottom: 1px solid var(--rule-strong); }

/* ===== Sources ===== */
.blog-sources { max-width: var(--w-prose); margin-top: var(--s-7); }
.blog-sources h2 { font-size: 22px; margin: 0 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.blog-sources ol { padding-left: var(--s-5); font-size: 14px; color: var(--ink-soft); }
.blog-sources li { margin: 0 0 var(--s-2); }
.blog-sources a { color: var(--ink-mid); }

/* ===== Author card ===== */
.blog-author-card {
  max-width: var(--w-prose); margin-top: var(--s-7); padding: var(--s-5);
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--ground-recessed);
}
.blog-author-card__name { font-family: var(--font-display); font-size: 18px; color: var(--ink-deep); margin: 0 0 var(--s-2); }
.blog-author-card p { font-size: 15px; color: var(--ink-mid); margin: 0; line-height: 1.6; }

/* ===== Related ===== */
.blog-related { max-width: var(--w-prose); margin-top: var(--s-6); }
.blog-related__h { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); margin: 0 0 var(--s-2); }
.blog-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.blog-related a { color: var(--ink-mid); font-size: 15px; }

/* ===== Hub ===== */
.blog-hub { padding: var(--s-8) var(--s-5) var(--s-9); }
.blog-hub__head { max-width: var(--w-prose); margin: 0 0 var(--s-8); }
.blog-hub__head h1 { margin: var(--s-2) 0 var(--s-3); }
.blog-hub__lede { font-size: 18px; line-height: 1.6; color: var(--ink-mid); }
.blog-hub__group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.blog-card {
  text-decoration: none; color: inherit; display: block; padding: var(--s-5);
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--ground-raised);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.blog-card:hover { border-color: var(--rule-strong); background: var(--ground); }
.blog-card__kicker { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ochre-text); margin: 0 0 var(--s-2); }
.blog-card h2 { font-size: 20px; line-height: 1.25; margin: 0 0 var(--s-2); }
.blog-card__dek { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--s-3); line-height: 1.5; }
.blog-card__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin: 0; }

@media (max-width: 600px) {
  .blog-dek { font-size: 19px; }
  .blog-prose > p, .blog-prose ul, .blog-prose ol { font-size: 16px; }
}