/* Notes (BLOG_BRIEF): the post pages and the list, on top of style.css's .prose (the methodology page's measure and
   type). Tokens only, from the top of style.css; no hex values here. */

/* ---------- The post ---------- */
.post-head { margin-bottom: 26px; }
/* The post's skeleton is the methodology page's (2026-09-24 night, Steve, from the desktop review): the text sits at
   the measure, and the rules under the head and above "All notes" run the width of the wrap, so the column reads as
   set on a page rather than left over. .prose > * caps every child at 68ch, so the head, the article and the back
   link are released and the cap is put back on the head's own children. */
.prose.post > .post-head, .prose.post > article, .prose.post > .post-back { max-width: none; }
.post-head { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.post-head > * { max-width: 68ch; }
.prose.post > .post-back { border-top-color: var(--rule); }
.post-head h1 { max-width: 18ch; overflow-wrap: anywhere; }
.byline { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.byline-author { color: var(--ink); }
.post-body { font-size: 17px; line-height: 1.65; }
.post-body > * { max-width: 68ch; }
.post-body p { margin: 0 0 1.05em; overflow-wrap: break-word; }
.post-body h2 { display: block; }
.post-body h3 { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; margin: 26px 0 8px; }
.post-body a { color: var(--ink); text-decoration-color: var(--teal); }
.post-body a:hover { color: var(--teal-ink); }
.post-body blockquote { margin: 1.2em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--teal); font-style: italic; color: var(--ink-2); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--rule-2); margin: 30px 0; max-width: 12ch; }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1.05em; }
.post-body pre { font: 400 13.5px/1.6 var(--mono); background: var(--paper-2); border-radius: var(--radius); padding: 12px 16px; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; }
.post-body img { max-width: 100%; height: auto; }
.post-back { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- The list ---------- */
.post-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 3px solid var(--ink); }
.post-list li { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); margin: 0; }
.post-list .post-date { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.post-list h2 { display: block; font: 800 clamp(1.3rem, 4.5vw, 1.6rem)/1.15 var(--display); letter-spacing: -.02em; margin: 6px 0 0; padding: 0; border: 0; overflow-wrap: anywhere; }
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; }
.post-list .deck { font-size: 1.05rem; color: var(--ink-2); }
.post-list-empty { margin-top: 26px; color: var(--ink-2); }