already carries a padding-top equal to the fixed header's height (64px, 72px on md+), so ANY padding here stacks on top of it. Measured on the built site with scripts/_probe-toolhero-gap.mjs, H1 ink top, homepage vs /tools/ before this change: 1920 42px vs 147px 1024 65px vs 137px 1440 37px vs 138px 375 66px vs 89px var(--s-8) resolves to 68px out here (responsive.css lifts the root font past 1600px), and it was buying nothing but a void between the site header and the H1 on the one page type whose tool has to stay on the fold. */ padding: 0 0 clamp(14px, 1.9vw, 32px); /* Centred, like the homepage and the 82 grid leaves (2026-08-24). These are standalone landing pages for one grid each, and a centred heading over a centred tool reads as one column instead of two competing alignments. */ text-align: center; } /* Standalone tools add 8px above their working surface. The shared hero supplies the full gap, just as it does for the grid tool. */ .gm-toolhero + #tool > section { padding-top: 0; } /* Wide viewports only: lift the hero INTO the header band — the same -36px the homepage takes (app/globals.css `.gmp-hero-head`), for the same reason: the header lost its backdrop-blur in 2026-08-18, so ink sharing that band stays crisp rather than smeared. 1440px, NOT the homepage's 1300px. The gate is set by horizontal clearance, and these H1s are far wider than the homepage's. Measured over all 100 pages (the widest first line is /tools/8pt-grid-generator/) against the header's own chrome: viewport widest H1 line logo ends search starts clearance 1300 118 – 1182 88 1182 30 / 0 1440 188 – 1252 88 1322 100 / 70 Zero at 1300 — the line ends exactly on the button's box edge, with only the 8px of the icon's own padding between the two glyphs, and a future page with a longer H1 would overlap outright. The container caps at 1120px there, so the worst case is bounded at 114–1186, i.e. 4px INSIDE the button. Below the gate the hero simply sits under the header, which costs 36px of gap on a narrow laptop and collides with nothing. It sits on the section, not the H1: the H1's own -.135em leading cancel collapses through a zero-padding parent, so the two would not add up anyway, and the section is what has to move for the lede and the tool to rise with it. */ @media (min-width: 1440px) { .gm-hero.gm-toolhero { margin-top: -36px; } } /* THE GUTTER BUG. `ToolPageHero` wraps its content in `

`, but the rule that makes `.container` a centred column with side padding lives in each page's own stylesheet (scripts/data/tool-page-shell.css:41, mirrored in content/assets/gmp.css) — which SectionEmbed wraps in `@scope (#gmp-tools-)`. The React hero sits OUTSIDE that scope, so the only `.container` rule reaching it was `html .container { max-width }` in responsive.css: a width, with no `margin-inline` and no padding. The H1 therefore started at x=0, flush against the viewport edge, while the embedded body below it sat in a centred column. THE WIDTHS ARE MEASURED, NOT ASSUMED (scripts/_probe-container-widths.mjs against the built site). Two containers, three regimes: viewport hero (before) embedded body 1024 1024 1024 (viewport-bound, neither cap reached) 1280 1280 1120 1440 1280 1120 1600 1320 1320 1920 1440 1440 2560 1560 1560 Below 1600 the hero was falling through to TAILWIND's `.container` maxima (40/48/64/80/96rem) while the body used the page's own 1120px frame — an 80px step on each side at 1440. At and above 1600 they already agreed, because responsive.css §2 `html .container` (0,1,1) outranks both. So the cap below is bounded at 1599.98px: inside that range it matches the page frame, and above it this file says nothing so responsive.css keeps widening BOTH containers in step. A flat `max-width` here would win over responsive.css (0,2,0 beats 0,1,1) and freeze the hero at 1120 on a 4K panel while the body opened to 1560. 24px, NOT `var(--s-6)`. The token is redefined INSIDE each page's own stylesheet (`--s-6:24px`, tool-page-shell.css:24) but resolves to the global 2rem/32px out here — the same trap CLAUDE.md records for `--s-*`. Using the token would have left an 8px step at every width. The ≤380px trim mirrors responsive.css §5, which trims the body's container at exactly that width. */ .gm-toolhero > .container, .gm-toolhero-lede > .container { margin-inline: auto; padding-inline: 24px; } @media (max-width: 1599.98px) { .gm-toolhero > .container, .gm-toolhero-lede > .container { max-width: 1120px; } } @media (max-width: 380px) { .gm-toolhero > .container, .gm-toolhero-lede > .container { padding-inline: 16px; } } /* `.gm-toolhero .gm-eyebrow` (the pill, its dot and its separator) was here. The hero no longer renders one — see the note in components/tools/ToolPageHero.tsx for the counts. NOTE the rules were only ever removed from THIS file: `.gm-eyebrow` is still the class each page's own band kickers use (ten per page, from `kicker()` in scripts/build-tool-page.mjs), styled by tool-page-shell.css inside SectionEmbed's `@scope`. Those must keep working. */ .gm-hero.gm-toolhero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em; /* Cancel the leading the browser reserves ABOVE the cap line — Satoshi puts the visible cap ~.135em below the line box top, so box geometry overstates how tight the heading looks by that much, and trimming padding alone reads as "not much change". Same value and same reasoning as the homepage H1. `em`, not px: the font-size is a clamp, so a fixed value drifts with width. */ margin: -0.135em auto var(--s-5); font-weight: 700; /* Capped in `em`, not px or ch: the cap then tracks the heading's own clamp, so the line holds ~40 characters at every width instead of stretching to a 57ch slab on a 1560px container. 20em is ~1088px at the 3.4rem ceiling, which is inside the narrowest container — so desktop wrapping is unchanged — and above 100% on a phone, where the container wins instead. */ max-width: 20em; /* Two even lines rather than a long one and an orphan. */ text-wrap: balance; } /* The authored H1s mark their key phrase with ; upright, with a highlight, never italic — matching tool-page-shell.css. */ .gm-hero.gm-toolhero h1 em { font-style: normal; background: linear-gradient(180deg, transparent 60%, #fde68a 60%); padding: 0 4px; } /* `.gm-hero-rule-wrap` was here. The wavy hairline it wrapped is no longer rendered — see the note in components/tools/ToolPageHero.tsx. */ .gm-toolhero .gm-hero-sub { font-size: 1.12rem; line-height: 1.65; color: var(--c-text-2); /* `auto`, not 0: the 56ch measure below is what centring actually needs — a centred parent does nothing for a block that is narrower than it and pinned left. */ margin: 0 auto; max-width: 56ch; } /* The generated root-document line, on the 67 pages whose own lede does not carry that anchor. Deliberately quieter than the lede: it is a navigational sentence, and it must not compete with the definition above it. */ .gm-toolhero .gm-root-line { font-size: 0.95rem; line-height: 1.6; color: var(--c-text-3, #6b7178); margin: 0 auto var(--s-6); max-width: 56ch; } .gm-toolhero .gm-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; /* `text-align` does not reach flex children; without this the row would be the one thing left hanging on the left of a centred hero. */ justify-content: center; } .gm-toolhero .gm-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 12px 22px; background: var(--c-text-1, #0a0a0c); color: var(--c-text-inv, #fff); border: 1px solid var(--c-text-1, #0a0a0c); border-radius: var(--r-pill, 999px); font-size: 0.92rem; font-weight: 500; text-decoration: none; } .gm-toolhero .gm-btn:hover { background: var(--c-accent-h, #2a2a2e); border-color: var(--c-accent-h, #2a2a2e); } .gm-toolhero .gm-btn-ghost { background: transparent; color: var(--c-text-1, #0a0a0c); border-color: var(--c-border-2, var(--c-border)); } .gm-toolhero .gm-btn-ghost:hover { background: var(--c-surface, #fafafa); border-color: var(--c-text-1, #0a0a0c); } .gm-toolhero .gm-trust-row { margin-top: var(--s-5); display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--c-text-3); } .gm-toolhero .gm-trust-cell { display: inline-flex; align-items: center; gap: var(--s-4); } .gm-toolhero .gm-trust-sep { opacity: 0.45; } .gm-toolhero .gm-trust-row strong { color: var(--c-text-1); font-weight: 600; } /* Three of the 100 pages predate the gm-* system (cross-stitch-grid-maker, drawing-grid-maker, photography-composition-grid) never had a hero rule or a trust row, and their H1s are full sentences rather than short display lines. Give them a smaller top end so the heading does not tower over its own lede. */ .gm-hero.gm-toolhero.gm-hero--bespoke h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } /* ------------------------------------------------------------ Mobile: tighten to the leaf hero's proportions. Measured at 375x667 before this block, /tools/yin-yang/ against the /grids/ leaf for the same overlay: hero total 479px vs 308px padding-bottom 64px vs 24px rule margin 24px vs 0px h1 margin 24px vs 16px lede 16.6px vs 15.2px, margin 24px vs 12px which left 84px of the tool visible against the leaf's 255px. The H1 height difference is content (three lines against one) and is not ours to change; every other line above is spacing this file set too loose for a small screen. Recovering it is worth ~90px, and the tool is the reason the page exists. ------------------------------------------------------------ */ @media (max-width: 640px) { .gm-hero.gm-toolhero h1 { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: var(--s-3); } .gm-toolhero .gm-hero-sub { font-size: 0.98rem; line-height: 1.55; } } /* The homepage switches to a 12px gap at this same breakpoint. */ @media (max-width: 600px) { .gm-hero.gm-toolhero { padding-bottom: 12px; } } /* ============================================================ THE COLOPHON — the band BELOW the tool ============================================================ The rest of the lede, the root-document line, and the tool's own spec figures. Mirrors `.gmp-leaf-lede` on the 82 grid leaves in POSITION; it exists because the hero is divided rather than trimmed — putting the whole lede above the tool left 0px of the tool visible on a 375x667 phone. WHAT IT LOOKED LIKE BEFORE (measured on the built site at 1440px): root line 15.2px rgb(99,99,102) its anchor rgb(107,113,120) text-decoration-line: none chip row 13.1px rgb(99,99,102), flex, bullet-separated band height 116–152px between two heavily designed bands Two things were wrong with that, and only one of them is taste. THE ANCHOR WAS NOT A LINK. 107,113,120 inside 99,99,102 is a 1.05:1 separation with no underline — the link-in-text-block failure already recorded against ten other routes, here on the ONE prose link to the root document that 80 of the 100 tool pages have. It is underlined now, in the AA accent grey, and it takes the ink weight. THE FIGURES WERE SET AS DECORATION. "Horizon 0–100%", "4–32 orthogonals" are this tool's real ranges and appear nowhere else on the page; they were rendering at 13px grey with bullets between them, directly under four bordered cards and directly above a crop-marked plate — the one element in the region with no structure of its own. They are a ruled ledger now: the title block of a technical drawing, which is what they actually are. WHY THE LEDGER IS INLINE-EMPHASISED rather than label-over-value. Measured over all 372 chips in the cohort, the authored `` sits in four different places — value-first (131), value-in-the-middle (79), value-last (45), and absent entirely (105, "Nothing uploaded"). A mechanical split into label and value would mis-order a third of the cohort, so the emphasis stays where the author put it and the CELL does the work: the marked figure takes the ink and tabular figures, the words around it drop to a tracked upper-case label. See the note in components/tools/ToolPageHero.tsx. NO `!important`, and the selectors carry the band class — same reason as the hero above: /assets/gmp.css loads LATER in on the five cohort-A pages and declares `.gm-trust-row { display:flex }` and `.gm-trust-row strong` at (0,1,0) / (0,1,1). A single-class rule here would lose those ties on order alone, exactly as the H1 centring did. ------------------------------------------------------------ */ .gm-toolhero-lede { /* Local ink with hard fallbacks, the same pattern `.gmp-tsb` uses directly below it — the `--c-text-*` names resolve only where gmp.css is loaded, and this band renders on all 100 pages. */ --col-ink-1: var(--c-ink-1, #0a0a0a); --col-ink-2: var(--c-ink-2, #3f3f46); --col-ink-3: #525252; /* 5.0:1 on white. NOT #767676 (4.54:1) — these labels are 11px upper-case, and the CLAUDE.md note on --gm-ink-4 exists because that value was picked against a tinted surface where it measured 4.35:1. */ --col-ink-4: #6f6f6f; --col-rule: var(--c-border, #e5e7eb); --col-accent: var(--c-accent, #aeb4bc); /* The AA accent grey. Used for the root anchor's underline, where a #aeb4bc hairline under near-black text is easy to miss. */ --col-accent-2: var(--c-accent-2, #6b7178); /* The bottom is measured, not chosen: `.gmp-tsb` below paints white over the page tint and opens with its own hairline, so a ledger rule sitting 12px above that edge read as one doubled rule. */ padding: clamp(24px, 3vw, 44px) 0 clamp(22px, 2.4vw, 34px); text-align: center; } /* -- the plate mark: a hairline with a centred lozenge ------------------ */ .gm-toolhero-lede .gm-colophon-mark { display: block; position: relative; width: 84px; height: 9px; margin: 0 auto clamp(18px, 2vw, 26px); } .gm-toolhero-lede .gm-colophon-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid var(--col-rule); } .gm-toolhero-lede .gm-colophon-mark::after { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -4.5px; transform: rotate(45deg); background: var(--c-surface-1, #fff); border: 1px solid var(--col-accent); } /* -- the prose ---------------------------------------------------------- */ .gm-toolhero-lede .gm-hero-sub--rest { font-size: clamp(1.02rem, 0.99rem + 0.2vw, 1.12rem); line-height: 1.62; color: var(--col-ink-2); margin: 0 auto clamp(12px, 1.4vw, 18px); max-width: 64ch; text-wrap: pretty; } .gm-toolhero-lede .gm-root-line { font-size: clamp(0.98rem, 0.96rem + 0.12vw, 1.05rem); line-height: 1.62; color: var(--col-ink-3); margin: 0 auto; max-width: 58ch; text-wrap: balance; } /* The fix, not a style choice — see the header. Both paragraphs, not only the generated one: on the 17 pages that carry the root anchor inside their own authored lede, that anchor is this band's prose link and it was painting the same undifferentiated grey. THE ONE `!important` IN THIS FILE, and it is answering another one. The colour above is not lost to a page's own styling — it is lost to `public/_partials/a11y-fixes.css`: p a, .gm-faq-body p a, .gm-section p a { color: #6b7178 !important } a contrast FLOOR for links on light-grey grounds, at (0,0,2). Without a matching `!important` the anchor here paints #6b7178 inside #525252 prose — a link PALER than the sentence around it, which reads as disabled. Weight and underline applied; only the colour did not, which is exactly the class of bug this file was written for, arriving by a third route. Raising it to near-black cannot defeat that rule's purpose: 4.85:1 on this band's ground becomes 18.9:1. It is narrow enough that nothing outside this band can see it — including /tools/rule-of-thirds/, whose own `!important` brand overlay targets headings and is scoped inside SectionEmbed's `@scope` besides. Do not widen it. AND THE THIRD SELECTOR REPEATS A CLASS ON PURPOSE. a11y-fixes.css carries a SECOND floor, one selector above the first: p > a:not([class]):not(.gm-btn) { color: #6b7178 !important } `:not()` takes the specificity of its argument, so that is (0,2,2) — heavier than the (0,2,1) of `.gm-toolhero-lede .gm-hero-sub--rest a`, and it won even with `!important` on both. It bit only the 36 pages whose anchor sits in the AUTHORED lede, because those anchors carry no class and the generated `.gm-root-link` does; measured, the two halves of this band painted two different colours. Writing the parent as `.gm-hero-sub.gm-hero-sub--rest` — both classes the element really has — takes it to (0,3,1). */ .gm-toolhero-lede .gm-root-line a, .gm-toolhero-lede .gm-root-line .gm-root-link, .gm-toolhero-lede .gm-hero-sub.gm-hero-sub--rest a { color: var(--col-ink-1) !important; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--col-accent-2); transition: text-decoration-color 0.18s ease, background-color 0.18s ease; } .gm-toolhero-lede .gm-root-line a:hover, .gm-toolhero-lede .gm-root-line .gm-root-link:hover, .gm-toolhero-lede .gm-hero-sub.gm-hero-sub--rest a:hover { text-decoration-color: var(--col-ink-1); /* The same warm mark the authored H1s use for their key phrase, so a hover here reads as the page's own highlighter rather than as a new colour. */ background: linear-gradient(180deg, transparent 62%, #fde68a 62%); } /* -- the spec ledger ---------------------------------------------------- */ .gm-toolhero-lede .gm-spec { /* Tapered: the prose above runs to 58ch and the plate below to 1320px, so a ledger between them at ~58rem reads as a deliberate step rather than as a third full-width band. */ max-width: min(100%, 58rem); margin: clamp(26px, 2.8vw, 40px) auto 0; padding: 0; /* Restated even though Tailwind preflight already strips markers document- wide — the same trap CLAUDE.md records for the scoped tool sheet, where a missing `list-style` left every
reading as a stray paragraph. */ list-style: none; /* `auto-flow: column`, so one rule serves the 91 pages with four figures and the six with two. */ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-block: 1px solid var(--col-rule); } /* Six pages carry two figures rather than four. At the full 58rem the pair sat marooned in the middle of two 464px cells, so the ledger narrows to match what it has to hold. */ .gm-toolhero-lede .gm-spec:has(> :nth-child(2):last-child) { max-width: min(100%, 38rem); } .gm-toolhero-lede .gm-spec-cell { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 0.42em; flex-wrap: wrap; /* First-line baselines align across the row; when one cell's label wraps to a second line (loomis-head's "works on iPad & Procreate workflows" is the longest in the cohort at 39 characters), `align-content` keeps that cell's two lines centred in the taller row instead of hanging from its top. */ align-content: center; padding: clamp(14px, 1.5vw, 19px) clamp(10px, 1.4vw, 20px); /* The label half: tracked upper-case, quiet. */ font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.45; color: var(--col-ink-4); } /* Inset column rules rather than full-height borders — the printed-table detail, and it keeps the ledger from reading as a boxed grid of four. */ .gm-toolhero-lede .gm-spec-cell::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; border-left: 1px solid var(--col-rule); } .gm-toolhero-lede .gm-spec-cell:first-child::before { display: none; } /* The value half. */ .gm-toolhero-lede .gm-spec-cell strong { font-size: 0.96rem; font-weight: 600; letter-spacing: -0.012em; text-transform: none; color: var(--col-ink-1); /* Four cells of ranges and ratios read across; they should line up as figures, not as prose. */ font-variant-numeric: tabular-nums; } /* 105 of the 372 chips mark nothing ("Nothing uploaded", "Never recorded"). Upper-casing the whole phrase would leave the cell a row of grey with no value in it, so the phrase becomes the value. */ .gm-toolhero-lede .gm-spec-cell--plain { font-size: 0.92rem; font-weight: 500; letter-spacing: -0.006em; text-transform: none; color: var(--col-ink-2); } /* Tablet: still four columns, but the tracking has to give. At 768px each cell holds ~160px of content, and "SVG + 600 DPI export" — the phrase 97 of the 100 pages carry — broke onto a second line while its three neighbours sat on one. Trimming the label a step keeps the row reading as a single ruled line all the way down to the two-column switch. */ @media (min-width: 641px) and (max-width: 900px) { .gm-toolhero-lede .gm-spec-cell { /* Not below .68rem — 10.9px is the floor this band's labels stay legible at; the tracking and the gutters give first. */ font-size: 0.68rem; letter-spacing: 0.085em; padding-inline: 6px; gap: 0.3em; } .gm-toolhero-lede .gm-spec-cell strong { font-size: 0.9rem; } } /* ------------------------------------------------------------ Phone: two columns, and the inset column rules become a true cross — a four-cell ledger, not four stacked lines. ------------------------------------------------------------ */ @media (max-width: 640px) { .gm-toolhero-lede .gm-spec { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .gm-toolhero-lede .gm-spec-cell { padding: 13px 10px; letter-spacing: 0.11em; } /* Row rules for every cell past the first row… */ .gm-toolhero-lede .gm-spec-cell:nth-child(n + 3) { border-top: 1px solid var(--col-rule); } /* …and no column rule at the start of a row. Reset both ways, not `:first-child` alone: in two columns the third cell opens a row too. */ .gm-toolhero-lede .gm-spec-cell:nth-child(odd)::before { display: none; } .gm-toolhero-lede .gm-spec-cell:nth-child(even)::before { display: block; } } @media (max-width: 380px) { .gm-toolhero-lede .gm-spec-cell { font-size: 0.66rem; } .gm-toolhero-lede .gm-spec-cell strong { font-size: 0.9rem; } }