and give the figure
class="side" (add "left" to flip it). The wrapper contains the float and
releases the paragraphs from the reading measure so the wrap actually works. */
.story .with-side { max-width: none; overflow: hidden; }
.story .with-side p,
.story .with-side ol.specs { max-width: none; }
.story figure.side {
float: right;
width: min(38%, var(--side-w, 340px));
margin: 4px 0 clamp(14px, 2vh, 22px) clamp(20px, 3vw, 38px);
}
.story figure.side.left {
float: left;
margin-left: 0;
margin-right: clamp(20px, 3vw, 38px);
}
/* headings and tables always start on a clean line, never beside a float */
.story h2, .story .tbl-wrap { clear: both; }
@media (max-width: 700px) {
.story figure.side, .story figure.side.left {
float: none; width: 100%; margin-left: 0; margin-right: 0;
}
}
/* ---------- FIGURE ROW (two or more figures side by side) ----------
Images are sized by HEIGHT, so a landscape and a portrait shot sit on the
same baseline without hand-computing widths. Tune with --row-h. */
.story .fig-row {
display: flex; flex-wrap: wrap; align-items: flex-start;
gap: clamp(12px, 1.6vw, 20px);
margin: clamp(22px, 3.6vh, 42px) 0;
}
.story .fig-row figure { margin: 0; flex: 0 1 auto; min-width: 0; }
.story .fig-row figure img {
max-height: var(--row-h, 340px); width: auto; height: auto; max-width: 100%; object-fit: contain;
}
/* Add class="fit" to keep every figure on ONE line no matter how many there
are. A plain .fig-row wraps as soon as the images' natural widths exceed the
column, so lowering --row-h alone will not pull a 4-up row back together.
.fit gives each figure an equal share of the width and makes --row-h the
exact height of every frame, so mixed portrait/landscape shots line up.
Swap contain -> cover below if you would rather crop than letterbox.
*/
/* A long caption must never decide how wide its figure is. width:0 takes the
caption out of the figure's max-content measurement (percentages are ignored
there), then min-width:100% stretches it back over the media. Result: the
caption wraps onto a second line at the edge of the image or video instead of
pushing the next figure onto a new row. */
.story .fig-row figure > figcaption { width: 0; min-width: 100%; }
.story .fig-row figcaption span { min-width: 0; }
.story .fig-row.fit { flex-wrap: nowrap; }
.story .fig-row.fit figure { flex: 1 1 0; }
.story .fig-row.fit figure img,
.story .fig-row.fit figure video {
width: 100%; height: var(--row-h, 340px); max-height: none; object-fit: contain;
}
@media (max-width: 760px) {
.story .fig-row { display: block; }
.story .fig-row.fit { display: block; }
.story .fig-row.fit figure img,
.story .fig-row.fit figure video { height: auto; }
.story .fig-row figure { margin: clamp(22px, 3.6vh, 42px) 0; }
.story .fig-row figure img { height: auto; width: 100%; }
}
/* ---------- SPLIT SECTION (main column + aside) ----------
…main…
Tune the ratio with --split, e.g. style="--split: 2fr 1fr". */
.story .split {
display: grid;
grid-template-columns: var(--split, 1.5fr 1fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
max-width: none;
}
.story .split > * { min-width: 0; }
.story .split p, .story .split ol.specs { max-width: none; }
.story .split h2 { margin-top: 0; }
/* a genuine sub-heading: same face as h2, one step down in size */
.story h3 {
font-family: var(--display); font-weight: 700; text-transform: uppercase;
font-size: clamp(18px, 2.1vw, 25px); line-height: 1; letter-spacing: .01em;
margin: 0 0 clamp(10px, 1.6vh, 15px);
}
.story .split-aside p { font-size: 15px; line-height: 1.65; color: var(--graphite); }
.story .split-aside figure { margin: clamp(14px, 2vh, 20px) 0 0; }
.story .split-aside figure img { width: 100%; height: auto; }
@media (max-width: 860px) {
.story .split { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px); }
}
/* ---------- PER-ELEMENT SIZING ----------------------------------------
Every figure and every table can be sized on its own, in any layout:
480px wide
480px wide, centred
620px wide table
…centred
Leave the variable off and the element fills the column as before.
Values can be px, %, or em. Nothing can exceed the column width.
-------------------------------------------------------------------- */
.story figure { width: var(--fig-w, auto); max-width: 100%; }
.story .tbl-wrap { width: var(--tbl-w, auto); max-width: 100%; }
.story figure.center,
.story .tbl-wrap.center { margin-left: auto; margin-right: auto; }
/* ---------- PAIR (put a figure and text beside each other) ----------
…
text that sits to its right
Add class="pair flip" to put the text on the left instead.
Stacks below 860px. */
.story .pair { display: flex; align-items: flex-start; gap: clamp(12px, 1.6vw, 20px); }
.story .pair.flip { flex-direction: row-reverse; }
.story .pair > figure { margin: 0; flex: 0 0 auto; }
.story .pair > p { margin: 0; flex: 1 1 0; min-width: 0; }
@media (max-width: 860px) {
.story .pair, .story .pair.flip { display: block; }
.story .pair > figure { margin-bottom: clamp(12px, 1.8vh, 18px); }
}
/* ---------- SELF-HOSTED VIDEO IN A FIGURE ----------
…
Sized exactly like an , so it works inside .fig-row and .pair too. */
.story figure video { width: 100%; height: auto; display: block; background: var(--ink); }
.story .fig-row figure video {
max-height: var(--row-h, 340px); width: auto; height: auto; max-width: 100%;
}
@media (max-width: 760px) { .story .fig-row figure video { height: auto; width: 100%; } }
/* ---------- SIDE GROUP (two or more figures floated together) ----------
Plain float:right reverses source order, so two side figures read
right-to-left. Wrap them in .side-group and source order = reading order.