/* ========================================================================== victory-grid.css — one grid for the Victory case -------------------------------------------------------------------------- WHY THIS FILE EXISTS. The route was built from two containers, 1480px and 1760px, chosen per chapter. Measured on the deployed source at 1920px, the chapter labels of s1, s2, s3 and s5 sit at x=144 while s4 and s6 sit at x=284 — a 140px shift between consecutive chapters, and a 331px spread across the headings. At 1440px both containers hit their gutter floor and the labels happen to coincide, which is why the fault reads as intermittent rather than structural. It is structural. The contract here is one rail for every ordinary chapter, and a single NAMED way to leave it. Nothing widens by accident: a nested wrapper cannot introduce a new measure, because there is only one measure. .vc-wrap / .vc-wide the rail. Both names survive because the markup uses both; they now resolve to the same box. .vc-bleed the deliberate exception. Media that earns more width than its heading. Its caption returns to the rail with .vc-bleed__cap. .vc-grid the 12-column field, for chapters that compose rather than stack. The reference: 1440px viewport, 88px outer margins, 1264px content, 12 columns, 24px gaps. In production the content area is fluid to 1320px with gutters scaling 24 → 88px, so the reference lands inside it. ========================================================================== */ /* The rail tokens live on the ROUTE, not on
, because the closing invitation is a sibling of
and has to share the same measure. V04: "One concise themed close and common column." */ .vic[data-vic-env]{ --case-max:1320px; --case-gutter:clamp(24px,5vw,88px); --case-gap:clamp(20px,2vw,32px); --case-section:clamp(64px,7vw,112px); } .vic .vc{ /* The two legacy names now resolve to the rail. Kept as variables so the older rules in victory-case.css that read them stay correct. */ --vc-max:var(--case-max); --vc-wide:var(--case-max); --vc-gut:var(--case-gutter); /* ---- the spacing scale, 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 ----------- */ --vs-1:8px; --vs-2:12px; --vs-3:16px; --vs-4:24px; --vs-5:32px; --vs-6:48px; --vs-7:64px; --vs-8:96px; /* ---- the typesetting contract ------------------------------------------ Sizes are CSS pixels and rems, never browser point sizes. Each role has one family, one weight and one size. */ --t-thesis:clamp(40px,6.4vw,96px); /* hero only: 72-96 at desktop */ --t-chapter:clamp(36px,4.4vw,68px); /* chapter display: 48-68 desktop */ --t-statement:clamp(28px,3.2vw,48px); /* a statement inside a chapter */ --t-body:clamp(17px,1.35vw,21px); /* 18-21 desktop, 17-18 mobile */ --t-body-lh:1.55; --t-support:clamp(16px,1.1vw,18px); --t-meta:13px; /* 12-13 / 1.4, one size per role */ --t-meta-lh:1.4; --m-body:62ch; /* 45-65 characters */ --m-rationale:38ch; /* 30-42 characters */ } /* --- the rail ------------------------------------------------------------- */ .vic .vc .vc-wrap, .vic .vc .vc-wide{ box-sizing:border-box; width:min(calc(100% - 2 * var(--case-gutter)),var(--case-max)); max-width:none; margin-inline:auto; padding-inline:0; } /* --- the one deliberate way out of it ------------------------------------- */ .vic .vc .vc-bleed{ box-sizing:border-box; width:min(calc(100% - 2 * clamp(16px,2.4vw,40px)),1680px); margin-inline:auto; } /* a bleed's caption comes back to the rail, so the reader's eye returns to the same left edge it left */ .vic .vc .vc-bleed__cap{ box-sizing:border-box; width:min(calc(100% - 2 * var(--case-gutter)),var(--case-max)); margin-inline:auto; } /* --- the 12-column field -------------------------------------------------- */ .vic .vc .vc-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--case-gap); } .vic .vc .vc-grid > *{min-width:0} .vic .vc .col-head{grid-column:1 / 9} .vic .vc .col-body{grid-column:1 / 8;max-width:var(--m-body)} .vic .vc .col-side{grid-column:9 / -1} .vic .vc .col-full{grid-column:1 / -1} .vic .vc .col-half{grid-column:span 6} /* --- chapter rhythm ------------------------------------------------------- */ .vic .vc .vc-ch{padding-block:var(--case-section)} /* --- the split chapter head ----------------------------------------------- The design direction sets every chapter the same way: the statement holds the left seven columns at display scale, and the deck sits in the right four, starting on the statement's own baseline rather than under it. The two share the rail, so the head reads as one composed group and the deck never becomes a caption. Below 900px it stacks in reading order. */ .vic .vc .vc-head--split{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 var(--case-gap); align-items:end; /* .vc-head is capped at 76ch for a single-column head; a split head owns the whole rail or its right column collapses to a twenty-character alley. */ max-width:none; } .vic .vc .vc-head--split > .vc-num{grid-column:1 / -1;margin-block-end:var(--vs-3)} .vic .vc .vc-head--split > .vc-h2{grid-column:1 / 8;margin-block-end:0} .vic .vc .vc-head--split > .vc-hdeck{ grid-column:9 / -1;margin:0;max-width:34ch;align-self:end; } @media (max-width:900px){ .vic .vc .vc-head--split{grid-template-columns:minmax(0,1fr)} .vic .vc .vc-head--split > .vc-num, .vic .vc .vc-head--split > .vc-h2, .vic .vc .vc-head--split > .vc-hdeck{grid-column:1 / -1} .vic .vc .vc-head--split > .vc-hdeck{margin-block-start:var(--vs-4);max-width:var(--m-body)} } /* --- the typesetting contract, applied ------------------------------------ */ .vic[data-vic-env] .vc .vc-h2{ font-family:var(--vc-serif);font-weight:400; font-size:var(--t-chapter);line-height:1.06;letter-spacing:-.02em; text-wrap:balance; max-width:20ch; } .vic[data-vic-env] .vc .vc-num{ font:600 var(--t-meta)/var(--t-meta-lh) var(--vc-sans); letter-spacing:.14em;text-transform:uppercase; } .vic[data-vic-env] .vc .vc-hdeck{ font-size:var(--t-body);line-height:var(--t-body-lh); max-width:var(--m-body); text-wrap:pretty; } .vic[data-vic-env] .vc .vc-note{ font-size:var(--t-meta);line-height:var(--t-meta-lh); max-width:var(--m-body); } .vic[data-vic-env] .vc p{text-wrap:pretty} /* An artifact's caption group: label, title, note. One rail, one rhythm, and the provenance line lives INSIDE it rather than escaping to the browser wall — which is what p.vc-note used to do, as a direct child of the section, after the content wrapper had already closed. */ .vic .vc .vc-figcap{display:grid;gap:var(--vs-1);margin-block-start:var(--vs-3)} .vic .vc .vc-figcap .vc-note{margin-block-start:var(--vs-2)} /* --- mobile: the rail holds, the columns collapse ------------------------- */ @media (max-width:760px){ .vic[data-vic-env]{--case-gutter:24px} .vic .vc .vc-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .vic .vc .col-head, .vic .vc .col-body, .vic .vc .col-side, .vic .vc .col-half{grid-column:1 / -1} .vic .vc .vc-bleed{width:calc(100% - 2 * 24px)} } /* --- the close joins the rail --------------------------------------------- Scoped to the Victory route: .vic[data-vic-env] is carried by the three Victory case pages and nothing else, so no unrelated case study moves. */ .vic[data-vic-env] .closing > .wrap{ box-sizing:border-box; width:min(calc(100% - 2 * var(--case-gutter)),var(--case-max)); max-width:none; margin-inline:auto; padding-inline:0; } /* --- V01: the provenance line, brought home -------------------------------- It used to be a direct child of the section, printed after the content wrapper had already closed, so it sat against the browser wall. It now lives in the figure's caption grid: a short public caption on the rail, and the full disclosure one disclosure away, on the same rail. */ /* The caption is already a two-column grid: the role label in column 1, the title and its note in column 2. The public caption and the disclosure join column 1 UNDER the role label, so nothing is placed on top of anything — .vsl__src carries .va-label, which the existing rule pins to 1/1. */ .vic .vc .vsl__cap .vsl__src{grid-column:1;grid-row:2;margin:0;color:var(--v-ink-label);max-width:26ch} .vic .vc .vsl__cap .vsl__prov{grid-column:1;grid-row:3;margin:0;max-width:34ch} .vic .vc .vsl__prov > summary{ cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px; color:var(--v-ink-mute); } .vic .vc .vsl__prov > summary::-webkit-details-marker{display:none} .vic .vc .vsl__prov > summary::after{content:"+";font-weight:600;line-height:1} .vic .vc .vsl__prov[open] > summary::after{content:"\2212"} .vic .vc .vsl__prov > summary:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px} .vic .vc .vsl__prov .vc-note{margin:var(--vs-2) 0 0;max-width:var(--m-body)} @media (max-width:900px){ .vic .vc .vsl__cap .vsl__src, .vic .vc .vsl__cap .vsl__prov{grid-column:1;grid-row:auto;max-width:none} } /* --- art-directed line breaks --------------------------------------------- Display type is set, not poured. A
takes the break the layout was designed around at desktop sizes and disappears below 900px, where the measure decides for itself. */ @media (max-width:899px){ .vic .vc .vc-br{display:none} }