/* Responsive image widths for this post.
 *
 * Quarto's `{width=50%}` becomes an inline `style="width:50.0%"` on the <img>,
 * and an inline style cannot be overridden by a media query without
 * `!important` on every rule. So the width attribute comes off and a class goes
 * on instead: `![](x.jpeg){.w50 fig-align="center"}`.
 *
 * Narrow by default and widened at the breakpoint, rather than the reverse, so
 * a phone gets the full-width version even if the media query never matches.
 *
 * 768px is Bootstrap's `md`, which is the breakpoint the rest of the site uses.
 * Bootstrap's `img-fluid` is already on every Quarto image and handles
 * `max-width:100%` and `height:auto`, so these rules only set the ceiling.
 */
img.w50, img.w60, img.w70, img.w85 { width: 100%; }

@media (min-width: 768px) {
  img.w50 { width: 50%; }
  img.w60 { width: 60%; }
  img.w70 { width: 70%; }
  img.w85 { width: 85%; }
}

/* ---------------------------------------------------------------------------
 * Highlight blocks: one or two plots beside their commentary.
 *
 * Each block is a `.mblock` holding a heading and a Quarto `.grid`. The image
 * takes columns 1-7 and the text columns 8-12, but the TEXT COMES FIRST in the
 * source: below the md breakpoint the grid collapses to source order, which
 * puts the commentary above the plot on a phone, where you want to know what
 * you are looking at before you look at it. `g-start-md-*` is what lets the
 * visual order differ from the source order without any `order` juggling.
 *
 * The section sits in `.column-page` rather than the 799px article column,
 * because these plots are near-square (aspect 0.88 to 1.37). Split 799px in
 * half and a plot is 400px wide by 434px tall next to a 77px paragraph, which
 * is 350px of dead space per block. The wider column buys the text enough room
 * to be worth reading.
 */
.mblock {
  --mb-rule: #C9D6E6;
  border-left: 3px solid var(--mb-rule);
  padding-left: 1.5rem;
  margin: 3.5rem 0;
}
body.quarto-dark .mblock { --mb-rule: #25344A; }

/* Centre the two columns against each other. The plot is always taller than
 * the prose, so without this the whole gap piles up under the text and reads
 * as a mistake rather than a margin. */
.mblock .grid { align-items: center; row-gap: 1rem; }

.mblock h3 { margin-top: 0; }

/* The two-image blocks put their pair inside the image column, so the captions
 * carry real information ("change in mortality" against "death rate") and need
 * to stay attached to the right plot. */
.mblock figure { margin-bottom: 0; }
.mblock .grid .grid { margin-top: 0; column-gap: 0.75rem; }

/* Both columns onto the same row.
 *
 * The text is written first in the source but placed at column 8, and the image
 * second but placed at column 1. Grid auto-placement only moves forward, so
 * after filling columns 8-12 it will not go back for columns 1-7: the image
 * lands on a second row and the block reads as text-then-image stacked, which
 * is the layout this was meant to avoid. Pinning both to row 1 is what makes
 * the visual order differ from the source order.
 *
 * Direct children only, so the nested pair inside a two-image block still flows
 * normally. Inside the breakpoint, where the grid is one column, this must not
 * apply or the two would stack on top of each other.
 */
@media (min-width: 768px) {
  .mblock > .grid > * { grid-row: 1; }
}

/* Hand-written contents block at the top of the post. Boxed rather than a bare
 * list so it reads as navigation and not as the article's first paragraph. */
.contents-box {
  --cb-line: #C9D6E6;
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  padding: 1rem 1.25rem 0.75rem;
  margin: 0 0 2rem;
  font-size: 0.94rem;
}
body.quarto-dark .contents-box { --cb-line: #25344A; }
.contents-box p { margin: 0 0 0.5rem; }
.contents-box ul { margin: 0; padding-left: 1.1rem; }
.contents-box li { margin: 0.15rem 0; }