/* Design tokens — variation layer (§3). Inlined into every page's by build-site.mjs (INLINE_STYLES token) — this exact file ships verbatim to every site, so keep this header short: it is public page source now, not just an authoring note. Full history of the 2026-08-24 injection fix and the palette/type blocks added below: docs/corrections_register.md. Axes 3 (hero) and 4 (section order) are HTML arrangement, not CSS — not addressed here. */ :root { /* Palette — DEFAULT is p1's values (deep slate / amber), restated explicitly in the p1 block below rather than left as an implicit fallback nothing else matches — every palette is an equally real rule now, not four overrides plus one accidental default. */ --ink: #1b2027; --ink-soft: #4a525c; --surface: #f7f6f3; --surface-alt: #ffffff; --line: #ddd9d2; --field-border: #96948F; /* 3.03:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #c8791a; --accent-ink: #ffffff; /* Link colour. Derived from --accent but darkened for body-text contrast: the raw accent is tuned to carry white text on a button, not to be read as 1rem text on a light surface. Recomputed per palette below rather than left to inherit one palette's value. */ --link: #9a5a11; /* Type — axis 2, DEFAULT matches t1 */ --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: -0.02em; --head-transform: none; /* Scale */ --step-0: 1rem; --step-1: 1.15rem; --step-2: 1.45rem; --step-3: 1.9rem; --step-4: 2.4rem; --space: 1rem; --radius: 6px; --measure: 68ch; /* CONTAINER (2026-08-26). Was hardcoded inside .wrap as min(100% - 2rem, 1120px). A token, because a design direction legitimately sets its own container width and a hardcoded one forces every direction to the portfolio default. 1120px stays the default for a site with no direction; direction 160 overrides it to SummitRoof's 1280px. GATE 1B now asserts that a direction claiming a container_max_width actually declares it. */ --container: 1120px; /* Responsive gutter, adopted from the SummitRoof container (16 / 24 / 32px). */ --container-pad: 1rem; } /* ============================================================ AXIS 1 — PALETTE. Values from variation-layer.md's own table, verbatim. --ink-soft / --surface-alt / --accent-ink are NOT varied per palette (not in that table) — they stay at the :root default above for every palette. Known gap, not an oversight to miss. ============================================================ */ body[data-palette="p1"] { --ink: #1b2027; --surface: #f7f6f3; --accent: #c8791a; --link: #9a5a11; } /* deep slate / amber */ body[data-palette="p2"] { --ink: #16241d; --surface: #f5f4ef; --accent: #b5502f; --link: #8d3d22; } /* forest / clay */ body[data-palette="p3"] { --ink: #111a2e; --surface: #f4f6f9; --accent: #1f5fbf; --link: #1a4e9c; } /* navy / signal blue */ body[data-palette="p4"] { --ink: #232323; --surface: #f6f3f0; --accent: #a8442c; --link: #8a3722; } /* charcoal / rust */ body[data-palette="p5"] { --ink: #241f1a; --surface: #f8f5ef; --accent: #8a6b1f; --link: #6d5417; } /* ironbark / ochre */ /* p6 — direction-library.md 004 "Coastal Split". The first palette taken from that library rather than authored here, and the first carrying roles beyond ink/surface/accent. Contrast measured 2026-08-26: sea on foam 11.67:1, deep-green on foam 7.47:1, sea on coral 3.85:1 (AA-large, and the .call button is 23px/700 so that is the applicable threshold), sea on sand 7.37:1. Coral is 3.03:1 on foam and is therefore NEVER used for text. */ body[data-palette="p6"] { --ink: #093A4A; /* sea */ --ink-soft: #456b79; /* 5.51:1 on foam — small note text still clears AA */ --surface: #F4FBFA; /* foam */ --surface-alt: #ffffff; --line: #cfe2e2; --field-border: #8B9797; /* 3.01:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #E66B55; /* coral — signal only, never text */ --accent-ink: #093A4A; /* sea on coral, 3.85:1 */ --link: #35594A; /* deep green, 7.47:1 */ --sand: #D9C7A3; --deep-green: #35594A; } /* p7 — direction-library.md 160 "Coastal Summit". Central Coast water-and-sky palette, taken from the operator-approved reference render (2026-08-26). Six roles beyond ink/surface/accent, because the direction genuinely uses them: three ocean depths carry the dark bands, gold carries rules and edges, coral carries action. CONTRAST MEASURED 2026-08-26, not eyeballed (figures recorded in the deploy log): body #22333B on white 13.09:1 · on sky 11.87:1 headings #083F4F on white 11.45:1 · on sky 10.39:1 --ink-soft #5A6E77 on white 5.34:1 · on sky 4.85:1 --link #B5432B on white 5.52:1 · on sky 5.01:1 white on --accent #E66B55 is 3.18:1 — AA-LARGE ONLY. Coral is therefore NEVER a ground for normal-size text. Everything that sits on coral in this palette is >=19px at weight 700 (the .call button is 23.2px/700; the CTA band's own copy is forced to 700 and >=19.2px by the direction stylesheet), which is the size threshold AA-large applies at. white on --ocean-deep 11.45:1 · on --ocean 7.43:1 · gold-bright on --ocean-deep 7.22:1 --ocean-deep on --gold 6.23:1 (the tag/eyebrow chip) */ body[data-palette="p7"] { --ink: #22333B; /* body text */ --ink-soft: #5A6E77; /* muted */ --surface: #FFFFFF; --surface-alt: #EAF6F9; /* sky */ --line: #E1ECF0; --field-border: #878E90; /* 3.02:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #E66B55; /* coral — action only, never a ground for normal-size text */ --accent-ink: #FFFFFF; --link: #B5432B; /* deepened coral: the raw #C74E36 is 4.17:1 on sky and fails AA there */ --ocean-bright: #0F7A94; --ocean: #0B5D73; --ocean-deep: #083F4F; /* headings, dark bands, footer */ --sky: #EAF6F9; --gold: #E8B93C; /* rules, edges, chips — never text on a light ground (1.84:1) */ --gold-bright: #F2C94C; --coral-dark: #D4573F; --coral-text: #B5432B; } /* p8 — direction-library.md 161 "Ipswich Precision". Base navy is the licensed Precision kit's own --text-color (#023750), locked by operator directive 2026-08-28; accent is Structural Teal (#0E7A93), chosen to sit clear of orange (Raise My House owns it on the Ipswich SERP), red, yellow-green and purple. CONTRAST MEASURED 2026-08-28 (sRGB relative luminance, not eyeballed): navy #023750 on white 12.61:1 (ink for body/headings, comfortably clears AA at any size) --ink-soft #4A6579 on white 6.12:1 (muted/secondary text) teal #0E7A93 on white 4.97:1 — clears AA for EVERY text size, not just large/bold. Unlike p1's accent (darkened separately for --link, see that block's own comment) or p7's coral (AA-large only), this accent needed no separate darkened --link value: the raw teal already clears normal-text AA on its own, so --link reuses it directly. white on teal (button fill, same ratio, direction of comparison does not change it) 4.97:1. */ body[data-palette="p8"] { --ink: #023750; --ink-soft: #4A6579; --surface: #FFFFFF; --surface-alt: #EEF7F8; /* pale teal tint, for band backgrounds */ --line: #DCE6E9; --field-border: #888F90; /* 3.03:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #0E7A93; --accent-ink: #FFFFFF; --link: #0E7A93; /* same as accent — already 4.97:1 on white, no darkening needed */ } /* p9 — direction 162's palette, derived from the licensed Renovast kit's own scheme-05 (css/colors/scheme-05.css), the eucalypt-green scheme, for houseraisingsunshinecoast.au. Chosen against the SERP: every ranking competitor on the Sunshine Coast house-raising SERP is blue, and it separates cleanly from site 2's deep teal (p8). CONTRAST CORRECTION — the kit's own primary cannot carry text at body size. scheme-05's --primary-color is #4F8A5B. Measured against white it is 4.10:1, which is BELOW the 4.5:1 WCAG AA floor for normal-size text. The kit uses it for button backgrounds under 16px bold white type — 16px bold is NOT "large text" by WCAG (that needs 18.66px bold or 24px normal), so the kit ships a real AA failure there and we cannot copy it verbatim. Resolved by splitting the tone rather than abandoning the scheme: --accent #457C50 darkened eucalypt, 4.94:1 with white — carries ALL text-bearing surfaces (buttons, links, the call CTA) --accent-bright #4F8A5B the kit's literal scheme-05 primary, kept exact, for surfaces that carry NO body-size text — decorative bands, rules, icon fills, large display headings (>=24px, where 3:1 applies and it passes) Both are genuinely the scheme; only the text-bearing one is darkened. Measured with the sRGB relative-luminance formula, not estimated. */ body[data-palette="p9"] { --ink: #234233; /* scheme-05's own --bg-dark-1 — 11.06:1 on white */ --ink-soft: #5A6E60; /* 5.48:1 on white — secondary text, still AA at body size */ --surface: #FFFFFF; --surface-alt: #F4F8F3; /* scheme-05's own --bg-light, exact */ --line: #D8E3D6; --field-border: #8A9189; /* 3.01:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #457C50; --accent-ink: #FFFFFF; --accent-bright: #4F8A5B; /* the kit's literal primary — non-text surfaces only, see above */ --link: #457C50; } /* p10 — PERTH BORE WATER. Blue (water) primary, green (lawn) secondary, operator directive 2026-08-29 for direction 163. Every value below was MEASURED with tools/build/contrast.mjs, not chosen by eye — the same discipline that caught direction 162 shipping a 4.10:1 accent. THE MEASUREMENT THAT DECIDED THE GREEN. The obvious "lawn" greens fail body text on white: #3E9C57 is 3.44:1 and #2F8A4C is 4.32:1 — both look perfectly healthy and both are below the 4.5:1 AA floor. #2E7D46 is 5.07:1 and is what ships for anything text-bearing. The vivid green is kept EXACTLY as --accent-bright for decorative, non-text surfaces only, so the palette keeps the colour the brief asked for without putting it under words. Distinct from p8 (Ipswich navy #023750 + teal #0E7A93) and p9 (Sunshine Coast eucalypt) — the collision rule in assignments.md is on the combination, and this is a new palette, new type pairing and a different metro. */ body[data-palette="p10"] { --ink: #0B3C5D; /* deep bore-water blue — 11.55:1 on white, 10.50:1 on --surface-alt */ --ink-soft: #4A6B80; /* 5.67:1 on white, 5.15:1 on --surface-alt — AA at body size */ --surface: #FFFFFF; --surface-alt: #EFF5F9; /* pale water tint */ --line: #CFE1EC; /* hairline — see the 1.4.11 note in the corrections register */ --field-border: #838F96; /* 3.02:1 on the field ground and on white — WCAG 1.4.11 */ --accent: #2E7D46; /* lawn green, 5.07:1 on white, 4.62:1 on --surface-alt */ --accent-ink: #FFFFFF; /* 5.07:1 on --accent */ --accent-bright: #3E9C57; /* 3.44:1 — NON-TEXT SURFACES ONLY, never under words */ --link: #12557F; /* 7.98:1 on white — blue, deliberately not the green CTA colour */ } /* p11 — AXIAL CHARCOAL. Site 5, sydneyconcretecancerrepair.au, direction 164. Derived from the Axial Construct kit (templates/licensed/axial-construct/), whose own palette is amber #FFC631 (29 uses, the dominant accent), navy #001F3F (16), and a charcoal family #202C38 / #162739. Measured from the kit's css/index2.css, not eyeballed. CHARCOAL, NOT THE KIT'S NAVY — a deliberate departure. #001F3F is a deep navy and p10 (site 4) is already built on navy #0B3C5D; two remedial/trade sites in the same blue would read as one operator to anyone who saw both. The brief asks for dark charcoal, and the kit supplies one. AMBER IS A GROUND, NEVER TEXT. #FFC631 measures 1.57:1 on white — it cannot carry text and cannot be a link. It is the chip/step-number/card-edge colour, with --accent-ink the charcoal at 9.54:1 on it. This is the same shape as p6's coral, and the reason --accent-ink exists. WHITE ON AMBER IS 1.57:1 AND WAS MEASURED BEFORE THIS SHIPPED — the default --accent-ink of #ffffff would have failed every badge and step number on the site. THE LINK IS A DARKENED AMBER, not a third hue. #7A4E00 is the same warm family taken down until it clears AA on both grounds, so the site reads as charcoal + one warm accent as briefed rather than acquiring a blue it was never given. */ body[data-palette="p11"] { --ink: #1E2830; /* charcoal — 14.99:1 on white, 13.82:1 on --surface-alt */ --ink-soft: #4A555E; /* 7.63:1 on white, 7.04:1 on --surface-alt — secondary text */ --surface: #FFFFFF; --surface-alt: #F4F6F7; --line: #D5DBDF; /* hairline — decorative rules only, 1.4.11 does not apply */ --field-border: #8A8E91; /* 3.05:1 on the field ground, 3.30:1 on white — WCAG 1.4.11 */ --accent: #FFC631; /* kit amber — GROUND ONLY, 1.57:1 on white, never text */ --accent-ink: #1E2830; /* charcoal on amber, 9.54:1 — NOT the #ffffff default, which is 1.57:1 */ --link: #7A4E00; /* darkened amber — 7.20:1 on white, 6.64:1 on --surface-alt */ } /* p12 — "Gold Coast Tideline". balconywaterproofinggoldcoast.au (site 6), direction 165. Ocean blue base + warm accent, both taken from the SummitRoof kit+s own ramps (steel / ember) and then CORRECTED BY MEASUREMENT — tools/build/contrast.mjs, 2026-09-01, every pair measured on BOTH grounds, never eyeballed. THE SERP SAYS BLUE. Direction 162 went green precisely because every competitor on its SERP was blue; here the instruction is the opposite and the dig agrees — Surface Waterproofing (organic #4, map-pack #2) ships a split blue panel and Blutec (#2) a navy. Belonging next to them is the brief. TWO COLOURS FAILED AND BOTH LOOKED FINE. The kit+s --ring #EF5F1A is 3.32:1 on white — the same healthy-looking body-text failure directions 162 (#4F8A5B, 4.10) and 163 (#3E9C57, 3.44) each recorded, now three for three. And #CE420C PASSES on white at 4.76:1 but FAILS as body text on --surface-alt at 4.29:1 — fine on one ground, not the other, which is why every pair here is measured on both. --accent is therefore #B83609: passes as text on white (5.88) and tint (5.30) AND as a ground with white on it (5.88). One value, safe in every direction it is used. */ body[data-palette="p12"] { --ink: #143551; /* steel-900 — 12.67:1 on white, 11.41:1 on --surface-alt */ --ink-soft: #5A6B7B; /* slate-500 — 5.49:1 on white, 4.95:1 on --surface-alt */ --surface: #FFFFFF; --surface-alt: #EDF4FA; /* steel-50 — the ocean tint */ --line: #CBD5E1; /* slate-200 hairline — decorative rules only, 1.4.11 does not apply */ --field-border: #7B8B9D; /* slate-400 — 3.49:1 on white, 3.14:1 on tint; WCAG 1.4.11 on both */ --accent: #B83609; /* ember-700 — text 5.88 white / 5.30 tint; ground 5.88 with white */ --accent-ink: #FFFFFF; /* on --accent, 5.88:1 */ --accent-bright: #EF5F1A; /* ember-500 — 3.32:1, DECORATIVE SURFACES ONLY, never text, ever */ --link: #184D7C; /* steel-700 — 8.78:1 on white, 7.91:1 on --surface-alt */ } /* p13 — "Brisbane Slate". balconywaterproofingbrisbane.au (site 7), direction 166. Slate charcoal base + deep steel accent, both taken from the SAME SummitRoof ramps p12 draws on, and then measured on BOTH grounds with tools/build/contrast.mjs, 2026-09-02. Same kit as p12, deliberately the opposite end of it: p12 is steel ink with a warm ember accent, p13 is slate ink with a cool steel accent, so the two sites in this niche do not read as one operator. THE BRISBANE SERP DOES NOT SAY BLUE, WHICH IS WHY THIS IS NOT p12 AGAIN. p12's brief was "belong next to them" on a uniformly blue Gold Coast page 1. Brisbane's page 1 is polychrome — Megasealed green #009D65, Remedial Property blue #006BBD, S&S Remedial terracotta #CE6348, SealedUp indigo #5D4FFF (design read, 2026-09-02). With no house colour to match or avoid, the palette is chosen on register: the Brisbane set sells on licensing and liability, and slate over steel is a remedial-contractor register rather than a coastal one. ⚠ CORRECTED 2026-09-02 (same day). This read "licence/QBCC mentions run 34/15/8/3 across the top four" — case-insensitive grep counts over raw HTML, where the 8 was a lowercase `qbcc.png` filename repeated across one srcset, not copy. On VISIBLE COPY the four ranking pages read 10 / 3 / 0 / 0. The claim survives on better evidence: two of the four publish a real QBCC licence number (15438819, 15390235), two more do nearby (15116048, 15118532), and the second term's People-Also-Ask block is entirely insurance-and-responsibility framed. See validation/balcony-waterproofing-brisbane-competitor-coverage-2026-09-02.md and docs/corrections_register.md, 2026-09-02. TWO COLOURS FAILED ON THE TINT AND BOTH PASSED ON WHITE — the same ground-dependent failure class p12 recorded for #CE420C, and the reason every pair here is measured twice: #2A6FA8 (steel-500) 5.33:1 on white, 4.49:1 on the tint. Under 4.5 by 0.01. DECORATIVE ONLY. #7B8B9D (slate-400) 3.49:1 on white, 2.94:1 on the tint — under WCAG 1.4.11's 3:1 for a control boundary. It is p12's --field-border and it CANNOT be reused here: it clears on p12's lighter #EDF4FA and fails on this darker #E7ECF2. --field-border is slate-500 #5A6B7B instead (5.49 / 4.62). That second one is worth stating plainly: a token carried over unchanged from a sibling palette in the same kit still has to be re-measured, because the ground moved underneath it. */ body[data-palette="p13"] { --ink: #202A34; /* slate-800 — 14.56:1 on white, 12.26:1 on --surface-alt */ --ink-soft: #435465; /* slate-600 — 7.79:1 on white, 6.56:1 on --surface-alt */ --surface: #FFFFFF; --surface-alt: #E7ECF2; /* slate-100 — a cool grey tint, not p12's ocean #EDF4FA */ --line: #CBD5E1; /* slate-200 hairline — decorative rules only, 1.4.11 does not apply */ --field-border: #5A6B7B; /* slate-500 — 5.49:1 on white, 4.62:1 on tint; 1.4.11 on both */ --accent: #184D7C; /* steel-700 — text 8.78 white / 7.39 tint; ground 8.78 with white */ --accent-ink: #FFFFFF; /* on --accent, 8.78:1 */ --accent-bright: #2A6FA8; /* steel-500 — 4.49:1 on tint, DECORATIVE SURFACES ONLY, never text */ --link: #1E5E96; /* steel-600 — 6.78:1 on white, 5.71:1 on --surface-alt */ } /* p14 — "Sydney Ledger". balconywaterproofingsydney.au (site 8), direction 167. Near-black slate over a darkened verified green. THIRD palette off the SummitRoof ramps after p12 and p13, and the one that has to work hardest: 165, 166 and 167 are all balcony waterproofing on one kit, so the layout system is shared by construction and the visual distance has to come from here and from t12. Measured on BOTH grounds with tools/build/contrast.mjs, 2026-09-03. THE SYDNEY SERP IS BLUE, WHICH IS WHY THIS IS NOT p13 AGAIN — and the instruction it produces is 162's, not 165's. Colour read of the five page-1 organic home pages fetched in full during the Agent 0d run (2026-09-03, #rrggbb occurrences in served HTML): sydneywaterproofingservices #1B60E0 royal + #1B98E0 sky | wsrg #17A8E0 cyan + #1D4354 slate-teal hillswaterproofing #0A72B6 mid blue | sydwaterproofingservices #2EA3F2 + #54A5DC sky endeavoureng neutral only, #3A3A3A / #000000, no brand hue FOUR OF FIVE ARE BLUE AND THE FIFTH IS NEUTRAL. No warm brand, no green anywhere on page 1. 165's brief was "the SERP is blue, belong next to them", which was right for the Gold Coast. This is the 162 case instead: 162 went green on the Sunshine Coast precisely BECAUSE its SERP was uniformly blue, and a fifth blue site in Sydney is the one thing guaranteed not to be told apart. p13's deep steel #184D7C is itself a blue and would land inside the SERP's own range. ⚠ Evidence grade, stated: page-level colour read of stored fetches, NOT an Agent 0c design SERP read — none exists for this niche x geo. Same grade 166 used, one grade below a real 0c pass. THE GREEN IS THE KIT'S OWN --success, DARKENED — the same move 162 and 163 made and for the same measured reason. #16A34A is the literal value in SummitRoof's :root status ramp and it is 3.30:1 on white / 3.04:1 on tint: A FAIL for body text, and the FOURTH kit primary in a row to look entirely healthy and fail this check (162's #4F8A5B 4.10, 163's #3E9C57 3.44, 165's #EF5F1A 3.32). It is kept EXACTLY as --accent-bright for non-text surfaces only. Every text-bearing green surface uses #136B34. ⚠ KNOWN PROXIMITY, RECORDED RATHER THAN LEFT TO BE NOTICED: #136B34 is in the same family as p10's #2E7D46 (direction 163, waterboreperth.au). Different niche, different metro, different state, so the ledger's collision rule is not engaged — but two mid-dark greens in one portfolio is a fact a reader should get from this comment rather than from a screenshot. THE FIELD-BORDER MEASUREMENT IS THE INTERESTING ONE, AND IT IS THE THIRD ANSWER THIS TOKEN HAS GIVEN. #7B8B9D (slate-400) is p12's --field-border at 3.49:1 on white / 3.14:1 on p12's tint; p13 recorded it FAILING at 2.94:1 on its darker #E7ECF2 and replaced it. On p14's lighter #F4F6F9 it CLEARS at 3.22:1. It is still not taken: 3.22 is a 0.22 margin on a WCAG 1.4.11 control boundary, and a token that has now flipped state twice across three grounds in one kit does not get a third chance on a 0.22 margin. --field-border is #5A6B7B (5.49 / 5.07) instead. The generalisable point is p13's and it survives its own second test: a token carried over from a sibling palette in the same kit must be re-measured, because the ground moved underneath it. */ body[data-palette="p14"] { --ink: #0C1116; /* slate-950 — 18.96:1 on white, 17.52:1 on --surface-alt */ --ink-soft: #33414F; /* slate-700 — 10.45:1 on white, 9.65:1 on --surface-alt */ --surface: #FFFFFF; --surface-alt: #F4F6F9; /* slate-50 — a third distinct tint, lighter than p12's #EDF4FA ocean and p13's #E7ECF2 cool grey */ --line: #CBD5E1; /* slate-200 hairline — decorative rules only, 1.4.11 does not apply */ --field-border: #5A6B7B; /* slate-500 — 5.49:1 on white, 5.07:1 on tint; 1.4.11 on both */ --accent: #136B34; /* darkened kit --success — text 6.60 white / 6.10 tint; ground 6.60 with white on it */ --accent-ink: #FFFFFF; /* on --accent, 6.60:1 */ --accent-bright: #16A34A; /* the kit's literal --success — 3.30:1 white / 3.04:1 tint. DECORATIVE SURFACES ONLY, never text, ever */ --link: #0F5C2C; /* 8.12:1 on white, 7.50:1 on --surface-alt — AAA on both */ } /* p15 — "Brisbane Ironbark". balconywaterproofingbrisbane.au (site 7), direction 166. REPLACES p13 ON THIS SITE, 2026-09-04 (operator directive: recolour 7 so it does not read as the same site as 6 and 8). p13 is NOT deleted — no other site holds it, but a palette that has shipped stays in the file, the same way a superseded direction row stays in the ledger. WHY p13 HAD TO GO, and it is a measurement rather than a matter of taste. p12 (site 6) is steel ink #143551 with a warm ember accent; p13 (site 7) was slate ink with a DEEP STEEL accent #184D7C — and #184D7C is p12's own `--link`. Two of the three balcony sites were therefore drawing from the same blue at different jobs, on a shared layout kit, in one niche. That is exactly the "visitor recognises two of our sites as one operator" risk the collision rule exists to manage, and the rule did not catch it because the rule tests the palette/type/hero/order COMBINATION, not whether two palettes share a hex. THE ACCENT IS THE LOUDEST ELEMENT ON THE PAGE, SO IT IS WHERE THE DISTANCE IS BOUGHT. The three balcony accents are now in three different hue families and no two are adjacent: p12 (site 6, Gold Coast) #B83609 ember, orange-red p15 (site 7, Brisbane) #0E5C63 petrol teal, blue-green p14 (site 8, Sydney) #136B34 green Ink moves with it: p12 and p14 are both cool (navy-steel, near-black slate), so p15 goes WARM — #2B2118 espresso — which changes the header and footer ground, the single largest block of colour on every page, on a site whose layout it cannot change. BRISBANE'S SERP PERMITS THIS, WHICH IS WHY IT IS NOT A GUESS. The 0d run records a polychrome page 1 — Megasealed green #009D65, Remedial Property blue #006BBD, S&S Remedial terracotta #CE6348, SealedUp indigo #5D4FFF. There is no house colour to match and none to avoid, so the choice is made on register and on distance from our own siblings rather than on SERP fit. That is the same reasoning p13 used; only the sibling set changed. EVERY PAIR MEASURED WITH tools/build/contrast.mjs ON BOTH GROUNDS BEFORE IT SHIPPED, 2026-09-04 (white / --surface-alt #F5F1EC): --ink #2B2118 15.75 / 14.01 --ink-soft #5C4B3A 8.32 / 7.40 --link #0B4A50 9.95 / 8.85 --accent #0E5C63 7.69 / 6.84, and 7.69 as a ground with white on it --field-border #8A7864 4.24 / 3.77 — WCAG 1.4.11 needs 3.0; this clears it on both --surface on --ink 15.75 (header/footer) ALL PAIRS PASS. Nothing here is inherited unmeasured from a sibling palette — the mistake p13 itself recorded when p12's `#7B8B9D` failed on p13's darker tint at 2.94. ⚠ `--field-border` IS DELIBERATELY NOT `#7B8B9D`. That token has now given four answers in four groundings across this kit (3.49 white, 3.14 p12 tint, 2.94 p13 tint, 3.22 p14 tint) and was refused on p14 for having only 0.22 of margin. #8A7864 is chosen instead because it is a warm neutral that belongs to THIS palette and clears the threshold by 0.77 on the tighter ground. --accent-bright is decorative only, never text: #17878F is 3.42:1 on white, which fails body. */ body[data-palette="p15"] { --ink: #2B2118; /* espresso — 15.75:1 on white, 14.01:1 on --surface-alt */ --ink-soft: #5C4B3A; /* warm mid-brown — 8.32:1 on white, 7.40:1 on tint */ --surface: #FFFFFF; --surface-alt: #F5F1EC; /* warm paper tint */ --line: #DDD3C7; /* hairline, decorative rules only, 1.4.11 does not apply */ --field-border: #8A7864; /* warm neutral — 4.24:1 white, 3.77:1 tint; WCAG 1.4.11 on both */ --accent: #0E5C63; /* petrol teal — text 7.69 white / 6.84 tint; ground 7.69 with white */ --accent-ink: #FFFFFF; /* on --accent, 7.69:1 */ --accent-bright: #17878F; /* 3.42:1 — DECORATIVE SURFACES ONLY, never text, ever */ --link: #0B4A50; /* deep teal — 9.95:1 on white, 8.85:1 on --surface-alt */ } /* ============================================================ AXIS 2 — TYPE PAIRING. Font stacks/weights from variation-layer.md's table. --head-tracking for t3 ("wide tracking", no table value) is an implementation choice, not a sourced fact. ============================================================ */ body[data-type="t1"] { --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: -0.02em; --head-transform: none; } body[data-type="t2"] { --font-head: Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: normal; --head-transform: none; } body[data-type="t3"] { --font-head: system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 800; --head-tracking: 0.04em; /* "wide tracking" — implementation choice, not sourced */ --head-transform: uppercase; } /* t5 — 004 specifies Manrope + Noto Sans. Both are web fonts; the no-external-request rule wins, so this reaches for the same register with system stacks. Documented as an approximation. */ body[data-type="t5"] { --font-head: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 800; --head-tracking: -0.025em; --head-transform: none; } body[data-type="t4"] { --font-head: "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: Georgia, serif; --head-weight: 600; --head-tracking: normal; --head-transform: none; } /* t6 — direction 160's pairing, and the FIRST self-hosted web-font pairing in the portfolio. t5 above is documented as an approximation precisely because pulling Manrope + Noto Sans from a font CDN would break the no-external-request rule. That rule is about EXTERNAL requests, not about web fonts as such: a woff2 served from our own origin makes no third-party request, leaks nothing to a font CDN, and costs one same-origin fetch cached across every page of the site. So t6 does literally what t5 could only approximate. Both faces are SIL Open Font License 1.1, downloaded 2026-08-26 from Google Fonts as the LATIN SUBSET of each family's VARIABLE font — one file per family covering the whole weight axis (Inter 48KB, Sora 25KB; 73KB for the entire type system, cached once per visitor). Canonical copies live at templates/design/fonts/. A site assigned t6 must carry them at /fonts/ — the GATE 4 pre-check fails a build whose CSS names a font file the build output does not contain, so a missing font is a blocked build rather than a silent fallback to system sans. */ @font-face { font-family: "Sora"; src: url("/fonts/sora-var-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Archivo — the Axial Construct kit's heading face (t10, site 5). SIL Open Font License 1.1, downloaded 2026-08-29 from Google Fonts as the LATIN SUBSET of the variable font: 34,928 bytes covering the whole 400-800 weight axis. Same rule as Sora above — a site assigned t10 must carry it at /fonts/ or the GATE 4 pre-check fails the build rather than falling back silently. */ @font-face { font-family: "Archivo"; src: url("/fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* INTER WAS DROPPED 2026-08-27 (operator directive). Body type now uses the reference render's own system stack, which costs no download at all; Inter was the larger of the two webfonts at 48KB and it was carrying body copy, where a system stack is indistinguishable at 16-19px on the devices this audience uses. Its @font-face block is removed rather than left dangling: the GATE 4 pre-check fails a build whose CSS names a font file the output does not carry, so an orphaned declaration would be a build failure, not dead code. */ body[data-type="t6"] { --font-head: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; /* Verbatim from concreting-central-coast-claude.html, line 30. */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --head-weight: 700; --head-tracking: -0.025em; --head-transform: none; } /* t7 — direction 161's pairing, and the SECOND self-hosted web-font pairing in the portfolio (added 2026-08-28). Unlike t6, BOTH faces are self-hosted here — Plus Jakarta Sans for headings, DM Sans for body — because that is the licensed Precision kit's own pairing (its CSS names both as web fonts; there is no system-stack fallback to reach for on the body face the way t6 dropped Inter). Latin-subset variable fonts, one file per family: 27KB + 36KB, 63KB total, cached once per visitor. Fetched directly from Google's CDN (same source the kit's own @import pointed at) rather than loaded via that import, so the deployed request stays same-origin. */ @font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-var-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; src: url("/fonts/dm-sans-var-latin.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body[data-type="t7"] { --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: normal; --head-transform: none; } /* t8 — direction 162's pairing. ONE family for both roles, which is what the Renovast kit actually does: custom-renovation.css sets --body-font AND --heading-font to "Poppins". It also @imports Inter alongside it — Inter is NEVER USED. The 14 "Inter" matches in the kit's style.css are all `cursor: poInter`, a mangled find-replace by the kit author, so the import costs the original a font download it never renders. Not carried across. THREE STATIC WEIGHTS, not a variable file, unlike t6/t7 — a constraint, not a preference: Poppins has no variable version on Google Fonts (`css2?family=Poppins:wght@300..700` returns `400: Font family not found`, checked at source 2026-08-28). 300/600/700 are exactly the weights the kit's token block renders; 23.6KB total, still under t7's 63KB. Fetched from Google's CDN and self-hosted, so the deployed request stays same-origin — the kit's own `@import url(fonts.googleapis.com...)` in custom-renovation.css is an external request §3 forbids and GATE 1 would refuse, so it is replaced, never inherited. */ @font-face { font-family: "Poppins"; src: url("/fonts/poppins-300-latin.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; src: url("/fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; src: url("/fonts/poppins-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body[data-type="t8"] { --font-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: -0.025em; --head-transform: none; } /* t9 — Sora headings + DM Sans body (2026-08-29, direction 163). Both faces are ALREADY self-hosted in this file for t6 and t7 respectively, so this pairing adds no new font file and no new request: it is a new combination of two files the portfolio already ships. Distinct from t6 (Sora + a system body stack) and t7 (Plus Jakarta Sans + DM Sans). Sora's geometric, slightly technical display cut suits a drilling trade; DM Sans keeps the body neutral underneath it. */ body[data-type="t9"] { --font-head: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 700; --head-tracking: -0.02em; --head-transform: none; } /* t10 — the Axial Construct kit's own pairing, Archivo for headings over Inter for body. The kit sets Archivo + Roboto; Roboto is not in this repo and Inter is the neutral grotesque already here — but Inter's @font-face was REMOVED on 2026-08-27 by operator directive, body type now riding the system stack because a system sans is indistinguishable from Inter at body size on this audience's devices and costs no download. That directive stands, so t10 is ONE webfont: Archivo for headings, system stack for body. The kit's Roboto is the first named fallback, which is what most Android devices resolve to anyway. */ body[data-type="t10"] { --font-head: "Archivo", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --head-weight: 700; --head-tracking: -0.015em; --head-transform: none; } /* t11 — Sora display over the portfolio system stack. Direction 165 / site 6. The SummitRoof kit pairs Sora with Inter. INTER IS NOT AVAILABLE: its @font-face was removed portfolio-wide on 2026-08-27 by operator directive and that directive stands, so t11 is ONE webfont over the system stack — the same shape as t10 and for the same reason. Sora is already self-hosted for t6 and t9, so t11 adds NO new font file and NO new request. Distinct from t9 (Sora + DM Sans) on the body face. */ body[data-type="t11"] { --font-head: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --head-weight: 700; --head-tracking: -0.02em; --head-transform: none; } /* t12 — Plus Jakarta Sans display over Archivo body. Direction 167 / site 8. TWO WEBFONTS, AND BOTH ARE ALREADY HERE: plus-jakarta-sans-var-latin.woff2 is self-hosted for t7 and archivo-var-latin.woff2 for t10, so t12 adds NO new font file — only a new fonts.json entry naming the two that already exist. FIRST PAIRING IN THE PORTFOLIO WHERE ARCHIVO IS THE BODY FACE, and that is the whole point rather than a curiosity. 166 holds Archivo as its DISPLAY face in this same niche (balcony waterproofing, Brisbane). 165, 166 and 167 share one kit and therefore one layout system, so type is one of only two levers carrying the visual distance between them — reusing Archivo as display here would have handed the reader the single strongest cue that the two sites are one operator. Demoting it to body and putting Plus Jakarta Sans's humanist geometry on top inverts the relationship instead. NOT the system stack for body, unlike t10 and t11. Those two ride the system stack because the Inter @font-face was removed portfolio-wide on 2026-08-27 and neither kit's body face survived that. Here the body face is one this repo already ships, so the site gets a real pairing at no additional request — and on h3, where there is no photograph, the type IS the composition. */ body[data-type="t12"] { --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --head-weight: 700; --head-tracking: -0.02em; --head-transform: none; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--step-1); line-height: 1.6; -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); text-transform: var(--head-transform); line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } p, li { max-width: var(--measure); } /* ANCHOR TARGETS vs A STICKY HEADER. A fragment jump scrolls the target to the very top of the viewport, which is underneath a sticky header — measured at 95px tall, so #quote landed 95px out of sight on every page that links to it. scroll-padding-top on the scrolling element is the fix for the whole document at once, rather than scroll-margin-top repeated on each target and forgotten on the next one. Zero by default; a direction with a sticky header sets the variable (see directions/160.css). */ html { scroll-padding-top: var(--sticky-offset, 0px); } .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } @media (min-width: 48rem) { :root { --container-pad: 1.5rem; } } @media (min-width: 64rem) { :root { --container-pad: 2rem; } } /* padding-BLOCK, not the `padding` shorthand. FOUND 2026-08-27 by measuring a page rather than reading it: this rule was `padding: calc(var(--space) * 3) 0`, which sets all four sides. Every template that writes
— and most of them do — got its inline padding zeroed by it, because .section is declared after .wrap at the same specificity. Consequence, measured at 1440px on /faq/: the header, breadcrumb and hero all started their text at 192px and the section headings started at 160px, a 32px stagger down the page. At 390px it was worse than cosmetic — section text sat at x=0, hard against the viewport edge with no gutter at all, while everything above it was inset 16px. A shorthand that only means to set two sides is how a container loses the other two. */ .section { padding-block: calc(var(--space) * 3); } .section--alt { background: var(--surface-alt); } .section > .wrap > :is(h2, h3) + p { margin-top: 0.35em; } /* SECTION HEAD — the reference render's treatment, restored 2026-08-27 (operator directive, final). Eyebrow, heading, gold bar, ALL LEFT-ALIGNED, and no supporting lead paragraph. This replaces SummitRoof's .sr-section-head, which was centred with a 640px lead. That was carried for a day on an earlier directive and is now reversed: the reference render (concreting-central-coast-claude.html) left-aligns every section head, and the eyebrow is an inline-block there for the same reason it is here — it is a chip of text, not a full-width row. NOTHING IS DECLARED HERE. The left-aligned, inline-block, no-lead state is what the base stylesheet already produces; the centred version was the addition. It is removed rather than overridden, so there is no pair of competing rules for the next reader to reconcile. The .lead class and its 640px measure are gone with it — no template emits one any more. */ /* LINKS. Until 2026-08-26 there was NO global anchor rule at all, so every non-.call link on every page of every site rendered as a default browser blue/purple underline — including the brand and the whole primary nav. Palette assignment is meaningless if the most repeated element on the page ignores it. */ a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 0.15em; } a:hover { text-decoration-color: currentColor; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* SITE HEADER — a real bar, not naked links on the page background. Ink ground so the tracked phone reads as the primary action against it, which is the whole point of the trust surface. */ header { background: var(--ink); color: var(--surface); padding-block: calc(var(--space) * 0.9); } .header__inner { display: grid; gap: 0.65rem 1.5rem; grid-template-areas: "brand" "call" "nav" "note"; align-items: center; } header .brand { grid-area: brand; } header .brand a { color: var(--surface); text-decoration: none; font-family: var(--font-head); font-size: var(--step-2); } /* FIXED 2026-08-26: this was `header > .call`, which matches nothing — the button is a child of .header__inner, not of
. grid-area and justify-self were both being dropped, so the phone button stretched across the full header width at every viewport below 60rem, on every site in the portfolio. Caught by the 390px render check, not by any gate: a stretched button is valid CSS and valid HTML. */ header .header__inner > .call { grid-area: call; justify-self: start; } header nav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; } header nav > a, header .nav__dd > summary { color: var(--surface); text-decoration: none; font-family: var(--font-head); font-size: var(--step-0); padding-block: 0.3rem; border-bottom: 2px solid transparent; } header nav > a:hover, header .nav__dd > summary:hover { border-bottom-color: var(--accent); } header .note { grid-area: note; color: color-mix(in srgb, var(--surface) 72%, transparent); margin: 0; font-size: 0.9rem; max-width: none; } @media (min-width: 60rem) { .header__inner { grid-template-areas: "brand nav call" "note note call"; grid-template-columns: auto 1fr auto; } header nav { justify-content: flex-start; } } /* MOBILE HEADER HEIGHT (2026-08-29, operator directive, portfolio-wide). Below 60rem the header is four stacked rows — brand, call, nav, note — and it was eating a quarter to nearly half of a phone viewport before any content: measured at 390x844, 194px on centralcoastconcreting.com, 253px on houseraisingipswich.au, 372px on houseraisingsunshinecoast.au. On the last of those the header alone was 44% of the fold, and it was the largest single reason the /suburbs/ and /faq/ headings still fell outside it after the hero was cut by 41%. THREE OF THESE FOUR RULES ARE PROMOTED, NOT INVENTED. They were measured and shipped in directions/160.css on 2026-08-27 (224px -> 194px on that one site) and are moved here verbatim so every direction inherits them instead of one. That file's working also records two alternatives already tried and REJECTED on measurement — do not retry them without new numbers: - .brand and .call on ONE row made it WORSE (252px): the call button is ~221px wide and must stay at its AA-large size floor, leaving ~113px for the brand, which then wraps to three lines and the single row grows taller than the two it replaced. - Tightening nav padding-block to fit more links per row cut tap targets from 37px to 32px to buy 12px of height. Above the WCAG 2.5.8 24px floor, but paying for header height with hit area on a phone is the wrong trade. The nav row-gap is deliberately NOT zeroed (4px more) — it is the only separation between two rows of adjacent links, and mis-tap protection is worth more than 4px. The nav stays two rows; its six labels are identical on every site in the portfolio, so that count is stable. The fourth rule, the brand size, is new. It exists because a long brand wrapped to two lines: "House Raising Sunshine Coast" cost 81px where a one-line brand costs 37px. It is a clamp, not a nowrap — `white-space: nowrap` would send the portfolio's longest brand ("Roof Restoration Gosford / Central Coast", 40 characters) off the side of a 390px screen, and a header that overflows is worse than a header with a two-line brand. Long names still wrap; they just wrap later. */ @media (max-width: 59.99rem) { header { padding-block: 0.4rem; } .header__inner { gap: 0.35rem 1.5rem; } header .brand a { font-size: clamp(0.95rem, 3.7vw, var(--step-2)); } /* The service-area statement is §6's State-1 substitute for a street address, so hiding it here would matter if this were the only place it appeared. It is not: templates/partials/footer.html renders the same "Servicing ..." area line in the footer of every page of every site — verified across /suburbs/, /faq/, /pricing/, /contact/ and /privacy/ on all three live sites before this rule was generalised. What mobile does lose is the response-promise sentence that follows it, which is a service claim and not a §6 or §10 disclosure; the ACL disclosure line GATE 2 checks for lives in the footer and is untouched. Desktop keeps both, as before. */ header .note { display: none; } } /* HERO — 55/45 split-panel composition, the assigned signature move. */ /* padding-block was declared here as `calc(var(--space) * 2.5)` and was DEAD — a second `.hero` rule further down this same file (search "Hero — arrangement varies") sets `padding` at the same specificity and later in the cascade, so 2.5x never applied to any page on any site. Removed 2026-08-29 after measuring both: computed hero geometry is byte-identical before and after, on every page type at 1440/1024/768/390. Two rules for one property in one file is how an edit gets made to the half that has no effect. */ .hero { background: var(--surface-alt); border-bottom: 1px solid var(--line); } /* Breadcrumb sat flush against the viewport edge while every other element was inside the 1120px column, so the trail did not line up with the H1 beneath it. */ .crumb { padding-block: 0.75rem; font-size: 0.9rem; color: var(--ink-soft); } /* align-items: START, not center. The copy column carries the quote form and is far taller than the image; centring left the image floating low with a large void above it, which read as a layout bug rather than a composition. Top-aligned, the image sits beside the headline. */ /* RESTRUCTURED 2026-08-26: the hero grid s two columns are now COPY and FORM, not copy and image. The image moved OUT of the grid to a direct child of .hero, because a hero photo is a background treatment in some directions (160 Coastal Summit) and a side panel in others (004 Coastal Split) — it cannot be both while it occupies a grid track. Directions position .hero__media themselves. */ .hero__grid { display: grid; gap: calc(var(--space) * 2); align-items: start; } .hero__copy > :first-child { margin-top: 0; } .hero__copy .call { margin-block: var(--space); } .hero__bluf { font-size: var(--step-2); line-height: 1.5; } @media (min-width: 60rem) { /* Copy left, quote form right. The form is the narrower half: it is a fixed set of fields, and giving it the wider track only stretches the inputs. The trust list sits under the copy in the left column while the form spans both rows — named areas rather than source order, because the source order is set by the 390px fold (see 1-home.html). */ .hero__grid { grid-template-columns: 55fr 45fr; grid-template-areas: "copy form" "trust form"; align-items: start; } .hero__grid > .hero__copy { grid-area: copy; } .hero__grid > .hero__form { grid-area: form; } .hero__grid > .trust { grid-area: trust; } .hero h1 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); } } /* Constrained, never a full-height photo dump: the image is cropped to a landscape band that sits above the hero copy. A direction that wants it behind the copy repositions it (see 160). */ .hero__media { margin: 0 0 var(--space); } .hero__media img { aspect-ratio: 16 / 7; object-fit: cover; max-height: 22rem; border-radius: 0; } .hero__form > .form { max-width: none; } /* COMPACT HERO — the /suburbs/ and /faq/ page types only (2026-08-29, operator directive after the defect was found on all three live sites). Those two pages are reached by clicking a nav tab, and the thing the visitor came for is the section BELOW the hero: the suburb list, or the cost answer. Measured before changing anything, at 390x844: the first content heading sat 42px below the fold on houseraisingipswich.au and 203px below it on houseraisingsunshinecoast.au — the tab landed on a title card and the answer needed a scroll. Home, service, location, pricing and contact keep the full hero: on those pages the hero IS the page. WHY THE SELECTOR CARRIES `body[data-direction]`, which looks redundant. A direction stylesheet is appended AFTER this file (build-site.mjs), and its hero rules are written `body[data-direction="160"] .hero` — specificity (0,2,1). A plain `.hero--compact` (0,1,0) or `body .hero--compact` (0,1,1) loses to it, silently, on exactly the site with the tallest hero. `body[data-direction] .hero.hero--compact` is (0,3,1): it beats the direction's own .hero rules regardless of file order, and a direction that genuinely wants its own compact treatment still overrides it by writing `body[data-direction="160"] .hero.hero--compact` — same specificity, later in the cascade. That escalation path is used by directions/160.css, which has to shorten its shoreline wedge to match. Every template emits data-direction unconditionally (it is `""` for a site with no direction), so the attribute is always present and this never fails to match. NOTHING IS HIDDEN. The BLUF is the quotable answer AI engines lift (§8) and every word of it still renders — it is set at the body step instead of --step-2, which is what "compact" means here. No clamping, no truncation, no display:none. */ body[data-direction] .hero.hero--compact { padding-block: calc(var(--space) * 1.25) calc(var(--space) * 1.5); } /* A wayfinding title, not the conversion headline — it names the page, it does not sell. */ body[data-direction] .hero.hero--compact h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 0.35em; } body[data-direction] .hero.hero--compact .hero__bluf { font-size: var(--step-0); line-height: 1.55; margin-block: 0; } body[data-direction] .hero.hero--compact .call { margin-block: calc(var(--space) * 0.85) 0; } /* And the gap BELOW it. A compact hero is a title card, and 64-100px of air between a title card and the content it introduces is the same defect at a smaller scale — it is section rhythm doing a job it was not asked to do. Halved on the viewport where it costs the most, and scoped to the adjacent sibling so it can only ever affect a page that declares the compact hero: section rhythm everywhere else on every page type is untouched. */ @media (max-width: 47.99rem) { body[data-direction] .hero.hero--compact + .section { padding-block-start: calc(var(--space) * 2); } } /* SEA-COLOURED COPY PANEL — direction 004's hero_treatment, verbatim: "a sea-coloured copy panel carries the local-climate BLUF." Opt-in via --panel-ink, so it activates only on a palette that defines one (p6 today) and every other palette keeps the plain hero it had. A design direction must not silently repaint five palettes it was never assigned to. */ .hero__copy { --panel-pad: 0; } body[data-palette="p6"] .hero__copy { --panel-pad: calc(var(--space) * 1.75); background: var(--ink); color: var(--surface); padding: var(--panel-pad); border-radius: var(--radius); } body[data-palette="p6"] .hero__copy :is(h1, .hero__bluf) { color: var(--surface); } body[data-palette="p6"] .hero__form .form label { color: var(--ink); } body[data-palette="p6"] .hero__copy .consent { color: color-mix(in srgb, var(--surface) 78%, transparent); } /* The quote form is no longer inside .hero__copy (see the hero restructure note above), so p6 s dark-panel treatment no longer inverts it. That is the behaviour the original rule wanted anyway: its own comment said the form controls stay on a light ground inside the dark panel. */ body[data-palette="p6"] .hero__copy .consent a { color: var(--sand); } /* The form's own controls stay on a light ground inside the dark panel — inverting inputs as well makes a quote form read as decoration rather than something to fill in. */ body[data-palette="p6"] .hero__form :is(input, select, textarea) { background: #fff; color: var(--ink); } /* SAND-TONED PRICE TABLE — 004's system_fit: "sand-toned price tables continue". */ body[data-palette="p6"] .prices caption { color: var(--ink); } body[data-palette="p6"] .prices thead th { background: var(--sand); color: var(--ink); } body[data-palette="p6"] .prices tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--sand) 26%, transparent); } body[data-palette="p6"] .prices th, body[data-palette="p6"] .prices td { border-bottom-color: color-mix(in srgb, var(--sand) 70%, transparent); } /* CLIMATE-NOTE CALLOUT — 004's system_fit: "climate-note callouts ... continue". Presentation only: it styles a paragraph of ALREADY-SOURCED weather/drainage copy. It never licenses a new climate claim — §5 Pass 5 still requires a named source for anything inside it. */ .climate-note { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: var(--space) calc(var(--space) * 1.25); border-radius: 0 var(--radius) var(--radius) 0; max-width: var(--measure); } body[data-palette="p6"] .climate-note { border-left-color: var(--deep-green); background: color-mix(in srgb, var(--sand) 30%, transparent); } /* Call button — thumb-reachable, mobile-first (§3 design gate) */ .call { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); font-family: var(--font-head); font-size: var(--step-2); font-weight: 700; text-decoration: none; border-radius: var(--radius); } .call--sticky { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; justify-content: center; z-index: 50; box-shadow: 0 4px 20px rgb(0 0 0 / 0.25); } @media (min-width: 768px) { .call--sticky { display: none; } } /* Hero — arrangement varies (axis 3), the trust surface does not */ .hero { padding: calc(var(--space) * 2) 0 calc(var(--space) * 3); } .hero__bluf { font-size: var(--step-2); max-width: 60ch; } .trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 0; margin: 1.25rem 0 0; list-style: none; } .trust li { max-width: none; margin: 0; font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; } /* Quote form */ .form { display: grid; gap: 0.75rem; max-width: 30rem; } /* `.form { display: grid }` is (0,1,0) and the `hidden` attribute's `display:none` lives in the UA stylesheet, which ANY author rule outranks. So `form.hidden = true` sets the attribute and the form stays on screen — the success confirmation would appear underneath a form still showing the visitor's own typed answers. (0,2,0) here is what actually makes the attribute work. Added 2026-09-07 with the confirmation itself; found by reading the cascade, not after shipping it. */ .form[hidden] { display: none; } /* Honeypot — off-screen for a sighted human, out of the accessibility tree for a screen reader (paired with aria-hidden + tabindex="-1" on the field itself, partials/quote-form.html). Positioned off-canvas rather than display:none/visibility:hidden: those are the two properties a bot that actually renders CSS checks for before skipping a field; a simple scraper that doesn't render CSS at all fills it either way. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .form input, .form select, .form textarea { min-height: 48px; padding: 0.6rem 0.75rem; border: 1px solid var(--field-border); border-radius: var(--radius); font: inherit; background: var(--surface-alt); color: var(--ink); } /* CHECKBOXES ARE NOT TEXT FIELDS, and the rule above was catching them (fixed 2026-08-29). `min-height: 48px` on a bare checkbox does not make a 48px target — it makes a 13px-wide box stretched 48px TALL. Measured in the browser at 390px on three of the four live sites: 13x48px, display:block on the label, checkbox and consent text stacked with no visual association between them. Direction 160 had already worked around it locally; the other three inherited the distortion, which is the tell that the workaround belonged here all along. The tap target is the LABEL — it wraps the input, so the whole consent sentence is clickable, which is a larger and more forgiving target than any 44px box. */ /* Specificity is (0,4,2) on the scoped selectors, deliberately. The direction files reach these controls through `body[data-direction="160"] .hero__form .form :is(input, select, textarea)` — (0,3,2), loading AFTER this file — and `:is()` takes the specificity of its heaviest argument, so a plain `.form input[type="checkbox"]` at (0,2,1) loses and the checkbox gets stretched to whatever tap-target height that direction sets for TEXT fields. Found twice: 13x48 across three sites, then 20x44 on the fourth the moment its local workaround was removed. Writing this at a specificity the direction layer cannot undercut is what stops the next direction reintroducing it silently. */ .form input[type="checkbox"], .form input[type="radio"], body[data-direction] .form input[type="checkbox"], body[data-direction] .form input[type="radio"], body[data-direction] .hero__form .form input[type="checkbox"], body[data-direction] .hero__form .form input[type="radio"] { min-height: 0; inline-size: 1.25rem; block-size: 1.25rem; padding: 0; accent-color: var(--accent); } /* THE SUBMIT BUTTON — 2026-09-07, operator report: it renders as PLAIN TEXT on site 10's live home page. It was not unstyled. The rule below used to read `background: var(--ink)`, and direction 169's h3 hero paints `.hero { background: var(--ink) }` with the quote form inside it — so the button was a dark navy block on a dark navy ground with near-white text, which is indistinguishable from a line of white text. Nothing was broken in a way any gate could see: valid CSS, valid HTML, a real 56px button, invisible. THIS IS THE THIRD TIME THIS EXACT SHAPE HAS BEEN FIXED IN THIS FILE. `label.consent` measured 1.06:1 on direction 163's navy panel; `.form p.consent` measured ~1.5:1 on the same; both were fixed by removing an assumption that the form sits on a light ground. `background: var(--ink)` was the same assumption in the one place it had not been removed yet. THE FIX IS TO MATCH `.call`, not to invent a third button colour: `--accent` on `--accent-ink` is the pair every palette already declares AND has measured contrast for (see the p6/p7 notes above, and 169's own note recording ink-on-bronze at 6.25:1 where the kit shipped 2.67:1). A button that borrows the CALL button's already-measured pair cannot introduce a new contrast defect on any of the 38 configs, which a bespoke colour here could. */ .form button { min-height: 56px; padding: 0 1.5rem; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-family: var(--font-head); font-size: var(--step-2); font-weight: 700; cursor: pointer; } /* DISABLED STATE — the button is disabled until the Privacy Act consent box is ticked (§10). Set by script only, never in the markup: with JavaScript off the button ships enabled and the checkbox's own `required` attribute carries the same rule through native validation, so a no-JS visitor is never presented with a control they cannot use. SPECIFICITY IS DELIBERATE AND IS THE REASON FOR THE SECOND SELECTOR. Direction stylesheets style this button through `body[data-direction="169"] .form button` (0,2,2). A bare `.form button[disabled]` is (0,2,1) and would LOSE, so the disabled state would simply not appear on exactly the sites that have a direction — i.e. all of them. `body[data-direction]` lifts it to (0,3,2). Same reasoning, and the same fix, as the checkbox rules above. */ .form button[disabled], body[data-direction] .form button[disabled], body[data-direction] .hero__form .form button[disabled] { background: color-mix(in srgb, var(--ink) 12%, var(--surface-alt)); /* --ink, NOT --ink-soft, and the difference was measured rather than eyeballed. On p17 the mixed ground computes to #DADCDF: --ink-soft #63606B on it is 4.44:1, which fails AA normal — and the usual "large text may use 3:1" escape does NOT apply, because direction 169 sets this button to 16px, below the 18.66px bold threshold. --ink on the same ground is 11.95:1. WCAG 1.4.3 does exempt inactive controls, and that exemption is deliberately not being leaned on here: a disabled button a person cannot read is still a button they cannot read. Disabled is signalled by the flat ground, the inset border, the cursor and the hint line below it — not by making the label hard to see. */ color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-border); cursor: not-allowed; } /* The line that says WHY the button is disabled. A disabled button is not focusable and announces nothing, so without this the state is a dead end for anyone who cannot see the checkbox tick. Hidden until the script shows it, and hidden again the moment consent is given. */ .form__hint { font-size: 0.9rem; color: inherit; opacity: 0.85; max-width: 44ch; margin: 0; } /* SUCCESS CONFIRMATION — sits OUTSIDE the form so it survives the form being hidden on success. `[hidden]` is restated against `display` here because any layout rule on these classes would otherwise beat the attribute and ship a permanently visible success message. */ .form__hint[hidden], .form__success[hidden] { display: none; } .form__success { display: grid; gap: 0.35rem; max-width: 30rem; padding: var(--pad-card, 1rem); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface-alt); color: var(--ink); } .form__success strong { font-family: var(--font-head); font-size: var(--step-1); } /* The "Prefer to talk?" line — secondary copy, but it still has to be legible on whatever ground the form sits on. --ink-soft was the same dark-on-dark bug the consent label had: on direction 163's navy hero panel it measured about 1.5:1, and the phone link inside it 1.58:1. Inherit, then step back with opacity, so "secondary" is expressed as a relationship to the surrounding text rather than as a fixed colour that assumes a light background. 0.8 keeps it above 4.5:1 against both a white and a navy ground given the body colours in use. */ .form p.consent { font-size: 0.9rem; color: inherit; opacity: 0.85; max-width: 44ch; } /* PRIVACY ACT CONSENT (§10) — this is the one piece of copy on the page a person is agreeing TO, and it was the smallest text in the form. Set deliberately, 2026-08-29, portfolio-wide: - SIZE. 1rem, the same as body copy, and never shrunk below it. It was 0.85rem base and 0.76rem inside direction 160's hero card — 12.16px measured. Consent a reader has to squint at is not meaningfully given, and "the card is tight" is not a reason to shrink the one sentence carrying a legal obligation. If a hero card cannot fit it, the card gets shorter, not the consent. - COLOUR. --ink, not --ink-soft. Measured contrast was already passing AA on all four sites (11.45 / 5.63 / 5.10 / 5.67) so this is not a contrast fix — it is a de-emphasis fix. The muted token is for secondary copy, and this is not secondary. - ASSOCIATION. flex row with the box pinned to the first line, so the checkbox visibly belongs to the sentence rather than floating above it. Specificity is (0,4,2) via `body[data-direction]` so it outranks the per-direction hero-card overrides in directions/*.css, which load AFTER this file and previously shrank it. Same technique and same reason as the .hero--compact block above. */ .form label.consent, body[data-direction] .hero__form .form label.consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 1rem; line-height: 1.5; /* Floored at 400. Direction 162 sets a 300 body weight, which is a legitimate stylistic choice everywhere except here — light type at 16px is the wrong call for the one sentence a person is agreeing to, whatever its contrast ratio measures. */ font-weight: 400; /* INHERIT, not a token — corrected 2026-08-29 the same day the token was introduced. Setting `color: var(--ink)` assumed the form always sits on a light ground. On direction 163 the hero paints a dark navy gradient and sets `color: #fff` on the panel, so forcing --ink put dark navy text on dark navy: measured 1.06:1 from rendered pixels. The previous --ink-soft was the same mistake one shade lighter, which is the defect the operator reported. Inheriting takes whatever colour the surrounding form already uses for its own labels — a value each direction has ALREADY chosen to suit its own panel — so the consent can never be the one element in the form that disagrees with its background. It also means consent reads at the same strength as the rest of the form, which is the point: it is not secondary copy. */ color: inherit; max-width: 46ch; cursor: pointer; } /* THE LINK INSIDE THE CONSENT INHERITS TOO, and is underlined to stay identifiable without relying on colour. Same bug as the label, one element deeper, and it survived the label fix: --link is a single dark token (#12557F on p10) chosen for light page backgrounds, so on direction 163's dark hero panel the words "Privacy Policy" stayed dark blue on dark navy while the sentence around them turned white. A screenshot caught it; the pixel probe did not, because two words are too small a fraction of the sampled block to move the 2nd/98th percentile. currentColor guarantees the link can never contrast worse than the sentence containing it, and the underline carries the affordance that colour no longer does — which WCAG 1.4.1 wants anyway. This link is the reader's route to the Privacy Policy from the consent they are giving; it is the last link in the portfolio that should be hard to see. */ body[data-direction] .hero__form .form .consent a, .form .consent a { color: currentColor; text-decoration: underline; text-underline-offset: 0.15em; } body[data-direction] .hero__form .form label.consent input[type="checkbox"] { flex: none; margin-block-start: 0.15em; } /* GHOST BUTTONS FOLLOW THEIR BAND'S TEXT COLOUR (2026-08-29). .btn-ghost is a transparent button defined by its border and its label, so unlike a filled button it has no ground of its own and inherits whatever the band behind it is painted with. Direction 160 already carried `body[data-direction="160"] .hero .btn-ghost { color: #fff }` — it had hit this and fixed it locally. 161, 162 and 163 never did, so on direction 163's navy hero the secondary CTA rendered in --link (#12557F) on #093654: 1.58:1, caught by the new rendered-pixel gate on its first run, and effectively invisible. Third time today a per-direction workaround turned out to be a portfolio rule wearing a local disguise (the others: the consent checkbox's min-height, and the consent label's colour). The tell is the same each time — one direction has the fix, the rest have the bug, and nothing in between says which is intended. currentColor for the border and inherit for the text means the control cannot disagree with the band it sits in, whichever way that band is painted. Specificity is (0,3,1), equal to 160's own rule, and this file loads FIRST — so 160's explicit #fff still wins and nothing about that direction changes. */ body[data-direction] .hero .btn-ghost, body[data-direction] .section--cta .btn-ghost { color: inherit; border-color: currentColor; } /* Price table — the AI-citation magnet for cost queries (§3). .prices-scroll is the horizontal scroller (partials/price-table.html). The min-width keeps the columns readable rather than letting them crush to nothing, and the overflow keeps that width inside the box instead of inside the page. */ .prices-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space) 0; } .prices-scroll .prices { margin: 0; } /* Tighten the cells before reaching for the scrollbar: at 390px the three columns fit if the padding gives way, and a table you can read without swiping beats one you cannot. The wrapper above is the safety net for a table this is not enough for, not the first resort. */ @media (max-width: 30rem) { .prices :is(th, td) { padding: 0.6rem 0.4rem; font-size: 0.95rem; } } .prices { width: 100%; border-collapse: collapse; margin: var(--space) 0; } .prices caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; } .prices th, .prices td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--line); } .prices td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Dark header row, promoted from direction 160 on 2026-08-29 (base component pass). --ink with --surface text rather than --accent: --accent is not guaranteed to carry white at 4.5:1 across palettes (p9's literal primary measures 4.10:1 and is decoration-only), while --ink is the token that already has to. GATE 1B measures the rendered result either way. */ .prices { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; } .prices thead th { background: var(--ink); color: var(--surface); padding: 0.9rem 1rem; font-size: 0.95rem; } .prices tbody tr:nth-child(even) { background: var(--surface-alt); } /* `overflow-wrap: anywhere` added 2026-09-20, housekeeping item 108. A .note carries a bare source URL on every location page ("Source: https://… — confirm current requirements with …") and on the FAQ, and a URL is one unbreakable word wherever the browser finds no break opportunity. Site 1's Wamberal page overflowed a 390px viewport by 48px on a 98-character council URL, while two pages carrying a LONGER 104-character URL passed — the difference is where the breaks fall, not the length, which is why this is a layout rule and not a copy rule. It is strictly protective: it changes nothing that already fits, and cannot alter a passing layout. ⚠ It reaches a live site only at that site's next deploy. */ .note { color: var(--ink-soft); font-size: 0.9rem; overflow-wrap: anywhere; } /* Services dropdown (2026-08-26).
/, so it works with no JS and is keyboard-operable and screen-reader-announced by the browser itself. On narrow screens it stays in flow and pushes the rest of the nav down — a fixed overlay on a 375px viewport covers the phone number, and the phone number is the product (§3 design gate). */ .nav__dd { display: inline-block; position: relative; } .nav__dd > summary { cursor: pointer; list-style: none; padding: 0.35rem 0; display: inline-flex; align-items: center; gap: 0.3rem; } .nav__dd > summary::-webkit-details-marker { display: none; } .nav__dd > summary::after { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.1em); } .nav__dd[open] > summary::after { transform: rotate(-135deg) translateY(-0.1em); } .nav__dd > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav__dd-list { list-style: none; margin: 0.4rem 0 0; padding: 0; } .nav__dd-list li { margin: 0; } .nav__dd-list a { display: block; padding: 0.45rem 0; } /* An open dropdown takes its own row rather than sitting beside the nav links it pushed aside. Below 48rem the panel stays IN FLOW deliberately (see the note on this component above: a fixed overlay on a 375px viewport covers the tracked phone number, and the phone number is the product) — but in flow it was a flex item sharing a line with "Home", which read as two overlapping menus rather than one open one. `nav` is a wrap-enabled flex container, so a full basis when open is all it takes. */ .nav__dd[open] { flex-basis: 100%; } @media (min-width: 48rem) { /* Desktop only: float the panel so it does not shove the page around on hover-capable screens. */ .nav__dd[open] { flex-basis: auto; } .nav__dd-list { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 15rem; /* FIXED 2026-08-27: this was `background: var(--bg)`, and --bg is not defined in tokens.css, in any palette block, or anywhere else in the portfolio. It resolved to nothing, so the floating panel had NO BACKGROUND — the page content ran straight through the open menu on every site that did not separately override it. A transparent floating layer is not a styling nit; it makes the menu unreadable over a photograph. */ background: var(--surface-alt); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.9rem; box-shadow: 0 12px 28px rgb(0 0 0 / 22%); } } /* Illustrative imagery. Never captioned as our own work (§6 State 1) — the alt text carries "illustrative example" and no figcaption element is used anywhere. */ .hero__media, .section__media { display: block; margin: var(--space) 0; } .hero__media img, .section__media img { width: 100%; height: auto; border-radius: 8px; display: block; } /* FOOTER. Full-bleed element, wrapped inner content — same shape as the header, and for the same reason: `class="wrap"` used to sit on