/* ============================================================================ bto-about-mph.css — the masterproductionhouse.com/about LAYOUT SYSTEM, ported onto About. Founder, 2026-08-06: "copy like every aspect in terms of visually how text is laid out font size everything to exactly like master production house … there are a lot of gaps make it exactly like master production houses." Loaded LAST on about.html, after bto-about-grounds.css. Linked by about.html ONLY — contact/founder/work never see it. ── HOW THE NUMBERS BELOW WERE GOT ───────────────────────────────────────── Not read off their CSS — their site is Next.js and ships minified turbopack chunks. Their /about was RENDERED headless at 1440 with every reveal settled and every text node's computed style dumped (`_probe-mph.cjs`). Every value in this file is a measurement, and our page was measured the same way, so each rule below is a real before → after and not an estimate. ── WHAT WAS DELIBERATELY NOT COPIED, AND WHY ────────────────────────────── Three of their choices are NOT ported. Stating them so the gaps are decisions and not oversights: 1. THEIR TYPEFACES. MPH is Inter (275 nodes) + Space Grotesk (18, headings). Ours stays Antonio display / Neue Montreal body. Porting Inter would undo the founder's OTHER instruction from the same day — that About must match home and services — and swap out the locked brand kit for a page. 2. THEIR GROUNDS. MPH's about page is ONE continuous warm off-white (#FFF8F4) top to bottom, with hairline `.section-divider` rules between sections and no colour panels at all. Ours keeps the ink / navy / cream ladder the founder signed off hours earlier: "our about page almost looks like our website so that is good." 3. HEADING LINE-HEIGHT, LITERALLY. MPH runs 1.25 on every display size (60/75, 48/60, 30/37.5, 36/45) — on SENTENCE-CASE Space Grotesk, a normal- width grotesque with full ascenders and descenders. Our display face is Antonio, condensed and set in CAPS, which has neither. Copying 1.25 onto caps does not copy the look, it copies the number and loses the look: caps need LESS leading, not more. Display heads take 1.05 here, which is the optical equivalent, and every SENTENCE-CASE size takes MPH's ratio exactly (16/28, 16/32, 14/20, 30/37.5). Everything else is theirs, to the pixel. ========================================================================== */ /* ========================================================================== §1 · THE SHELL — 1200 @120 → 1280 @80 ========================================================================== MPH runs one content width down the whole page: 1280px inside an 80px gutter, identical on all seven of their sections (measured 1280@80 on every one). Ours was 1200@120 on the body sections and 1320@60 on the hero — two widths and two left edges on one page, which is the same "four content widths" fault svc-type.css fixed on services. ⚠ 80px, not `clamp()`. MPH's gutter does not breathe between 992 and 1440; it steps at their breakpoints. Matching the desktop figure is the ask. */ body.bto-static.bto-mph .container { max-width: 1280px; padding-inline: 0; margin-inline: auto; width: 100%; } body.bto-static.bto-mph .bto-panel > .container, body.bto-static.bto-mph .bto-static__body { padding-inline: 80px; max-width: 1440px; } /* The sections are direct children of `.bto-static__body`, so the gutter is on the shell and the sections themselves run edge to edge inside it. */ body.bto-static.bto-mph .bto-static__body > .bto-panel { padding-inline: 0; } /* ========================================================================== §2 · THE GAPS — this is the founder's complaint, and it is 5 numbers ========================================================================== ours MPH here section padding-top 88 64–80 80 section padding-bottom 63 64–80 80 hero padding-top 104 96 96 hero padding-bottom 63 0 0 eyebrow → heading ~30 ~20 20 MPH's tightest sections are py-12 (64px) and their loosest is py-20 (80px). Ours ran 88/63 on ten sections plus a 104px hero — and the page carries ELEVEN sections against their seven, so the same per-section excess compounds four extra times. 80/80 is their standard band (used on their story, journey and close), which is why it is the one taken here rather than an average. (0,4,1) clears `.bto-static .bto-panel.bto-static__sec` (0,3,0) and bto-static.css's `.bto-static .bto-panel` (0,2,0) without !important. */ body.bto-static.bto-mph .bto-panel.bto-static__sec, body.bto-static.bto-mph .bto-panel { padding-block: 80px; } /* THE HERO. MPH opens `pt-24` — 96px of clearance for the fixed header, then the video, then the text. Ours had 104/63. 🔴 THEIR `pb-0` IS THE ONE NUMBER THAT CANNOT BE COPIED, BECAUSE THEIR PAGE HAS NO GROUND CHANGE. MPH runs one continuous #FFF8F4 top to bottom, so a hero that closes flush is invisible — the next section's 80px does all the spacing and the reader sees one 80px gap. Ours changes ink → navy at that seam. Copied literally, the ink ground stopped 18px under the lead's last line while 80px of navy sat above the next eyebrow: an 18/80 split across a hard colour edge, which reads as the headline falling out of its panel. Measured in the screenshot pass, not predicted. 80px both sides restores MPH's own symmetry — 80 of ink below the text, 80 of navy above the next eyebrow, the same 160px every other seam on this page already has, and the same 160px MPH gets from py-20 meeting py-20. */ body.bto-static.bto-mph .page-header-content.bto-panel { padding-block: 96px 80px; } /* ========================================================================== §3 · THE TYPE SCALE — MPH's, measured, with our two faces ========================================================================== ours MPH here eyebrow 11.52/14.98 w500 14/20 w600 14/20 w600 h1 (hero) 72/73.44 w700 60/75 w600 60/63 h2 (section) 40/44.8 w700 48/60 w600 48/50.4 h2 (close) 40/44.8 36/45 36/37.8 h3 (card title) 28/33.04 w500 30/37.5 w600 30/37.5 w600 lead 20/31 16/32 16/32 body prose 18/28.8 16/28 16/28 support 18/27.9 16/28 16/28 row label 15/21 w600 14/20 w600 14/20 w600 row line 17/26.35 16/28 16/28 timeline year 40/40 w600 48/48 w600 48/48 w600 timeline kicker 13.12/19.68 14/20 ls.28em 14/20 ls.28em timeline lead 16/26.4 16/28 16/28 timeline chip 14.4/21.6 w600 14/20 w600 14/20 w600 link / CTA 17/25.5 14/20 w600 14/20 w600 micro pill 10.88/16.32 10.88/16.32 (already exact) ⚠ `.bto-tl__pill` IS ALREADY MPH'S NUMBER TO THE HUNDREDTH — 10.88/16.32 at ls 1.7408px on both pages. It was ported straight off them in an earlier pass, so it gets NO rule here. Restating it would only create a second place to keep it in sync. Same reason `.bto-tl__notes` is left alone. ⚠ THE EYEBROW GETS BIGGER, NOT SMALLER. 11.52 → 14 is the one size on the page that GROWS. bto-type.css deliberately gave tracked uppercase micro-tags no size rule at all (its `max(var(--bto-body), 1em)` bootstrap trap), so they were left at whatever the cascade produced; MPH sets theirs at 14/20 w600 across every section, and it is the element that starts every band. */ body.bto-static.bto-mph .bto-panel .svc-sec-eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .32em; /* MPH measured 4.48px at 14px = .32em */ text-transform: uppercase; margin: 0 0 20px; } body.bto-static.bto-mph .page-header-content .page-header__title { font-size: 60px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px; max-width: none; /* was 20ch — MPH's h1 fills its column */ } body.bto-static.bto-mph .bto-panel.bto-static__sec .content__title, body.bto-static.bto-mph .bto-panel .content__title { font-size: 48px; line-height: 1.05; letter-spacing: -.02em; } body.bto-static.bto-mph #about-close .content__title { font-size: 36px; line-height: 1.05; } /* The heading wrapper carried the old rhythm's margin. */ body.bto-static.bto-mph .bto-panel .ms-ah-wrapper { margin: 0 0 20px; } /* ── BODY COPY — one size, 16px, exactly as MPH runs it ──────────────────── */ body.bto-static.bto-mph .bto-static__lead { font-size: 16px; line-height: 32px; /* MPH's lead is the one at 2.0 */ margin: 0; max-width: 768px; /* their measured lead box, 48em at 16px */ } body.bto-static.bto-mph .bto-support, body.bto-static.bto-mph .bto-prose p, body.bto-static.bto-mph .bto-panel .bto-row__line, body.bto-static.bto-mph .bto-tl__lead { font-size: 16px; line-height: 28px; } /* 🔴 THE MEASURE CAP GOES UP, AND THAT IS THE ASK, NOT A REGRESSION. bto-type.css caps prose at 34em (~68 characters) and records the reasoning. MPH does not: their body boxes measure 48em (lead) and 56em (prose), i.e. ~112 characters — their journey intro runs "A year-by-year look at how MPH moved from one workstation and a government documentary break" as ONE line. Copying their layout means copying their measure; a 34em column inside a 1280 shell is what was producing our extra lines, and extra lines are extra height, which is part of the gap complaint. */ body.bto-static.bto-mph .bto-prose p, body.bto-static.bto-mph .bto-support { max-width: 56em; } body.bto-static.bto-mph .bto-panel .bto-row__label { font-size: 14px; line-height: 20px; font-weight: 600; } /* Links and pills — MPH runs every one of them at 14/20 w600. */ body.bto-static.bto-mph .bto-static__link, body.bto-static.bto-mph .p2-cta { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal; } /* ── THE TIMELINE — their card, our colours ──────────────────────────────── */ body.bto-static.bto-mph .bto-tl__year { font-size: 48px; line-height: 48px; font-weight: 600; } body.bto-static.bto-mph .bto-tl__kicker { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .28em; /* MPH measured 3.92px at 14px */ } body.bto-static.bto-mph .bto-tl__title { font-size: 30px; line-height: 37.5px; font-weight: 600; letter-spacing: -.01em; } body.bto-static.bto-mph .bto-tl__chip { font-size: 14px; line-height: 20px; font-weight: 600; } /* ========================================================================== §4 · THE VIDEO BANNER — MPH's one piece of media on the page ========================================================================== Founder: "we can just have one banner the top banner for the about page which has a video running." That is exactly what MPH does, and it is their ONLY video: one element, `about-showreel-hq.mp4`, measured 1440×810 — full viewport width, 16:9, `object-fit: cover`, autoplay + muted + loop, sitting directly under the header and above the h1 block. Ours is `media/showreel.mp4`, 1600×900, the same aspect, previously unused by any page, with its poster already on disk. FULL-BLEED FROM INSIDE THE GUTTER. The hero's shell carries §1's 80px padding, so the band steps back out with the same `50% - 50vw` idiom `.bto-panel::before` already uses. `overflow-x: clip` on (bto-static.css:258) is what keeps that from producing a scrollbar — it is already there, gated on `:has(.bto-panel)`, and is why this needs no guard of its own. ⚠ `preload="metadata"`, NOT `auto`. The file is 9.3MB; MPH's is streamed the same way. The poster carries the first frame so the band is never empty. ⚠ `playsinline` is load-bearing on iOS — without it the video takes over the screen in fullscreen on play. */ body.bto-static.bto-mph .mph-hero-media { position: relative; width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 16 / 9; max-height: 810px; /* MPH's measured height at 1440 */ overflow: hidden; background: #000; margin-bottom: 80px; /* their band-to-text gap */ } body.bto-static.bto-mph .mph-hero-media video, body.bto-static.bto-mph .mph-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The hero's own text keeps the shell. The video is the only thing that bleeds. */ body.bto-static.bto-mph #about-hero > .container { position: relative; } /* ========================================================================== §5 · THE REVEAL — MPH's fade-up, replacing the panel lift ========================================================================== Their sections arrive with a short upward fade and nothing else: no panel-over-panel, no per-element parallax, no pinning. `bto-js/about-mph.js` adds `.is-in` with an IntersectionObserver — no GSAP, no ScrollTrigger, so it cannot collide with reveals.js's clip wipes or journey.js's rail. ⚠ GATED ON `html.bto-mphrv`, WHICH THE SCRIPT ADDS ITSELF. Without JS the collapsed state is unreachable and everything renders visible. Content is never hidden by a failure — the same contract every other reveal on this page keeps. */ html.bto-mphrv body.bto-static.bto-mph [data-mph-rv] { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); } html.bto-mphrv body.bto-static.bto-mph [data-mph-rv].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.bto-mphrv body.bto-static.bto-mph [data-mph-rv] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== §6 · NARROW ========================================================================== MPH steps the gutter and the display sizes at their breakpoints rather than fluidly. Their mobile section padding is the `py-16` half of each `py-16 sm:py-20` pair, i.e. 64px, and their h1/h2 drop roughly a third. */ @media (max-width: 991px) { body.bto-static.bto-mph .bto-panel > .container, body.bto-static.bto-mph .bto-static__body { padding-inline: 40px; } body.bto-static.bto-mph .bto-panel.bto-static__sec, body.bto-static.bto-mph .bto-panel { padding-block: 64px; } /* 64px bottom, not 0 — same ground-change reasoning as the desktop rule. */ body.bto-static.bto-mph .page-header-content.bto-panel { padding-block: 88px 64px; } body.bto-static.bto-mph .page-header-content .page-header__title { font-size: 44px; } body.bto-static.bto-mph .bto-panel .content__title { font-size: 36px; } body.bto-static.bto-mph #about-close .content__title { font-size: 30px; } body.bto-static.bto-mph .bto-tl__title { font-size: 24px; line-height: 30px; } body.bto-static.bto-mph .bto-tl__year { font-size: 38px; line-height: 38px; } body.bto-static.bto-mph .mph-hero-media { margin-bottom: 56px; } } @media (max-width: 575px) { body.bto-static.bto-mph .bto-panel > .container, body.bto-static.bto-mph .bto-static__body { padding-inline: 24px; } body.bto-static.bto-mph .page-header-content .page-header__title { font-size: 34px; } body.bto-static.bto-mph .bto-panel .content__title { font-size: 28px; } body.bto-static.bto-mph #about-close .content__title { font-size: 26px; } }