— each of numbers.php/video.php/violet_block.php/gallery.php/ * gallery_with_video.php renders its own independent `.cg-band`, so two of * them back-to-back double up the 96px top+96px bottom rhythm into a 192px * dead gap at the junction (reported: a video/play-pill or quote * "floating" in an oversized empty black band). Collapsing the SECOND * band's top padding when it's immediately preceded by a band of the SAME * TONE restores the design's single-96px junction rhythm without touching * the shared `.cg-band` default (band.css) every other template also uses. * Scoped to `body.single-work` — zero effect on any other template. * * WHY ALL THREE TONES, not just ink (2026-09-04). This shipped ink-only, * which quietly made the bug invisible rather than absent: the doubled * padding is 192px on EVERY same-tone junction, but you only SEE it when * the two bands share a colour. Where the tone changes, the second band's * 96px is painted in the new colour, so the eye reads one 96px gap and the * junction looks correct — that is why cream case studies went unreported * for so long, and why the owner's own reference screenshot of a "correct" * gap was a cream->ink junction that is also 192px. * * Cream case studies are the common ones. On `/work/hansens/` (16 bands, * all cream except the closing ink band) there were THIRTEEN 192px * junctions and the page was 34906px tall; with this rule they are 96px * and it is 33658px. The cream->ink junction at the end is untouched at * 192px, which is correct — that is the one the design intends and the one * the owner pointed at as right. * * NOT GENERALISED to `band.css`, deliberately, and this is the trap: a * bare `.cg-band--ink + .cg-band--ink` there has specificity (0,2,0) and * would out-specify `.cg-benefits-band` (0,1,0) in * template-awards-careers-events.css:571, silently reverting the * hand-tuned 21px Careers junction that a reviewer asked for by name * (CAR-1). It would also tie with `.cg-worklist-slider` (0,2,0, * worklist-slider.css:235), which already solves its own junction a * different way. ONE same-tone junction elsewhere is still 192px — a * cream+cream on `/media/` — left alone because it was not reported and is * outside this template's scope. (`/technology/`'s ink+ink is NOT a * defect: the band above is `--flush-bottom` and the slider below pads * itself with `clamp( 64px, 8vw, 96px )`, so it already totals 96px. * Adversarial review caught this doc claiming otherwise.) * * (b) work-zespri.html's `.cols`/`.herogrid` (the text-split pattern used * throughout this template's own text.php blocks) use `align-items:start` * with NO extra top offset on the body column — headline-top and * body-copy-top share the same edge. The SHARED `.cg-split__body{padding- * top:60px}` (split.css) is correct for ITS reference (media.html, used by * the 5 already-merged pages) but wrong for this one; overridden here * (scoped to `body.single-work`) rather than changed at the source, so the * other 5 pages' `.cg-split` usage is completely unaffected. text.php's * `subtitle` (eyebrow) is optional and empty on most real case studies, so * `.cg-statement`'s own `margin-top:var(--eyebrow-gap)` (type.css — correct * when an eyebrow precedes it) still pushed the headline down when there's * no eyebrow; zeroed via `:first-child` so it only applies when the * statement truly has nothing above it in its column. * ------------------------------------------------------------------ */ body.single-work .cg-band--cream + .cg-band--cream, body.single-work .cg-band--ink + .cg-band--ink, body.single-work .cg-band--rust + .cg-band--rust { padding-top: 0; } /* Zeroing the top padding lets the first child's top margin ESCAPE the band and collapse through, re-adding space the rule just removed — the same class of bug as the pull-quote exception below, and found by adversarial review before it could ship. Live trigger: `related_articles.php:36` renders `cg_statement()` as the band's first child, and `.cg-statement` carries a 34px `margin-top` (type.css). zespri-kiwifruit already holds a `related_articles` row; it renders nothing today only because its post selection is empty, so this is one editorial action away, not hypothetical. Injecting the heading reproduced it: the junction went 96px -> 130px. The band owns the junction rhythm, not its first child, so this is a flat zero rather than a per-block fix. `.cg-violet-block` is excluded because its whole point is the deliberate extra space below — see the next rule. */ body.single-work .cg-band--cream + .cg-band--cream > :first-child, body.single-work .cg-band--ink + .cg-band--ink:not( .cg-violet-block ) > :first-child, body.single-work .cg-band--rust + .cg-band--rust > :first-child { margin-top: 0; } /* …except the pull-quote. Inside the design's single dark section the "The Brand's Good" eyebrow carries margin-top:clamp(80px,8.5vw,128px) before the quote; the rule above flattened that to 0, leaving the quote pressed against the film above it. Same specificity (0,3,1) as the rule it refines, so source order decides — keep it directly after. */ body.single-work .cg-band--ink + .cg-violet-block { padding-top: clamp( 80px, 8.5vw, 128px ); } body.single-work .cg-split__body { padding-top: 0; } body.single-work .cg-split > div > .cg-statement:first-child { margin-top: 0; } /* ------------------------------------------------------------------ * * Case-study hero (blocks/work_type_content/intro.php) * * #308 flipped the DOM/visual order: the full-bleed banner, then the rule, * then the eyebrow + grid (a CD follow-up on #308, 2026-08-05, moved the * rule from before the banner to after it — the image is now the literal * first thing in the section, no rule and no header-clearance padding * above it; see the body.single-work overrides below). The rules below * are re-tuned for that order (see docblocks on each) — this genuinely * changes the hero's overall height and rhythm (the case-study hero is * measurably taller than it was, see .cg-case-hero__banner below), it is * not a like-for-like relabeling of the same spacing onto different * elements. Adversarial review, second pass, corrected an earlier version * of this comment that overstated how much stayed "the same". * ------------------------------------------------------------------ */ .cg-case-hero { /* This padding-top is DEAD CODE for every OTHER template sharing .cg-case-hero-adjacent markup — beaten by theme.css's `.cg-hero:not(.cg-hero--video), .cg-case-hero { padding-top: 100px }`, which loads later in the cascade and is what every width actually computed pre-2026-08-05. Left as-is (still dead) rather than removed, so a future maintainer doesn't wonder why nothing changes if they tune it — the real override for single-work is the body.single-work rule directly below, which wins on specificity regardless of source order. */ padding-top: clamp( 150px, 20vh, 208px ); } /* CD follow-up on #308 (2026-08-05): the banner is the first thing in the hero now, so the 100px header-clearance theme.css applies to every .cg-case-hero (needed when the eyebrow/title used to lead) is exactly the gap the CD flagged as "content above the image that needs to be cleared out". Zeroed here for single-work only — `body.single-work .cg-case-hero` (0,2,1 — body counts as an element selector) beats theme.css's `.cg-case-hero` (0,1,0) regardless of source order, so this doesn't require touching theme.css's shared rule at all. */ body.single-work .cg-case-hero { padding-top: 0; } .cg-case-hero__rule { width: 70px; } .cg-case-hero__eyebrow { margin-bottom: 26px; } /* * THE CASE-STUDY CAMPAIGN LINE, AS A SECONDARY HEADLINE (#453). * * blocks/work_type_content/intro.php used to render this slot as * `.cg-eyebrow .cg-case-hero__eyebrow` — 10px uppercase at 0.22em tracking. * That is a LABEL treatment, and the content in the slot is a full sentence * of campaign copy ("How We Got People Lost in Delicious"), which on the * longer case studies became two lines of tiny capitals stacked above a * 104px headline. * * So it is a secondary headline now, built on the system's existing display * scale rather than a new one: `--font-serif` at `clamp( 32px, 3vw, 56px )` * with `line-height: 1.04` is `.cg-statement` (css/components/type.css), the * band-level display heading used everywhere else on the site. Restated here * instead of adding the `.cg-statement` class in the markup because * `.cg-statement` carries `margin: var( --eyebrow-gap ) 0 0` — the gap that * belongs UNDER an eyebrow — plus three page-template overrides of that * margin, none of which apply to a slot that follows a rule mark. Taking the * type without the margin is the whole difference. * * `.cg-case-hero__eyebrow` above is deliberately left in place: single-event.php * still uses it, for an event DATE, which is exactly the label this treatment * was right for. * * Sized one step below the

beside it (`clamp( 50px, 6vw, 104px )`), and * in the serif rather than the H1's condensed Tungsten, so the two read as a * pair rather than as two competing headlines. * * SECOND PASS, against the Figma comp the owner relayed on 2026-09-01 (node * 677:6, "the header of the work pages"). Three values came off the artboard * and replaced first-pass guesses: * * - `line-height: 1.3` (comp: 73px on 56px = 1.304). The first pass borrowed * `.cg-statement`'s 1.04, which is a display leading — right for a two- or * three-word band headline, far too tight for a sentence set at 56px in a * 617px column, where it produced four nearly-touching lines. * - `letter-spacing: -0.01em` (comp: -0.56px on 56px). Was -1.68px, i.e. * -0.03em — three times the comp's tracking. Expressed in `em` here so it * holds through the clamp instead of over-tightening the 32px mobile end. * - `color: var( --cg-ink )` (comp fill #0E0E0C, which is exactly this token). * Was `--cg-ink-70`; the comp sets the campaign line at full ink, the same * value as the

beside it. * * `max-width` is gone with the move into the grid: the 612px track IS the * measure now, and a `ch` cap on top of it would only shorten the line * unpredictably as the clamp changes font-size. (Comp: campaign line and * intro copy share one 617px column at x=1055.) / .cg-case-herokicker { margin: 0; font-family: var( --font-serif ); font-weight: 400; font-size: clamp( 32px, 3vw, 56px ); line-height: 1.3; letter-spacing: -0.01em; color: var( --cg-ink ); text-wrap: balance; } / 27px on the artboard (campaign line y=899 + two 73px lines = 1045; intro copy y=1072). Only when both are present — a `+` combinator rather than a margin-bottom on the kicker, so a case study with no intro copy doesn't carry a trailing gap. / .cg-case-herokicker + .cg-case-herointro-body { margin-top: 27px; } / #303: Tungsten Narrow Bold replaces Noe Text at 400. Re-tuned per the same rationale as hero.css `.cg-herotitle` -- size raised, tracking pulled toward 0, line-height nudged up. `max-width: 20ch` is unchanged; the narrower condensed face fits more characters per ch, so line-count was re-checked against pre-#303 main across the 56 published case studies (see PR spot-checks/screenshots). / .cg-case-herotitle { max-width: 20ch; margin: 0; font-family: var( --h1-font-family ); font-weight: 700; font-size: clamp( 50px, 6vw, 104px ); line-height: 1.02; letter-spacing: -0.5px; / #328: rust, off ink, per the CD (2026-08-05). This class is shared between the sub-page heroes the CD named (Awards & Testimonials, Careers, Contact, Events, Download, Media Services) and every /work// case-study hero. The case studies are scoped back to ink just below — the CD came back the same day wanting work H1s to stay ink, so the split is deliberate, not a leak. / color: var( --accent ); text-wrap: balance; } / #328, second pass: work case-study H1s stay ink. * * The CD's first relay was "rust everywhere, I'll sort the work pages out * later"; the correction arrived before this shipped — work case studies * keep the ink headline. Scoped on the `single-work` body class WordPress * already emits for the `work` CPT (verified: `wp-singular * work-template-default single single-work postid-4671 wp-theme-lrxd`), * which is (0,2,0) and cleanly beats the base rule above. * * Doing it as an exception rather than by enumerating the six in-scope * page templates means a new sub-page hero inherits rust by default and * only the work archive needs to know it is special — the reverse would * silently leave every future page ink. * * Event singles are excluded too, per the CD's answer to that flag * (2026-08-05: "events should follow the ink style"). They were rust for * one commit while the question was open — raised in the PR rather than * guessed at, and answered before it shipped past Dev. / .single-work .cg-case-herotitle, .single-event .cg-case-herotitle { color: var( --cg-ink ); } / ------------------------------------------------------------------ * * #330 phase 2 — the two-column case-study hero. * * The CD's 2026-08-05 redesign moves hero sub-copy out from under the * headline into a right-hand column. Phase 1 did that for the four `.cg-hero` * pages; this is the same treatment for the six `.cg-case-hero` templates * (blocks/cg/case-hero-head.php). * * The geometry is deliberately IDENTICAL to hero.css `.cg-herotop` / * `.cg-heroaside` — 1.35:1 tracks, an 82px gap, and the aside's rule * dropped 67px below the top of the column — because it is the same artboard * (Figma node 487:154, the cream Media artboard) and two hero families that * read as one system must not resolve to two different column ratios. It is * re-declared here rather than sharing `.cg-herotop`'s selector because * that rule carries a `padding-bottom` this family must NOT inherit: the * banner below supplies its own top gap (`.cg-case-herobanner` * margin-top), and taking both would double it. * * Type scale is untouched, per the CD: the artboard's 120px H1 / 14px * sub-copy is the designer matching what already ships. * ------------------------------------------------------------------ / .cg-case-herotop { display: grid; grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); align-items: start; gap: clamp( 32px, 5vw, 82px ); } / The 67px offset drops the aside's hairline below the headline's first line instead of levelling it with the rule mark, which is what stops the right column reading as a second, competing header. 3.5vw hits 67px at the artboard's own 1920 and scales with the type; the 28px floor keeps a sensible gap once the grid collapses at <=1024px, where 3.5vw would shrink to ~14px. Same values, same reasoning as `.cg-heroaside`. / .cg-case-heroaside { margin-top: clamp( 28px, 3.5vw, 67px ); border-top: var( --hairline ) solid var( --cg-border ); padding-top: 42px; } / Three single-column assumptions from hero.css's shared `.cg-herolede` rule that are wrong inside a grid track: - `max-width: 460px` would fight the track, which is already the measure. - `margin-top: 34px` was the gap under a headline it no longer sits under; here it would push the copy away from the hairline above it. - `font-weight: 700` is the shared rule's base, but it is overridden to 400 by EVERY live hero variant (--megaphone/--rocket/--hammer/--astronaut) after the CD's 2026-08-03 note, "match font weight here to the rest of the site, this looks heavier." Inheriting the un-overridden 700 would make these six the only heavy ledes on the site. / .cg-case-herolede { max-width: none; margin-top: 0; font-weight: 400; line-height: 1.7; } / Campaign headline + intro copy inside the hero, below the banner (#308) — work-zespri.html `.herogrid` (that reference has this above the banner; here it's deliberately inverted). The copy comes from the first `text` row (see single-work.php), which is skipped as a standalone band. Still directly follows `.cg-case-hero__eyebrow` in the DOM in the common case (every real case study currently has a `short_title`), so this margin's job — the gap under the eyebrow — is unchanged by the reorder; it also covers the (currently theoretical) no-eyebrow case, where this becomes the gap under the banner instead. / .cg-case-herogrid { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 612px ); gap: clamp( 48px, 6vw, 90px ); align-items: start; margin-top: 38px; } .cg-case-herobanner { / margin-top is a PRE-EXISTING property, unchanged value here — it is the gap between the grid/copy above and the banner, for the ten OTHER templates that share this bare selector (events, industry, careers, awards, social-impact, future, download, team), where the banner is still the LAST element in .cg-case-hero. For single-work, the banner is now the FIRST element (CD follow-up on #308, 2026-08-05 — see the body.single-work override below), so this margin-top would otherwise recreate exactly the "gap above the image" the CD asked to remove. Do not add anything here that isn't true for every one of those ten templates too. / margin-top: clamp( 56px, 7vw, 100px ); margin-inline: calc( -1 var( --pad-x ) ); } /* #308 (devils-advocate fix) + CD follow-up (2026-08-05): both scoped to single-work only, since the bare .cg-case-herobanner above is shared by ten other templates where the banner is still last. - margin-top: 0 — cancels the shared margin-top above, so the banner sits flush against the header (no rule, no gap) now that it's first. - margin-bottom: creates the gap under the banner, above the rule that used to sit before it — the eyebrow/grid sat flush against the banner before this fix (measured 0px). Unchanged from the original #308 fix; the rule's own `.cg-rule` base margin (22px bottom, cardbox.css) supplies the smaller gap between the rule and the eyebrow that follows it. / body.single-work .cg-case-herobanner { margin-top: 0; margin-bottom: clamp( 56px, 7vw, 100px ); } .cg-case-heroholder.holder-img img, .banner-img-section .cg-case-heroholder.holder-video { display: block; width: 100%; height: clamp( 360px, 42vw, 760px ); object-fit: cover; } / Beats `.banner-img-section .holder-video{padding-bottom:calc(100%/var(--height))}` (style.css) — matched specificity (2 classes) needs the extra `.banner-img-section` ancestor to win regardless of source order, since component CSS loads before style.css in the cascade (docs/2.0-system-guide.md §2). / .banner-img-section .cg-case-heroholder.holder-video { padding-bottom: 0; } @media ( max-width: 1024px ) { .cg-case-herogrid { grid-template-columns: 1fr; gap: 34px; } / #330 phase 2 — matches hero.css's own <=1024px collapse of `.cg-herotop` (1fr / 44px gap), so both hero families reflow at the same breakpoint to the same rhythm. / .cg-case-herotop { grid-template-columns: 1fr; gap: 44px; } } @media ( max-width: 680px ) { .cg-case-herotitle { max-width: none; } } / ------------------------------------------------------------------ * * "Our latest work" (single-work.php) * ------------------------------------------------------------------ / .cg-latest-workrule { width: 121px; } .cg-latest-workgrid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 0; margin-top: 44px; } / * A category with fewer than three other case studies in it narrows the grid * rather than leaving the empty boxes of #460. Unreachable on today's content * (smallest category = 6), but the tile count is the editor's categories now, * not a curated list, so the template no longer gets to assume three. / .cg-latest-workgrid--2up { grid-template-columns: repeat( 2, 1fr ); } .cg-latest-workgrid--1up { grid-template-columns: 1fr; } .cg-latest-worktile { position: relative; display: block; overflow: hidden; aspect-ratio: 640 / 560; background: var( --cg-ink-85 ); text-decoration: none; } .cg-latest-worktile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier( 0.16, 1, 0.3, 1 ); } .cg-latest-worktile:hover img { transform: scale( 1.04 ); } .cg-latest-workov { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient( 180deg, rgba( 14, 14, 12, 0 ) 0%, rgba( 14, 14, 12, 0.86 ) 100% ); pointer-events: none; } .cg-latest-workcap { position: absolute; left: 30px; right: 30px; bottom: 28px; z-index: 2; } .cg-latest-worklbl { display: block; font-family: var( --font-sans ); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var( --cg-cream ); opacity: 0.82; } .cg-latest-workname { display: block; margin-top: 8px; font-family: var( --font-serif ); font-weight: 400; font-size: 26px; line-height: 1.06; letter-spacing: -0.6px; color: var( --cg-cream ); } .cg-latest-worknext { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 52px; font-family: var( --font-sans ); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var( --accent ); text-decoration: none; } @media ( max-width: 1024px ) { .cg-latest-workgrid { grid-template-columns: 1fr 1fr; } / Repeated inside the query: the two-column rule above is later in the file at equal specificity, so the base --1up would lose to it and a single tile would sit beside an empty cell at tablet width. */ .cg-latest-workgrid--1up { grid-template-columns: 1fr; } } @media ( max-width: 680px ) { .cg-latest-workgrid { grid-template-columns: 1fr; } }