/* ============================================================================ THE CONTENT PAGES — /about/, /talks/, /links/ and the privacy page. ============================================================================ One template (site/templates/content-page.mjs), four data files. A page is a list of blocks grouped into sections at each heading; this stylesheet styles the blocks that exist. Every value comes from tokens.css. Spacing is one step between every block, live's widget margin, --section-step (18 → 20.6px), since 2026-10-16: the shell's --space-lg had put about twice live's space above every heading, and the smaller step inside sections ran paragraphs closer than live (tokens.css says what was measured). A figure or player inside a section takes the same step. ========================================================================= */ /* ── Sections ───────────────────────────────────────────────────────────── */ /* One step between every block — section to section, heading to its first line, paragraph to paragraph — as live spaces these pages with its widget margin (2026-10-16; book-page.css says the same for the book pages). The build had used --space-lg between sections and --space-sm plus a heading margin inside them. */ .site-main .stack { gap: var(--section-step); } .page-intro, .page-section { display: flex; flex-direction: column; gap: var(--section-step); } /* The last paragraph keeps its step beneath it, before the footer. Live's text widgets end on the paragraph's own bottom margin, so a page that ends in prose has one more step above the footer than a page that ends in a player: measured 2026-11-03 on /about/, /talks/ and the privacy page, the footer's copyright line sits 18px (375) to 20.6px (1440) lower on live than it did here; /links/, which ends in a podcast player, already matched and is not touched. book-page.css does the same for the publisher line. */ .site-main .stack > .page-section:last-child > p:last-child { margin-block-end: var(--section-step); } /* The column on /about/, /talks/ and /links/ at 600 and below: 32px in from the window, as live boxes those three pages (tokens.css, --content-page-gutter). The header and footer keep the site's edge, so the column is widened or narrowed against them by the difference between the two gutters: at 320 the site edge is 20px and the column comes in 12px; at 600 it is 45px and the column goes out 13px. Percentages here are of the main region, which is the window less the site edge on each side. */ .column--fixed-gutter { width: calc(100% + 2 * var(--space-md) - 2 * var(--content-page-gutter)); max-width: none; } @media (min-width: 601px) { .column--fixed-gutter { width: var(--content-width); max-width: 100%; } } /* A block that sat in the same live text box as the one before it, or a podcast player under its caption: the kit's paragraph margin, not the widget margin (tokens.css, --paragraph-step). The section's gap is fixed, so the difference comes off as a negative margin. */ .page-section > .close { margin-block-start: calc(var(--paragraph-step) - var(--section-step)); } /* The same, only from 1367px: /about/'s two paragraphs under "Where did you grow up?" sit on the widget margin below 1367 on live (computed 18px at 375, 18.5 at 601, 19.6 at 1025) and on the 13px paragraph margin from 1367. */ @media (min-width: 1367px) { .page-section > .close-desktop { margin-block-start: calc(var(--paragraph-step) - var(--section-step)); } } /* A lead-in: an h3 that looks exactly like the bold body paragraph it was stored as (the privacy page's "Conformance status" and "Feedback"). Body size, line and colour, bold; the section's own gap spaces it exactly as it spaces a paragraph. Heading structure without a visual change, measured before and after (element 6b). */ .lead-in { font-size: var(--body-size); line-height: var(--body-line-height); color: var(--body-text); font-weight: 700; } /* Inside a flex column the section's gap spaces consecutive paragraphs, so the site's `p + p` margin is switched off here to avoid doubling it. */ .page-intro p + p, .page-section p + p { margin-block-start: 0; } /* ── The captions ───────────────────────────────────────────────────────── A figcaption is italic (base.css). The four /about/ captions each carry the book's title, and on the live site that title is forced back UPRIGHT inside the italic caption — — the inverse of the usual convention, and deliberate. `.roman` is that span. Italicising the titles instead would get all four exactly backwards. All four captions are in Source Sans 3. The Wonderfall caption's stored family is Source Sans PRO, the retired face crust item 6 removes; this is the one place on these pages where match-exactly is knowingly not met. */ .roman { font-style: normal; } /* A paragraph drawn in the caption style without being a caption: the one line under /about/'s identity video, which the live site sets in its caption preset — italic, the caption size and line-height per screen size, the caption blue — while leaving it an ordinary paragraph (element 6c, D12; matched 2026-09-18). The tokens are the figcaption's own. */ .caption { font-style: italic; font-size: var(--caption-size); line-height: var(--caption-line-height); color: var(--caption); } /* ── Illustrations ──────────────────────────────────────────────────────── A captioned illustration fills the column. READ FROM THE LIVE SITE, 2026-09-17 (element 6a): all four /about/ illustrations are drawn at the column's width, not their own — the two 450px files at 720px, the 654px Cat Tale spread at 720px, and the 654px Wonderfall parade at 702px (its widget carries its own slightly narrower width, a stray setting not carried here). The first build sat them at intrinsic width to avoid upscaling 1x art; match-exactly upscales, as the live page does. Sharper art is on the improvements list for Michael, not solved by drawing these smaller. */ .page-section figure img { width: 100%; } /* ── Lists ──────────────────────────────────────────────────────────────── The privacy page's one two-item list, inside its Google Analytics section. */ .page-section ul { padding-inline-start: var(--space-md); } .page-section li + li { margin-block-start: var(--space-xs); } /* ── Video ──────────────────────────────────────────────────────────────── A Vimeo embed keeps its shape at every width — the same rule as the book page's .book-video. 16:9 HERE IS MEASURED, NOT ASSUMED (element 6b, 2026-09-17). The book videos showed a fixed 16:9 box is wrong for some (Cat Tale 3:2, Little i 4:3), so the one content-page embed — /talks/, Vimeo 1025174252 — was checked the same way: Vimeo's oEmbed, requested at full size, gives 1920 × 1080, and the live page draws its box 720 × 405. Both 16:9. A future embed that is not 16:9 needs its own ratio, as book-page.css does it. The self-hosted