/* ============================================================ TYPOGRAPHY SYSTEM — single source of truth for the whole site 5 roles: Display / Lead / Section head / Label chip / Body+Caption Fonts: Albert Sans 900 ("H3") for heads, Helvetica Neue for text. Loaded last in so it wins ties against the legacy blocks. ============================================================ */ /* ---- 1. DISPLAY — open tracking, a little line air ---------- */ html body h1.fs-super.title{ letter-spacing:.015em!important; line-height:1.02!important; -webkit-text-stroke:0!important; } /* ---- 2. EYEBROW — duplicate of the display title: removed on desktop, restyled as plain sentence-case on small screens (there the sticky display may not render) ---------------- */ html body section.project-info section.title-block h1.h5m-h3d.bold, html body section.project-info section.title-block h2.h5m-h3d.bold{ display:none!important; } /* ---- 3. LEAD / SUBTITLE ------------------------------------- */ html body section.project-info section.title-block h3.h5m-h3d.bold, html body section.title-block h3.h5m-h3d.bold{ font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important; font-size:30px!important; font-weight:400!important; line-height:1.35!important; -webkit-text-stroke:0!important; } @media(max-width:700px){ html body section.project-info section.title-block h3.h5m-h3d.bold, html body section.title-block h3.h5m-h3d.bold{font-size:26px!important} } /* ---- 4. LABEL CHIPS — the one tier with a background -------- document-level labels & kickers become black plates. */ html body .vertical-grid .text-row p.h3.cs-label{ display:inline-block!important; width:-moz-fit-content; width:fit-content; background:#111!important; color:#fff!important; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important; font-size:11.5px!important; font-weight:700!important; letter-spacing:.1em!important; text-transform:uppercase!important; line-height:1.5!important; padding:5px 10px 4px!important; border-radius:3px!important; opacity:1!important; -webkit-text-stroke:0!important; } /* ---- 4b. KICKERS — quiet uppercase text (not chips) --------- */ html body .vertical-grid .text-row p.h3.cs-kicker, html body #about-article .ab-kicker, html body .ab2-kicker{ background:none!important; color:#565656!important; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important; font-size:13px!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; line-height:1.6!important; opacity:1!important; -webkit-text-stroke:0!important; } /* ---- 5. SECTION HEADS --------------------------------------- */ html body .vertical-grid .text-row p.h3.cs-h{ font-family:H3,sans-serif!important; font-size:28px!important; line-height:1.2!important; -webkit-text-stroke:0!important; } /* ---- 6. STAT — merges with the lead size -------------------- (also fixes vollie, which lacked the stat font patch) */ html body .vertical-grid .text-row p.h3.cs-stat{ font-family:H3,sans-serif!important; font-size:34px!important; line-height:1.18!important; font-weight:700!important; -webkit-text-stroke:0!important; } /* ---- 7. BODY — one size, one measure, all pages ------------- */ html body .vertical-grid .text-row p.h3:not(.cs-h):not(.cs-label):not(.cs-kicker):not(.cs-stat):not(.cs-img):not(.cs-imganim):not(.cs-cta-btn):not(.cs-cta-cap):not(.cs-cta-live){ font-size:19px!important; line-height:1.62!important; max-width:700px!important; } html body .vertical-grid .text-row{max-width:820px} /* ---- 8. CAPTIONS — one style, AA-passing grey --------------- */ html body .cs-caro-cap, html body .cs-ws-cap, html body .scope-cap, html body .ev-legend, html body p.cs-cta-cap{ font-size:14px!important; color:#6a6a6a!important; line-height:1.5!important; } /* image placeholder frames: readable grey until real images land */ html body .vertical-grid .text-row p.h3.cs-img, html body .vertical-grid .text-row p.h3.cs-imganim{ color:#6a6a6a!important; } /* ---- 9. GRAPHIC MICRO-LABELS — one quiet uppercase token ---- (inside the native graphics; chips stay document-level) */ html body .nx-tag, html body .scope-tag, html body .tr-step, html body .stk-badge, html body .tr-interp-h, html body .tr-eyebrow, html body .pipe-eyebrow, html body .pv-eyebrow{ font-size:11px!important; font-weight:700!important; letter-spacing:.08em!important; color:#565656!important; text-transform:uppercase!important; } /* ---- 10. NEXT-CASE TITLE — joins the section-head token ----- */ html body .nx-title{ font-family:H3,sans-serif!important; font-size:28px!important; line-height:1.2!important; font-weight:700!important; } /* ---- 11. ABOUT PAGE — same system, purple removed ----------- */ html body #about-article .ab-h, html body .ab-h{ font-family:H3,sans-serif!important; font-size:28px!important; line-height:1.2!important; } html body .ab-p{ font-size:19px!important; line-height:1.62!important; } html body #about-article a, html body #about-article a:hover{color:#272727!important} /* ---- 12. STROKE HACKS — retired (real 900 carries weight) --- */ html body .vertical-grid .text-row p.h3, html body .ev-h, html body .scope-h{ -webkit-text-stroke:0!important; } /* ============================================================ 13. SPACING SYSTEM — one rhythm across every case study The gap ABOVE a block signals grouping. Implemented as row padding (how the site already spaces rows); a gap between two rows = upper.padding-bottom + lower.padding-top. Targets: section 60 · sub-point 32 · paragraph 18 head->body 14 · chip->body 12 · image 44 Base rule first, modifiers after (equal specificity, source order breaks the tie). ============================================================ */ html body .vertical-grid .text-row{margin-top:0!important} /* neutralise donor -6px margin so gaps = padding sums */ html body .vertical-grid .row-gutter:has(.text-row) .text-row{ padding-top:9px!important;padding-bottom:9px!important; /* paragraph rhythm: 9+9 = 18 */ } html body .vertical-grid .row-gutter:has(.cs-h) .text-row{ padding-top:51px!important;padding-bottom:5px!important; /* section 60 above / 14 to its body */ } html body .vertical-grid .row-gutter:has(.cs-label) .text-row{ padding-top:23px!important;padding-bottom:3px!important; /* sub-point 32 above / 12 to its body */ } html body .vertical-grid .row-gutter:has(.cs-stat) .text-row{ padding-bottom:5px!important; /* stat hugs its following body */ } html body .vertical-grid .row-gutter:has(.cs-img) .text-row, html body .vertical-grid .row-gutter:has(.cs-imganim) .text-row{ padding-top:35px!important;padding-bottom:35px!important; /* image frames stand alone: 44 each side */ } /* ---- 14. DONOR LEFTOVERS — hidden (bottom-menu layout toggle, horizontal-grid brand video showcase) ------------------- */ html body #bottom-menu #layout-btn, html body button#layout-btn, html body #layout-btn{display:none!important;visibility:hidden!important;pointer-events:none!important} html body section.horizontal-grid{display:none!important}