/* Blog: index and post pages.
   Loaded after ../assets/paper/paper.css, so every colour, font and figure style
   comes from the same tokens as the research pages and follows light and dark mode. */

/* ---------- Index ---------- */
.blog-hero { padding-block: clamp(36px, 6vw, 60px) 4px; max-width: 820px; }
.blog-hero h1.title { max-width: 18ch; }
.blog-hero .subtitle { max-width: 46ch; }
.blog-note { font: 400 14px/1.55 var(--font-sans); color: var(--muted); margin: 14px 0 0; max-width: 60ch; }

.blog-index { max-width: 820px; padding-block: 18px 64px; }
.month { padding-top: 34px; }
.month h2 {
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1.5px solid var(--rule-strong);
}
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list .post-item { padding: 16px 0 17px; margin: 0; border-bottom: 1px solid var(--rule); max-width: none; }
.post-item .t {
  font: 600 19px/1.35 var(--font-sans); letter-spacing: -0.006em; color: var(--ink);
  text-decoration: none; text-wrap: balance;
}
.post-item .t:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.post-item .d { margin: 6px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ---------- Post ---------- */
.post-hero { padding-block: clamp(34px, 5.5vw, 58px) 6px; max-width: 820px; }
.post-hero h1.title { max-width: 26ch; }
.post-hero .subtitle { max-width: 52ch; }
.post-hero .eyebrow a { color: inherit; text-decoration: none; }
.post-hero .eyebrow a:hover { color: var(--ink); }

.post { max-width: 820px; padding-block: 26px 40px; }
.post > p:first-child { margin-top: 0; }
.post h2 { margin-top: 38px; }
.post code { background: var(--surface); padding: 1px 5px; border-radius: 3px; }
.post .panel img { display: block; width: 100%; height: auto; }
/* The paper diagrams in images/papers/ carry their own white ground, so they get a hairline frame instead of a panel. */
.post img.diagram { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; }
.post .fig-link { display: block; }
.post table.bt { margin-bottom: 4px; }
.post .table-fig { max-width: 760px; }
.post .table-fig .tbl-wrap { overflow-x: auto; }
.post .aside { font: 400 15.5px/1.55 var(--font-sans); color: var(--ink-2); }

/* Flow diagrams come in two drawings: a wide one, and a stacked one for phones,
   so nothing important sits behind a horizontal scroll. */
.post svg.dg-tall { display: none; }
.post .panel.scroll > svg.dg-tall { min-width: 0; }
@media (max-width: 640px) {
  .post svg.dg-wide { display: none; }
  .post svg.dg-tall { display: block; max-width: 420px; margin: 0 auto; }
}

.post-nav {
  max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  border-top: 1.5px solid var(--rule-strong); padding-block: 18px 56px; font-family: var(--font-sans);
}
.post-nav a { text-decoration: none; color: var(--ink); display: block; }
.post-nav a:hover .pn-t { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.post-nav .pn-l { display: block; font: 500 11.5px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.post-nav .pn-t { font: 600 16px/1.35 var(--font-sans); }
.post-nav .next { text-align: right; }
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
}