/* ==========================================================================
   BLOG: post pages and the blog index
   Same tokens as everything else. No new colours, no new radius.
   ========================================================================== */

/* ==========================================================================
   POST
   ========================================================================== */
.post-head { padding-block: var(--s-7) var(--s-6); }
.post-head h1 { max-width: 24ch; margin-top: var(--s-4); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.post-meta__topic { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.post-meta__topic:hover { text-decoration: underline; text-underline-offset: 2px; }
.post-meta time { font-variant-numeric: tabular-nums; }

.post-banner {
  margin-block: var(--s-6) var(--s-8);
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  aspect-ratio: 16 / 7;
  background: var(--c-surface-2);
}
.post-banner img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Article body ------------------------------------------------------
   One readable column. The measure is the point: this is the only part of the
   site people read top to bottom. */
.post-body { max-width: var(--w-read); padding-bottom: var(--s-8); }

.post-body h2 {
  font-size: 1.42rem;
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  letter-spacing: var(--tracking-display);
}
.post-body h3 {
  font-size: 1.1rem;
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}
.post-body p {
  margin-bottom: var(--s-5);
  color: var(--c-ink-2);
  line-height: 1.7;
}
.post-body > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink);
}
.post-body ul, .post-body ol {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  color: var(--c-ink-2);
}
.post-body li { margin-bottom: var(--s-2); line-height: 1.65; }
.post-body li::marker { color: var(--c-ink-3); }
.post-body strong { color: var(--c-ink); font-weight: 600; }

/* Pull quote / aside carried over from the old posts. */
.post-body .callout,
.post-body .blog-callout {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border: var(--border);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-ink-2);
  line-height: 1.65;
}

.post-end {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ==========================================================================
   BLOG INDEX
   One featured post, then a list. Not a grid of identical cards.
   ========================================================================== */
.blog-lead {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-7);
  align-items: center;
  padding-bottom: var(--s-8);
  border-bottom: var(--border);
}
.blog-lead__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  aspect-ratio: 16 / 10;
  background: var(--c-surface-2);
}
.blog-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-lead__title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  margin-top: var(--s-3);
}
.blog-lead a { text-decoration: none; color: inherit; }
.blog-lead a:hover .blog-lead__title { color: var(--c-accent); }
.blog-lead__excerpt { margin-top: var(--s-4); color: var(--c-ink-2); line-height: 1.65; }

.post-rows { border-top: var(--border); }

.post-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-6);
  align-items: start;
  padding-block: var(--s-6);
  border-bottom: var(--border);
  text-decoration: none;
  color: inherit;
}
.post-row:hover .post-row__title { color: var(--c-accent); }
.post-row:hover .post-row__media { border-color: var(--c-accent); }

.post-row__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  aspect-ratio: 16 / 10;
  background: var(--c-surface-2);
  transition: border-color var(--dur) var(--ease);
}
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }

.post-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  margin-bottom: var(--s-2);
}
.post-row__topic { color: var(--c-accent); font-weight: 600; }
.post-row__title {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.28;
  transition: color var(--dur) var(--ease);
}
.post-row__excerpt {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- Topic filter ------------------------------------------------------- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.blog-filter a {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.blog-filter a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .blog-lead { grid-template-columns: 1fr; gap: var(--s-5); }
}

@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .post-row__media { max-width: 220px; }
  .post-end .btn { width: 100%; }
}

/* ==========================================================================
   TL;DR
   Sits above the article. Written in the language people actually search, so
   it does double duty: a reader decides in five seconds whether to keep going,
   and an answer engine gets the substance without parsing the whole page.
   ========================================================================== */
.tldr {
  margin-bottom: var(--s-8);
  padding: var(--s-6);
  background: var(--c-accent-tint);
  border-radius: var(--radius);
}
.tldr__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}
.tldr ul { margin: 0; padding-left: var(--s-5); }
.tldr li {
  margin-bottom: var(--s-3);
  color: var(--c-ink);
  line-height: 1.55;
  font-size: var(--fs-sm);
}
.tldr li:last-child { margin-bottom: 0; }
.tldr li::marker { color: var(--c-accent); }

/* ==========================================================================
   STEP BLOCKS
   The ported posts use .step-box markup. The old stylesheet that laid it out
   was never carried across, so the number and the text stacked instead of
   sitting side by side. Same treatment as the playbook steps.
   ========================================================================== */
.post-body .step-box {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--border);
}
.post-body .step-box + .step-box { border-top: var(--border); }
.post-body .step-box:last-of-type { border-bottom: var(--border); }

.post-body .step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius);
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.post-body .step-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--s-2);
}
.post-body .step-body p { margin-bottom: 0; }

/* ==========================================================================
   RELATED READING
   ========================================================================== */
.related-reading {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: var(--border);
}
.related-reading h2 {
  font-size: 1.1rem;
  margin: 0 0 var(--s-4);
}
.related-reading ul { list-style: none; margin: 0; padding: 0; }
.related-reading li + li { border-top: var(--border); }
.related-reading a {
  display: block;
  padding-block: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.related-reading a:hover .related-reading__title { color: var(--c-accent); }
.related-reading__topic { font-size: var(--fs-xs); color: var(--c-ink-3); }
.related-reading__title {
  margin-top: var(--s-1);
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.32;
  transition: color var(--dur) var(--ease);
}

@media (max-width: 640px) {
  .post-body .step-box { grid-template-columns: 1.8rem 1fr; gap: var(--s-3); }
  .post-body .step-n { width: 1.8rem; height: 1.8rem; font-size: var(--fs-xs); }
}

/* ==========================================================================
   TOPIC COLOUR

   A post is written about something, and the something has a colour. The
   header takes that topic's tint as a ground so the page announces its subject
   before the headline is read, and three small marks carry the colour down the
   article: the kicker, the drop cap, and a short rule on each h2.

   This is the whole mechanism. Colour arrives as a ground and as marks, never
   as a wash over body text, and never on anything clickable, which stays
   espresso everywhere on the site.
   ========================================================================== */
main[class^="t-"] .post-head {
  background: var(--topic-tint);
  margin-inline: var(--slab-inset);
  border-radius: var(--r-slab) var(--r-slab) 0 0;
  border-bottom: 2px solid var(--topic);
  padding-inline: var(--s-6);
  padding-bottom: var(--s-7);
}
main[class^="t-"] .post-meta__topic { color: var(--topic); }

/* The drop cap is the one piece of pure typography on the site that is allowed
   to be loud. Three lines deep, in the topic colour, on the standfirst. */
main[class^="t-"] .post-body > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.5em;
  line-height: 0.82;
  margin: 0.06em 0.09em 0 0;
  color: var(--topic);
}
main[class^="t-"] .post-body h2 {
  border-left: 3px solid var(--topic);
  padding-left: var(--s-4);
  margin-left: calc(-1 * var(--s-4) - 3px);
}

/* A banner that has not arrived yet should look like a reserved space in the
   topic's colour, not like a grey hole. */
main[class^="t-"] .post-banner { background: var(--topic-tint); border-color: var(--topic); }

/* Lists inside a post: the marker is the cheapest place on a page to put a
   colour, and it repeats often enough to register. */
main[class^="t-"] .post-body li::marker { color: var(--topic); }