/* Blog: reading layout on top of the homepage's tokens.
   Nothing here redefines a colour — it borrows styles.css so a brand change
   lands in one place, and only adds what a page of prose needs. */

.post-wrap { max-width: 46rem; margin: 0 auto; padding: 0 22px; }

.post-head { padding: 56px 0 8px; }
.post-kicker {
  font: 600 .8rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cobble-d);
}
.post-title {
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: .5rem 0 .6rem;
}
.post-meta { color: #6f7480; font-size: .95rem; margin: 0 0 8px; }
.post-origin {
  font-size: .9rem;
  color: #6f7480;
  border-left: 3px solid var(--line);
  padding: .5rem 0 .5rem .9rem;
  margin: 1.25rem 0 0;
}

.post-body { font-size: 1.075rem; line-height: 1.72; padding-bottom: 40px; }
.post-body > p { margin: 0 0 1.15rem; }
/* The opening line is the whole pitch — let it carry.
   Prefixed because styles.css already defines .lede for the hero, capped at
   34ch, and an unprefixed name here silently inherited that width. */
.post-body > p.post-lede { font-size: 1.2rem; line-height: 1.6; color: var(--slate); }
.post-body h2 {
  font-size: 1.35rem;
  letter-spacing: -.01em;
  margin: 2.2rem 0 .7rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line);
}
.post-body a { color: var(--cobble-d); text-underline-offset: 2px; }
.post-body a:hover { color: var(--slate); }
.post-body ul { margin: 0 0 1.15rem; padding-left: 1.15rem; }
.post-body li { margin: .3rem 0; }
.post-body code {
  font: 500 .9em var(--mono, ui-monospace, monospace);
  background: var(--mortar-l);
  border: 1px solid var(--mortar-d);
  border-radius: 5px;
  padding: .1em .35em;
}

.post-links { display: grid; gap: .35rem; margin: 0 0 1.15rem; }

.post-cta {
  margin: 8px 0 64px;
  padding: 22px;
  background: var(--mortar-l);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.post-cta p { margin: 0 0 .9rem; }
.post-cta .btn { margin-right: .5rem; }

/* Index */
.post-list { list-style: none; margin: 24px 0 64px; padding: 0; }
.post-list li { border-top: 1px solid var(--line); padding: 20px 0; }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list a { text-decoration: none; color: var(--slate); }
.post-list a:hover .post-list-title { color: var(--cobble-d); }
.post-list-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; display: block; }
.post-list-date { font-size: .85rem; color: #6f7480; }
.post-list-blurb { margin: .35rem 0 0; color: var(--ink); }