/* ═══════════════════════════════════════════════════════════════════════════ NUSHAKE style-v2.css — Phase 2 shared component library (production candidate) Direction: D1 — JOBSITE SIGNAGE as amended (design/DIRECTION.md C1-C6, G1-G6). Token law: design/tokens/tokens.css (locked 2026-08-15) — embedded verbatim below as this sheet's :root. No value in any component rule may bypass it. Gate: tasks/nushake-token-lint.py (G2). Classes only. Tokens only. ═══════════════════════════════════════════════════════════════════════════ */ /* ══ 1 · LOCKED TOKENS — verbatim copy of design/tokens/tokens.css :root ══ */ :root { /* ── COLOR ───────────────────────────────────────────────────────────── THE GOLD LAW (audit rank 1 — encoded here, not in prose): 1. Gold is an ACTION/SAFETY color. Its only legal token names are the *-action / *-hazard / *-focus aliases below. There is deliberately NO --gold-surface, NO --gold-tint, NO --gold-glow token. If a component "needs" one, the component is wrong. 2. GOLD TEXT sits on --ink or --surface-form ONLY (12.1:1 / 10.3:1). Gold text on white/paper is a build error (1.6:1 — AA fail). 3. GOLD BACKGROUNDS carry --ink text ONLY (12.1:1). Never white text on gold (1.5:1 — the rank-2 defect this system deletes). 4. Off-brand golds are dead: #FEBD17, #f5b400, #b8860b, #e8a900-as- decoration do not exist in this system. One gold. (audit rank 6) 5. GOLD BUDGET: ≤5% of the pixels in any viewport. Legal carriers: buttons, form submit, hazard stripes/rules, 4px card top-borders, focus halo, the frozen .trust-bar band, and inline text links on dark surfaces. Nothing else. */ --gold-action: #FFCD00; /* CTAs, submit, hazard marks. THE only gold. */ --gold-pressed: #e0b400; /* :active/:hover state of --gold-action ONLY. Never used at rest, never as decoration. */ --link-on-light: #6b5500; /* dark gold for gold-flavored links on white — 6.2:1 on --paper; replaces every #b8860b */ --ink: #090909; /* plates, slabs, rules, body-on-gold */ --ink-2: #161616; /* deep panel variant (footer sub-surfaces) */ --surface-form: #1b1b1b; /* the dark lead form — kept, now a token (audit "deliberately not fixed" #14) */ --white: #ffffff; --paper: #fafaf8; /* light section alt — the only off-white */ --line: #d9d7cc; /* hairline rules on light */ --line-dark: rgba(255,255,255,.16); /* hairline rules on ink */ --tx: #161616; /* body text on light — 16.6:1 */ --tx-2: #3f3f3f; /* secondary text on light — 9.9:1 */ --tx-3: #5c5c5c; /* captions ≥14px on light — 6.3:1 (AA) */ --tx-inv: #ffffff; /* body text on ink */ --tx-inv-2: rgba(255,255,255,.80); /* secondary on ink — 13.1:1 */ --tx-inv-3: rgba(255,255,255,.64); /* captions on ink — 8.6:1 */ --field-line: rgba(255,255,255,.44); /* input borders on --surface-form: composites ≈#8a8a8a on #1b1b1b = 3.6:1 — fixes the 1.19:1 rank-5 boundary failure */ /* ── TYPE ────────────────────────────────────────────────────────────── FONT BUDGET (§4): 2 families, 4 weights TOTAL, self-hosted, subset. Family 1: Archivo variable (wght 100-900, ONE 35KB file, already self-hosted at /assets/fonts/archivo-latin-var.woff2). Used weights: 400 (body), 800 (UI labels/buttons). Family 2: Barlow Condensed — THE display face. Highway-signage DNA (drawn from CA public-works lettering), goes to 900 where Oswald stops at 700 and Archivo Narrow isn't condensed enough. Used weights: 700 (sub-display), 900 (display). PREVIEW loads Google Fonts CDN; PRODUCTION ships two self-hosted subset woff2 files per R15. 400+800+700+900 = 4 weights. Budget met exactly. */ --font-display: 'Barlow Condensed','Archivo Fallback','Arial Narrow',sans-serif; --font-body: 'Archivo','Archivo Fallback',system-ui,sans-serif; /* CONDENSED FLOOR (§4, stated): Barlow Condensed never renders below 18px (1.125rem). Anything smaller is set in Archivo. Condensed under 18px smears at 200% zoom and on low-DPI panels. */ --fs-display-floor: 1.125rem; /* Type scale — signage ratios: big jumps, tight leading. */ --fs-hero: clamp(3rem, 8vw, 6rem); /* Barlow 900 UPPER, lh .92 */ --fs-h2: clamp(2.2rem, 5vw, 3.8rem); /* Barlow 900 UPPER, lh .95 */ --fs-h3: clamp(1.4rem, 2.4vw, 1.9rem); /* Barlow 700 UPPER, lh 1.05*/ --fs-plate: clamp(1.125rem, 1.8vw, 1.5rem);/* Barlow 700 UPPER — floor */ --fs-body-lg: 1.15rem; /* Archivo 400, lh 1.6 */ --fs-body: 1rem; /* 17px via html base */ --fs-small: .875rem; --fs-label: .72rem; /* Archivo 800 UPPER, letter-spacing .12em */ --lh-display: .95; --lh-body: 1.55; --track-label:.12em; /* ── SPACE — 8px grid, no arbitrary values ──────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sect-pad: clamp(56px, 9vw, 112px); /* desktop section rhythm */ --wrap-max: 1200px; --wrap-pad: clamp(16px, 4vw, 48px); /* ── RADIUS — the discipline is the identity ────────────────────────── */ --radius: 0; /* LAW. No second radius token exists. 547 inline overrides get swept to this. (audit rank 7) */ /* ── SHADOW — signage has no shadows ────────────────────────────────── */ --shadow: none; /* LAW. Depth is drawn with rules and plates, never blur. All --shadow-card/-hover/-warm are deleted. */ /* ── RULES (borders are this direction's whole decoration system) ───── */ --rule-1: 1px solid var(--line); --rule-2: 2px solid var(--ink); --rule-3: 3px solid var(--ink); /* trust-bar frame (frozen) */ --rule-4: 4px solid var(--ink); --rule-gold-4: 4px solid var(--gold-action); /* card signature — KEPT */ /* ── HAZARD STRIPE (the .hazard-rule seed, systematized) ────────────── */ /* Hard-stop stripe: two flat colors, zero interpolation. This is GEOMETRY, not a gradient — the kill-list bans color RAMPS. Any stop pair that interpolates is illegal. */ --hazard: repeating-linear-gradient(-45deg, var(--gold-action) 0 12px, var(--ink) 12px 24px); --hazard-h-sm: 6px; /* sub-section divider */ --hazard-h: 10px; /* section divider */ --hazard-h-lg: 16px; /* page-level divider */ /* ── FOCUS (two-tone system kept verbatim — audit keep-list #12) ────── */ --focus-ring: 3px solid var(--ink); --focus-halo: 0 0 0 6px var(--gold-action); /* ── BREAKPOINTS (reference — use in @media literally) ──────────────── */ /* --bp-sm: 375px --bp-md: 768px --bp-lg: 1100px --bp-xl: 1440px */ /* ── MOTION ─────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.25,.1,.25,1); --dur: .18s; /* signage snaps; nothing floats or lifts */ } /* ══ 2 · CARRIED + AMENDMENT TOKENS ══════════════════════════════════════ --error: carried forward from production R12 (style.css tail, deployed 2026-08-14) — the form error components below are its consumers. --focus-ring-inv / --focus-halo-inv: the on-ink INVERSION of the locked two-tone focus pair (identity keep-list #12 — production nav/footer already invert; same colors, swapped roles, no new values). --font-display: A2 is now SATISFIED — barlow-condensed-{700,900}.woff2 exist on disk under /assets/fonts/ and the Barlow-metric fallback face is declared below, so the display stack swaps its fallback from the Archivo-matched face (which A2 outlaws for Barlow) to 'Barlow Fallback'. */ :root{ --error:#b3261e; --nav-h:68px; --focus-ring-inv:3px solid var(--gold-action); --focus-halo-inv:0 0 0 6px var(--ink); --font-display:'Barlow Condensed','Barlow Fallback','Arial Narrow',sans-serif; } /* ══ 3 · FONTS — self-hosted, subset, metric-matched fallbacks (C2/R15) ══ */ @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2');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:'Archivo Fallback';src:local('Arial');size-adjust:119.62%;ascent-override:73.40%;descent-override:17.56%;line-gap-override:0%} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');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:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/barlow-condensed-900.woff2') format('woff2');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} /* Barlow-metric fallback — computed from the real barlow-condensed font tables (C2) */ @font-face{font-family:'Barlow Fallback';src:local('Arial Narrow'),local('Roboto Condensed');size-adjust:124.10%;ascent-override:80.58%;descent-override:16.12%;line-gap-override:0%} /* ══ 4 · RESET + BASE ════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:17px;scroll-padding-top:84px} body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--tx);background:var(--white);padding-top:var(--nav-h)} /* --nav-h: the fixed .nav measures 68px at every width (measured 375 and 1440). Without this offset the first 68px of every page — the mobile breadcrumb included — renders under the opaque nav. Found by the service canonical, verified on both templates. */ img{max-width:100%;display:block} a{color:inherit;text-decoration:none} @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}} /* ── two-tone focus (locked pair; inverted on ink chrome). .s-focus is the gallery's forced duplicate of :focus-visible — same declarations. ── */ :focus-visible{outline:var(--focus-ring);outline-offset:2px;box-shadow:var(--focus-halo)} .s-focus{outline:var(--focus-ring);outline-offset:2px;box-shadow:var(--focus-halo)} .on-ink :focus-visible,.nav :focus-visible,.footer :focus-visible,.mob-menu :focus-visible{outline:var(--focus-ring-inv);outline-offset:2px;box-shadow:var(--focus-halo-inv)} .on-ink .s-focus,.nav .s-focus,.footer .s-focus,.mob-menu .s-focus{outline:var(--focus-ring-inv);outline-offset:2px;box-shadow:var(--focus-halo-inv)} /* ── layout + type utilities ── */ .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)} .section{padding:var(--sect-pad) 0} .display{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:.01em} .label{font-family:var(--font-body);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .botcheck{display:none!important} /* NS-D1 photo grade — one grade, applied in CSS; originals untouched (G3/§4) */ .img-grade{filter:saturate(.85) contrast(1.12) brightness(.94)} @media(max-width:768px){:root{--sect-pad:clamp(40px,10vw,56px)}} /* ── hazard divider system (hard-stop geometry, not a color ramp) ── */ .hz{height:var(--hazard-h);background:var(--hazard)} .hz-sm{height:var(--hazard-h-sm);background:var(--hazard)} .hz-lg{height:var(--hazard-h-lg);background:var(--hazard)} .hazard-rule{height:4px;width:100%;background:var(--gold-action)} /* the seed, kept */ /* ══ 5 · SKIP LINK ═══════════════════════════════════════════════════════ */ .skip-link{position:absolute;left:8px;top:-56px;z-index:200;background:var(--gold-action);color:var(--ink);padding:14px 20px;border:var(--rule-2);font-weight:800;font-size:var(--fs-small);transition:top var(--dur)} .skip-link:focus,.skip-link.s-focus{top:0} /* ══ 6 · PLATES · SLABS · SPEC (section-header system) ═══════════════════ A1: eyebrows are stenciled labels INSIDE the plate — never gold chips. Gold appears here only as the single legal 4px rule. ══ */ .plate{display:inline-block;background:var(--ink);color:var(--tx-inv);border-left:var(--rule-gold-4);padding:10px 22px 10px 18px} .plate .label{color:var(--tx-inv-2);display:block;margin-bottom:2px} .plate h1,.plate h2,.plate h3,.plate .plate-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--fs-h2);line-height:var(--lh-display);letter-spacing:.01em;color:var(--tx-inv)} @media(max-width:768px){.plate{display:block;margin:0 calc(-1 * var(--wrap-pad))}} .slab span{background:var(--ink);color:var(--tx-inv);padding:.08em .35em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .slab em{font-style:normal;color:var(--gold-action)} /* legal ONLY when the em phrase is a call to act (tokens law) */ .spec{border:var(--rule-2);background:var(--white)} .spec-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:var(--rule-1)} /* Overflow law (2026-09-08, Dublin 390/768/1440): a row never leaks past its column. The key keeps its full width (no shrink) and only wraps when it is wider than the column itself (max-width:100%). The value sits beside the key and wraps there, exactly as before, and drops to its own line ONLY when it cannot fit beside the key at its min-content width (flex-basis 0 + min-width:min-content is what makes the line-break test use min-content instead of max-content). Rows that fit are pixel-identical to the pre-2026-09-08 rendering. */ .spec-row:last-child{border-bottom:none} .spec-key{flex:0 0 auto;max-width:100%;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);letter-spacing:.03em} .spec-val{flex:1 1 0;min-width:min-content;font-size:var(--fs-small);color:var(--tx-2);text-align:right} /* ══ 7 · BUTTONS — exactly three. Hover = background swap only; no translateY, no shadow (kill-list). ══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:12px 30px;font-family:var(--font-body);font-weight:800;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;border:var(--rule-2);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);text-decoration:none} .btn-primary{background:var(--gold-action);color:var(--ink)} .btn-primary:hover,.btn-primary.s-hover{background:var(--gold-pressed)} .btn-primary:active,.btn-primary.s-active{background:var(--gold-pressed)} .btn-secondary{background:transparent;color:var(--ink)} .btn-secondary:hover,.btn-secondary.s-hover,.btn-secondary:active,.btn-secondary.s-active{background:var(--ink);color:var(--white)} .on-ink .btn-secondary{color:var(--white);border-color:var(--white)} .on-ink .btn-secondary:hover,.on-ink .btn-secondary.s-hover,.on-ink .btn-secondary:active,.on-ink .btn-secondary.s-active{background:var(--white);color:var(--ink)} .btn-inv{background:var(--ink);color:var(--white);border-color:var(--ink)} /* on gold surfaces only */ .btn-inv:hover,.btn-inv.s-hover,.btn-inv:active,.btn-inv.s-active{background:var(--ink-2)} .btn[disabled],.btn.s-disabled{opacity:.45;cursor:not-allowed;pointer-events:none} .btn.s-loading{opacity:.75;cursor:wait;pointer-events:none} /* ══ 8 · NAV (C4: collapse breakpoint raised to 1100px; closed menu leaves the tab order via visibility) ══ */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--ink);border-bottom:var(--rule-gold-4)} .nav--demo{position:static} .nav-in{max-width:var(--wrap-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:64px;padding:0 var(--wrap-pad)} .nav-logo img{height:44px;width:auto} .nav-links{display:flex;align-items:center;gap:var(--sp-5);list-style:none} .nav-links a{font-family:var(--font-body);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tx-inv-2);padding:12px 0;transition:color var(--dur)} .nav-links a:hover,.nav-links a.s-hover{color:var(--white)} .nav-links a[aria-current="page"]{color:var(--gold-action)} /* text link on dark — legal carrier */ .nav-leak a{color:var(--gold-action)} /* gold on ink = 12.1:1, legal carrier */ .nav-phone{color:var(--white)!important;font-weight:800} .nav-cta{min-height:0;padding:12px 20px} /* P4-FIX 2026-08-16: .nav-links a (0,1,1) outranked .btn-primary (0,1,0), so the gold-filled nav CTA inherited the dark-nav text colour — white-on-gold at 1.37:1 on 73 of 74 pages. Desktop-only, which is why the 375 sweep missed it. Raised to (0,2,1); the aria-current variant is included so the current-page CTA cannot land gold-on-gold either. */ .nav-links a.nav-cta,.nav-links a.nav-cta[aria-current="page"]{color:var(--ink)} /* P4-FIX 2026-08-16: the why-cards carry TWO ordinals — a decorative watermark (aria-hidden, v1 .why-ghost) and the real badge (v1 .why-num). Parity requires both text nodes to survive, and the aria-hidden did survive, but v2 rendered the ghost at full weight so each card showed its number twice at 34px and 10px. Restores v1 intent: the aria-hidden numeral becomes a recessive watermark, tokens only. */ .card{position:relative} .card>.led-num[aria-hidden="true"]{position:absolute;top:0;right:var(--sp-3);z-index:0; font-size:var(--fs-hero);line-height:.8;color:var(--ink);opacity:.05; pointer-events:none;user-select:none} .card>.led-num[aria-hidden="true"]~*{position:relative;z-index:1} .ham{display:none;background:none;border:2px solid var(--white);cursor:pointer;padding:10px;min-width:44px;min-height:44px} .ham span{display:block;width:20px;height:2px;background:var(--white);margin:4px 0} @media(max-width:1099px){.nav-links{display:none}.ham{display:block}} /* mobile menu — closes via visibility, not opacity alone (C4) */ /* z-index 1000000001, not 99: the quote launcher's root (#roof-quote-pro-widget) is its own stacking context at z 1000000000, and at 99 its panther graphic floated OVER the open menu, stealing taps from the right end of two menu links INCLUDING THE TEL LINK (proven with elementFromPoint on the home page, 2026-08-24; every one of the 134 pages carries the same menu + the same launcher). A full-screen modal sits above everything. Closed, the menu is visibility-hidden (C4), so the raised z captures nothing and the launcher works normally. */ .mob-menu{position:fixed;inset:0;z-index:1000000001;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);opacity:0;visibility:hidden;transition:opacity var(--dur),visibility 0s linear var(--dur)} .mob-menu.open{opacity:1;visibility:visible;transition:opacity var(--dur),visibility 0s} .mob-menu a{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--ink);text-transform:uppercase;padding:6px 12px;min-height:44px;display:inline-flex;align-items:center} .mob-menu a[aria-current="page"]{color:var(--link-on-light)} .mm-leak{background:var(--ink);color:var(--tx-inv)!important} .mm-cta{background:var(--gold-action);color:var(--ink)!important;border:var(--rule-2)} .mob-close{position:absolute;top:16px;right:20px;background:none;border:2px solid var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink);min-width:44px;min-height:44px} .mob-menu--demo{position:static;visibility:visible;opacity:1;z-index:auto;padding:var(--sp-6) 0;border:var(--rule-1)} .mob-menu--demo .mob-close{position:static;align-self:flex-end;margin-right:var(--sp-5)} /* ══ 9 · MOBILE BAR — persistent, SOLID white, no blur; gold cell targets the on-page #quote form (G4 / rank 19) ══ */ .mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--white);border-top:var(--rule-2);padding:8px 12px} .mob-bar-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);max-width:480px;margin:0 auto} .mob-bar a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;font-weight:800;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.02em} .mb-call{color:var(--ink);border:var(--rule-2)} .mb-form{background:var(--gold-action);color:var(--ink);border:var(--rule-2)} .mb-form:hover,.mb-form.s-hover,.mb-form:active,.mb-form.s-active{background:var(--gold-pressed)} .mob-bar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} @media(max-width:768px){.mob-bar{display:block}body{padding-bottom:66px}} .mob-bar--demo{display:block;position:static} /* ══ 10 · FORMS — dark (.form-dark, the #quote estimate form) and light (.form-light) variants. Carries the R12 error components. ══ */ .form-dark{background:var(--surface-form);border:var(--rule-2);border-top:var(--rule-gold-4);padding:clamp(24px,3vw,36px)} .form-h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.7rem;color:var(--white);margin-bottom:4px} .form-sub{font-size:var(--fs-small);color:var(--tx-inv-3);margin-bottom:var(--sp-4)} .form-points{list-style:none;margin:0 0 var(--sp-4);border-left:var(--rule-3);padding-left:var(--sp-3);display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--tx-inv-2)} .form-points strong{color:var(--white)} .ff{margin-bottom:var(--sp-3)} .ff label{display:block;font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;margin-bottom:5px} .form-dark .ff label{color:var(--tx-inv-2)} .form-dark .req{color:var(--tx-inv-2)} .ff input,.ff select,.ff textarea{width:100%;min-height:48px;padding:12px 14px;font-family:var(--font-body);font-size:16px;transition:border-color var(--dur)} .ff textarea{min-height:96px;resize:vertical} .form-dark .ff input,.form-dark .ff select,.form-dark .ff textarea{background:var(--ink);border:1.5px solid var(--field-line);color:var(--white);color-scheme:dark} .form-dark .ff input::placeholder,.form-dark .ff textarea::placeholder{color:var(--tx-inv-3)} .form-dark .ff select option{background:var(--ink-2);color:var(--white)} .form-light{background:var(--white);border:var(--rule-2);border-top:var(--rule-gold-4);padding:clamp(24px,3vw,36px)} .form-light .form-h2{color:var(--ink)} .form-light .form-sub{color:var(--tx-3)} .form-light .ff label{color:var(--tx-3)} .form-light .req{color:var(--tx-2)} .form-light .ff input,.form-light .ff select,.form-light .ff textarea{background:var(--white);border:var(--rule-2);color:var(--tx)} .form-light .ff input::placeholder,.form-light .ff textarea::placeholder{color:var(--tx-3)} .ff input[disabled],.ff select[disabled],.ff textarea[disabled]{opacity:.5;cursor:not-allowed} .ff-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)} @media(max-width:640px){.ff-row{grid-template-columns:1fr}} .form-submit{width:100%;min-height:52px;background:var(--gold-action);color:var(--ink);border:var(--rule-2);font-family:var(--font-body);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background var(--dur)} .form-submit:hover,.form-submit.s-hover,.form-submit:active,.form-submit.s-active{background:var(--gold-pressed)} .form-submit[disabled],.form-submit.s-disabled{opacity:.45;cursor:not-allowed} .form-submit.s-loading{opacity:.75;cursor:wait;pointer-events:none} .form-note{font-size:var(--fs-label);text-align:center;margin-top:10px;letter-spacing:0;text-transform:none} .form-dark .form-note{color:var(--tx-inv-2)} .form-light .form-note{color:var(--tx-3)} .form-tel{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:var(--sp-3);font-size:var(--fs-small);min-height:44px} .form-dark .form-tel{color:var(--tx-inv-2)} .form-dark .form-tel strong{color:var(--white)} .form-light .form-tel{color:var(--tx-2)} .form-light .form-tel strong{color:var(--ink)} /* ── R12 form-error components — carried verbatim from production ── */ .f-error{font-size:.78rem;font-weight:600;color:var(--error);margin-top:6px} .form-errors{border:1px solid var(--error);border-left:4px solid var(--error);color:var(--error);background:var(--white);padding:12px 16px;font-size:.85rem;font-weight:600;margin-bottom:16px} input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error)!important} /* dark-form legibility: error text stays white; the red lives in the 4px rule */ .form-dark .f-error{color:var(--tx-inv);border-left:4px solid var(--error);padding-left:var(--sp-2)} /* ══ 11 · TRUST BAR — FROZEN. Class-for-class reproduction of style.css:165-171; every computed value byte-identical (var(--gold-action) computes #ffcd00 = --gold; var(--ink) computes #090909). Do not edit. ══ */ .trust-bar{background:var(--gold-action);padding:20px 0;overflow:hidden;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)} .trust-bar-in{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px);padding:0 24px;flex-wrap:wrap} .trust-item{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);white-space:nowrap} .trust-item svg{width:15px;height:15px;flex-shrink:0} .trust-item .gold{color:var(--ink);fill:var(--ink)} .trust-sep{width:2px;height:16px;background:rgba(0,0,0,.28);flex-shrink:0} @media(max-width:600px){.trust-sep{display:none}.trust-bar-in{gap:14px}.trust-item{font-size:.7rem}} /* ── end frozen block ── */ /* ══ 12 · SERVICE LEDGER 01-17 — numbered rows replace the card grid (audit rank 8). Ordinals Barlow 900 at 2rem = 34px ≥ the 28px floor (rank 22). Descriptions UN-CLAMPED. 2px ink row rules. ══ */ .ledger{border:var(--rule-2);border-top:var(--rule-4);background:var(--white)} .led{display:grid;grid-template-columns:64px 1fr;column-gap:var(--sp-4);padding:clamp(16px,2vw,24px);border-bottom:var(--rule-2);align-content:start} .led:last-child{border-bottom:none} @media(min-width:1100px){ .ledger{display:grid;grid-template-columns:1fr 1fr} .led:nth-child(odd){border-right:var(--rule-2)} .led:nth-last-child(2):nth-child(odd){border-bottom:none} } .led-num{font-family:var(--font-display);font-weight:900;font-size:2rem;line-height:1;color:var(--ink);grid-row:1/4} .led h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);line-height:1.05} .led-badge{display:inline-block;background:var(--ink);color:var(--tx-inv);font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;margin-bottom:6px;justify-self:start} .led p{font-size:var(--fs-small);color:var(--tx-2);line-height:1.6;margin:6px 0 10px} .led a{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px} .led a:hover,.led a.s-hover{color:var(--link-on-light)} /* no gold hover fill — A1 */ /* ══ 13 · CARDS — white/paper, 2px ink frame, 4px gold top. No shadow, no hover lift (law). ══ */ .card{background:var(--white);border:var(--rule-2);border-top:var(--rule-gold-4);padding:clamp(22px,3vw,34px)} .card h2,.card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-h3);line-height:1.05;margin-bottom:var(--sp-3)} .card p{font-size:var(--fs-small);line-height:1.65;color:var(--tx-2)} /* ── review card ── */ .rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)} .rv-card{background:var(--white);border:var(--rule-2);border-top:var(--rule-gold-4);padding:22px 20px;display:flex;flex-direction:column} .rv-stars{color:var(--ink);font-size:1.05rem;letter-spacing:2px} .rv-quote{margin:10px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--tx-2)} .rv-attr{margin-top:14px;font-size:var(--fs-small);color:var(--tx-3)} .rv-attr strong{color:var(--ink)} .rv-more{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px} .rv-more:hover,.rv-more.s-hover{color:var(--link-on-light)} /* ── stat plate ── */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border:var(--rule-2);border-top:var(--rule-4);background:var(--white)} .stat-plate{padding:clamp(24px,4vw,48px) var(--sp-4);text-align:center;border-right:var(--rule-1)} .stat-plate:last-child{border-right:none} .stat-val{font-family:var(--font-display);font-weight:900;font-size:var(--fs-h2);line-height:1;color:var(--ink)} .stat-label{font-size:var(--fs-small);color:var(--tx-2);margin-top:var(--sp-2);line-height:1.5} .stat-label strong{display:block;font-family:var(--font-body);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);margin-bottom:4px} @media(max-width:768px){.stat-grid{grid-template-columns:1fr 1fr}.stat-plate{border-bottom:var(--rule-1)}.stat-plate:nth-child(n+3){border-bottom:none}} /* ── guide card (resources) ── */ .guide-card{border:var(--rule-2);background:var(--white)} .guide-head{background:var(--ink);color:var(--tx-inv);padding:10px 18px} .guide-card ul{list-style:none;padding:var(--sp-4) var(--sp-5)} .guide-card li{border-bottom:var(--rule-1)} .guide-card li:last-child{border-bottom:none} .guide-card li a{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)} .guide-card li a:hover,.guide-card li a.s-hover{color:var(--link-on-light);text-decoration:underline;text-underline-offset:3px} /* ── area group ── */ .area-group{border:var(--rule-2);border-top:var(--rule-gold-4);background:var(--white)} .area-group h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);background:var(--paper);padding:10px 14px;border-bottom:var(--rule-1);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)} .area-count{font-family:var(--font-body);font-size:var(--fs-label);font-weight:800;letter-spacing:.04em;background:var(--ink);color:var(--tx-inv);padding:3px 8px;flex-shrink:0} .area-group ul{list-style:none;padding:10px 14px} .area-group li a{display:flex;align-items:center;min-height:40px;font-size:var(--fs-small);color:var(--tx-2)} .area-group li a:hover,.area-group li a.s-hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* ══ 14 · DATA TABLE ═════════════════════════════════════════════════════ */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .data-table{width:100%;border-collapse:collapse;border:var(--rule-2);background:var(--white);font-size:var(--fs-small)} .data-table th{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);letter-spacing:.02em;text-align:left;background:var(--ink);color:var(--tx-inv);padding:10px 16px;white-space:nowrap} .data-table td{padding:12px 16px;border-bottom:var(--rule-1);color:var(--tx-2);line-height:1.6;vertical-align:top} .data-table tr:last-child td{border-bottom:none} .data-table td strong{color:var(--ink)} .data-table a{color:var(--link-on-light);text-decoration:underline;text-underline-offset:2px} .data-table a:hover{color:var(--ink)} /* ══ 15 · CERT BADGE ROW — uniform containers; the art itself untouched (no grade, no grayscale on manufacturer marks) ══ */ .cert-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:stretch} .cert-cell{flex:1 1 160px;min-height:120px;display:grid;place-items:center;background:var(--white);border:var(--rule-1);padding:var(--sp-4)} .cert-cell img{max-height:72px;width:auto;object-fit:contain} /* ══ 16 · FAQ ACCORDION — closed answers leave the a11y tree via visibility (C4/R8); aria-controls stays wired in markup. ══ */ .faq-list{border:var(--rule-2);background:var(--white)} .faq-item{border-bottom:var(--rule-1)} .faq-item:last-child{border-bottom:none} .faq-q{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);text-align:left;background:var(--white);border:none;cursor:pointer;padding:16px 18px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);letter-spacing:.02em;color:var(--ink);transition:background var(--dur)} .faq-q::after{content:'+';font-weight:900;font-size:1.4rem;flex-shrink:0} .faq-q:hover,.faq-q.s-hover{background:var(--paper)} .faq-item.open .faq-q{background:var(--ink);color:var(--white)} .faq-item.open .faq-q::after{content:'−'} .faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height var(--dur) var(--ease),visibility 0s linear var(--dur)} .faq-item.open .faq-a{max-height:800px;visibility:visible;transition:max-height var(--dur) var(--ease),visibility 0s} .faq-a-in{padding:16px 18px;font-size:var(--fs-small);line-height:1.65;color:var(--tx-2)} /* native
pages keep their exception (R8) */ details.faq-item .faq-a{max-height:none;overflow:visible;visibility:visible;transition:none} /* ══ 17 · PHOTO CAPTION (C6) — visible spec strip on every city-band and project photo; never text floated over the image. ══ */ .photo-frame{border:var(--rule-2);background:var(--white)} .photo-frame img{width:100%;height:auto} .photo-caption{background:var(--ink);color:var(--tx-inv);font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);letter-spacing:.02em;padding:10px 16px;border-top:var(--rule-gold-4)} .photo-caption small{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--fs-small);letter-spacing:0;text-transform:none;color:var(--tx-inv-2);margin-top:2px} /* ══ 17b · MAP FRAME (third-party-surfaces.md §3) — the contact-page Google Maps embed. Wrapper chrome only: system frame + the .photo-caption plate beneath. The embed URL, loading/referrerpolicy attrs and Google's tiles are untouched; no vendor internals are styled. ══ */ .map-frame{border:var(--rule-2);background:var(--white)} .map-frame iframe{display:block;width:100%;border:0} /* ══ 18 · LEAK STRIP ═════════════════════════════════════════════════════ */ .leak-strip{background:var(--ink);text-align:center;padding:13px 16px} .leak-strip p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--white)} .leak-strip a{color:var(--gold-action);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} /* text link on dark — legal */ .leak-strip a:hover,.leak-strip a.s-hover{color:var(--gold-pressed)} /* ══ 19 · CTA BAND — ink slab; gold lives ONLY in the act button ══ */ .cta{background:var(--ink);color:var(--tx-inv);text-align:center;padding:var(--sect-pad) 0} .cta .label{color:var(--tx-inv-2);display:block;margin-bottom:var(--sp-3)} .cta h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--fs-h2);line-height:var(--lh-display);margin-bottom:var(--sp-4)} .cta-body{max-width:560px;margin:0 auto var(--sp-6);color:var(--tx-inv-2)} .cta-btns{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap} .cta-nap{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--tx-inv-2)} /* ══ 20 · BREADCRUMB ═════════════════════════════════════════════════════ */ .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--tx-3)} .breadcrumb a{color:var(--tx-3);min-height:24px;display:inline-flex;align-items:center} .breadcrumb a:hover,.breadcrumb a.s-hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .breadcrumb [aria-current="page"]{color:var(--tx)} /* ══ 21 · OWNER TIMELINE (identity keep-list) ════════════════════════════ */ .career-timeline{display:flex;flex-direction:column} .timeline-item{display:grid;grid-template-columns:54px 1fr;gap:var(--sp-5);align-items:start;padding:0 0 var(--sp-5);position:relative} .timeline-item:last-child{padding-bottom:0} .timeline-item:not(:last-child)::before{content:'';position:absolute;left:26px;top:54px;bottom:0;width:2px;background:var(--ink)} .timeline-age{width:54px;height:54px;display:grid;place-items:center;background:var(--ink);color:var(--tx-inv);font-family:var(--font-display);font-weight:900;font-size:1.4rem;line-height:1} .timeline-item:last-child .timeline-age{background:var(--white);color:var(--ink);border:var(--rule-3)} .timeline-role{font-family:var(--font-body);font-weight:800;font-size:var(--fs-body);color:var(--ink);text-transform:uppercase;letter-spacing:.02em;margin-bottom:3px} .timeline-year{font-size:var(--fs-small);color:var(--tx-2)} /* ══ 22 · FOOTER — 4 columns, all-20-cities block (PageRank distribution). Headings are WHITE condensed (A1: gold footer headings are illegal). Link hover → gold text = legal dark-surface text link. ══ */ .footer{background:var(--ink);color:var(--tx-inv);padding:var(--sp-8) 0 0} .footer-grid{display:grid;gap:clamp(24px,2.5vw,44px);margin-bottom:var(--sp-7);grid-template-columns:1.6fr 1fr 2.2fr 1fr} .footer-col-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-plate);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-inv);margin-bottom:14px} .footer ul{list-style:none;display:flex;flex-direction:column} .footer ul a,.footer-contact a{display:flex;align-items:center;gap:10px;min-height:40px;font-size:var(--fs-small);color:var(--tx-inv-2);transition:color var(--dur)} .footer ul a:hover,.footer ul a.s-hover,.footer-contact a:hover,.footer-contact a.s-hover{color:var(--gold-action)} .footer-logo img{height:56px;width:auto} .footer-desc{font-size:var(--fs-small);line-height:1.7;color:var(--tx-inv-2);margin:16px 0 20px} .footer-contact{display:flex;flex-direction:column} .footer-contact svg{width:14px;height:14px;stroke:var(--tx-inv-2);fill:none;stroke-width:2;flex-shrink:0} .footer-viewall{display:inline-flex;align-items:center;min-height:40px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-action);margin-top:var(--sp-2)} .footer-viewall:hover,.footer-viewall.s-hover{color:var(--white)} .footer-areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} /* THE RULE ABOVE NEVER WON. `.footer ul` (0-1-1, flex-column) outranks `.footer-areas-grid` (0-1-0), so the city grid declared here and in the two media blocks below was dead code on every page — all 20 cities in a ~940px single-column tower (found on home 2026-08-24; survey confirmed the identical structure on all 134 pages). One display-only rule at 0-2-1 revives it; the column counts stay where they always were, in the 0-1-0 rules, so the 4/3/2 cascade below works as originally written. */ .footer ul.footer-areas-grid{display:grid} .footer-social{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)} .footer-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-dark);min-height:44px} .footer-social a:hover,.footer-social a.s-hover{border-color:var(--gold-action)} .footer-social svg{width:18px;height:18px;fill:var(--tx-inv-2)} .footer-bottom{border-top:1px solid var(--line-dark);padding:28px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3)} .footer-bottom p{font-size:.74rem;color:var(--tx-inv-2);line-height:1.7} .footer-bottom a{color:var(--tx-inv-2);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;padding:0 8px} .footer-bottom a:hover{color:var(--gold-action)} /* DESKTOP (>=1101): four columns and a full-width city band. The base template above (1.6fr 1fr 2.2fr 1fr) is FOUR tracks for FIVE children — the guides column was added by the orphan-blogs audit fix without extending it, orphaning Company onto its own row beside ~900px of empty ink at 1440. Row one becomes brand | services | guides | company; .footer-areas takes row 2 full-width explicitly and the auto-placement cursor seats guides and company in row one's free tracks. 4 city columns = ~245px each at 1104, so the longest anchor ("Roofing contractor in Sacramento") holds one line. Proven on home 2026-08-24, promoted sitewide (134/134 pages share the structure). */ @media(min-width:1101px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr} .footer-areas{grid-row:2;grid-column:1/-1} .footer-areas-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr}.footer-areas{grid-column:1/-1}.footer-areas-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.footer-grid{grid-template-columns:1fr}.footer-areas-grid{grid-template-columns:1fr 1fr}} /* ══ 23 · GALLERY CHROME — design/components.html only. Still law-bound: tokens only, classes only. Ships in the production sheet so the gallery is a true v2 surface with zero page-local CSS. ══ */ .gal-head{background:var(--ink);color:var(--tx-inv);padding:var(--sp-6) 0;border-bottom:var(--rule-gold-4)} .gal-head h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--fs-h2);line-height:var(--lh-display)} .gal-head p{color:var(--tx-inv-2);margin-top:var(--sp-3);max-width:70ch} .gal-section{padding:var(--sp-7) 0;border-bottom:var(--rule-1)} .gal-state{font-family:var(--font-body);font-weight:800;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--tx-3);margin:var(--sp-5) 0 var(--sp-2)} .gal-box{border:var(--rule-1);padding:var(--sp-5);background:var(--white)} .gal-box--ink{background:var(--ink)} .gal-box--paper{background:var(--paper)} .gal-box--gold{background:var(--gold-action)} .gal-box--flush{padding:0;overflow:hidden} .gal-rel{position:relative;min-height:72px;overflow:hidden} .gal-grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .gal-note{font-size:var(--fs-small);color:var(--tx-2);margin-top:var(--sp-3);max-width:80ch;line-height:1.6} .gal-form{max-width:460px} .na{color:var(--tx-3)} /* ══ 24 · ARTICLE — long-form reading surface (blog template canonical). Added 2026-08-15, Phase 3 blog migration — the one authorized shared- component addition for the 25 blog surfaces. Reading measure, paragraph rhythm, article headers, inline links, blockquote. Archivo body at token sizes; section headers are ink plates (display face). CONTRACT: prose (p/h2/h3/ul/ol/blockquote) sits as DIRECT children of .article; interleaved components (.card, .form-dark, .cta, .faq-list, .table-wrap, .photo-frame) keep their own type — the child combinators below never reach into them. ══ */ .article{max-width:72ch;margin:0 auto} .article-lead{font-size:var(--fs-body-lg);line-height:1.7;color:var(--tx-2);margin:var(--sp-5) 0 var(--sp-3)} .article-meta{font-size:var(--fs-small);color:var(--tx-3);margin:0 0 var(--sp-6)} .article-meta strong{color:var(--ink)} .article>p{margin:0 0 var(--sp-4);line-height:1.7;color:var(--tx-2)} .article>p strong{color:var(--ink)} .article>h2{display:inline-block;background:var(--ink);color:var(--tx-inv);border-left:var(--rule-gold-4);padding:10px 22px 10px 18px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--fs-h3);line-height:var(--lh-display);letter-spacing:.01em;margin:var(--sp-6) 0 var(--sp-4)} .article>h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:var(--fs-plate);line-height:1.05;color:var(--ink);margin:var(--sp-5) 0 var(--sp-3)} .article>ul,.article>ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)} .article>ul li,.article>ol li{line-height:1.7;color:var(--tx-2);margin-bottom:var(--sp-2)} .article>ul li strong,.article>ol li strong{color:var(--ink)} .article>p a,.article>ul li a,.article>ol li a{color:var(--link-on-light);text-decoration:underline;text-underline-offset:2px} .article>p a:hover,.article>p a.s-hover,.article>ul li a:hover,.article>ul li a.s-hover,.article>ol li a:hover,.article>ol li a.s-hover{color:var(--ink)} .article>blockquote{border-left:var(--rule-gold-4);background:var(--paper);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-4)} .article>blockquote p{line-height:1.7;color:var(--tx-2)} .article .card,.article .form-dark,.article .cta,.article .faq-list,.article .table-wrap,.article .photo-frame{margin:var(--sp-6) 0} /* ══ HERO — the composed first screen (2026-08-17) ═══════════════════════ BEFORE: the hero photo sat alone in a .wrap; the placard sat in the NEXT
, a full --sect-pad below it. Two stacked, unrelated blocks. The city templates even carried the comment "placard over a real hero img" for a composition that was never built. .hero binds figure + placard into one ruled unit — the placard reads as signage bolted to the building. TYPE RANK: .plate h1 resolved to --fs-h2 — the same rank as every section

on the page, so the single biggest statement had no rank above its own subheadings. --fs-hero (declared in the token sheet, spent nowhere) now carries the h1 on desktop. Mobile steps back to --fs-h2: --fs-hero's 3rem floor on a 375px screen pushes the CTA too far down. No new tokens. ORDER: placard FIRST, photo second. Photo-first was built and measured at 1440x1000 — the figure alone ran 733px and pushed the h1 to 1271px, i.e. below the fold. A composed first screen whose headline you have to scroll to is not composed. Statement, then evidence. Captions are stripped from the parity comparison, so the visible-text sequence is unchanged either way. (An earlier version of this comment also claimed the reorder hands LCP to the h1 text. Measured 2026-08-17: false — the LCP element is the hero before and after. See design/perf-2026-08-17.md.) */ .hero{border:var(--rule-2);border-top:var(--rule-4);background:var(--white)} .hero .plate{display:block;border-left:none;border-bottom:var(--rule-4); padding:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,32px)} .hero .photo-frame{border:none} /* the frame is now .hero's */ /* The library is mixed-orientation and modest-resolution (several heroes are portrait, e.g. 570x760). A fixed aspect-ratio crop would decapitate those, so cap the height instead and let cover do the cropping. */ .hero .photo-frame img{display:block;width:100%; max-height:min(56vh,560px);object-fit:cover} @media(max-width:768px){.hero .plate{margin:0}} /* .plate's full-bleed pull is wrong inside .hero — the frame already spans the wrap */ /* DESKTOP HERO — split, 2026-08-17 (second pass, after seeing it rendered). The first pass stacked a full-width placard on a full-width photo and set the h1 to --fs-hero. Measured on the live site at 1728x1080: the placard alone was 469px, the photo 560px, the hero 1098px — TALLER THAN THE VIEWPORT — and the first CTA landed at y=1390, i.e. 310px below the fold. A desktop visitor saw a black slab and a cropped photo and nothing else: no phone, no estimate button, no trust bar, no copy. That is a conversion defect wearing a design defect's clothes, and it is the thing that made the page look like a billboard. --fs-hero is NOT used here any more. It is a display-WORD scale (clamp(3rem,8vw,6rem) = 102px at this width) and this h1 is a 70-character SENTENCE; at 102px it wrapped to four lines of shouting caps. The h1 now takes --fs-h2 like other display headings — its dominance comes from position and the ink slab, not from point size. Below 1000px nothing changes: the stacked layout and mobile sizing are untouched. */ @media(min-width:1000px){ .hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch; min-height:clamp(400px,44vh,500px)} .hero .plate{display:flex;flex-direction:column;justify-content:center; border-bottom:none;border-right:var(--rule-4); padding:clamp(24px,2.6vw,36px) clamp(24px,2.6vw,36px)} .hero .photo-frame{display:flex;flex-direction:column;overflow:hidden;min-width:0} .hero .photo-frame img{flex:1 1 auto;height:100%;max-height:none;min-height:0} } /* SIGNATURE LEDGER ROW — the namesake. Gold RULE, not gold fill: --gold-action is reserved for CTAs/submit/hazard, and a gold-filled badge would read as a button. --rule-gold-4 is already sanctioned as a "card signature". */ .led--signature{border-left:var(--rule-gold-4);background:var(--paper)} /* ══ SITE-WIDE REPAIR PASS — 2026-08-19 ═══════════════════════════════════ Operator: "the website still looks terrible." A design review measured the page and found the causes were not the hero. Every item below was verified against the live DOM at 1440x900 before being written. */ /* R1 · CRITICAL — the "Meet the owner" card was a BROKEN inline element. with .card never setting display, so it computed to display:inline while containing a display:grid 54x54 chip. Block-in-inline fragmentation split the 2px border, dropped the chip onto the timeline rule and clipped the link text to "...CT THE OWNER →". Measured: the ONLY inline element on the page with block-level children (544x279 at y=3735). */ a.card{display:block} /* R2 · CRITICAL — .card had NO internal vertical rhythm. Measured inside the intro card: five children, every gap 0px, because the sheet set padding, border and type but never child spacing. The box carrying both CTAs read as an unstyled HTML dump while 224px of white sat idle above it. The watermark ordinal is absolutely positioned and must not take a margin. */ .card > * + *{margin-top:var(--sp-4)} .card > .led-num[aria-hidden="true"] + *{margin-top:0} .card .cert-row + .cert-row{margin-top:var(--sp-3)} /* R3 · The h1's was a SYNTHETIC OBLIQUE. The font budget ships Barlow Condensed 700/900 upright only — no italic exists — so the browser sheared the glyphs, in the first words anyone reads. 700 is a real shipped weight, so the clause still separates from the 900 lead-in, honestly this time. */ .plate h1 em,.plate h2 em{font-style:normal;font-weight:700} /* R4 · --sect-pad measured 112px, applied top AND bottom, so all 19 section boundaries were a 224px void — ~23% of an 18,600px page spent on nothing. 72px keeps a generous signage rhythm at half the cost. */ :root{--sect-pad:clamp(48px,5vw,72px)} /* R5 · Every grid ended in an empty cell: ledger 17 rows / 2 cols; .rv-grid at 2, 4, 5 and 8 items across 3 tracks. Four separate "ran out of content" moments. A trailing item at 3n+2 spans the gap; a 4-item grid becomes 2x2. */ .ledger > .led:last-child:nth-child(odd){grid-column:1 / -1} /* The span maths below is ONLY valid while .rv-grid is three tracks wide. .rv-grid is repeat(auto-fit,minmax(280px,1fr)), so it is ONE track on a phone — an unscoped `span 2` there invents a second track and doubles the grid, which measured as 92px of horizontal overflow at 375px and 147px at 320px. Three tracks need ~968px of viewport, hence the 1000px gate. */ @media(min-width:1000px){ .rv-grid > :last-child:nth-child(3n+2){grid-column:span 2} } /* R6 · Ledger rows carrying a .led-badge pushed their link into the ORDINAL column — measured "Shake Roofing" link at x=198 against x=274 for every other left-column row. .led is a 2-col grid and the badge makes a fourth child, which auto-placed back into column 1. Pin the columns explicitly. */ .led-num{grid-column:1} .led > *:not(.led-num){grid-column:2} /* R7 · Body copy ran ~139 characters per line at 1440. Cap the measure; the card keeps its full width, the prose stops being a wall. 54ch, NOT 74: the ch unit is the "0" glyph — in Archivo 1ch = 8.53px while the average rendered character is 6.14px (ratio 1.39), so the original 74ch admitted ~100 measured characters (max 97 counted on services/roof-repair, 2026-08-24). 54ch renders ~72-75, which is what this rule always claimed to do. Font-size-independent: ch scales with the type, so the character count holds at fs-small and fs-body-lg alike. text-wrap:pretty rides along: the narrower measure roughly doubled 1-2-word last lines (10 vs 4 across four sampled pages) and pretty claws most back in Chromium. Consequence, accepted deliberately: the intro-card leads that grew their type against this cap lose 224px of line width (828->604px, fill 80%->58% at 1440) — big type on a 100-character line was never a fix for measure, and the INTRO CARDS note below is amended to match. */ .card p,.card li{max-width:54ch;text-wrap:pretty} /* R8 · The cert cells were the only 1px hairline boxes in a system built on 2px/4px ink rules — they read as four ghost boxes. */ .cert-cell{border:var(--rule-2)} /* R5b · A 4-item grid across 3 tracks left the last card alone beside two empty cells (measured: last row 357px of 1104). 2x2 fills it. */ @media(min-width:1000px){ .rv-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} } /* R6b · The signature row's own 4px gold rule was consuming layout, pushing its content 4px right of its column-mates (link x=278 vs 274 — measured). Give the border back to the padding so the ledger column stays true. */ .led--signature{padding-left:calc(clamp(16px,2vw,24px) - 4px)} /* ══ HOME · SECTION 1 — the intro card ════════════════════════════════════ Operator 2026-08-19: "this section 1 looks terrible on the homepage." Measured defects: the right ~40% of a 1104px card sat empty once the prose was capped at 74ch; four solid ink chips sat directly beneath the two CTAs and competed with them; and the two fine-print paragraphs carried the same weight as the lead. Targeted POSITIONALLY (the section immediately after the hero wrap) so no HTML changes and parity is untouched. Desktop only — below 1000px the stack is unchanged. */ @media(min-width:1000px){ main > .wrap + .section > .wrap > .card{ display:grid; grid-template-columns:1fr minmax(240px,300px); column-gap:var(--sp-8); align-items:start; } /* left column: the argument and the actions */ main > .wrap + .section > .wrap > .card > .hero-body{grid-column:1;grid-row:1;margin-top:0} main > .wrap + .section > .wrap > .card > .cert-row:nth-of-type(1){grid-column:1;grid-row:2} /* the two notes become a FOOTER ROW across the whole card, side by side, instead of trailing under the buttons. Operator 2026-08-19 disliked the placement: the section was ending on grey small print rather than on the ask. Moving them ABOVE the CTAs was measured and rejected — it pushed the buttons from y691 to ~780, below the fold on a 1366x768 laptop. */ main > .wrap + .section > .wrap > .card > p:nth-of-type(2){grid-column:1;grid-row:3} main > .wrap + .section > .wrap > .card > p:nth-of-type(3){grid-column:2;grid-row:3} /* right column: the credentials, as a spec list rather than four ink blocks. Same facts, a third of the visual weight, and it fills the dead column. */ main > .wrap + .section > .wrap > .card > .cert-row:nth-of-type(2){ grid-column:2;grid-row:1 / span 2;align-self:stretch; display:flex;flex-direction:column;align-items:stretch;gap:0; margin-top:0;border-left:var(--rule-2);padding-left:var(--sp-5); } main > .wrap + .section > .wrap > .card > .cert-row:nth-of-type(2) .led-badge{ background:none;color:var(--ink); font-family:var(--font-display);font-weight:700; font-size:var(--fs-display-floor);letter-spacing:.02em;line-height:1.2; padding:10px 0;margin:0;border-bottom:var(--rule-1); } main > .wrap + .section > .wrap > .card > .cert-row:nth-of-type(2) .led-badge:last-child{ border-bottom:none; } /* the fine print stops shouting at lead-paragraph weight */ main > .wrap + .section > .wrap > .card > p:nth-of-type(2), main > .wrap + .section > .wrap > .card > p:nth-of-type(3){ border-top:var(--rule-1);padding-top:var(--sp-4);margin-top:var(--sp-6); color:var(--tx-3);font-size:var(--fs-small);max-width:none; } } /* ══ HOME · SECTION 4 — manufacturer certification badges ═════════════════ Measured 2026-08-19: the section ran 283px tall to show four 72px logos. Each sat in a 264x120 cell, so a 72px image floated in a 264px box — the trust signals read as postage stamps rather than credentials. It also sat 72px below the (frozen) gold trust bar, so two credential bands floated apart instead of grouping. Badge ART is off-limits, so nothing here touches the logos themselves — only how large they render and how the band is spaced. */ .section:has(.cert-cell){padding-top:var(--sp-6)} /* group with the trust bar */ .cert-cell img{max-height:96px} /* 72 -> 96, +33% */ .cert-cell{min-height:132px} /* ══ HOME · SECTION 5 — the quote form ════════════════════════════════════ Measured 2026-08-19: 1,159px tall. Below the name row every field was a full-width input in a ~1030px panel — a phone number, a ZIP code and a service dropdown each occupying the full width. Pairing them halves the rows without touching a single field name, id, the web3forms endpoint or any hidden UTM input. Hidden inputs are display:none in the UA stylesheet so they take no grid cell; .botcheck is out of flow. */ @media(min-width:641px){ .form-dark form{display:grid;grid-template-columns:1fr 1fr; column-gap:var(--sp-4);row-gap:var(--sp-4);align-items:start} .form-dark form > .ff-row{grid-column:1 / -1} .form-dark form > .ff:nth-last-of-type(1){grid-column:1 / -1} /* referral */ .form-dark form > .form-submit, .form-dark form > .form-note, .form-dark form > .form-tel{grid-column:1 / -1} } /* Required-field markers (operator 2026-08-19: "make everything required"). Driven off the control's own :required state via :has(), so a label can never disagree with its field — change the attribute and the marker follows. Gold is legal here: the token law sanctions gold text on --surface-form (10.3:1), and a required marker is an attention mark, not decoration. */ .form-dark .ff:has(:required) label::after{content:"*";color:var(--gold-action);margin-left:.25em;font-weight:800} /* ══ HOME · SECTION 6 — the stats band, cleaned up ════════════════════════ Kept as designed: four plates across, centred, numeral over key over description, ink frame with the 4px top rule. Four measured defects fixed. SCOPE — .stat-grid--figures, not .stat-grid. The class is shared with 8 city pages, but only this band holds FIGURES ("Free", "5", "~15", "20"). The city bands hold PHRASES ("C-39 licensed", "~40 mi", "2003–08"), and the same rules applied to them were measured wrapping every phrase onto two 102px lines and pushing the band from 269px to 375px. Two components wearing one class; the modifier separates them without touching the other eight pages. 1 · RAGGED DESCRIPTIONS. "MANUFACTURER CERTIFICATIONS" wraps to two lines, so its description started 19px below the other three (key heights 18/37/18/18 — four cells, three baselines). Reserving two lines for every key and hanging it from the bottom puts all four descriptions on one line whatever the wrap. Measured after: one baseline at every width ≥769px, one per row below it. The cost is a numeral-to-key gap that varies by 18px; that space sits in the open area under the numeral, where it reads as air rather than as misalignment. 2 · THE FIGURES WERE UNDERSET. --fs-h2 is the section-heading rank, so the numbers — the entire point of the band — carried no more weight than the h2 above them. --fs-hero is declared in the token sheet and, since the hero h1 was stepped back to --fs-h2 on 2026-08-17, spent NOWHERE. It is a display-WORD scale, which is exactly what a stat figure is (the reason it was wrong for the 70-character hero SENTENCE). No new token. 3 · HAIRLINE DIVIDERS. 1px --line inside a 2px/4px ink frame read as a different system. The certification cells were corrected the same way. 4 · AWKWARD WRAPS. 16px of horizontal padding ran the two longest descriptions to the divider and orphaned their last word ("Ripon, CA", "Bay"). Widened to 24px, with balanced wrapping — but only at the 4-column breakpoint: at 320px the extra 16px per cell pushed the min-content of the unbreakable word "CERTIFICATIONS" past its 1fr track and blew 14px of horizontal overflow onto the page. Measured across 18 viewports, 320→1728: zero overflow, zero figure overrun. */ .stat-grid--figures .stat-val{font-size:var(--fs-hero);line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .stat-grid--figures .stat-label{margin-top:var(--sp-3);text-wrap:balance} .stat-grid--figures .stat-label strong{min-height:3em;display:flex; align-items:flex-end;justify-content:center;margin-bottom:var(--sp-1)} .stat-grid--figures .stat-plate{border-right:var(--rule-2)} @media(max-width:768px){.stat-grid--figures .stat-plate{border-bottom:var(--rule-2)}} /* At 320-360 the widest key needs three lines, not two; without this the two-line reserve is overrun and the descriptions go ragged again. */ @media(max-width:360px){.stat-grid--figures .stat-label strong{min-height:4.5em}} @media(min-width:769px){ .section:has(.stat-grid--figures){padding-top:var(--sp-7)} .stat-grid--figures .stat-plate{padding:var(--sp-6) var(--sp-5)} } /* ══ HOME · SECTION 7 — meet the owner ════════════════════════════════════ SCOPE — .rv-grid:has(> .article). Scanned every page: .rv-grid is on 36 of them (8 instances on this page alone), and exactly ONE instance site-wide has an .article as a direct child. It is this one. Nothing here may touch the bare class. THE SECTION HAD NO OBJECT. Measured all 12 .plate headers on this page: eleven sit flush at 0px against what follows, because the flush mount IS the language — a placard bolted to a thing. Everywhere else that thing is bordered (the dark form, a card, a row of cards). This was the only .rv-grid on the page whose children are not bordered cards, so the plate was bolted to naked body text and the prose and the timeline floated side by side with nothing binding them. It is now one ruled plate — 4px ink top rule, story left, career right, 2px divider — the same construction as the stats band. 1 · THE SPLIT WAS INVERTED, BY A RULE OF THIS SHEET'S OWN MAKING. R5's `.rv-grid > :last-child:nth-child(3n+2){grid-column:span 2}` was written for review-card rows that ran out of content. This grid has two children and is not a card row: child 2 is :last-child AND nth-child(3n+2), so it took a second track. Measured at 1440: prose 357px, timeline+card 731px — the sparse column had twice the room of the dense one, and the prose ran ~48 characters per line, under the 60-75 band. The tell: at 999px the layout is already two equal columns, because R5 is gated at 1000. The fix restores at >=1000 what the page does one pixel lower. 2 · THE CARD WAS FLUSH AGAINST THE TIMELINE. Measured gap: 0px. Its gold rule landed under "2025. His own license." and read as a fifth row. 3 · THE CARD WAS A STACK IN AN EMPTY BOX — 731x297 for a monogram and four short lines, propping up one column. It is now a full-width signature block across the foot of the plate, which also levels the columns: the prose measures 308px of content against the timeline's 288px. 4 · THE BLOCK IS INK, so the section is bookended — headline plate at the top, the owner at the bottom, evidence in white between. The monogram inverts to white-on-ink, the same move .timeline-item:last-child already makes on the "23" node, so it reads as an avatar and not a fifth row. No gold was added: the token law lists its legal carriers and closes with "Nothing else." The two-column-plus-footer layout is possible without touching the HTML because `display:contents` removes the untouched wrapper
's box while keeping its children, promoting the timeline and the card to grid items that can be placed independently. Safe here — the wrapper is a plain
with no implicit ARIA role. */ @media(max-width:999px){ .rv-grid:has(> .article) .career-timeline + .card{margin-top:var(--sp-6)} } .rv-grid:has(> .article) .card{display:grid;grid-template-columns:auto 1fr; column-gap:var(--sp-5);align-items:start;background:var(--ink)} /* `grid-row:1 / -1` does NOT span implicit rows — -1 resolves against the EXPLICIT grid, which declares none, so it collapses to one row and forced row 1 to the monogram's 54px, opening a measured 45px hole between the name and the role. Both spans below are written as explicit counts. */ .rv-grid:has(> .article) .card > .timeline-age{grid-column:1;grid-row:1 / span 2; background:var(--white);color:var(--ink)} .rv-grid:has(> .article) .card > p{grid-column:2;color:var(--tx-inv-2)} .rv-grid:has(> .article) .card > p.label{color:var(--tx-inv)} .rv-grid:has(> .article) .card > p:first-of-type{margin-top:0} .rv-grid:has(> .article) .card .led-badge{background:var(--white);color:var(--ink)} @media(min-width:1000px){ .rv-grid:has(> .article){grid-template-columns:1fr 1fr;gap:0; border:var(--rule-2);border-top:var(--rule-4);background:var(--white)} .rv-grid:has(> .article) > .article{grid-column:1;grid-row:1;margin:0;max-width:none; border-right:var(--rule-2);padding:var(--sp-6)} .rv-grid:has(> .article) > .article + *{display:contents} .rv-grid:has(> .article) .career-timeline{grid-column:2;grid-row:1;padding:var(--sp-6)} /* Identity stack in column 2 — name, role, then the credential directly under them, because the licence belongs to the person, not to the strip. The CTA holds the right edge on its own. The monogram spans all three rows; they measure ~86px against its 54px, so it inflates none of them. */ .rv-grid:has(> .article) .card{grid-column:1 / -1;grid-row:2;margin-top:0; border:none;padding:var(--sp-6); grid-template-columns:auto 1fr auto;column-gap:var(--sp-6);align-items:center} .rv-grid:has(> .article) .card > .timeline-age{grid-row:1 / span 3;align-self:center} .rv-grid:has(> .article) .card > p{margin-top:0} .rv-grid:has(> .article) .card > p:nth-of-type(1){grid-column:2;grid-row:1} .rv-grid:has(> .article) .card > p:nth-of-type(2){grid-column:2;grid-row:2} .rv-grid:has(> .article) .card > p:nth-of-type(3){grid-column:2;grid-row:3;margin-top:var(--sp-2)} .rv-grid:has(> .article) .card > p:nth-of-type(4){grid-column:3;grid-row:1 / span 3} .rv-grid:has(> .article) .card .led-badge{margin-bottom:0} } /* ══ HOME · SECTION 8 — the services ledger ═══════════════════════════════ The healthiest section on the page — already a ruled object with 2px row rules and a 4px ink cap. Three measured defects, no restructuring. 1 · A 6px RULE THAT THE SYSTEM DOES NOT DEFINE. The intro .card sits flush against the .ledger (measured gap: 0), so the card's 2px bottom and the ledger's 4px top stacked into 6px of solid ink — heavier than --rule-4, the heaviest rule the token sheet declares. Dropping the card's bottom edge where a ledger follows leaves one 4px rule and merges the two boxes into a single object with a header cell. This pattern — card directly above ledger — occurs on 24 pages, and the fix is correct on all of them. 2 · BADGED ROWS BROKE THE HEADING LINE. "NuShake specialty" sat above the h3, so on rows 05/06 and 15/16 the two headings started 28px apart (measured). The badge now shares the heading's grid row, flagged right, which aligns every heading pair AND puts the three flags on one x — 16's and 17's land at the same 1130px because a right-column cell and the full-width spanning cell share a right edge. SCOPE: `.led > .led-badge` is the SIBLING markup variant — 3 cells, all on this page. The other variant nests the badge INSIDE .led-num (40 cells across 20 city pages) and is untouched by this selector. Verified on index + two city pages at 6 widths: zero collisions, zero movement on the nested variant. 3 · EVERY ROW SAID ITS OWN NAME TWICE. 15 of 17 rows end in a link whose text is identical to the h3 above it. The words have to stay — that link is the internal anchor text pointing at each service page — so the fix is to stop it LOOKING like a repeated heading. An arrow marks it as a control. Written as `"→" / ""` so the pseudo-element carries empty alt text and assistive tech reads the anchor, not the glyph. Explicit row placement below replaces auto-placement. .led-num already spans grid-row 1/4, so rows 1-3 were always the intended structure; naming them makes the badge's placement possible and the rest deterministic. Cells with no (26 site-wide) are unaffected — an unused row simply never fills. */ .card:has(+ .ledger){border-bottom:none} .led > .led-badge{grid-row:1;justify-self:end;align-self:center;margin-bottom:0} /* R6b · 2026-09-09 — R6 flags the badge onto the HEADING's grid row, and both land in the same cell (column 2, row 1), so they are stacked, not laid out. That is safe only while the heading text is short enough never to reach the badge. At 390 it was not: the home page printed "NUSHAKE SPECIALTY" on top of "SHAKE ROOFING" (measured 149px of overlap at 360/390/768, screenshot in the 2026-09-09 pass). R6's justification — aligning the headings of side-by-side row PAIRS — only exists at >=1100, where `.ledger` becomes two columns. Below that the ledger is a single column, there is no pair to align, so the badge takes its own row above the heading and nothing overlaps. Scoped with :has() to badged cells only. Measured all 2440 ledger cells against production at 5 widths: 2165 of 2185 unbadged cells are byte-identical; the other 20 are the 1100px row-mates of a badged cell, whose BOX matches the taller neighbour by 3-4px while their h3/p/link stay on the same pixel. */ @media(max-width:1099.98px){ .led:has(> .led-badge) > .led-badge{grid-row:1;justify-self:start;align-self:start;margin-bottom:6px} .led:has(> .led-badge) > .led-num{grid-row:1/5} .led:has(> .led-badge) > h3{grid-row:2} .led:has(> .led-badge) > p{grid-row:3} .led:has(> .led-badge) > a{grid-row:4} } .led > h3{grid-row:1} .led > p{grid-row:2} .led > a{grid-row:3} .led a::after{content:"→" / "";margin-left:.5em;text-decoration:none;display:inline-block} /* ══ INTRO CARDS — the blank half ═════════════════════════════════════════ Operator 2026-08-20: "theres a lot of blank space where the text is under the heading." Measured at 1440: every `.wrap > .card` is 1104px wide over a 1032px text column, and R7's 74ch cap resolves to 630.19px at --fs-small. That is a HARD ceiling of 61.1% column fill — 222 cards on 37 pages sit against it, median 59.8%, ~410px of dead line width each. AMENDED 2026-08-24: R7 has since been corrected to 54ch (the ch-trap — 74ch admitted ~100 measured characters, so the type-growth below was big type on an over-long line). The leads keep --fs-body-lg; their fill drops ~200px against the honest measure, which is the same left-pinned-column outcome the rest of the site converged on. The .data-table walls this note used to cite are fixed separately below. These paragraphs are section leads under a full-width ink plate, and this sheet already sizes a lead: .article-lead uses --fs-body-lg. Same token. Measured on this page: 600px of ink -> 788px, 54% -> 71% fill. Measured and rejected — `columns:2` on the same paragraphs (114 of 291 cards carry 1-2 line paragraphs, so it set them as single-line columns, and un-capping to feed the columns pushed CPL to 151, worse than the wall R7 exists to prevent); and dropping the card's frame to make a standfirst deck, which reads well alone but amputates the card+ledger weld directly below and converts only the plate-adjacent cards, leaving two treatments for one job on the same page. GATED AT 1100px, NOT 1000. --fs-body-lg is a flat 19.55px while --fs-plate is clamp(1.125rem,1.8vw,1.5rem), which floors at 19.125px. Between 1000 and 1086 the body copy would outrank every plate-level heading in the sheet. 1.8vw passes 19.55px at 1086px; 1100 is already this sheet's ledger breakpoint, so the gate reuses it. Below it the card is <=1010px and the cap is slack anyway. */ @media(min-width:1100px){ .wrap > .card > p:not(.label){font-size:var(--fs-body-lg)} /* A paragraph that is nothing but a .rv-more link is a control, not prose. Left to inherit, it rendered 31% larger than the label on the gold CTA directly above it — a tertiary text link out-ranking the primary button. */ .wrap > .card > p > .rv-more{font-size:var(--fs-small)} /* HOME · SECTION 1 opts out: it already fills its box with a second column (measured 100% coverage). Enlarging its lead grew the card 410px -> 489px and opened a 78px hole under the credential rail. */ main > .wrap + .section > .wrap > .card > p:not(.label){font-size:var(--fs-small)} } /* ══ CC · SERVICE AREA — COVERAGE CHIPS ══════════════════════════════════ Operator, twice: "it looks so bad ... make it more visually appealing/ professional." Measured why (index.html, 1440): five identical white boxes in a 3-track grid, 20 links stacked one per row at 40px each, and grid stretch forcing every box to its row-mate's height — the 2-city "Delta & Contra Costa" box measured the same 320px as the 4-city boxes, ~180px of it empty. 661px of grid to carry 20 links. The move: the region's