/* ───────────────────────────────────────────────────────────
   Cyboflow site — Blog
   Sits on tokens.css + site.css + forest.css. Two page shapes
   share this file: the index (/blog) and a post (/blog/<slug>).

   Colour lives entirely in forest.css's --hp-* palette; this
   file keeps only --cf-font, the size ramp and the motion
   tokens from tokens.css.

   Deliberately no left rail. Docs is a reference you navigate
   between pages of, so it earns one; a post is read top to
   bottom, and a rail listing every other post beside it is a
   reason to leave. The only navigation a post offers is the
   pager at the end, after the reading is done.
   ─────────────────────────────────────────────────────────── */

.blog {
  /* Local alias so the prose rules read the same as docs.css's — named once
     here because every rule under Prose consumes it. --hp-read rather than
     --hp-sage: see the note on the token in forest.css. */
  --post-text: var(--hp-read);

  /* The reading face, and the one place the blog departs from the site's
     Archivo/JetBrains pair. Every other page is scanned — a nav, a feature
     grid, a changelog entry — and a grotesque is right for scanning. A post
     is read straight through for ten minutes, which is what serifs are for.

     Source Serif 4 specifically: stroke contrast is low, so it holds its
     weight on the dark ground instead of thinning out the way a high-contrast
     face (Playfair, Didot) does when light text sits on dark. It carries a
     true italic, so `*emphasis*` isn't a synthesised slant. Headings, meta,
     tags and code all stay in the site faces — the serif is for prose only,
     so the page still reads as Cyboflow. */
  --post-serif: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif;
}

/* Nothing else on the site needs a sticky footer — every other page is
   taller than the viewport on its own. An index holding two or three posts
   is not, and a footer band floating halfway up with ground below it reads
   as a broken page rather than a short one. Scoped to .blog so the pages
   that don't have the problem don't get the layout change. */
body.blog { display: flex; flex-direction: column; min-height: 100dvh; }
body.blog > main { flex: 1 0 auto; }

/* ─── Shared column ───────────────────────────────────────────
   680px, not the docs column's 720px: docs prose carries fact
   tables and step lists that want the extra room, a post is
   running prose and reads better a little narrower. */
.blog-frame {
  width: min(680px, 100% - 56px);
  margin-inline: auto;
  padding-block: 56px 100px;
}

/* ─── Index hero ──────────────────────────────────────────── */
.blog-hero { padding-bottom: 30px; border-bottom: 1px solid var(--hp-rule-soft); }
.blog-title {
  font-size: 38px; line-height: 1.05; font-weight: 700;
  letter-spacing: -0.025em; margin: 0; color: var(--hp-sand);
}
/* The one word per page this design spends gold on outside focus
   rings — same rule as .docs-title .accent. */
.blog-title .accent { color: var(--hp-gold); }
.blog-lede {
  font-size: 14px; line-height: 1.65; color: var(--post-text);
  margin: 16px 0 0; max-width: 560px;
}

/* ─── Index list ──────────────────────────────────────────────
   Rows separated by a hairline rather than boxed cards. A stack
   of filled panels turns the index into a grid of objects; the
   rule keeps it a list of writing, and lets the title carry the
   weight instead of the container. */
.blog-list { margin-top: 8px; }
.post-card {
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--hp-rule-soft);
}
.post-card:last-child { border-bottom: none; }
.post-card-meta {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--cf-font);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-sage-dim);
}
.post-card-dot { width: 2px; height: 2px; background: var(--hp-sage-dim); opacity: .6; }
.post-card-t { margin: 11px 0 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
/* The whole title is the target. It stays sand rather than gold — a page
   of gold headlines would spend the accent everywhere and leave the hero's
   one accented word with nothing to stand against. */
.post-card-a { color: var(--hp-sand); text-decoration: none; transition: color var(--hp-ease); }
.post-card-a:hover { color: var(--hp-gold); }
.post-card-a:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; }
/* The index summary is the same prose as the post's lede, so it's set in
   the same face — the card is a preview of the reading, not a UI label. */
.post-card-s {
  font-family: var(--post-serif);
  margin: 11px 0 0; font-size: 17px; line-height: 1.55; color: var(--post-text);
  max-width: 62ch;
}
.post-card-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.post-tag {
  font-family: var(--cf-font);
  font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--hp-sage-dim);
  border: 1px solid var(--hp-rule); padding: 3px 8px;
}

/* Shown only when every post is a draft (or there are none yet). */
.blog-empty {
  margin-top: 40px; padding: 26px;
  border: 1px solid var(--hp-rule); background: var(--hp-card);
  font-size: 13px; line-height: 1.65; color: var(--post-text);
}

/* ─── Post hero ───────────────────────────────────────────── */
.post-hero { padding-bottom: 26px; border-bottom: 1px solid var(--hp-rule-soft); }
.post-back {
  display: inline-block; margin-bottom: 22px;
  font-family: var(--cf-font);
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-sage-dim); text-decoration: none;
  transition: color var(--hp-ease);
}
.post-back:hover { color: var(--hp-sand); }
.post-back:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; color: var(--hp-sand); }
.post-title {
  font-size: 34px; line-height: 1.12; font-weight: 700;
  letter-spacing: -0.025em; margin: 0; color: var(--hp-sand);
}
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px;
  font-family: var(--cf-font);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hp-sage-dim);
}
.post-meta .post-card-dot { flex: none; }
/* The lede is the first thing read, so it takes the reading face too, one
   step above the body to sit between the title and the prose. */
.post-lede {
  font-family: var(--post-serif);
  font-size: 21px; line-height: 1.55; color: var(--post-text);
  margin: 18px 0 0;
}

/* ─── Prose ───────────────────────────────────────────────────
   16.5px against docs' 13px, and the jump is the serif's doing, not a
   separate opinion about size. A grotesque at 13.5px is legible because
   its letterforms are simple; a serif at 13.5px is not, because the
   serifs, the bracket joins and the stroke modulation are the parts that
   make it readable and they're the first things to disappear when the
   text is small. Switching face without switching size would have made
   this page harder to read, not easier.

   The measure moves with it. 680px of 16.5px serif is ~88 characters a
   line, past the point where the eye reliably finds the next line's start;
   66ch holds it near 70. It's set in ch rather than px so the two stay
   locked if the size is ever touched again. */
.post-prose {
  font-family: var(--post-serif);
  font-size: 19px; line-height: 1.6; color: var(--post-text);
}
.post-prose > p { margin: 22px 0; }
.post-prose strong { font-weight: 600; color: var(--hp-sand); }
.post-prose em { color: inherit; }

/* Sand text with a gold underline — the idiom .hp-term and .docs-prose a
   both use, so a link reads as notable without painting running prose gold. */
.post-link {
  color: var(--hp-sand); text-decoration: none;
  border-bottom: 1px solid rgba(217, 164, 65, .4);
  transition: border-color var(--hp-ease);
}
.post-link:hover { border-bottom-color: var(--hp-gold); }
.post-link:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }

.post-h2 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 25px; font-weight: 700; letter-spacing: -0.015em; color: var(--hp-sand);
  margin: 46px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--hp-rule-soft);
  scroll-margin-top: calc(var(--hp-head-h) + 20px);
}
/* No numbered gold marker here — docs sections are a numbered sequence you
   navigate by; a post's headings are just structure. */
.post-h3 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.005em; color: var(--hp-sand);
  margin: 30px 0 10px;
  scroll-margin-top: calc(var(--hp-head-h) + 20px);
}

.post-list { margin: 20px 0; padding-left: 24px; }
.post-list li { margin: 10px 0; }
.post-list li::marker { color: var(--hp-sage-dim); }

.post-quote {
  margin: 22px 0; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--hp-rule);
  font-family: var(--post-serif);
  font-size: 19px; line-height: 1.6; font-style: italic;
  color: var(--hp-sage-mut);
}

.post-rule { margin: 38px 0; border: 0; border-top: 1px solid var(--hp-rule-soft); }

/* inline code chip — mirrors .docs-code / .cl-code */
.post-code {
  font-family: var(--cf-font);
  background: var(--hp-card);
  border: 1px solid var(--hp-rule-soft);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: .82em;
  color: var(--hp-sand);
}

/* ─── Code block — same mini terminal as docs ─────────────────
   Sunk below the ground rather than lifted: --hp-well is darker
   than the page, with the label bar one step above it on
   --hp-bar. See the note in docs.css for why. */
.post-term {
  margin: 22px 0;
  border: 1px solid var(--hp-rule);
  background: var(--hp-well);
  overflow: hidden;
}
.post-term-bar {
  height: 28px; display: flex; align-items: center; padding: 0 12px;
  background: var(--hp-bar);
  border-bottom: 1px solid var(--hp-rule);
  font-family: var(--cf-font);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-sage-dim); font-weight: 700;
}
.post-term pre {
  margin: 0; padding: 14px 16px;
  font-family: var(--cf-font); font-size: 12px; line-height: 1.7;
  color: var(--hp-sand); overflow-x: auto;
}
.post-term code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* ─── Figures ─────────────────────────────────────────────────
   Full-measure, with the caption hung underneath. Images break
   the column's left edge on wide viewports so a screenshot has
   room to be legible without the prose losing its measure. */
.post-figure { margin: 30px 0; }
.post-img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hp-rule); background: var(--hp-well);
}
.post-img--inline {
  display: inline-block; width: auto; max-width: 100%;
  vertical-align: middle; border: 0; background: none;
}
.post-cap {
  margin-top: 10px;
  font-family: var(--cf-font);
  font-size: 10.5px; line-height: 1.6; color: var(--hp-sage-dim);
}
@media (min-width: 1000px) {
  .post-figure { width: calc(100% + 120px); margin-inline: -60px; }
  .post-figure .post-cap { padding-inline: 60px; }
}

/* ─── Footer of a post ────────────────────────────────────── */
.post-foot {
  margin-top: 54px; padding-top: 26px;
  border-top: 1px solid var(--hp-rule-soft);
}
.post-foot-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.post-pager-a {
  display: block; text-decoration: none;
  border: 1px solid var(--hp-rule); background: var(--hp-card);
  padding: 14px 16px; min-width: 0;
  transition: background var(--hp-ease), border-color var(--hp-ease);
}
.post-pager-a:hover { background: var(--hp-card-2); }
.post-pager-a:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 3px; }
.post-pager-a--next { text-align: right; grid-column: 2; }
.post-pager-k {
  display: block; margin-bottom: 6px;
  font-family: var(--cf-font);
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hp-sage-dim);
}
.post-pager-t { font-size: 12.5px; font-weight: 700; color: var(--hp-sand); line-height: 1.4; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .blog-frame { width: min(680px, 100% - 40px); padding-top: 40px; }
  .blog-title { font-size: 30px; }
  .post-title { font-size: 27px; }
}
@media (max-width: 520px) {
  .post-card-t { font-size: 18px; }
  .post-pager { grid-template-columns: 1fr; }
  .post-pager-a--next { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card-a, .post-link, .post-back, .post-pager-a { transition: none; }
}