/* ==========================================================================
   blog.css - the reading layout for a post. One file, every post.

   Same argument as `site.css`: three posts today and more every week, so post
   typography copied into each file's <style> would be N places for a measure or
   a heading size to drift. It declares NO colours of its own beyond the tokens
   `legal.css` already sets, so it cannot become another copy of the palette.

   🔑 THE MEASURE IS THE ONE THING THAT MATTERS HERE. These are 600-word essays
   read on a phone, not marketing sections - so the column is capped in `ch`
   (characters) rather than pixels, which keeps the line length right whatever
   the font size the reader has chosen.
   ========================================================================== */

.post{ max-width:68ch }

.post-date{
  display:block; font-size:.82rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--orange-ink); margin-bottom:8px;
}

.post h1{ max-width:22ch }

.post-lead{ font-size:1.14rem; line-height:1.62; max-width:62ch }

.post h2{
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:800; font-size:1.42rem; line-height:1.22;
  margin:40px 0 12px; max-width:34ch;
}

.post p{ line-height:1.68; max-width:62ch }
.post ul,.post ol{ line-height:1.68; max-width:60ch; padding-left:1.15em }
.post li{ margin:7px 0 }

/* A pulled-out point. Used sparingly - if every third paragraph is pulled out,
   nothing is. */
.post-key{
  margin:26px 0; padding:16px 20px; border-left:3px solid var(--orange);
  background:var(--gray); border-radius:0 var(--r) var(--r) 0;
}
.post-key p{ margin:0 }

/* Inline code and short snippets. Wrapped rather than scrolled at phone width:
   these are one-liners, and a horizontal scrollbar on a 40-character line is
   worse than a wrap. A real code BLOCK would need its own overflow container. */
.post code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; background:var(--gray); padding:2px 5px; border-radius:5px;
  overflow-wrap:anywhere;
}

.post-foot{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.post-foot a{ font-weight:700 }

@media print{
  /* The reader printed the essay. The "read more" furniture is not part of it. */
  .post-foot{ display:none !important }
  .post-key{ border-left:2px solid #000; background:transparent !important }
}