/* The blog: listing + post pages. Loaded on top of styles.css, which supplies every colour, font,
   and type-scale token used below — this file adds no palette of its own.

   Why a file and not an inline <style> per page (the 404.html precedent docs/AGENTS.md used to cite):
   the blog is now four pages, and the post-reading rules are identical across three of them. Four
   copies of one rule is the drift doctrine 2 exists to prevent. brain.css is the closer precedent —
   a hand-maintained, separately cache-busted stylesheet for a section of the site — so follow that.

   Layout is relayed from openclaw.ai/blog: a container with hairlines down both edges, the newest
   post as a bordered card, older posts as rows with the date in a fixed left column. Their geometry,
   this site's tokens. */

/* ---------- shell ----------
   Flex column on <body> so the rail's side hairlines run from the header to the bottom of the
   viewport even on a short page, WITHOUT depending on --header-h: blog pages don't load main.js, so
   the ResizeObserver that keeps --header-h honest never runs here, and the CSS fallback value was
   measured against index's nav, not this one. flex:1 measures itself. */
.blog-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

.blog-rail {
  flex: 1 0 auto;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding-inline: var(--gutter);
  border-inline: 1px solid var(--rule);
}
/* The hairlines mark the column's edges, so they only mean anything once the viewport is WIDER than
   the column. At or below --wrap the rail fills the window and they land on x=0 and the right edge,
   reading as a border drawn on the browser instead. 1080px is --wrap's own value: media queries
   can't read the custom property, and the 1160px it takes at >=1600px viewports is comfortably
   inside the window anyway, so this one number covers both. */
@media (max-width: 1080px) { .blog-rail { border-inline: none; } }

/* ---------- listing: header ---------- */
.blog-head {
  padding: clamp(40px, 6vw, 56px) 0 26px;
  border-bottom: 1px solid var(--rule);
}
.blog-eyebrow {
  margin: 0;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent);
}
.blog-head h1 {
  max-width: 640px; margin: 14px 0;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;   /* two lines with a one-word second line otherwise, at most desktop widths */
}
.blog-lede { max-width: 620px; margin: 0; color: var(--ink-soft); line-height: 1.7; }

/* ---------- listing: posts ---------- */
.blog-posts { padding: 40px 0 clamp(48px, 8vw, 88px); }

/* Card and row are each a single wrapping <a>: one target, no nested links to tab through. */
.blog-featured, .blog-row { color: inherit; text-decoration: none; }
.blog-featured h2, .blog-row h2 { transition: color .16s ease; }
.blog-featured:hover h2, .blog-row:hover h2 { color: var(--accent); }

.blog-featured {
  display: block; margin-bottom: 40px; padding: 30px 28px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.blog-featured:hover { background: var(--paper-2); border-color: var(--rule-strong); }
/* The global :focus-visible ring forces a 3px radius, which would cut the corners of a 12px card. */
.blog-featured:focus-visible { border-radius: 12px; }
.blog-featured h2 {
  margin: 14px 0 10px;
  font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em;
}

.blog-list { border-top: 1px solid var(--rule); }
.blog-row {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: clamp(20px, 3vw, 32px);
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.blog-row h2 { margin: 0 0 10px; font-size: var(--t-xl); line-height: 1.3; }

/* Summaries: --t-base, the body size. The listing's hierarchy comes from the title sizes and the
   card border, not from shrinking the deck, and 56ch is the site's measured cap (see styles.css,
   ".prose p" — at Inter 17px a wider box renders past the 80-character WCAG 1.4.8 line). */
.blog-featured p, .blog-row p {
  max-width: 56ch; margin: 0;
  font-size: var(--t-base); line-height: 1.65; color: var(--ink-soft);
}

/* ---------- metadata line ----------
   --ink-soft, not --ink-faint: this is 0.75rem monospace on --card, the smallest text on the page,
   and --ink-faint does not hold 4.5:1 there. Contrast is measured by scripts/verify-site.mjs.

   Three-item metas (the card, a post header) carry no separators and lean on the gap: at 320px they
   wrap to three lines, and an interpunct then dangles at the end of a line. Only .blog-foot, which
   is two items and fits one line at every width, keeps its separator. */
.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft);
}
.blog-meta .blog-sep { color: var(--ink-faint); }
.blog-foot { gap: 8px; }
.blog-featured .blog-when { color: var(--accent); }
.blog-foot { margin-top: 12px; }
.blog-article .blog-when { color: var(--accent); }

.blog-row .blog-when {
  padding-top: 3px;
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-soft);
}

@media (max-width: 760px) {
  .blog-featured { padding: 22px 20px; }
  /* The 128px date column costs a third of the measure on a phone; stack it above the title. */
  .blog-row { display: block; }
  .blog-row .blog-when { display: block; padding-top: 0; margin-bottom: 8px; }
}

/* ---------- a post ----------
   The rail stays full width so the hairlines line up with the listing; the prose column inside it
   is held to the same 56ch the rest of the site uses. */
.blog-article { max-width: 56ch; padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 8vw, 88px); }
.blog-article h1 {
  margin: 14px 0 12px;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em;
}
.blog-article h2 { margin: 2rem 0 .6rem; font-size: var(--t-xl); line-height: 1.3; }
/* No `color` here. It would be --ink, which body already supplies, and `.blog-article p` outranks
   the single-class `.blog-eyebrow` / `.blog-meta` rules above: setting it repainted the accent
   eyebrow and the muted meta line as full body ink on post pages only. */
.blog-article p, .blog-article li { margin: 0 0 1.15rem; line-height: 1.7; }
.blog-article ul { padding-left: 1.2rem; }
.blog-article .blog-eyebrow { margin: 0; }
.blog-article .blog-meta { margin-bottom: 2rem; }

.blog-back {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none;
}
.blog-back:hover { color: var(--accent); }
