/* kept. field notes.
   Loaded after site.css and legal.css, and only on blog pages. The posts are
   lg-doc documents and inherit that reading surface wholesale; everything here
   is either prose spacing the legal pages get from <section> wrappers (which
   rendered markdown does not have), or the index and the two asides that only
   the blog needs. Every value is an existing brand token. */

/* ---------------- post body ----------------
   legal.css sizes .lg-doc p / h2 / h3 already. It spaces them through
   `.lg-doc section`, which markdown output has no equivalent of, so the
   rhythm is restated here against .bl-body instead. */
.bl-body { padding-top: 8px; }
.bl-body > p { margin: 18px 0 0; }
.bl-body > ul, .bl-body > ol { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.bl-body h2 { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border); }
.bl-body h3 { margin-top: 30px; }
.bl-body h2 + p, .bl-body h3 + p { margin-top: 14px; }

.bl-body strong { font-weight: 600; color: var(--text); }
.bl-body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }

/* a pulled quote reuses the inline-note treatment the legal pages already use */
.bl-body blockquote {
  margin: 22px 0 0; padding: 14px 20px;
  border-left: 3px solid var(--ember); background: var(--hover);
  border-radius: 0 8px 8px 0;
}
.bl-body blockquote p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text); }
.bl-body blockquote p + p { margin-top: 10px; }

/* markdown tables get the lg-table look without needing the wrapper markup */
.bl-body table {
  width: 100%; margin-top: 20px; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.bl-body th, .bl-body td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  font-size: 14px; line-height: 1.6; border-bottom: 1px solid var(--border);
}
.bl-body th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone); border-bottom: 1px solid var(--border-2);
}
.bl-body tr:last-child td { border-bottom: none; }

.bl-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em; padding: 2px 6px; border-radius: 4px;
  background: var(--hover); color: var(--text);
}
.bl-body pre {
  margin-top: 18px; padding: 18px 20px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--hover);
}
.bl-body pre code { padding: 0; background: none; font-size: 13.5px; line-height: 1.65; }

/* Everything below competes with a legal.css rule of the form `.lg-doc <el>`
   (`.lg-doc a` underlines prose links, `.lg-doc h2` sizes headings,
   `.lg-doc section` pads sections). Those are the right defaults for a legal
   document and the wrong ones for a link card or a month rule, and a bare
   class cannot outrank them, so the blog's own components are scoped under
   .lg-doc to win on specificity rather than on file order. */

/* ---------------- post header ----------------
   legal.css stacks .lg-meta because a legal document's meta is a list of
   separate facts. A byline is one line: who, when, how long. */
.lg-meta.bl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.bl-meta-sep { color: var(--border-2); }

/* ---------------- contents ----------------
   Narrow: a compact list under the hero, opened by a hairline rather than
   boxed, because the boxed version cost most of a screen before the reader
   reached a sentence of the article. Wide: the same list, moved into the left
   gutter and made sticky, so it costs the article nothing at all. */
.bl-toc { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); }
.bl-toc-h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
}
.bl-toc ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.bl-toc li { font-size: 14.5px; line-height: 1.5; }
/* legal.css underlines every .lg-doc a; a contents list is navigation, not prose */
.lg-doc .bl-toc a { color: var(--text); text-decoration: none; }
.lg-doc .bl-toc a:hover { color: var(--ember-deep); text-decoration: underline; }

/* ---------------- the cover image ----------------
   One ratio everywhere, 1200x630, so a single asset per post serves the hero,
   the index thumbnail, and the social card. width/height are on the <img> so
   the space is reserved before the file loads and the text below never jumps. */
.bl-hero { margin: 28px 0 0; }
.bl-hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--hover);
}
.bl-hero figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }

/* ---------------- more to read ---------------- */
.bl-more { margin-top: 64px; padding-top: 30px; border-top: 1px solid var(--border); }
.bl-cards {
  margin-top: 16px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lg-doc a.bl-card {
  display: grid; align-content: start; gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.lg-doc a.bl-card:hover { border-color: var(--border-2); background: var(--hover); }
.bl-card-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); }
.bl-card-date { font-size: 13px; color: var(--text-muted); }

/* ---------------- closing call ---------------- */
.bl-cta {
  margin-top: 44px; padding: 26px 28px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--hover);
}
.bl-cta-line { font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--text); }
.bl-cta-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.lg-doc a.bl-cta-a, .lg-doc a.bl-cta-b {
  display: inline-flex; align-items: center;
  padding: 11px 20px; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.lg-doc a.bl-cta-a { background: var(--ember); color: var(--on-ember); }
.lg-doc a.bl-cta-a:hover { opacity: 0.88; color: var(--on-ember); }
.lg-doc a.bl-cta-b { border: 1px solid var(--border-2); color: var(--text); }
.lg-doc a.bl-cta-b:hover { border-color: var(--text); color: var(--text); }

/* ---------------- the index ---------------- */
.lg-doc .bl-month { margin-top: 40px; padding-top: 0; }
.lg-doc .bl-month-h {
  display: flex; align-items: center; gap: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone);
}
.bl-month-h::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.bl-list { margin-top: 6px; }
.lg-doc a.bl-item {
  display: grid; gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
/* an entry with a cover puts it alongside the text; one without keeps the
   full measure, so a post is never held back by not having an image yet */
.lg-doc a.bl-item--img {
  grid-template-columns: 1fr 208px;
  column-gap: 28px;
  align-items: start;
}
.bl-item-text { display: grid; gap: 8px; }
.lg-doc a.bl-item--img .bl-item-text { grid-column: 1; grid-row: 1; }
.bl-item-thumb {
  grid-column: 2; grid-row: 1;
  display: block; width: 208px; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--hover);
}
.lg-doc a.bl-item:hover .bl-item-title { color: var(--ember-deep); }
.bl-item-title {
  font-size: 22px; font-weight: 600; line-height: 1.28; color: var(--text);
  transition: color 160ms ease;
}
.bl-item-dek { font-size: 15.5px; line-height: 1.65; color: var(--text-muted); }
.bl-item-meta { font-size: 13px; color: var(--stone); }

.bl-empty { margin-top: 36px; font-size: 15.5px; color: var(--text-muted); }

/* ---------------- wide: the contents moves into the gutter ----------------
   The article column stays exactly where it is on every other page, 760px and
   page-centred, so a post does not sit differently from a legal page. The
   contents is placed into the left gutter by grid position, which is why the
   markup can keep it in reading order for narrow screens: explicit placement
   beats source order, so no second copy and no JS reordering is needed.

   1300px is where a 200px rail plus its 40px of air fits in the gutter without
   crowding the text; below that the same list simply stays in the flow. */
@media (min-width: 1300px) {
  .lg-doc.bl-post {
    width: min(1240px, 100% - 48px);
    display: grid;
    grid-template-columns: 1fr min(760px, 100%) 1fr;
    align-items: start;
  }
  .bl-post > * { grid-column: 2; min-width: 0; }
  .bl-post > .bl-toc {
    grid-column: 1;
    /* a tall grid area is what gives sticky room to travel: the rail follows
       the reader down the article instead of scrolling away with row one */
    grid-row: 1 / span 30;
    align-self: start;
    justify-self: end;
    position: sticky;
    top: 96px;
    width: 200px;
    margin: 0 40px 0 0;
    padding: 0 0 0 18px;
    border-top: none;
    border-left: 1px solid var(--border);
  }
  .bl-post > .bl-toc ol { gap: 9px; }
  .bl-post > .bl-toc li { font-size: 13.5px; line-height: 1.45; }
}

@media (max-width: 720px) {
  /* the thumbnail becomes a full-width lead image above the text */
  .lg-doc a.bl-item--img { grid-template-columns: 1fr; row-gap: 14px; }
  .lg-doc a.bl-item--img .bl-item-thumb { grid-column: 1; grid-row: 1; width: 100%; }
  .lg-doc a.bl-item--img .bl-item-text { grid-column: 1; grid-row: 2; }
  .bl-item-title { font-size: 19px; }
  .bl-body h2 { margin-top: 36px; }
  .bl-cta { padding: 20px 20px; }
}