/* ========================================================================== victory-readingcopy.css — the case study's reading copy, reset -------------------------------------------------------------------------- Loaded last on the Victory route. It changes SIZE, MEASURE and SPACE; it changes no layout, no colour and no content. WHAT WAS MEASURED, before anything was changed. Rendered sizes on the live page, medians per class, at 1440 and 390: .vc-note 13px the long explanation under every exhibit was set at --t-meta, the METADATA size. It is the page's main narrative voice and it was reading at caption scale. .vc-hdeck 19.4px in a 413px column -> about 42 characters. A four-column alley for a paragraph. .vrl__d .varch__d .vmo__desc 13px item descriptions in grids, 36-47 characters. mobile 13-17px below a comfortable reading size throughout. THE CONTRACT THIS SETS: narrative body 21-24px desktop, 18-20px mobile, line-height 1.55-1.6 measure 55-75 characters for explanatory paragraphs under a wide the explanation spans a generous part of the grid exhibit rather than an arbitrary narrow column -- and still stops at a reading measure rather than the browser wall captions and stay deliberately subordinate. Path counts, viewBox metadata units, font versions and SHA fragments are not narrative and are not promoted to narrative size. The three sizes are one scale apart on purpose, so the hierarchy survives: display statement -> reading copy -> caption. Equivalent labels keep one size, one weight, one alignment. ========================================================================== */ .vic .vc, .vic[data-vic-env] .vc{ /* The scale lives on `.vic .vc` in victory-grid.css, so the reset has to match that specificity to reach it. 18px at 390, 23px at 1440. The old scale topped out at 21px and started at 17px, which is where the cramped feel came from. */ --t-body:clamp(18px,1.62vw,23px); --t-body-lh:1.58; /* support copy sits just under body, not down at caption size */ --t-support:clamp(17px,1.4vw,20px); /* genuine metadata keeps its own size and stays subordinate */ --t-meta:13.5px; --t-meta-lh:1.45; /* 68ch at the body size is roughly 640px at desktop: inside the 55-75 band */ --m-body:68ch; --m-rationale:46ch; /* the explanation under a wide exhibit: generous, still a reading measure */ --m-wide-note:74ch; } /* --- the narrative voice -------------------------------------------------- */ .vic[data-vic-env] .vc .vc-note, .vic[data-vic-env] .vc .vc-hdeck, .vic[data-vic-env] .vc .vc-d{ font-size:var(--t-body); line-height:var(--t-body-lh); text-wrap:pretty; } /* the exhibit explanation: a generous span of the grid, capped at a measure */ .vic[data-vic-env] .vc .vc-ex .vc-note{ max-width:min(var(--m-wide-note),100%); margin-block-start:var(--vs-5); } /* inside a caption group or a provenance drawer it is documentation again */ .vic[data-vic-env] .vc .vc-figcap .vc-note, .vic[data-vic-env] .vc .vsl__prov .vc-note, .vic[data-vic-env] .vc .vvo__act .vc-note{ font-size:var(--t-support); line-height:1.5; max-width:var(--m-body); } /* --- the split head: a deck with room to be a paragraph ------------------- */ /* The statement keeps the left six columns; the deck takes the right six instead of four, which at the new body size is about 58 characters rather than 42. The head still reads as one composed group on one baseline. */ /* Measured trade-off: at 23px on a 1320 rail, a deck cannot reach 55ch beside a display statement without starving the statement. Six columns gives it about 45 characters instead of the 37 it had, and the explanatory paragraphs that carry the argument -- .vc-note -- sit at 74ch where the band wants them. The deck is a deck; the note is the paragraph. */ .vic .vc .vc-head--split > .vc-h2{grid-column:1 / 7} .vic .vc .vc-head--split > .vc-hdeck{ grid-column:7 / -1; max-width:var(--m-body); } @media (max-width:900px){ .vic .vc .vc-head--split > .vc-h2, .vic .vc .vc-head--split > .vc-hdeck{grid-column:1 / -1} } /* --- explanatory copy inside the exhibits --------------------------------- */ /* These carried item-description styling at 13px while doing narrative work. They read at body size now, each inside its own column's measure. */ .vic[data-vic-env] .vc .vlf__jobt, .vic[data-vic-env] .vc .vtc__d, .vic[data-vic-env] .vc .vtc__body, .vic[data-vic-env] .vc .vev__d, .vic[data-vic-env] .vc .vrd__t, .vic[data-vic-env] .vc .vbe__t{ font-size:var(--t-body); line-height:var(--t-body-lh); max-width:var(--m-body); text-wrap:pretty; } /* Grid-item descriptions are shorter and sit beside their own artwork, so they take support size rather than full narrative size -- readable, still clearly subordinate to the copy above them. */ .vic[data-vic-env] .vc .vrl__d, .vic[data-vic-env] .vc .varch__d, .vic[data-vic-env] .vc .vmo__desc, .vic[data-vic-env] .vc .vpr__cap, .vic[data-vic-env] .vc .vlf__m, .vic[data-vic-env] .vc .vst__pbd{ font-size:var(--t-support); line-height:1.5; max-width:var(--m-rationale); } /* --- breathing room ------------------------------------------------------- */ /* Longer copy needs space between paragraphs and clearance from the rules, images, tabs and control bars it sits next to. */ .vic[data-vic-env] .vc .vc-ex .vc-note + .vc-note{margin-block-start:var(--vs-4)} .vic[data-vic-env] .vc .vc-hdeck{margin-block-start:var(--vs-3)} .vic[data-vic-env] .vc .vc-ex > .vc-wide > .vc-note:last-child, .vic[data-vic-env] .vc .vc-ex > .vc-wrap > .vc-note:last-child{ margin-block-end:var(--vs-2); } /* --- mobile: comfortable, not merely smaller ------------------------------ */ @media (max-width:760px){ .vic .vc, .vic[data-vic-env] .vc{--m-body:100%;--m-rationale:100%;--m-wide-note:100%} .vic[data-vic-env] .vc .vc-note, .vic[data-vic-env] .vc .vc-hdeck, .vic[data-vic-env] .vc .vlf__jobt, .vic[data-vic-env] .vc .vtc__d, .vic[data-vic-env] .vc .vev__d{ font-size:clamp(18px,4.9vw,20px); line-height:1.58; } .vic[data-vic-env] .vc .vrl__d, .vic[data-vic-env] .vc .varch__d, .vic[data-vic-env] .vc .vmo__desc, .vic[data-vic-env] .vc .vpr__cap{font-size:17px;line-height:1.5} }