/* crease-blog.css — the blog's additions to patchwork.css.

   Load this AFTER patchwork.css. The shell supplies every colour token, the
   masthead, the hero, the figure image/details/table styling and the footer;
   this file only adds what a prose page needs and a dashboard did not, so the
   shell stays the single source of the look and the two cannot drift apart.
   No JS, same as the shell. */

/* ---- Masthead carrying more than one item ---------------------------------
   The shell's masthead assumes one short link: .wrap does not wrap and the bar
   is a fixed 2.9rem. This page adds a People menu, and the two items overflow
   the bar below ~34rem. Sticky lets the bar grow into the flow instead, so
   nothing is clipped and nothing hides behind it. Identical on desktop. */
@media (max-width: 34rem) {
  body { padding-top: 0; }
  /* inset is reset too: the shell pins left/right for a fixed bar, which a
     sticky one in normal flow does not want. */
  .masthead { position: sticky; inset: 0 auto auto auto; height: auto; }
  .masthead .wrap {
    flex-wrap: wrap; row-gap: .15rem;
    padding-top: .3rem; padding-bottom: .3rem;
  }
}

/* ---- Post ---------------------------------------------------------------- */
/* padding-top only: a shorthand here would cancel .wrap's own side padding. */
.post { padding-top: 2.5rem; }

/* A reading measure for running prose. Figures and tables are exempt, as in
   the shell: they want the full width of the .wrap. */
.post > p, .post > ol, .post > ul { max-width: 72ch; text-wrap: pretty; }
.post > ol, .post > ul { padding-left: 1.5rem; }
.post > ol > li, .post > ul > li { margin-bottom: .6rem; }

.post > h2 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 600; line-height: 1.25; }
.post > h3 { margin: 2.25rem 0 .6rem; font-size: 1.25rem; font-weight: 600; }

.byline { margin: 0 0 1.75rem; color: var(--ink-mid); }
.byline time { font-weight: 700; font-style: italic; }   /* as .entry time does */

/* ---- Figures -------------------------------------------------------------- */
/* .chartfig already handles the image, the details/summary and the table. */
.chartfig { scroll-margin-top: calc(var(--nav-h) + 1rem); }   /* #fig1 clears the bar */
.chartfig figcaption {
  margin-top: .6rem; font-size: .95rem; color: var(--ink-mid);
  max-width: 68ch; text-wrap: pretty;
}
.chartfig figcaption .figno { font-weight: 700; color: var(--ink); }
.chartfig details p { margin: .6rem 0 0; }
.chartfig caption { text-align: left; padding: 0 0 .4rem; color: var(--ink-mid); }

/* ---- Menu entries that are not links -------------------------------------
   The shell gives .masthead a the ink colour and .people a removes the
   underline, so inside the panel a link and a plain name look identical.
   People without a page get muted text, which reads as inactive rather than
   as a link that does nothing. */
.people .nolink { color: var(--ink-mid); }