/* ============================================================
   Blog posts (/writing/<slug>/). Loaded after site.css, uses its
   tokens only. Kept separate so site.css, and every hand-written
   page that uses it, stays untouched.
   ============================================================ */

.post-hero { flex-basis: 16rem; flex-grow: 1; padding: 0 !important; position: relative; min-height: 13rem; background: var(--paper); }
.post-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.post-body { flex-basis: 100%; align-items: center; justify-content: flex-start !important; padding: 2.2rem 1.5rem 2.6rem !important; }
/* rem, not ch: ch follows each element's own font, so display headings would get a wider column than the text. */
.post-body > * { width: 100%; max-width: 37rem; }
.post-body > * + * { margin-top: 0.95em; }

.post-body h2, .post-body h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.post-body h2 { font-size: 1.35rem; margin-top: 2em; }
.post-body h3 { font-size: 1.02rem; margin-top: 1.6em; }
.post-body h2 + *, .post-body h3 + * { margin-top: 0.6em; }
.post-body hr + h2, .post-body hr + h3 { margin-top: 0; }

.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: 0.35em; }
.post-body li::marker { color: var(--pop); font-weight: 700; }

.post-body blockquote { border-left: 4px solid var(--pop); padding: 0.1em 0 0.1em 1em; font-style: italic; }
.post-body hr { border: 0; height: var(--rule); background: var(--ink); max-width: 6rem; margin: 2.2em auto; }

.post-body code { font-family: var(--mono); font-size: 0.82em; background: var(--paper); border: 1px solid var(--ink); padding: 0.05em 0.3em; }
.post-body pre { font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; background: var(--ink); color: var(--ground); padding: 1rem 1.1rem; overflow-x: auto; }
.post-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

.post-body table { border-collapse: collapse; font-size: 0.8rem; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: var(--rule) solid var(--ink); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.post-body th { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--paper); }

/* ![alt](src "caption") alone in a paragraph */
.post-body figure { max-width: 43rem; }
.post-body figure img { width: 100%; border: var(--rule) solid var(--ink); box-shadow: 4px 4px 0 var(--pop); }
.post-body figcaption { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 0.7rem; }
.post-body p > img { border: var(--rule) solid var(--ink); }
/* In-article images keep their shape but never dominate the page: a portrait phone photo is shown
   at most ~70% of the screen tall and centred; landscape images still use the full text width. */
.post-body img { width: auto; max-width: 100%; height: auto; max-height: 70vh; margin-inline: auto; }
.post-body figure img { width: auto; }

/* ::: callout Title  …  ::: */
.callout { background: var(--paper); border: var(--rule) solid var(--ink); box-shadow: 4px 4px 0 var(--mark); padding: 1rem 1.2rem; }
.callout > * + * { margin-top: 0.7em; }
.callout-title { color: var(--mark); font-weight: 700; }

.story-meta a { text-decoration: none; }
.story-meta a:hover { background: var(--pop); }