/* Use this to highlight some text in the main column that corresponds with an aside */
i {
padding: .15em 0.1em;
font-style: normal;
background-color: hsl(357, 100%, 96%);
border-bottom: 1.5px solid #fff;
}
/* TYPOGRAPHY *************************************************************************************/
/* Asides and captions share the same sans-serif treatment — same size, same medium weight that
visually matches the serif body without out-shouting it. Line-height matches the body's 24px
so that aside text baselines land on the same rhythm as the main column. */
aside,
figcaption {
font: 400 14px / 24px "Merriweather Sans", sans-serif;
}
/* Horizontal padding only on the default aside so its text aligns with figcaption text
(both inset 1rem from the gutter). No vertical padding means the aside still top-aligns
with the paragraph that follows it in flow. The byline (.meta) and figcaption-nested
asides override this with full 1rem padding. */
aside {
padding: 0 1rem;
border-radius: 3px;
}
aside p {
margin: 0 0 1rem;
}
/* Zero the bottom margin of the last block-level child so the box's bottom padding visually
matches the top — otherwise the inner
/
's margin-bottom stacks on the padding. */
aside > *:last-child,
figcaption > *:last-child {
margin-bottom: 0;
}
/* The byline aside (.meta) gets the same padding as a figcaption so its text starts at the
same horizontal indent. h6 is then pulled up via negative margin so its small-cap baseline
lands on body line 1, and each li (inheriting the 24px line-height from the aside font)
lands on the next body line — Ivan Reese on body line 2, Todd Matthews on body line 3. */
aside.meta {
padding: 1rem;
}
aside.meta h6 {
margin: -14px 0 0 0;
height: 24px;
line-height: 24px;
}
aside h6 {
margin: 0;
height: 24px;
line-height: 24px;
}
aside li + li,
figcaption li + li {
margin-top: 0;
}
/* FIGCAPTIONS ************************************************************************************/
/* Light grey rounded box. Default placement (in the right gutter) inherits from base.css.
Wide / tile / floated figures override placement so the caption flows below the media. */
figcaption {
background: var(--bg-grey);
padding: 1rem;
border-radius: 3px;
}
/* When a figcaption contains a nested aside, split them into two stacked boxes in the
gutter (caption above, aside below) rather than one merged grey box. The figcaption
becomes a transparent shell; its first paragraph and the inner aside each get their
own grey rounded box with matching padding so their text edges line up. */
figcaption:has(aside) {
background: transparent;
padding: 0;
}
figcaption:has(aside) > p {
background: var(--bg-grey);
padding: 1rem;
border-radius: 3px;
margin: 0;
}
figcaption aside {
position: static;
width: auto;
right: auto;
top: auto;
display: block;
padding: 1rem;
}
/* Override the .move-up negative margin the aside macro emits by default — inside a
figcaption we want a normal .5rem gap between the two stacked boxes. */
figcaption aside.move-up {
margin-top: .5rem;
}
/* CAPTION BELOW **********************************************************************************/
/* Pull the figcaption out of the right gutter and place it below the image — even for a normal
(non-wide, non-tile, non-float) figure. Use when the caption would look out of place in the
gutter, or when the figure's subject calls for an inline caption. Harmless when composed with
wide/tile/float (those already release the caption from the gutter).
{{ figure caption-below  A caption that sits below the image. }}
*/
@media (min-width: 46rem) {
figure.caption-below > figcaption {
position: static;
width: auto;
right: auto;
top: auto;
margin-top: .5rem;
}
}
/* IMAGES *****************************************************************************************/
/* Small rounded corners on figure media — applies to single images, tile macros, and grid wrappers. */
figure img,
figure video {
border-radius: 3px;
}
/* BORDERED IMAGES ********************************************************************************/
/* Subtle edge line for images that would otherwise blend into the page (e.g. white or near-white
backgrounds). Uses `border` with box-sizing: border-box so the line sits inside the image's
declared dimensions — no layout shift, and the border is covered by border-radius rounding.
(An inset box-shadow on works in theory but can be painted under the image's pixels in
some browsers, which is why we use a real border.)
{{ figure border  }}
*/
figure.border img,
figure.border video,
figure.border .grid > img,
figure.border .grid > video {
border: 1px solid var(--bg-grey);
box-sizing: border-box;
}
/* ASPECT RATIO ***********************************************************************************/
/* Force a figure's image (or every image inside a figure, including grid children) to a specific
aspect ratio, cropping overflow via object-fit: cover. Useful for tile rows whose source images
have inconsistent shapes — pick the ratio you want and the frame is guaranteed.
{{ figure tile-3 ratio-1x1  }} — 3-up row, square tiles
…
*/
figure[class*="ratio-"] img,
figure[class*="ratio-"] video {
width: 100%;
object-fit: cover;
}
figure.ratio-1x1 img, figure.ratio-1x1 video { aspect-ratio: 1 / 1; }
figure.ratio-3x2 img, figure.ratio-3x2 video { aspect-ratio: 3 / 2; }
figure.ratio-4x3 img, figure.ratio-4x3 video { aspect-ratio: 4 / 3; }
figure.ratio-16x9 img, figure.ratio-16x9 video { aspect-ratio: 16 / 9; }
figure.ratio-2x3 img, figure.ratio-2x3 video { aspect-ratio: 2 / 3; }
/* The {{ aside N }} macro emits class="move-up" and sets --move-up: N (default 0).
margin-top: 0 means the aside aligns at the top with its natural flow position —
typically the paragraph it precedes. A positive N pulls it up by N body lines (24px
each) so an aside can annotate text higher up on the page than its source position. */
@media (min-width: 46rem) {
.move-up {
margin-top: calc(-24px * var(--move-up));
}
}
/* WIDE FIGURES ***********************************************************************************/
/* A figure that breaks out of the 43rem paragraph column to fill the ~58rem content area.
At >=46rem, has padding-right: 15rem for the aside/caption gutter.
Negative margin-right reclaims that gutter so the figure reaches the page's right edge.
Below 46rem, has no right padding, so .wide is a no-op — natural flow takes over. */
@media (min-width: 46rem) {
figure.wide {
margin-right: -15rem;
}
/* Wide-figure caption flows below the image, not in the right gutter. */
figure.wide > figcaption {
position: static;
width: auto;
right: auto;
top: auto;
margin-top: .5rem;
}
}
/* TILED FIGURES — MACRO **************************************************************************/
/* Place adjacent figure macros side-by-side in 2 / 3 / 4 columns within the standard column.
Each tile is its own with its own optional caption.
{{ figure tile-3  caption a }}
{{ figure tile-3  caption b }}
{{ figure tile-3  caption c }}
Tile widths are constrained to the standard column. For a wide tiled row with ONE shared
caption, use the .grid system below (raw HTML, since the figure macro emits one only).
The .25rem in each width calc compensates for inline-block whitespace between siblings. */
@media (min-width: 46rem) {
figure.tile-2,
figure.tile-3,
figure.tile-4 {
display: inline-block;
vertical-align: top;
margin: 0 0 1rem 0;
}
figure.tile-2 { width: calc((100% - 1rem - .25rem) / 2); }
figure.tile-3 { width: calc((100% - 2rem - .5rem) / 3); }
figure.tile-4 { width: calc((100% - 3rem - .75rem) / 4); }
figure.tile-2 + figure.tile-2,
figure.tile-3 + figure.tile-3,
figure.tile-4 + figure.tile-4 {
margin-left: 1rem;
}
/* Tile captions flow below the tile, not in the right gutter. */
figure.tile-2 > figcaption,
figure.tile-3 > figcaption,
figure.tile-4 > figcaption {
position: static;
width: auto;
right: auto;
top: auto;
margin-top: .5rem;
}
}
/* GRID WRAPPER — RAW HTML ************************************************************************/
/* Multiple images in ONE sharing ONE caption. The figure macro can't emit a wrapper,
so this requires raw HTML in markdown:
Shared caption.
Composes with .wide for full-width tiled rows; without .wide the grid sits in the standard
column. Collapses to a single column on mobile. */
figure .grid {
display: grid;
gap: 1rem;
}
figure .grid > img,
figure .grid > video {
width: 100%;
height: auto;
border-radius: 3px;
}
figure .grid-columns-2 { grid-template-columns: repeat(2, 1fr); }
figure .grid-columns-3 { grid-template-columns: repeat(3, 1fr); }
figure .grid-columns-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 46rem) {
figure .grid-columns-2,
figure .grid-columns-3,
figure .grid-columns-4 {
grid-template-columns: 1fr;
}
}
/* FLOATED FIGURES ********************************************************************************/
/* Inline images that text flows around. Pair a float-X class with a width fraction class:
{{ figure float-left third  caption }}
{{ figure float-right half  }}
The third / half / quarter fractions match the tile-N widths so a floated image sits at the
same visual size as a corresponding tile. Below 46rem, floats fall back to natural block flow. */
@media (min-width: 46rem) {
figure.float-left {
float: left;
margin: 0 1rem 1rem 0;
}
figure.float-right {
float: right;
margin: 0 0 1rem 1rem;
}
/* Width fractions — same denominators as tile-N for a consistent visual rhythm. */
figure.half { width: calc((100% - 1rem) / 2); }
figure.third { width: calc((100% - 2rem) / 3); }
figure.quarter { width: calc((100% - 3rem) / 4); }
/* Floated-figure caption flows below the image, not in the right gutter. */
figure.float-left > figcaption,
figure.float-right > figcaption {
position: static;
width: auto;
right: auto;
top: auto;
margin-top: .5rem;
}
}
/* SPACERS ****************************************************************************************/
/* Vertical spacing utilities, sized in body-line increments so they land cleanly on the 24px
baseline grid. Put the class on whichever block needs extra room:
{{ figure space-top-2  ... }} — extra room above a figure macro
…
— same idea on any element via raw HTML
*/
.space-top-1 { margin-top: 1.5rem; } /* 1 body line — 24px */
.space-top-2 { margin-top: 3rem; } /* 2 body lines — 48px */
.space-top-3 { margin-top: 4.5rem; } /* 3 body lines — 72px */
.space-top-4 { margin-top: 6rem; } /* 4 body lines — 96px */
.space-top-6 { margin-top: 9rem; } /* 6 body lines — 144px */
.space-top-8 { margin-top: 12rem; } /* 8 body lines — 192px */
.space-bottom-1 { margin-bottom: 1.5rem; }
.space-bottom-2 { margin-bottom: 3rem; }
.space-bottom-3 { margin-bottom: 4.5rem; }
.space-bottom-4 { margin-bottom: 6rem; }
.space-bottom-6 { margin-bottom: 9rem; }
.space-bottom-8 { margin-bottom: 12rem; }
/* Figure-scoped overrides. Layout classes (tile-N, float-*) set margin shorthands on the
figure, which outrank the plain .space-* utilities on specificity. Matching specificity
with `figure.` lets the utility win via source order (these come after the layout rules). */
figure.space-top-1 { margin-top: 1.5rem; }
figure.space-top-2 { margin-top: 3rem; }
figure.space-top-3 { margin-top: 4.5rem; }
figure.space-top-4 { margin-top: 6rem; }
figure.space-top-6 { margin-top: 9rem; }
figure.space-top-8 { margin-top: 12rem; }
figure.space-bottom-1 { margin-bottom: 1.5rem; }
figure.space-bottom-2 { margin-bottom: 3rem; }
figure.space-bottom-3 { margin-bottom: 4.5rem; }
figure.space-bottom-4 { margin-bottom: 6rem; }
figure.space-bottom-6 { margin-bottom: 9rem; }
figure.space-bottom-8 { margin-bottom: 12rem; }
