/* ============================================================================ bto-system.css — THE RULEBOOK. One file. Every page reads it. FOUNDER, 2026-08-06: "how can we merge the stack so the website feels the same across pages" -> "do rulebook then the headlines." ── WHY THIS FILE EXISTS ────────────────────────────────────────────────── The site is built on two stacks (React/Vite for home + services, static HTML for work/about/contact/founder) and that was never the problem. The problem is that ONE design system was written down many times. Measured 2026-08-06, before this file existed: #FFBF65 (the amber) typed by hand in 35 files the amber slab ruleset redrawn from scratch in 6 files --bto-shell / --bto-gutter declared in 5 files bto-footer.css <-> footer.css "two copies, keep in sync" — 347 lines apart bto-header.css <-> bto-header.css — 94 lines apart bto-type.css <-> svc-type.css — 771 lines apart Three pairs that were documented as identical twins had already drifted into different sheets. That is the disease. Merging the two BUILD stacks would have left all 35 copies of the amber intact, just in one folder. ── HOW IT REACHES BOTH STACKS ──────────────────────────────────────────── 🔴 THIS IS THE ONLY PHYSICAL COPY. There is no twin to keep in sync, and creating one re-opens the exact fault this file closes. static pages React stack import "../../website-pixy-rebuild/final/bto-css/bto-system.css" The React import reaches OUTSIDE the vite project root on purpose. Vite inlines it at build time, so home + services get the rulebook baked into their `assets/main-*.css` bundle and no second file ships. ── THE ONE CASCADE RULE THAT MAKES IT WORK ─────────────────────────────── 🔴 UNLAYERED, AND LOADED LAST ON BOTH STACKS. `bto-spylt/src/index.css` line 2 is `@import "tailwindcss"`, which establishes theme -> base -> components -> utilities. An unlayered rule beats EVERY layered one by cascade origin, regardless of specificity — so nothing here needs `!important` to outrank a Tailwind utility. Never wrap this file in `@layer`. ⚠ On the static side the opponent is different: Mokko's vendor sheet is 12k+ lines with genuinely high specificity and one `!important`. Cascade origin does NOT beat `!important`. Where a primitive below has to win against Mokko, it says so at the rule. ── WHAT BELONGS IN HERE, AND WHAT DOES NOT ─────────────────────────────── ✅ IN: values that must be identical on all six pages — the palette, the type families, the heading ladder, the shell, and the primitives (.bto-masthead, .bto-slab, .bto-eyebrow, .bto-lead). 🔴 OUT: anything one page does and the others do not. Panel layout, grid geometry, pin behaviour, per-section grounds. Those stay in their own sheets. A rule that lives here and applies to one page is how a rulebook turns back into a junk drawer. ⚠ THIS FILE ALONE CHANGES NOTHING ON SCREEN. It defines the vocabulary; the headlines have to be repointed onto it (phase 2) before anything moves. That is deliberate — it means this can ship without touching a single page. ========================================================================== */ :root { /* ── GROUNDS ───────────────────────────────────────────────────────────── Three, and never two adjacent. This is the §3.2 rule the whole site is built on; it is a SEQUENCE rule, so it cannot be enforced from a stylesheet — it is recorded here because this is where someone will look for it. ⚠ `--bto-navy` is ALSO defined per-theme in bto-about-grounds.css, because `--bg-inset-dark` becomes #003A6C in dark mode and a hardcoded navy collapses onto the dark panels when the header's theme disc is pressed. That sheet's definition is the one that matters on a themed page; this is the light-mode default for everything else. */ --bto-ink: #13181B; --bto-navy: #003A6C; --bto-cream: #F0EEEB; --bto-mid: #CCD5DA; /* ── THE ACCENT ────────────────────────────────────────────────────────── 🔴 AMBER IS PAPER, NEVER TEXT. Measured: #FFBF65 is 1.32:1 on cream and 1.24:1 on the mid — below the 3:1 large-text floor by more than half. It is legal as a background with ink reversed out of it (10.98:1) and as a focus ring on any ground. When a design wants "amber words", it takes --bto-accent-text instead, which is the audited substitute. */ --bto-amber: #FFBF65; --bto-amber-hover: #FFD08F; --bto-accent-text: #854D00; /* 5.93:1 on cream · 5.6:1 on the mid */ /* ── THE TWO FAMILIES ──────────────────────────────────────────────────── Antonio is a CONDENSED DISPLAY face — 25% narrower than a normal grotesque for the same string. It set 211 elements of body copy once, because index.css made it the inherited default; that is the single worst type fault this site has had. Display only. Running text is Neue Montreal. ⚠ ProximaNova is RETIRED (there was never a Bold file). Do not re-add it. */ --bto-display: "Antonio", "Archivo", sans-serif; --bto-text: "Neue Montreal", "Archivo", sans-serif; /* ── THE HEADING LADDER ────────────────────────────────────────────────── Flat px, not clamps, and that is inherited rather than chosen: About was measured against masterproductionhouse.com and shipped flat, then the other five pages were unified onto it. Verified on all six at 2560/1440/390. d1 60 the page hero, one per page d2 48 every section masthead d3 36 the closing head, and d2's own phone step d4 30 sub-heads inside a section d5 20 card titles 🔴 THE TWO SERVICES PANELS AT 64.8px ARE OUTLIERS, NOT A SECOND LADDER. `.spb-head` and `.svcseo-h1` run clamp(30px, 4.5vw, 68px) — 64.8 at 1440 — against 36 headlines elsewhere at 48/60. Panel 2 was matched to panel 3 on 2026-08-06 to answer "panel two doesn't match the other panels", which was true and fixed the wrong way round: panel 3 was the odd one. Both come to d2 in phase 2. */ --bto-d1: 60px; --bto-d2: 48px; --bto-d3: 36px; --bto-d4: 30px; --bto-d5: 20px; /* display leading is TIGHTER than sentence-case leading and it is not a rounding difference: 1.25 is right for sentence-case Space Grotesk with real ascenders and descenders, and wrong for condensed Antonio set in CAPS, which needs less leading, not more. */ --bto-display-lh: 1.05; --bto-display-ls: -.02em; /* ── RUNNING TEXT ────────────────────────────────────────────────────────*/ --bto-lead-size: 16px; --bto-lead-lh: 32px; --bto-body-size: 16px; --bto-body-lh: 28px; --bto-eyebrow-size: 14px; --bto-eyebrow-lh: 20px; /* 🔴 MEASURE CAPS TAKE `em`, NEVER `ch`. `ch` is the width of the ZERO GLYPH, not an average character: a 68ch cap computed to 674px and still rendered 88 real characters, while every number said the cap was applied. ~2 characters per em, so 34em ≈ 68 characters. ⚠ And a measure cap NEVER goes on display type — `.svw-head` had max-width:16ch, so cutting it 63px -> 40px cut the box 500 -> 316 in the same stroke and the headline still wrapped to five lines. A headline fills its column and is sized to fit. */ --bto-measure: 34em; /* ── THE SHELL ─────────────────────────────────────────────────────────── 1280 of content inside an 80px gutter, in a 1440 box, centred. 🔴 A FULL-BLEED OR ABSOLUTELY-POSITIONED ELEMENT CANNOT USE THE FLAT 80. A wrapper band's content edge is `(100vw − 1440)/2 + 80`, which moves outward with the viewport; an element with no max-width set to a flat 80 is pinned to the far left forever. It measures clean at exactly 1440 and is 560px adrift at 2560 — the single most expensive mistake of the 2026-08-06 session, made twice, on a founder who works on a 2560 monitor. viewport flowed band flat 80 --bto-edge 1440 80 80 80 ✓ 1920 320 80 320 2560 640 80 640 Anything that must line up with a wrapper but is not inside one takes --bto-edge. Verify every alignment claim at 1440 AND 1920 AND 2560. */ --bto-shell: 1440px; --bto-gutter: 80px; --bto-edge: max(80px, calc((100vw - 1280px) / 2)); /* band rhythm — 80/80, hero 144/80 */ --bto-band-pad: 80px; --bto-hero-pad-top: 144px; /* ── THE SLAB ──────────────────────────────────────────────────────────── Angle and edge as tokens because the slab is ONE object with several homes and they had drifted into four. Measured 2026-08-06: .spb-head-slab -2.5deg border .058em padding 0 .14em .1em .svw-head-slab -3deg border .0788em padding 0 .12em .21em .sva-head-slab -3deg border .0788em (navy edge) .bwl-slab-word -3deg no border padding .04em .2em .1em -3deg wins: it is the majority, it is panel 1's angle, and it is the angle every clearance calculation on the site already assumes. */ --bto-slab-angle: -3deg; --bto-slab-edge: var(--bto-ink); } /* ══ PRIMITIVES ═════════════════════════════════════════════════════════════ Additive classes. Each sets TYPE ONLY and leaves layout to the panel, so a primitive can be added to an existing headline without disturbing whatever grid, flex or lockup it already sits in. That is what makes phase 2 safe to do one headline at a time. ========================================================================== */ /* ── THE MASTHEAD ────────────────────────────────────────────────────────── The section head. Defaults to d2 (48) because that is what 30 of the site's 38 headlines already are; the hero and close take a modifier. ⚠ NO `display` HERE, deliberately. Some lockups stack their lines as blocks and some run them inline; forcing either would break half of them. The row layout is opt-in below. */ .bto-masthead { margin: 0; font-family: var(--bto-display); font-weight: 700; text-transform: uppercase; font-size: var(--bto-d2); line-height: var(--bto-display-lh); letter-spacing: var(--bto-display-ls); } .bto-masthead--hero { font-size: var(--bto-d1); } .bto-masthead--close { font-size: var(--bto-d3); } /* opt-in layout for a ONE-LINE head carrying an inline slab, e.g. `Video production services`. 🔴 THE WORD GAPS ARE `column-gap`, NOT SPACE CHARACTERS — a whitespace-only text node is never rendered as a flex item. So the markup MUST still carry real spaces between the spans (in JSX, an explicit {" "}), or the heading's textContent welds into one word. It looks perfect on screen and is one keyword-free string to every crawler. `.spb-head` has this defect today. */ .bto-masthead--row { display: flex; flex-wrap: wrap; align-items: center; column-gap: .28em; row-gap: .1em; } /* ── THE SLAB ────────────────────────────────────────────────────────────── Amber paper, ink reversed out of it, tilted, with a hairline edge so the plate does not dissolve into a light ground. ⚠ ONE PER HEADLINE, AND ONE AMBER OBJECT PER PANEL. The accent budget is the thing that makes the slab read as emphasis rather than as decoration; a panel that already spends its amber on a CTA or an active dot has spent it. */ /* 🔴 THE BORDER IS GROUND-DEPENDENT, AND THAT IS WHY THE TWO IMPLEMENTATIONS DIVERGED — each was right for its own panel. Shot side by side 2026-08-06: on INK, the unbordered plate (`.bto-static .bto-slab`, 13 headlines across about/contact/founder) reads perfectly — amber against #13181B needs no help. On CREAM, the services slabs need the hairline or the plate's edge dissolves into the ground. ✅ ONE RULE COVERS BOTH, because the edge is INK: on an ink ground an ink border is invisible, so the dark pages render exactly as they do today. On navy it is a faint dark hairline. On cream it is the cut it needs to be. ⚠ `box-sizing` therefore matters — the border is drawn INSIDE the plate under border-box and outside it under content-box, which changes the visible amber by ~4px a side at 48px. Verified against the live pages rather than assumed. ⚠ `box-decoration-break: clone` is inherited from the static implementation and is load-bearing: without it a slab that wraps to a second line gets its padding and background only on the first fragment. */ .bto-slab { display: inline-block; rotate: var(--bto-slab-angle); border: .0788em solid var(--bto-slab-edge); background: var(--bto-amber); color: var(--bto-ink); /* -webkit-text-fill-color too, or a headline using a gradient/clip text treatment paints straight through the slab's own colour */ -webkit-text-fill-color: var(--bto-ink); padding: .04em .2em .1em; border-radius: 0; /* it is a cut, not a chip */ -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* the slab as its OWN line inside a stacked lockup (line / slab / line). `width: max-content` so the plate hugs the words rather than the column. 🔴 A ROTATED SLAB STACKED UNDER ANOTHER LINE NEEDS EXPLICIT CLEARANCE — the tilt lifts the box's right end by half-width × sin(3°), ~17px on a 640px slab, which is enough to put the amber corner under the line above it. Pay it with margin, never by loosening the line-height. */ .bto-slab--line { display: block; width: max-content; max-width: 100%; } /* ── THE EYEBROW ───────────────────────────────────────────────────────────*/ .bto-eyebrow { margin: 0 0 20px; font-family: var(--bto-text); font-size: var(--bto-eyebrow-size); line-height: var(--bto-eyebrow-lh); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; } /* ── RUNNING TEXT ──────────────────────────────────────────────────────────*/ .bto-lead { font-family: var(--bto-text); font-size: var(--bto-lead-size); line-height: var(--bto-lead-lh); max-width: var(--bto-measure); } .bto-body { font-family: var(--bto-text); font-size: var(--bto-body-size); line-height: var(--bto-body-lh); max-width: var(--bto-measure); } /* ── THE SHELL ─────────────────────────────────────────────────────────────*/ .bto-shell { max-width: var(--bto-shell); margin-inline: auto; padding-inline: var(--bto-gutter); } /* ══ PHONE ══════════════════════════════════════════════════════════════════ One step, at 640. The section masthead drops to d3; the hero drops to d2. Matches bto-about-mph.css:341, which is the rule the other five pages were unified onto. */ @media (max-width: 640px) { :root { --bto-gutter: 24px; --bto-band-pad: 56px; --bto-hero-pad-top: 96px; } .bto-masthead { font-size: var(--bto-d3); } .bto-masthead--hero { font-size: var(--bto-d2); } .bto-masthead--close { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { /* nothing here animates; the block exists so a future primitive cannot be added without the author meeting this question. */ } /* ══════════════════════════════════════════════════════════════════════════ §MIGRATION — the legacy selectors, repointed onto the rulebook. FOUNDER, 2026-08-06: "all the panels have diffrent font, scacing" -> "make sure all the pages have the similar font, spacing highlight subtext etc the same." 🔴 THIS BLOCK IS A BRIDGE AND IS MEANT TO SHRINK. The right end state is markup carrying `.bto-masthead` / `.bto-slab` directly; until then this maps what exists onto the system so the six pages agree TODAY without 38 markup edits across 11 files and two build stacks. When a headline is migrated in markup, delete its selector from here. ── 🔴 WHY EVERY SELECTOR STARTS WITH `:root:root` ───────────────────────── THE RULEBOOK CANNOT RELY ON LOAD ORDER, AND ASSUMING IT COULD COST A BUILD CYCLE. It is imported LAST in App.jsx and HomeApp.jsx, which is correct in the source — but vite emits it as its own chunk and the built page loads it FIRST: <- the rulebook <- every panel sheet, AFTER it So on home and services every migration rule that merely TIED with a page sheet on specificity silently lost. Measured: `.p2-lead` stayed 16.6/26 and `.bwl-title` stayed 60/67 while the rules that happened to be more specific (the mastheads) applied fine — the block looked half-working, which is worse than not working at all. Chunk order is vite's to decide and will move again. `:root:root` is two pseudo-classes on , so it adds (0,2,0) to every selector below and makes them order-independent. It beats the highest competing rule found on the site — `body.wk-mph .wv3-hero__lead` at (0,2,1) — without `!important`, which would be unanswerable by the page sheets later. ⚠ Do not "tidy" it away. It is the only reason this block applies. ⚠ IT IS THREE `:root`s, NOT TWO, AND THE THIRD WAS EARNED AT 390. Two gave (0,2,0) + the selector, which held at 1440 and 2560 and LOST ON MOBILE: the per-page sheets write their phone rules as `body.bto-static.bto-mph .bto-panel .content__title` = (0,4,1), and a media query adds NO specificity of its own, so a (0,4,0) rule inside `@media` still loses to a (0,4,1) rule outside one. Measured: desktop unified at 4 variants while 390 sat at 6. FOUR, in the end, and the fourth exposed a REAL PRE-EXISTING BUG rather than just losing a specificity race. `bto-about-mph.css` closes with body.bto-static.bto-mph .bto-panel.bto-static__sec .content__title {48px} at (0,5,1) and with NO media query, placed after that same sheet's own `@media (max-width:991px){...36px}` and `@media (max-width:575px){...28px}`. An unmediated rule that outranks them means ABOUT'S MOBILE HEADING RULES HAVE NEVER FIRED — its section heads render 48px on a 390px screen while founder's render 36. That is not something this pass introduced; it is something this pass could only find by measuring all six pages at three widths. Four `:root`s make every rule here (0,6,0), which clears (0,5,1), and the block now behaves identically at every width — the only way a rulebook is worth having. If a page sheet ever needs to win back, it should be fixed at the sheet, not by adding a fifth. ── WHAT IS DELIBERATELY LEFT ALONE ──────────────────────────────────────── 🔴 `.p3-t1` / `.p3-t2` — home's 295px WORK marquee. A graphic, not a headline. 🔴 `.bf-head` / `.bf-mark` — the footer, already unified at 36 on all six. bto-footer.css's contract is that nothing downstream reaches into it. 🔴 `.hero-title` / `.hero-subtitle` on /services/ — 43.9px Neue Montreal, the only page hero not in Antonio, so it genuinely IS the odd one. Left because its lines are one sentence split for SplitText and `.hero-subtitle` also contains the second display line: restyling is an animation-contract change, not a type change. Surfaced, not done quietly. 🟡 `.first-message` / `.text-red-brown` / `.second-message` — SvcAssemble's pinned act 1. FOUNDER, 2026-08-07: "the pinned Every capability pane atleast match the font." THE FAMILY IS NOW MATCHED AND THE SIZES ARE NOT, and that split is the whole point of the change: ✅ FAMILY IS SAFE IN THE ONLY DIRECTION THAT MATTERS. Antonio is a CONDENSED face — ~25% narrower than Neue Montreal for the same string at the same size — so every line gets SHORTER, never longer. Lines can only wrap less, so the lockup can only get shorter, and the act's height budget can only gain room. A family swap the other way (Antonio -> grotesque) would be the dangerous one. 🔴 SIZES STAY. 48/60 here are load-bearing: the act is `position:absolute; height:100%` in a 100dvh pinned stage whose sibling act already clips card copy at 1512, and the amber plate behind "One team." scales with the hero while its line box does not — that pairing is what ate the word DESIGN once already (svc-assemble.css §FAULT ②). Enlarging type here needs `_probe-svcact2.cjs`, not a blanket rule. ⚠ The panel already renders UPPERCASE, so no text-transform is added — checked on the live page before writing this, not assumed from the JSX, which carries sentence case. ========================================================================== */ /* ── PAGE HEROES -> d1 ─────────────────────────────────────────────────────*/ :root:root:root:root .bto-static .page-header__title, :root:root:root:root .wv3-hero .wv3-hero__title { font-family: var(--bto-display); font-size: var(--bto-d1); line-height: var(--bto-display-lh); letter-spacing: var(--bto-display-ls); } /* ── SECTION MASTHEADS -> d2 ─────────────────────────────────────────────── 🔴 `.svcseo-h1` and `.spb-head` COME DOWN from clamp(30px,4.5vw,68px) = 64.8 at 1440. They were the only two headlines on the site off the 48/60 ladder — 36 others were already on it — so matching panel 2 to panel 3 earlier today fixed the founder's complaint against the wrong reference. */ :root:root:root:root .svc-page .svcseo-h1, :root:root:root:root .svc-page .spb-head, :root:root:root:root .svc-page .sva-act-head, :root:root:root:root .svc-page .svw-head, :root:root:root:root .svc-page .svcfaq-title, :root:root:root:root .bto-static .content__title, :root:root:root:root .bto-static .svc-sec-head, :root:root:root:root .bw-panel .bw-title, :root:root:root:root .p2-panel .bto-banner-title, :root:root:root:root .p4-panel .p4-title, :root:root:root:root .p5-panel .p5-title { font-family: var(--bto-display); font-size: var(--bto-d2); line-height: var(--bto-display-lh); letter-spacing: var(--bto-display-ls); } /* 🔴 `.bwl-title` — home's brand wall — takes d2 but KEEPS ITS OWN 1.12 LEADING, so it is not in the list above. The lockup's rotated slab lifts its right end by half-width × sin(3°); the looser leading is what pays for that clearance, and the site's 1.05 would put the amber corner under the line above it. Size comes down, leading does not. ✅ Safe in the collision direction: a smaller title makes the lockup box SHORTER, so the hand-laid tile ring gains clearance rather than losing it. ⚠ The parent is `.bwl-lockup`, NOT `.bwl-panel` — a first pass guessed the latter and matched nothing. */ :root:root:root:root .bwl-lockup .bwl-title { font-family: var(--bto-display); font-size: var(--bto-d2); letter-spacing: var(--bto-display-ls); } /* the closing head keeps its own step — the quiet one before the ask */ :root:root:root:root .bto-static #about-close .content__title, :root:root:root:root .bto-static #contact-close .content__title, :root:root:root:root .bto-static #founder-close .svc-sec-head { font-size: var(--bto-d3); } /* ── THE PINNED ACT 1 — FAMILY ONLY ─────────────────────────────────────── `font-family` and nothing else. No size, no line-height, no tracking: see the note in this block's header for why the sizes are load-bearing. This is the one place in the migration where matching HALF the system is the correct outcome rather than an unfinished one. */ :root:root:root:root .svc-page .sva-hero .first-message, :root:root:root:root .svc-page .sva-hero .text-red-brown, :root:root:root:root .svc-page .sva-hero .second-message { font-family: var(--bto-display); } /* ── SUBTEXT -> the lead register, 16/32 ─────────────────────────────────── about/founder/contact were already on 16/28 body + 16/32 lead. The five below were each their own number — 16.6/26, 16.1/26, 18/32 — mostly clamps that were never repointed when the pages were unified. Body copy stays 16/28. */ :root:root:root:root .p2-panel .p2-lead, :root:root:root:root .svc-page .svcseo-lead, :root:root:root:root .svc-page .spb-sub, :root:root:root:root .wv3-hero .wv3-hero__lead, :root:root:root:root .bw-panel .bw-lead { font-family: var(--bto-text); font-size: var(--bto-lead-size); line-height: var(--bto-lead-lh); } /* ── EVERY SLAB, ONE SPEC ────────────────────────────────────────────────── Eleven classes for one object, measured at four different angles, three border weights and four paddings. One object again here. ⚠ `rotate` (the property) and `transform: rotate()` are DIFFERENT channels — a legacy rule using transform is not overridden by the rotate property, so both are set and the transform one is zeroed. */ :root:root:root:root .svc-page .svcseo-h1-slab, :root:root:root:root .svc-page .spb-head-slab, :root:root:root:root .svc-page .sva-act-head .sva-head-slab, :root:root:root:root .svc-page .svw-head-slab, :root:root:root:root .svc-page .svcfaq-slab, :root:root:root:root .bto-static .bto-slab, :root:root:root:root .wv3-hero .wv3-slab, :root:root:root:root .bw-panel .bw-slab-word, :root:root:root:root .bwl-lockup .bwl-slab-word, :root:root:root:root .p2-panel .bto-banner-title .s, :root:root:root:root .p4-panel .p4-slab-word, :root:root:root:root .p5-panel .p5-slab { rotate: var(--bto-slab-angle); transform: none; border: .0788em solid var(--bto-slab-edge); background: var(--bto-amber); color: var(--bto-ink); -webkit-text-fill-color: var(--bto-ink); border-radius: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 🔴 PADDING WAS MISSING FROM THE RULE ABOVE and six slabs kept their own — `.svcseo-h1-slab` / `.spb-head-slab` stayed on the old `0 .14em .1em`. It is split out here rather than folded in, because it MUST NOT apply to the two-element slabs handled below: those carry their padding on an inner span, and setting it on both plates doubles it. */ :root:root:root:root .svc-page .svcseo-h1-slab, :root:root:root:root .svc-page .spb-head-slab, :root:root:root:root .bto-static .bto-slab, :root:root:root:root .wv3-hero .wv3-slab, :root:root:root:root .bw-panel .bw-slab-word, :root:root:root:root .bwl-lockup .bwl-slab-word, :root:root:root:root .p2-panel .bto-banner-title .s, :root:root:root:root .p4-panel .p4-slab-word, :root:root:root:root .p5-panel .p5-slab { padding: .04em .2em .1em; } /* ⚠ THE TWO-ELEMENT SLABS. `.svw-head-slab` and `.sva-head-slab` are an OUTER plate (`width: max-content`, so it hugs the words rather than the column) with an INNER span that carries the padding and the ink. Measuring the outer reports `padding: 0px` and reads as "the rule did not apply" — it did; the padding simply lives one level down. Repoint the child, leave the plate. */ :root:root:root:root .svc-page .svw-head-slab > span, :root:root:root:root .svc-page .sva-act-head .sva-head-slab > span { padding: .04em .2em .1em; color: var(--bto-ink); -webkit-text-fill-color: var(--bto-ink); } @media (max-width: 640px) { :root:root:root:root .bto-static .page-header__title, :root:root:root:root .wv3-hero .wv3-hero__title { font-size: var(--bto-d2); } :root:root:root:root .svc-page .svcseo-h1, :root:root:root:root .svc-page .spb-head, :root:root:root:root .svc-page .sva-act-head, :root:root:root:root .svc-page .svw-head, :root:root:root:root .svc-page .svcfaq-title, :root:root:root:root .bto-static .content__title, :root:root:root:root .bto-static .svc-sec-head, :root:root:root:root .bwl-lockup .bwl-title, :root:root:root:root .bw-panel .bw-title, :root:root:root:root .p2-panel .bto-banner-title, :root:root:root:root .p4-panel .p4-title, :root:root:root:root .p5-panel .p5-title { font-size: var(--bto-d3); } }