/* ==========================================================================
   blog.css — Field Notes on the key rack.
   Loads after /rack.css and only extends it (tokens + .hero/.plate/.section/
   .on-dark/.btn/.rv come from there). Two layouts:
     .posts      — the ledger: one row per post (date + name plate | title, excerpt, read time)
     .post       — one article: a reading column with a 200px rail on desktop
   ========================================================================== */

:root { --col: 38rem; } /* 608px ≈ 74 characters per line of Manrope at 1.125rem (measured, not ch) */

/* ---------- Index hero: the homepage hero, single column ---------- */
.blog-hero .wrap { display: block; }
.blog-hero h1 { max-width: 16ch; }
.blog-hero .lede { max-width: var(--measure); }

/* ---------- Tags hang from hooks (index rows + article head) ---------- */
.posts .when .plate, .post-head .plate { position: relative; margin-top: 14px; }
.posts .when .plate::before, .post-head .plate::before {
  content: ""; position: absolute; left: 50%; top: -14px; width: 16px; height: 22px; margin-left: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'%3E%3Ccircle cx='8' cy='3' r='2.5' fill='%23C22B55'/%3E%3Cpath d='M8 5v9a4 4 0 0 0 8 0' fill='none' stroke='%23C22B55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center top;
}

/* ---------- The ledger of posts ---------- */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posts > li { display: grid; gap: var(--s-4); padding: var(--s-8) 0; border-bottom: 1px solid var(--line); align-items: start; }
.posts .when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.posts .when .num { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.posts h2, .posts h3 { font-size: var(--t-2xl); font-variation-settings: "opsz" 72; line-height: 1.15; max-width: 28ch; }
.posts h3 { font-size: var(--t-xl); }
.posts h2 a, .posts h3 a { color: inherit; text-decoration: none; }
.posts h2 a:hover, .posts h3 a:hover { color: var(--crimson); }
.posts .p { color: var(--slate); margin-top: var(--s-3); max-width: 60ch; }
.posts .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); margin-top: var(--s-4); }
.posts .meta .num { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.posts .more { position: relative; font-size: var(--t-sm); font-weight: 700; color: var(--crimson); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.posts .more::after { content: ""; position: absolute; left: 0; right: 0; top: -.65rem; bottom: -.65rem; }
.posts .more:hover { color: var(--crimson-2); }
@media (min-width: 900px) {
  .posts > li { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-12); padding: var(--s-12) 0; }
  .posts .when { flex-direction: column; align-items: flex-start; padding-top: .35rem; }
  .posts .when .plate { margin-top: 18px; }
}

/* ---------- One article ---------- */
.post { width: min(100% - var(--s-8), var(--wrap)); margin-inline: auto; padding: var(--s-12) 0 var(--s-16); }
.post-head, .post-body, .post-author { max-width: var(--col); }
.post-head { display: grid; gap: var(--s-4); }
.post-head .plate { justify-self: start; }
.post-head h1 { font-size: clamp(2rem, 4.5vw + .5rem, 3.25rem); font-variation-settings: "opsz" 96; line-height: 1.08; }
.post-head .meta { font-size: var(--t-sm); color: var(--slate); margin-top: var(--s-2); }
.post-head .meta b { color: var(--ink); font-weight: 700; }
.post-head .meta .num { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: var(--ink); white-space: nowrap; }

.post-body { margin-top: var(--s-12); font-size: var(--t-lg); line-height: 1.65; color: var(--ink); }
.post-body p { max-width: none; }
.post-body > * + * { margin-top: 1.25em; }
.post-body h2 { font-size: var(--t-2xl); font-variation-settings: "opsz" 72; line-height: 1.15; margin-top: 2em; }
.post-body h3 { font-size: var(--t-xl); margin-top: 1.6em; }
.post-body h2 + h3 { margin-top: 1em; }
.post-body h2 + p, .post-body h3 + p, .post-body h2 + ul, .post-body h3 + ul, .post-body h2 + ol, .post-body h3 + ol, .post-body h2 + div, .post-body h2 + aside { margin-top: .75em; }
.post-body a { color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--crimson-2); }
.post-body strong { font-weight: 700; }

/* Lists: the small key-tag bullet from the homepage ledger; ordered lists count in mono */
.post-body ul, .post-body ol { list-style: none; margin: 1.25em 0 0; padding: 0; display: grid; gap: var(--s-3); }
.post-body li { position: relative; padding-left: 1.5rem; }
.post-body ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 11px; border-radius: 2px; background: var(--grad); }
.post-body ol { counter-reset: step; }
.post-body ol li { padding-left: 1.75rem; }
.post-body ol li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: .3em; font: 700 var(--t-xs)/1 var(--f-mono); color: var(--crimson); }

/* A pull quote reads like the homepage .claim */
.post-body blockquote { margin: 1.5em 0 0; padding: 0 0 0 var(--s-4); border-left: 3px solid var(--crimson-2); font-family: var(--f-display); font-style: italic; font-size: var(--t-xl); line-height: 1.35; max-width: 34ch; }
.post-body blockquote p { margin: 0; }

/* "From the field" aside */
.post-note { margin-top: 1.5em; padding: var(--s-4) var(--s-6); background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--crimson-2); border-radius: 0 var(--r-tag) var(--r-tag) 0; font-size: var(--t-md); line-height: 1.6; }
.post-note > b:first-child { color: var(--crimson); }

/* Data table */
.post-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.25em; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
.post-body th, .post-body td { padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-body th { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); border-bottom: 2px solid var(--ink); }
.post-body td:first-child { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; min-width: 8rem; }

/* In-article CTA: a plate on the wall, the hook ring on top like .shot */
.post-cta { position: relative; margin-top: var(--s-12); padding: var(--s-8) var(--s-6); border: 1px solid var(--night-line); border-radius: 6px; box-shadow: 0 30px 50px -30px rgba(26,26,46,.6); }
.post-cta::before { content: ""; position: absolute; top: -10px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--crimson-2); }
.post-cta h3 { font-size: var(--t-2xl); margin: 0; max-width: 22ch; }
.post-cta p { color: var(--slate-2); font-size: var(--t-md); margin-top: var(--s-3); max-width: 52ch; }
.post-cta .btn { margin-top: var(--s-6); }
.post-body .btn-primary, .post-body .btn-primary:hover { color: #fff; text-decoration: none; font-weight: 700; }
@media (min-width: 640px) { .post-cta { padding: var(--s-8); } }

/* Author: the writer's own key */
.post-author { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.post-author .avatar { flex: none; width: 40px; height: 24px; background: var(--grad); border-radius: var(--r-tag); position: relative; color: #fff; font: 700 11px/24px var(--f-mono); text-align: right; padding-right: 6px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.post-author .avatar::before { content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 7px; border-radius: 50%; border: 2px solid #fff; }
.post-author .who b { display: block; font-size: var(--t-sm); }
.post-author .who span { display: block; font-size: var(--t-sm); color: var(--slate); }

/* Desktop: a 200px rail (the name plate) beside the reading column, like the ledger rows */
@media (min-width: 900px) {
  .post { display: grid; grid-template-columns: 200px minmax(0, var(--col)); column-gap: var(--s-12); padding: var(--s-16) 0 var(--s-24); }
  .post-head { grid-column: 1 / -1; max-width: none; grid-template-columns: 200px minmax(0, var(--col)); column-gap: var(--s-12); row-gap: var(--s-6); align-items: start; }
  .post-head .plate { grid-column: 1; margin-top: calc(14px + .6rem); }
  .post-head h1, .post-head .meta { grid-column: 2; }
  .post-head .meta { margin-top: 0; }
  .post-body, .post-author { grid-column: 2; }
}

/* ---------- "More from the field" ---------- */
.post-more h2 { font-size: var(--t-3xl); margin-bottom: var(--s-8); }