Notes 01
Unheard Path
If this is serif-scaled, spaced, and on brand tokens, the token layer works.
Resize below 767px — this line turns accent-colored (mixin test).
Notes 02
Break out of the wrapper
Each section below uses its own %SectionContent 12-column grid. Wrappers withdisplay: contents drop out of the box tree so children place on that section grid.
Notes 03 · Color
Image scrim & bleed
Probe on --color-canvas-light. Baseline first, then compare scrim and dissolve treatments from _image.scss / .ImageStage.
Bare photo
No overlay — baseline crop
florence_street.avif
Even wash
ImageStage__scrim--evenWashDirectional scrim
ImageStage__scrim--directionalText pool
ImageStage__scrim--textPoolAlpha dissolve
ImageStage--alphaDissolveDark
Example 01
Without contents
ul is one grid item → lis layout inside the list box, not on the section grid.
- 1–4stuck in ul · wanted 1 / 5
- 5–8stuck in ul · wanted 5 / 9
- 9–12stuck in ul · wanted 9 / -1
Example 02
With contents on ul
Portrait: nested single-column grid (list stays one section cell). Landscape:repeat(auto-fit, minmax(0, 1fr)) so any item count shares the row evenly — no per-item grid-column, no display: contents on the list.
- 01Equal share of the row
- 02Equal share of the row
- 03Equal share of the row
Example 03
Other wrappers · same trick
div, dl, and figure withdisplay: contents — children place on this section’s 12-col grid.
- dt · 1–3
- dd · 4–12 — definition joins the section grid next to its term.
Example 04
Column ruler
Twelve tracks from --grid-columns: 12 + %SectionContent.