/* /blog and the posts under it (fivebar/blog.py), after prose.css. */

/* The day a post went up: under its title on /blog, and first in the post itself, small and in graphite. */
.prose .posted { margin: -.25rem 0 .75rem; font-size: var(--text-sm); color: var(--graphite) }
.prose h1 + .posted { margin-top: -.5rem; margin-bottom: 1.25rem }

/* The picture at a post's head (scripts/blog-art.py), under its day: the full width of the column, its corners
   rounded with the 10px radius a screenshot's are. Colourful in either theme, as a poster is. */
.prose .picture { margin: 0 0 1.75rem }
.prose .picture img { display: block; width: 100%; height: auto; border-radius: 10px }
/* On a phone it runs to the edges of the screen, past the page's 1rem margins (.wrap in site.css), its corners square. */
@media (max-width: 559.98px) {
  .prose .picture { margin-inline: -1rem; max-width: none }
  .prose .picture img { border-radius: 0 }
}

/* /blog's entries: each post's title, day and summary held close together, so the space between entries (h2's own
   top margin) is what parts one post from the next. */
.prose h2:has(+ .posted) { margin-bottom: .15rem }
.prose h2 + .posted { margin: 0 0 .1rem; line-height: 1.35 }
.prose h2 + .posted + p { line-height: 1.5 }

/* /blog's titles link their posts, underlined at rest as every link is, the line at the depth site.css gives its
   serif links (.site-link span): at the default 1.025em, placed for Plex, it runs along Literata's baseline, and the
   halo leaves it only between the words. */
.prose h2 a { --line-top: calc(1.177em + 1px) }

/* A footnote under a table, such as where its figures came from: small and in graphite, close up under it. */
.prose .table + .footnote { margin-top: -.75rem; margin-bottom: 1.5rem; font-size: var(--text-sm); line-height: 1.5;
                            color: var(--graphite) }

/* A screenshot, as /vs draws its own (public/css/vs.css): the image in a --rule-strong edge with the 10px radius, its
   light or dark version as the reader's own theme is, and its caption under it in graphite. */
.prose .shot { margin: 1.5rem 0 1.75rem }
.prose .shot img { display: block; width: 100%; height: auto; box-sizing: border-box; padding: .5rem;
                   border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--paper) }
.prose .shot figcaption { margin-top: .5rem; font-size: var(--text-sm); line-height: 1.5; color: var(--graphite) }

/* A diagram, drawn inline as SVG (fivebar/blog.py): centred, no wider than suits its words, coloured by the theme's
   own tokens so it is light or dark as the reader's theme is. The Go parts are washed blue, Django's green, Postgres
   faint grey; the cities still to come are dashed, as is the core they stand in, and the flows between them are graphite arrows. */
.prose .diagram { margin: 1.5rem 0 1.75rem }
.prose .diagram svg { display: block; width: 100%; max-width: 27rem; height: auto; margin: 0 auto }
.diagram text { font-family: var(--sans); font-size: 12px; fill: var(--ink) }
.diagram .name { font-size: 13.5px; font-weight: 600 }
.diagram .note, .diagram .place { fill: var(--graphite) }
.diagram .place { font-weight: 600 }
.diagram .lang { font-size: 11.5px; font-weight: 600; fill: var(--biro) }
.diagram .city { font-size: 11.5px }
.diagram .box { fill: var(--paper); stroke: var(--rule-strong) }
.diagram .go { fill: var(--wash) }
.diagram .django { fill: var(--good-bg) }
.diagram .db { fill: var(--rule-faint) }
.diagram .pill { fill: var(--paper); stroke: var(--rule-strong) }
.diagram .pill.later { fill: none; stroke: var(--pencil); stroke-dasharray: 3 3 }
.diagram .city.later { fill: var(--graphite) }
.diagram .core { fill: none; stroke: var(--pencil); stroke-dasharray: 4 4 }
.diagram .flow { fill: none; stroke: var(--graphite); stroke-width: 1.25 }
.diagram .head { fill: var(--graphite) }
.prose .diagram figcaption { margin-top: .75rem; font-size: var(--text-sm); line-height: 1.5; color: var(--graphite) }