/* ============================================================================
mokko-bridge.css — the ONLY new CSS for the Mokko homepage rebuild.
Loaded last by _notes/mokko-shell-head.html, after:
mokko/assets/css/style.css → bto-css/hero.css
→ bto-css/sections.css
→ bto-css/marquee-banner.css
It does exactly three jobs and nothing else:
1. RETARGET the hero's sticky offset to Mokko's header.
2. REPLACE the Pixy hooks our transplanted CSS keyed on. sections.css and
marquee-banner.css were written against Pixy markup, so some of their
selectors are compounds like `.bto-banner.mil-p-160-100` and
`.mil-project-img.mil-9-16`. Those `.mil-*` classes are stripped from the
markup (they have no styling under Mokko and `.mil-up` renders elements
permanently invisible), so the rules that depended on them are restated
here against the new, prefix-free hooks.
3. RE-TINT our transplant layer for Mokko's themed tokens. sections.css
carries a dark-skin reconciliation block written for Pixy's
`style-stylish.css`; on Mokko those hairlines and body greys are wrong,
and skin-light.css (which fixed them for Pixy) is not loaded here.
NOTHING in bto-css/sections.css, bto-css/hero.css or
bto-css/marquee-banner.css was edited — services.html and work.html share
two of those files and are owned by other agents.
========================================================================== */
/* ==========================================================================
1 · HERO — sticky offset retargeted to Mokko's header
⚠ SUPERSEDED, deliberately kept for the reasoning — see the block
"HERO — kill the leftover white strip (Ash 2026-07-27)" at the END of this
file. `--bto-nav-h` is 0 in the shipped page, not the 90px derived here:
reserving the capsule's height left a bare 90px band above the dark stage,
and Ash called it. The measurements below are still the record of where
Mokko's header actually sits, and of the sticky verdict.
--------------------------------------------------------------------------
MEASURED (probe-mokko-nav.mjs, headless Chrome):
| viewport | .main-header__inner | position | occupies | sticky probe |
|----------|---------------------|-----------|----------|--------------|
| 1512 | 60px tall, `.move` | fixed | y 30→90 | held at 120 |
| 390 | 60px tall, no .move | relative | scrolls | held at 120 |
Mokko's header is `position: fixed` ONLY above 1023px (main.js
adjustHeaderOnScroll + `body[data-menu=fixed]`); at or below 1023 the CSS
flips it to `position: relative` and it scrolls away with the page. So the
hero pins under 90px on desktop and under nothing on mobile.
The same probe confirms Locomotive Scroll v5/lenis applies NO transform to
, or .ms-main at any scroll offset — the sticky probe held at
exactly its `top` through scrollY 400→900 and released on schedule. Native
sticky works. Pixy's no-smoother.js is not loaded and is not needed.
========================================================================== */
.hb-stage { --bto-nav-h: 90px; }
@media (max-width: 1023px) {
/* header is position:relative here — it scrolls away, so there is nothing
to clear and the stage takes the full viewport. */
.hb-stage { --bto-nav-h: 0px; }
}
/* ==========================================================================
2 · HEADER — our brand lockup + our CTA in Mokko's header
========================================================================== */
.bto-logo { display: block; text-decoration: none; color: inherit; }
.bto-logo h3 {
font-size: 22px; font-weight: 800; line-height: 1.05;
letter-spacing: -0.01em; margin: 0;
}
.bto-logo__tag {
display: block; margin-top: 3px;
font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; opacity: 0.6;
}
/* Mokko's two-mark swap: .logo-light rides over the transparent header (our
dark hero), .logo-dark takes over on the scrolled pill. Only the colour
differs — the geometry is shared. */
.main-header__inner .logo-light .bto-logo { color: var(--color-white, #fff); }
.main-header__inner .logo-dark .bto-logo { color: var(--color-contrast-higher); }
/* .main-header__logo is `overflow: hidden`; the lockup is two lines tall. */
.main-header__inner .main-header__logo { overflow: visible; }
.main-header__widgets { align-items: center; }
/* `.main-header__inner::after` is the scrolled pill's blurred backdrop; it is
absolutely positioned with no z-index, so it paints OVER any header child
that isn't itself stacked. Mokko's own slots are (.main-header__logo z-4,
.container-menu z-9); ours needs the same or the CTA renders as a blurred
smear. Measured in the 15:5x screenshot pass before this rule existed. */
.bto-nav-cta { position: relative; z-index: 5; margin-right: 0.75rem; }
@media (max-width: 991px) { .bto-nav-cta { display: none; } }
/* ==========================================================================
3 · SHARED — the eyebrow, borrowed from Mokko's own `.heading-title`
(style.css:13103-13108), which is scoped to `.ms-ah-wrapper`. Same values.
========================================================================== */
.bto-eyebrow {
color: #747474;
font-size: 20px;
text-transform: uppercase;
margin: 15px 0;
}
/* `.ms-ah-wrapper` is centred but `.content__title` inside it is
`text-align: start` — so an eyebrow in the same wrapper must start-align too
or it floats away from the title it labels. */
.ms-ah-wrapper .bto-eyebrow,
.ms-ah-wrapper .heading-title { text-align: start; }
/* our section heads use Mokko's big-title component; give it the same
bottom rhythm Mokko gives it inside .team-area / .blog-area */
.ms-ah-wrapper.custom-style2 { margin-bottom: 6vh; }
/* Mokko's `.btn--primary` is its mint `--color-primary`. bto-css/palette.css
retargets Pixy's button classes but not Mokko's, and Ash's note on that file
is "the green and beige color i don't like" — so Mokko's own primary pill is
pointed at the palette accent here, with Mokko's colour as the fallback if
the palette is ever pulled. */
.btn--primary {
background-color: var(--pin-primary, var(--color-primary));
color: var(--pin-on-primary, var(--color-contrast-higher));
}
.btn--primary:hover { background-color: var(--pin-primary-press, var(--color-primary)); }
/* Mokko paints the label separately (style.css:3508 `.ms-btn__text { color:
var(--color-contrast-higher) }`), so setting the button's colour alone left
black text on the red pill — measured rgb(0,0,0) on all three CTAs. */
.btn--primary .ms-btn__text,
.btn--primary .ms-btn__icon { color: inherit; }
/* Mokko's back-to-top pill is also `--color-primary` mint below 1023px
(style.css:2819). Same reasoning as above. */
@media (max-width: 1023px) {
.back-to-top .ms-btt--inner { background-color: var(--pin-primary, var(--color-primary)); }
.back-to-top .ms-btt-i { fill: var(--pin-on-primary, currentColor); }
}
/* ==========================================================================
4 · PANEL 2 "EVERYTHING"
--------------------------------------------------------------------------
marquee-banner.css keys the panel shell on `.bto-banner.mil-p-160-100`
(Pixy's section-padding utility doubled as the hook). `.mil-p-160-100` is
stripped, so the shell — and only the shell — is restated here. Every value
is marquee-banner.css's own; the rail, the tilt, the 65s drift and the
Production Worlds card are untouched and still come from that file.
========================================================================== */
.bto-banner {
position: relative;
overflow: hidden;
padding: 0;
/* PASS 5: was the literal #E7E7E4 — the beige palette.css:15 lists by name as
one of the values it replaces. Panel 2 now PARTICIPATES in the A/B/C scheme
(§ N) instead of declaring its own surface, so the MP071 swap reaches it
from palette.css §0 line 2 with nothing stranded here. Same pixel today:
palette.css:226 already out-cascades this with var(--bg-panel2). */
background: var(--bto-surface-b, #E7E7E4);
min-height: 620px;
display: flex;
align-items: center;
}
@media (max-width: 992px) {
.bto-banner { display: block; min-height: 0; padding: 48px 0 40px; }
/* marquee-banner.css collapses the grid's min-height here (the layers stack
instead of overlapping). A later `@media (max-width:1200px)` block in this
file re-imposes 500px for the desktop tilt, which at 390px opened a ~300px
hole between the lead and the CTAs. Re-asserted at higher specificity so it
wins regardless of where that block sits in the file. */
.bto-banner .bto-banner-grid { min-height: 0; }
}
/* type — was Pixy's .mil-head1 / .mil-text-lg scale */
.bto-banner-title {
font-weight: 600;
letter-spacing: -0.01em;
/* PASS 5: literal -> the panel's own ink hook (§ L2), which now defers to the
palette ink ramp. Same value today; follows MP071 tomorrow. */
color: var(--bto-panel-ink, #353639);
}
/* accent follows bto-css/palette.css (loaded after this file); the fallback is
the pre-palette gold, so pulling that one restores the old colour. */
.bto-banner-title em.s { font-style: normal; color: var(--pin-primary, #f1b84b); }
.bto-banner-lead {
font-size: 18px;
line-height: 1.6;
/* PASS 5: literal -> the panel's ink hook. See .bto-banner-title above. */
color: var(--bto-panel-ink-mute, #5b5c5f);
}
.bto-banner .bto-eyebrow { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.12em; }
/* CTAs — Mokko's own .btn component; the second is a ghost variant, because
Mokko ships no outline button and two solid pills side by side read as one
block. Geometry is Mokko's .btn / .btn--sm. */
.bto-banner-ctas .btn { height: 45px; font-size: 0.95rem; }
.bto-btn-ghost {
background-color: transparent;
border: 1px solid var(--pin-hairline, rgba(53, 54, 57, 0.28));
color: var(--pin-ink, #353639);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.bto-btn-ghost:hover {
background-color: var(--pin-ink, #353639);
border-color: var(--pin-ink, #353639);
color: var(--pin-canvas, #fff);
}
@media (max-width: 576px) {
.bto-banner-ctas .btn { width: 100%; }
}
/* ==========================================================================
5 · TEXT TICKER
--------------------------------------------------------------------------
The markup is Mokko's (index-three.html:337-380) inside Mokko's own
`.project-area` wrapper, so `main.js gsapScrollingText()` drives
`.scrollingText-two` / `.scrollingText-four` natively and
bto-js/text-ticker.js is not loaded. Mokko's native size is 80px/80px with
66px circles (style.css:13368-13389); Ash asked for it thin, so it is
halved — the same 40px/40px + 33px the Pixy build shipped in
bto-css/text-ticker.css.
========================================================================== */
.bto-ticker { padding-bottom: 0; overflow: hidden; }
.bto-ticker .ms-text-ticker .ms-tt__text {
font-size: 40px;
line-height: 40px;
}
@media (max-width: 576px) {
.bto-ticker .ms-text-ticker .ms-tt__text { font-size: 30px; line-height: 30px; }
}
.bto-ticker .ms-text-ticker .ms-tt__text.img { width: 33px; height: 33px; }
.bto-ticker .ms-text-ticker .ms-tt__text.img img { width: 33px; }
/* ==========================================================================
6 · THE WORK
--------------------------------------------------------------------------
sections.css sizes the rails through `.mil-project-img` (Pixy's media
frame: position/height/overflow) plus our own `.mil-9-16` / `.mil-16-9`
ratio add-ons. `.mil-project-img` does not exist under Mokko, so the frame
is restated here as `.bto-media` with the two ratios kept identical
(177.7778% and 56.25%).
Swiper: Mokko ships CSS 7.3.1 + JS 11.0.5, and v7 renamed the container
class `.swiper-container` -> `.swiper`. The rails therefore carry `.swiper`
(which is what gives them `overflow:hidden`), not `.swiper-container`.
They are initialised under `.bto-work-slider` in bto-js/sections.js §S so
they can never collide with main.js's own `.swiper-container-h`,
`.aboutSlider` or `.swiper.ms-slider-material` inits.
========================================================================== */
.bto-work { padding-bottom: 12vh; }
.bto-work-lead {
font-size: 20px;
line-height: 1.6;
color: var(--color-contrast-medium);
margin: 0 0 6vh;
}
.bto-rail-block { margin-top: 6vh; }
.bto-rail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}
.bto-rail-title {
font-size: 32px;
font-weight: 600;
text-transform: uppercase;
margin: 0;
}
@media (max-width: 576px) { .bto-rail-title { font-size: 24px; } }
/* rail arrows — Mokko has no slider nav component of its own on this page, so
these are built from Mokko's own back-to-top arrow glyph in a pill. */
.bto-rail-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.bto-nav-btn {
width: 44px; height: 44px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--color-contrast-low);
border-radius: 50%;
background: transparent;
color: var(--color-contrast-higher);
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.bto-nav-btn svg { width: 18px; height: 18px; fill: currentColor; }
.bto-nav-btn.prev svg { transform: rotate(-90deg); }
.bto-nav-btn.next svg { transform: rotate(90deg); }
.bto-nav-btn:hover {
background: var(--color-contrast-higher);
color: var(--color-bg);
border-color: var(--color-contrast-higher);
}
.bto-nav-btn.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
/* the media frame — replaces Pixy's .mil-project-img */
.bto-media {
position: relative;
display: block;
width: 100%;
height: 0;
overflow: hidden;
border-radius: var(--pin-r-md, 20px); /* palette radius, Mokko's as fallback */
background: var(--color-contrast-lower);
}
.bto-media.bto-9-16 { padding-bottom: 177.7778%; }
.bto-media.bto-16-9 { padding-bottom: 56.25%; }
.bto-media > video,
.bto-media > img {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.bto-media .drop {
position: absolute; inset: auto 0 0 0; padding: 12px;
text-align: center; font-size: 12px; letter-spacing: 0.1em;
text-transform: uppercase; color: #fff;
background: rgba(0, 0, 0, 0.55);
}
.bto-work-slider { width: 100%; }
.bto-work-slider .swiper-slide { height: auto; }
/* captions — sections.css leaves these to inherit; give them Mokko's tokens.
The category tag is hard-coded gold in sections.css and palette.css does not
reach it, so it is pointed at the palette accent here like every other one. */
.bto-work-cap .tag { color: var(--pin-primary, #f1b84b); }
.bto-work-cap h4 { color: var(--color-contrast-higher); }
.bto-work-cap p { color: var(--color-contrast-medium); opacity: 1; }
.bto-work-rights { color: var(--color-contrast-medium); opacity: 1; }
/* Engine Room -> THE WORK anchor offset. Mokko's fixed header bottom edge is
90px on desktop and it does not float at all at <=1023px. */
.bto-work-anchor { scroll-margin-top: 110px; }
@media (max-width: 1023px) { .bto-work-anchor { scroll-margin-top: 24px; } }
/* ==========================================================================
7 · ENGINE ROOM
--------------------------------------------------------------------------
The .er3-* grid comes across untouched from sections.css. Two fixes only:
`.er-sec { color: var(--on-dark) }` resolves through hero.css's light-theme
token remap to #212122 — near-black text on a near-black panel — and `.kick`
is scoped to `.hb-scroller` in hero.css, so the eyebrow here had no type.
========================================================================== */
/* PASS 5: the ink literal -> --bto-on-c (§ N). It was the last on-dark hex in
this file. P5.1 already supersedes it for `#engine`, so no pixel moves; this
just means nothing here can strand when --bg-panel-dark changes under MP071. */
.er-sec { color: var(--bto-on-c, rgba(244, 241, 234, 0.92)); padding: clamp(64px, 9vh, 120px) 40px; }
.er-sec .er-center .kick {
font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--pin-primary, #f1b84b); margin-bottom: 12px;
}
.er-sec .er-head {
font-size: clamp(32px, 4.4vw, 64px);
font-weight: 600;
text-transform: uppercase;
}
/* `em.s` is our accent-word marker. hero.css un-italicises it, but only inside
`.hb-scroller`; everywhere else it fell back to the browser's italic and to
sections.css's hard-coded gold. */
.er-sec .er-head em.s { font-style: normal; color: var(--pin-primary, #f1b84b); }
.er3 { margin-top: 6vh; }
@media (max-width: 768px) { .er-sec { padding-left: 20px; padding-right: 20px; } }
/* ==========================================================================
8 · FAQ
--------------------------------------------------------------------------
The .fq-* accordion and its 0fr->1fr animation come across untouched.
sections.css ends with a DARK-SKIN reconciliation block (written for Pixy's
style-stylish.css) that paints the answers `rgba(210,210,208,.62)` — pale
grey, which on Mokko's white canvas is all but unreadable. Re-tinted here
onto Mokko's themed tokens so it also survives the header's theme toggle.
========================================================================== */
.fq-sec { padding: 0 40px clamp(64px, 9vh, 120px); }
@media (max-width: 768px) { .fq-sec { padding-left: 20px; padding-right: 20px; } }
.fq-list { border-top-color: var(--color-contrast-low); }
.fq-item { border-bottom-color: var(--color-contrast-low); }
.fq-q { color: var(--color-contrast-higher); }
.fq-q:hover .fq-pl { color: var(--pin-primary, #f1b84b); }
.fq-n { color: var(--color-contrast-medium); }
.fq-pl { color: var(--color-contrast-medium); }
.fq-a p { color: var(--color-contrast-medium); }
.fq-item.open .fq-pl { color: var(--pin-primary, #f1b84b); }
/* ==========================================================================
9 · FOOTER — our content inside Mokko's .ms-footer
========================================================================== */
.bto-footer-lead {
max-width: 62ch;
margin: 28px auto 0;
text-align: center;
font-size: 18px;
line-height: 1.6;
color: var(--color-contrast-medium);
}
.bto-footer-cols {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
margin-top: 36px;
}
.bto-footer-cols > div { min-width: 180px; }
.bto-footer-cols .bto-eyebrow {
margin: 0 0 10px;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--color-contrast-medium);
}
.bto-footer-cols p { margin: 0 0 6px; color: var(--color-contrast-high); }
.ms-footer .copyright-area .inner .logo-icon {
display: flex; align-items: center; justify-content: center;
}
.ms-footer .copyright-area .inner .logo-icon svg {
width: 100%; height: auto; color: var(--color-contrast-higher);
}
/* ============================================================================
HERO — kill the leftover white strip (Ash 2026-07-27)
Symptom: a white band between the top of the page and the dark hero stage,
sitting under Mokko's capsule header.
Cause, measured: `.hb-scroller` was painting `rgb(255,255,255)` and
`.hb-stage` was pinning at `top: 90px` — a Pixy-era offset sized for Pixy's
solid 120px header bar. Mokko has no header bar: `.ms-menu-wrapper` is an
absolutely-positioned floating capsule (top:20, z-8) that occupies NO flow
height. So the 90px reserved nothing and simply exposed white.
(The old fix for the white scroller lived in `transplant-overrides.css`,
which is Pixy-era and correctly no longer loaded — so it came back.)
Fix: pin at 0 and let the stage run full-bleed with the capsule floating
over it, which is the Mokko treatment.
========================================================================== */
#hbScroller.hb-scroller {
background: transparent;
color: inherit;
}
.hb-scroller .hb-stage {
--bto-nav-h: 0px;
}
/* the hero's own top bar would otherwise sit under the floating capsule */
.hb-scroller .hb-top { padding-top: 26px; }
@media (max-width: 768px) {
.hb-scroller .hb-stage { --bto-nav-h: 0px; }
.hb-scroller .hb-top { padding-top: 20px; }
}
/* ============================================================================
PANEL 2 under Mokko — geometry fix (Ash 2026-07-27: "also fix panel 2")
Measured problem: the panel was 620px tall while each card is 281px and the
-8deg tilt swings 1512*tan(8deg) ~= 212px of vertical travel across the
viewport. 281 + 212 needs ~500px of clear band; 620px minus the copy block
left far less, so cards were sliced off top and bottom and one was cut in
half at the left edge.
The height was tuned against Pixy's container/section padding. Mokko's
differ, so it is re-derived here rather than nudged.
========================================================================== */
/* the panel no longer carries Pixy's .mil-p-160-100 — that class was stripped
in the Mokko conversion, so target .bto-banner alone. */
.bto-banner {
min-height: 780px; /* was 620 — see the arithmetic above */
}
.bto-banner-grid {
min-height: 560px; /* was 460 */
align-items: center;
}
/* keep the copy clear of the drifting cards: widen the fade and push it further
right, so the headline never lands on a white card edge */
.bto-banner-copy::before {
inset: -60px -220px -60px -50vw;
}
/* the rail sits slightly below centre so the copy owns the upper-left, which is
how the sketch reads */
.bto-banner .bto-rail-area { align-items: center; }
@media (max-width: 1200px) {
.bto-banner { min-height: 720px; }
.bto-banner-grid { min-height: 500px; }
}
/* ============================================================================
1 · HERO — remove the mac-window chrome (Ash: "remove this mac ui thingi")
`.hb-top` is the hero's editor top-bar: three traffic-light dots plus
"By The Owl — Resolve Studio". It read as a macOS window title bar sitting
under the real site header. Removed, not just hidden from sight, so it also
leaves the accessibility tree.
========================================================================== */
.hb-scroller .hb-top { display: none !important; }
/* the stage reserved room for that bar — reclaim it so the reel fills the frame */
.hb-scroller .hb-mid { padding-top: 0; }
/* ============================================================================
2 · THE WORK — kill the dead space and the mixed alignment
Measured: the heading block ran 398px tall for two lines of type, and the
eyebrow + lead were centre-aligned while the H2 was left-aligned, so the
section read as three unrelated blocks floating in empty space.
Everything left-aligns to the same edge and the vertical rhythm tightens.
========================================================================== */
#work.bto-work .col-lg-12,
#work.bto-work .col-lg-4,
#work.bto-work .col-lg-8 { text-align: left; }
#work.bto-work .col-lg-12 > *,
#work.bto-work .col-lg-4 > *,
#work.bto-work .col-lg-8 > * { margin-left: 0; margin-right: 0; }
/* the heading block: 398px of box for two lines of type */
#work.bto-work .col-lg-12 { padding-top: 0; padding-bottom: 0; }
#work.bto-work h2 { margin: 0 0 18px; }
#work.bto-work .row + .row { margin-top: 0; }
/* the lead sat centred and far below the heading */
#work.bto-work p { margin: 0 0 8px; max-width: 68ch; }
/* section padding — Mokko's .project-area is generous; this section carries two
full sliders underneath it and does not need the extra */
#work.bto-work { padding-top: 72px; padding-bottom: 72px; }
/* --- THE WORK, precise targets ------------------------------------------
Measured causes of the mixed alignment:
· the eyebrow is `.ms-ah-wrapper > p.heading-title`, and Mokko's
`.ms-ah-wrapper` is `text-align: center` (style.css:4644) — so the eyebrow
centred while the H2 inside the same wrapper had its own `text-align:start`
· the lead sits in a `.col-lg-8` that follows an empty `.col-lg-4`, which
pushed it 525px in from the section's left edge
Both align to the same left edge as everything else. */
#work.bto-work .ms-ah-wrapper,
#work.bto-work .ms-ah-wrapper .heading-title,
#work.bto-work .ms-ah-wrapper .content__title { text-align: left !important; }
#work.bto-work .ms-ah-wrapper { margin: 0; }
#work.bto-work .row > .col-lg-4:empty { display: none; }
#work.bto-work .bto-work-lead { max-width: 68ch; }
#work.bto-work .row > .col-lg-8 { flex: 0 0 100%; max-width: 100%; }
/* --- THE WORK reads as ONE panel (Ash 2026-07-27) ------------------------
⚠ DEAD CODE — kept for the reasoning only. See "THE WORK — ONE PANEL, FOR
REAL" at the END of this file (Creative Director design pass, 2026-07-27).
Every selector below is keyed on `.bto-work-head`, and THAT CLASS DOES NOT
EXIST in site/index.html. The real markup is a Bootstrap `.row` holding
`.col-lg-12` (eyebrow + H2) → an EMPTY `.col-lg-4` → `.col-lg-8` (the
lead). So this whole block has never applied, which is exactly why the
section still reads as three stacked blocks with an 87px hole in it.
The intent below is right; it is re-implemented against the real DOM at
the end of the file.
Was: heading block (254px) stacked over the lead (64px) with a 70px gap
before the first slider — ~410px of header before any work appeared, so the
title, the subtext and the two rails read as three unrelated blocks.
Now a single header ROW — title left, subtext right on the same baseline —
with the rails following directly under it. One panel, one rhythm. */
#work.bto-work .bto-work-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
gap: 40px;
align-items: end;
margin-bottom: 18px; /* was 40 — the rails belong to this panel */
}
#work.bto-work .bto-work-head .ms-ah-wrapper { margin: 0; }
#work.bto-work .bto-work-head .bto-work-lead { margin: 0 0 10px; max-width: none; }
/* the rails now belong to the same panel — tighten their headers */
#work.bto-work .bto-rail-title { margin: 0 0 18px; }
#work.bto-work .swiper + * { margin-top: 44px; }
@media (max-width: 992px) {
#work.bto-work .bto-work-head {
grid-template-columns: 1fr;
gap: 14px;
align-items: start;
margin-bottom: 30px;
}
#work.bto-work .bto-work-head .bto-work-lead { margin: 0; }
}
/* ============================================================================
============================================================================
DESIGN PASS — Creative Director, 2026-07-27
Structural half of the QA pass. Colour-only changes are in bto-css/palette.css
(which loads AFTER this file, so it wins colour ties by design).
SCOPE NOTE: mokko-bridge.css is ALSO loaded by services.html and work.html,
which another agent owns. Every rule below is therefore scoped to a
homepage-only hook — `.bto-banner`, `#work`, `.bto-rail-*`, `.bto-work-*`,
`.er-sec`, `.fq-sec`, `.bto-ticker` — all of which were grepped and appear
in index.html ONLY. The three exceptions are `.bto-logo`, `.back-to-top` and
the spacing tokens: the first two are pure legibility fixes that are correct
on every page, and the tokens are inert until something consumes them.
============================================================================
========================================================================== */
/* ==========================================================================
E · ONE SPACING SCALE FOR THE WHOLE PAGE
Found: section rhythm came from two templates and was nudged by hand, so the
page was running `17vh` (Mokko `.project-area`), `8vh` (`.ms-ah-wrapper`),
`12vh`, `6vh`, `72px`, `clamp(52px,7vh,96px)` and `clamp(64px,9vh,120px)`
side by side. Viewport-relative vertical padding is the root cause: the gaps
between panels literally change shape as the window resizes, which is why the
page never settles into a rhythm.
Replaced with one fixed ladder, every value a multiple of 8 and traceable to
DESIGN.md → Layout › Spacing System:
--bto-gutter 40 / 24 / 20 page side gutter (Mokko's own 40px, kept —
it is already the edge THE WORK, the Engine
Room and the FAQ share)
--bto-section 64 / 48 / 32 {spacing.section}, verbatim, incl. the
documented 64→48→32 responsive ladder.
Every section pads this top AND bottom, so
any two neighbours sit 128px apart.
--bto-panel 96 / 64 / 48 1.5 × section — internal inset for a
full-bleed COLOUR panel (the Engine Room),
which needs more room off its own edge than
a section on the page canvas does.
--bto-group 48 / 40 / 32 a header block to the content it heads
--bto-item 24 / 24 / 16 {spacing.xl} — a label to the thing labelled
Deviation logged: DESIGN.md's own pages sit sections 64px apart on a dense
product-marketing layout. Holding 64px top + 64px bottom gives 128px between
panels here, which is the "generous whitespace" half of the brief without
inventing a number that is not in the doc.
========================================================================== */
:root {
--bto-gutter: 40px;
--bto-section: 64px;
--bto-panel: 96px;
--bto-group: 48px;
--bto-item: 24px;
}
@media (max-width: 992px) {
:root {
--bto-gutter: 24px;
--bto-section: 48px;
--bto-panel: 64px;
--bto-group: 40px;
}
}
@media (max-width: 576px) {
:root {
--bto-gutter: 20px;
--bto-section: 32px;
--bto-panel: 48px;
--bto-group: 32px;
--bto-item: 16px;
}
}
/* apply it — every homepage section, one rule each, no vh anywhere */
#work.bto-work {
padding-top: var(--bto-section);
padding-bottom: var(--bto-section);
padding-left: var(--bto-gutter);
padding-right: var(--bto-gutter);
}
.er-sec {
padding: var(--bto-panel) var(--bto-gutter);
}
.fq-sec {
padding: var(--bto-section) var(--bto-gutter);
}
/* the ticker is a divider band, not a section — it gets the section step on
both sides so it reads as the rule between panel 2 and THE WORK. */
.bto-ticker {
padding-top: var(--bto-section);
padding-bottom: var(--bto-section);
}
/* DELIBERATELY EXCLUDED — `.bto-banner`.
It is a fixed-height flex panel (min-height 780px) whose height was derived
from the card height + the vertical travel of the -8deg tilt. `box-sizing:
border-box` means adding 64px top and bottom would eat 128px out of that
clear band and start slicing card corners again — the exact bug the block
above ("PANEL 2 under Mokko — geometry fix") was written to kill. It also
does not need the padding: it is a full-bleed COLOUR panel, so the surface
change is already the separation from its neighbours. */
/* ==========================================================================
F · ONE EYEBROW SPEC
Found: three different eyebrows on one page — panel 2 at 14px/.12em, THE WORK
at Mokko's `.heading-title` 20px/#747474 (a heading pretending to be a label),
the footer at 12px/.14em. The 20px one is the loudest offender: at 20px it
competes with the lead paragraph directly under the H2.
One spec, everywhere: DESIGN.md {typography.caption-md} size at
{typography.button-md} weight, uppercase, tracked. Colour is set in
palette.css.
========================================================================== */
.bto-banner .bto-eyebrow,
#work .ms-ah-wrapper .heading-title,
.er-sec .er-center .kick,
.bto-footer-cols .bto-eyebrow {
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 var(--bto-item);
}
/* ==========================================================================
G · THE WORK — ONE PANEL, FOR REAL
(Ash: "convert them into one panel where the work and the subtext matches
and complements the sliders under it")
What I saw in _shots/mokko-work-section.png:
· the header block, the subtext and the two rails read as four separate
objects floating in white — an 87px hole between the subtext and REELS
· the header is INDENTED relative to the rails: the `.row`'s `.col-lg-*`
carry Bootstrap's 15px padding, the `.bto-rail-block`s do not, so the
title starts on a different left edge from the cards underneath it. That
misalignment alone is enough to break "one panel", and no amount of gap
tuning fixes it.
· "REELS" is set at 32px/600 uppercase — near-identical weight to a section
head, so it reads as a NEW section rather than a rail inside this one
· the six `.bto-work-anchor` s are inline elements in flow: they
generate a stray line box at the top of the section, i.e. invisible dead
height before anything renders
The five moves, in order of how much they buy:
1. every element in the section shares ONE left edge (kill the col padding
and the row's negative margin)
2. the header becomes a ROW — title left, lead right, bottom-aligned — so
the subtext belongs to the title instead of orbiting it
3. hairline rules bind each rail to the header: the panel now reads
header → rule → REELS → rule → FILMS, i.e. one table with two rows.
DESIGN.md → Elevation › "1px solid {colors.hairline}: 1px row dividers"
4. the rail titles drop to a tracked 14px label ({typography.body-sm-strong})
so THE WORK is the only heading in the panel
5. one gap ladder: header→rail = --bto-group, label→rail = --bto-item,
rail→rail = --bto-section
========================================================================== */
/* 0 · the invisible line box */
#work .bto-work-anchor { display: block; height: 0; overflow: hidden; }
/* 1 · one left edge. The section's own --bto-gutter is now the only inset. */
#work.bto-work > .row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
align-items: end;
column-gap: var(--bto-section);
row-gap: var(--bto-item);
margin: 0 0 var(--bto-group);
width: auto;
}
#work.bto-work > .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
max-width: none;
width: auto;
flex: none;
}
/* the spacer column between the H2 and the lead exists only to push the lead
right in the old flex layout; in the grid it is a dead cell. */
#work.bto-work > .row > .col-lg-4 { display: none; }
#work.bto-work > .row > .col-lg-12 { grid-column: 1; }
#work.bto-work > .row > .col-lg-8 { grid-column: 2; }
/* 2 · the header row itself */
#work.bto-work .ms-ah-wrapper,
#work.bto-work .ms-ah-wrapper.custom-style2 { margin: 0; }
#work.bto-work .ms-ah-wrapper .content__title {
font-size: clamp(56px, 7.6vw, 112px);
font-weight: 600;
line-height: .92;
/* DESIGN.md → Typography › Principles: "-1.2px tracking at display sizes …
the negative tracking is part of the brand voice." Expressed in em so it
survives the clamp. */
letter-spacing: -.02em;
margin: 0;
}
#work.bto-work .bto-work-lead {
font-size: 20px;
line-height: 1.5;
max-width: 42ch;
/* sits the lead's last line on the display's baseline rather than floating it
against the cap height */
margin: 0 0 .5em;
}
/* 3 + 4 · the rail head becomes a labelled row bound by a rule */
#work.bto-work .bto-rail-block { margin-top: 0; }
#work.bto-work .bto-rail-block + .bto-rail-block { margin-top: var(--bto-section); }
#work.bto-work .bto-rail-head {
align-items: center;
border-top: 1px solid var(--pin-hairline, #dadad3);
padding-top: var(--bto-item);
margin-bottom: var(--bto-item);
gap: var(--bto-item);
}
#work.bto-work .bto-rail-title {
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0;
}
/* DESIGN.md {component.button-icon-circular} is 40px, not 44 — and at 44 the
paddles out-weighed the 14px label they sit beside. */
#work.bto-work .bto-nav-btn { width: 40px; height: 40px; }
#work.bto-work .bto-nav-btn svg { width: 16px; height: 16px; }
/* 5 · the tail */
#work.bto-work .bto-work-cap { padding: var(--bto-item) 0 0; }
#work.bto-work .bto-work-cap p { opacity: 1; }
#work.bto-work .bto-work-rights { margin-top: var(--bto-section); font-size: 12px; opacity: 1; }
@media (max-width: 992px) {
#work.bto-work > .row {
grid-template-columns: 1fr;
align-items: start;
}
#work.bto-work > .row > .col-lg-8 { grid-column: 1; }
#work.bto-work .bto-work-lead { max-width: 56ch; margin: 0; }
}
/* ==========================================================================
H · PANEL 2 — the headline stops fighting the rail
What I saw in _shots/mokko-panel2.png: the fade is NOT doing its job. The
gradient's stops are percentages of a box that is ~1600px wide, so the plate
is already ~60% transparent by the time it reaches the headline — you can
read "REPUTATION" and a full line of card body copy straight through
"EVERYTHING YOUR BRAND NEEDS". Two text layers at similar contrast competing
in the same space is a hierarchy failure, not a depth effect.
Verdict: keep the layering gesture, lose the collision. The plate becomes a
full-height column that is genuinely opaque under the copy and fades out over
a FIXED 280px band to its right, so the cards emerge from BEHIND the copy
instead of showing through it. Two upsides: the fade band no longer changes
width with the viewport, and there is no longer a horizontal plate edge for a
card to get sliced on (it runs the full panel height, and the panel clips).
GEOMETRY ONLY here — the gradient itself carries colour, so it lives in
palette.css (which loads after this file and would otherwise win the tie).
The two are tuned together: the plate overhangs the copy column by 320px on
the right and the fade band is 280px, so opacity is still 1.0 across the
whole width of the copy and only starts dropping 40px past its right edge.
The headline can no longer land inside the fade.
========================================================================== */
.bto-banner-copy::before {
/* full-height, so there is no top/bottom plate edge inside the panel at all
and no card ever gets sliced on one */
inset: -50vh -320px -50vh -50vw;
}
/* panel 2 was the ONLY section on the page still laid out inside Bootstrap's
centred `.container` — every other section runs on the 40px gutter. That put
its copy on a different left edge from THE WORK, the Engine Room and the FAQ,
~56px in from theirs at 1512. One page, one edge. */
.bto-banner > .bto-banner-fg > .container {
max-width: none;
width: 100%;
padding-left: var(--bto-gutter);
padding-right: var(--bto-gutter);
}
/* the copy column was 44% of the old narrow container; at full width that
measure runs long, so it comes back to 38%. */
.bto-banner .bto-banner-grid { grid-template-columns: minmax(300px, 38%) 1fr; }
.bto-banner .bto-banner-lead { max-width: 42ch; }
.bto-banner .bto-banner-title { letter-spacing: -.02em; }
.bto-banner .bto-banner-ctas { gap: var(--bto-item); }
/* DESIGN.md → Elevation: "Don't introduce drop shadows on cards. The only
shadow in the system is the 16px ambient under {component.modal-card}." The
rail cards were carrying `0 14px 34px` at rest and `0 22px 50px` on hover —
a decorative lift the flat system does not have. The hairline border plus the
white-on-#f6f6f3 value step already separate the card from the panel, and
killing the shadow lets the tilt do the layering on its own. The hover
translateY stays: that is motion, not elevation. */
.bto-banner .bto-pw-card { box-shadow: none; border-color: var(--pin-hairline, #dadad3); }
.bto-banner .bto-pw-card:hover { box-shadow: none; }
/* the thumbnail was on a 14px radius — a fourth value. DESIGN.md: "Don't
introduce a third radius value between 16px and 32px." */
.bto-banner .bto-pw-thumb { border-radius: var(--pin-r-md, 16px); }
.bto-banner .bto-pw-btn { border-radius: var(--pin-r-full, 9999px); }
/* ==========================================================================
I · ENGINE ROOM + FAQ — same ladder, same radii
========================================================================== */
.er-sec .er3 { margin-top: var(--bto-group); }
.er-sec .er3-tile { border-radius: var(--pin-r-md, 16px); }
.er-sec .er-head {
letter-spacing: -.02em;
margin-top: 0;
}
.fq-sec .fq-head { letter-spacing: -.02em; margin-top: 0; }
.fq-sec .fq-list { margin-top: var(--bto-group); }
/* ==========================================================================
J · HEADER LOCKUP OVER THE HERO — the scrim's geometry
(colour values are in palette.css § C)
`isolation: isolate` is doing real work here: it gives the lockup its own
stacking context so the z-index:-1 scrim lands behind the type but cannot
fall behind `.main-header__inner::after` (the scrolled pill's blurred
backdrop, which this file already documents as painting over unstacked
header children).
========================================================================== */
.main-header__inner .logo-light .bto-logo {
position: relative;
isolation: isolate;
}
.main-header__inner .logo-light .bto-logo::before {
content: "";
position: absolute;
inset: -16px -56px -16px -40px;
z-index: -1;
pointer-events: none;
border-radius: var(--pin-r-full, 9999px);
}
/* the tagline is the brand line; at 9px it had nothing to hold on to */
.bto-logo__tag { font-size: 10px; letter-spacing: .16em; }
/* ==========================================================================
K · BACK-TO-TOP — DESIGN.md {component.button-pill-on-image}
Found in _shots/mokko-work-section.png: the control is `position: fixed`
bottom-right with no background until hover, so it renders as bare near-black
text and a bare arrow directly on top of a reel thumbnail. It reads as a
rendering fault.
DESIGN.md ships the component for exactly this — a canvas-filled pill with an
ink label, `{rounded.full}`, `8px 14px`. Made permanent instead of on-hover.
========================================================================== */
.back-to-top {
height: 48px;
padding: 0 6px 0 18px;
gap: 4px;
border-radius: var(--pin-r-full, 9999px);
}
.back-to-top .ms-btt--text { font-size: 14px; font-weight: 700; }
.back-to-top .ms-btt--inner { width: 36px; height: 36px; }
.back-to-top .ms-btt-i { width: 18px; }
@media (max-width: 1023px) {
.back-to-top { padding: 0; width: 48px; justify-content: center; }
}
/* ============================================================================
============================================================================
DESIGN PASS 2 — Creative Director, 2026-07-27
Ash's feedback on pass 1, verbatim:
1. "in panel 2 everything your brand needs like there is a there is this
weird fade"
2. "the work heading and the sliders like all that panel is not looking
very good"
3. "the background is going bongoose … fix the colors of the background"
→ STRUCTURE only in this pass. No colour VALUES are chosen here; the
surface-count / boundary recommendation is written up in
_notes/15_design-pass.md § PASS 2. A concurrent agent owns palette.css
and text-ticker.css and is consolidating the actual tokens.
Everything below SUPERSEDES the pass-1 rules of the same name above. Pass 1
is left in place with its reasoning intact (this file's convention) — the
cascade handles it, since same-specificity rules later in the file win.
Scope guard unchanged: every selector below is `.bto-banner` or `#work`, both
of which grep to index.html only. services.html / work.html untouched.
============================================================================
========================================================================== */
/* ==========================================================================
L · PANEL 2 — THE FADE IS DELETED. The rail stops travelling behind the copy.
WHY NOT A THIRD TUNING OF THE FADE
Pass 1 diagnosed the fade correctly (cards legible THROUGH the headline) and
fixed the wrong layer: it rebuilt the plate in px and ran it full height.
Ash still reads it as an artefact, and he is right — an opaque-then-fading
plate over moving cards can only ever be one of two things: a hard edge you
can see, or a translucent wash you can see. There is no third state. Two
passes of tuning failed because the plate was never the problem.
THE ACTUAL CAUSE, found in marquee-banner.css's own header comment:
"Was: a 2-column grid — copy in the left column, rail in the right. […]
Now three stacked layers […] the card rail, FULL BLEED across the whole
panel […] The copy has no background of its own — it sits on the rail."
The rail was widened to full bleed, which put moving white cards under the
copy, and the fade was invented in the same commit to paper over it (its own
comment: "Without it the headline fights whichever white card happens to be
drifting behind it").
But Ash's locked sketch — IMG_2338, transcribed at the top of that same file
— has the cards on the RIGHT, clear of the copy:
│ Everything ╱▤╲ ╱▤╲ │
│ your ╱▤╲ ╲__╱ │
│ Brand. ╱▤╲ ╱▤╲ │
So full-bleed was a drift away from the approved layout, not a requirement of
it. Reverting it removes the readability problem at source: nothing overlaps
the copy, so nothing needs to be masked, scrimmed or faded, and the copy sits
on the honest panel surface with zero layers between it and the background.
THE ONE DESIGN DECISION THIS FORCES: where the rail ends on the left.
A marquee has to be cut somewhere. Cut it at an invisible line and cards pop
out of existence — the same artefact in a new place. So the cut is declared:
the rail gets a real APERTURE — a 1px hairline left edge with {rounded.lg}
corners, running off the right edge of the viewport. Cards travel through a
window with a stated edge. That is the flat/hairline vocabulary DESIGN.md
already uses ("Elevation 1 — Hairline border: 1px solid {colors.hairline}")
rather than a depth effect the system does not own.
Net: the honest surface the copy needed was never a plate BEHIND the text.
It was a frame around the moving thing.
========================================================================== */
/* L1 · the plate is not restyled — it is never generated.
palette.css loads AFTER this file and paints `.bto-banner-copy::before`'s
gradient, so its background cannot be overridden from here. `content` can:
marquee-banner.css declares `content: ""` and this file wins that tie by load
order, so the pseudo-element does not exist and palette.css's rule has
nothing to paint on. Leaves that (now inert) block in palette.css untouched —
it belongs to the other agent's file. */
.bto-banner-copy::before { content: none; }
/* L2 · the panel's own measurements, in one place so the copy column and the
aperture can never drift apart. --bto-copy-frac drives BOTH. */
.bto-banner {
--bto-copy-frac: .38; /* copy column, as a fraction of the
container's inner width */
--bto-rail-gap: var(--bto-section); /* clear air between copy and aperture */
/* Themed on purpose. --pin-hairline is defined once in :root with no dark
variant, so it would be a light rule on a dark panel after the theme fix
lands. --color-contrast-higher is Mokko's themed ink token, so this edge
inverts with the theme by itself. */
--bto-rail-edge: color-mix(in srgb, var(--color-contrast-higher, currentColor) 16%, transparent);
/* Deliberately transparent. If the surface pass decides the rail band should
be its own value, this is the single hook — the geometry is already here. */
--bto-rail-surface: transparent;
/* Colour hooks for the copy. These lift two hardcoded hexes out of § 4's type
block (900 lines up) and put them where the panel is described.
PASS 5 — THE HANDOFF THIS COMMENT PROMISED IS NOW TAKEN.
Pass 2 left these as literals and said: "the moment the surface pass makes
that panel theme-aware, these two go with it, or the copy disappears."
Panel 2 IS theme-aware now (it is on --bg-panel2 via --bto-surface-b), so
they defer to the palette's ink ramp instead of standing still. The literal
fallbacks are byte-identical to the old values and to palette.css's own
LIGHT --fg-heading / --fg-lead, so NOTHING moves today — but under MP071
the copy follows its surface by itself rather than needing a second pass.
See _notes/15_design-pass.md § PASS 2 › Background structure. */
--bto-panel-ink: var(--fg-heading, #353639);
--bto-panel-ink-mute: var(--fg-lead, #5b5c5f);
}
.bto-banner-title { color: var(--bto-panel-ink); }
.bto-banner-lead { color: var(--bto-panel-ink-mute); }
@media (min-width: 993px) {
/* L3 · the copy column, and the aperture that starts where it ends.
Both are expressed from --bto-copy-frac, but the percentages resolve
against different boxes, so the aperture spells the arithmetic out:
gutter + copy-width + gap
where copy-width = frac x (viewport - 2 gutters).
At 1512/40px gutters: 40 + .38(1432) + 64 = 648px. The aperture's left edge
therefore lands on exactly the same grid line as the CTA column's left
edge — the rule is on real structure, not a chosen number. */
.bto-banner .bto-banner-grid {
grid-template-columns: minmax(300px, calc(var(--bto-copy-frac) * 100%)) 1fr;
column-gap: var(--bto-rail-gap);
}
.bto-banner .bto-rail-area {
inset: 0 0 0 calc(
var(--bto-gutter)
+ var(--bto-copy-frac) * (100% - 2 * var(--bto-gutter))
+ var(--bto-rail-gap)
);
background: var(--bto-rail-surface);
border-left: 1px solid var(--bto-rail-edge);
/* {rounded.lg}. DESIGN.md reserves 32px for "large pin cards and modal
cards […] big content surfaces" — a full-height rail band is one. The
right corners are off-viewport, so only the left pair ever renders. */
border-radius: var(--pin-r-lg, 32px) 0 0 var(--pin-r-lg, 32px);
/* `overflow: hidden` is already on .bto-rail-area (marquee-banner.css) and
clips to the PADDING box, so the 1px rule is drawn outside the clip and
stays crisp while cards cut against its inner edge. */
}
/* L4 · the inner stops clipping, and overhangs the aperture on both sides.
Two separate bugs this avoids:
a) .bto-rail-inner is the ROTATED box. Its own `overflow: hidden` clips
in rotated space, so its left edge is a -8deg diagonal — it would bite
a ~19px triangular notch out of the aperture's clean vertical edge.
Let the unrotated aperture do all the clipping instead.
b) the marquee starts at translateX(0), i.e. the rail's physical left end
sits exactly on the container's left edge. Rotation swings that end
+/-15px, so a sliver of empty band was visible for the first seconds
of the 65s cycle. An 80px overhang each side puts the rail's ends
permanently outside the aperture. */
.bto-banner .bto-rail-inner {
overflow: visible;
width: calc(100% + 160px);
margin-left: -80px;
}
/* L5 · height, re-derived for the narrower rail.
Pass 1's 780px was sized for a FULL-BLEED rail: 1512 x tan(8deg) = 212px of
vertical travel + a 214px card = ~500px of clear band. The aperture is now
~864px wide (+160 overhang = 1024), so travel drops to 1024 x tan(8deg) =
144px and the band needs ~358px. 780px was leaving ~90px of dead air top
and bottom, which is a large part of why the panel reads empty. */
.bto-banner { min-height: 680px; }
.bto-banner .bto-banner-grid { min-height: 480px; }
}
@media (min-width: 993px) and (max-width: 1200px) {
/* marquee-banner.css narrows the cards to 420px here; the band shortens with
them. Bounded at min-width 993 so it cannot leak into the stacked layout
below 992, where .bto-banner is min-height: 0 by design. */
.bto-banner { min-height: 640px; }
.bto-banner .bto-banner-grid { min-height: 440px; }
/* The aperture is a REMAINDER, so it is squeezed from both ends as the
viewport narrows: at 993 a .38 column + a 64px gap leaves only ~542px for a
420px card — about 1.3 cards, which reads as an accident rather than a rail.
Both levers ease off together (marquee-banner.css already steps the column
to 34% here for the same reason), which buys back ~120px and holds the rail
at ~1.6 cards down to the point where the layout stacks anyway. */
.bto-banner {
--bto-copy-frac: .34;
--bto-rail-gap: var(--bto-group);
}
}
/* Below 992 marquee-banner.css already does the right thing — position: static
drops the rail into flow BELOW the copy, full bleed, and the layers separate.
Nothing to undo: every rule above is inside a min-width query, and `inset` is
inert on a static element. */
/* ==========================================================================
M · THE WORK — the header comes down to the scale of what it heads
Ash: "the work heading and the sliders like all that panel is not looking
very good." The rails were re-cut by another agent since pass 1 — slides are
now ~179px wide, 7 across, auto-advancing — which changed the weight balance
underneath a heading that pass 1 had left at 112px.
What _shots/mokko-work-section.png actually shows, in order of damage:
1. THE DISPLAY IS A 330x190px BLACK BLOCK over 179px cards. Pass 1 clamped it
to 112px but the markup carries a hard line break — `
The Work
`
— so it is forced into two stacked lines whatever the size. Each word ends
up nearly two card-columns wide. That is the "too dominant".
2. A LARGE VOID top-right. The lead is bottom-aligned to a 2-line display, so
it hangs low in its column with ~150px of empty above it and ~600px of
empty to its left. The header reads as two objects at opposite corners
rather than one row.
3. THE LEAD IS RAGGED-RIGHT in a right-hand column, so its right edge lines
up with nothing — while the paddles and the last card directly below it
both sit exactly on the right gutter.
4. THE CAPTION BLOCKS ARE UNEVEN. Titles are 17px, so "Senses 2.0 · Gioli &
Assia" wraps to two lines while "NOOOB" takes one, and the row's bottom
edge saws up and down across seven cards.
The panel's BONES from pass 1 are right and are kept: one left edge, a header
row, hairline-bound rail heads, 14px tracked rail labels. This is a scale and
alignment pass on top of them, not a rebuild.
========================================================================== */
/* M1 · one line, not two.
`display: none` on the suppresses the break without touching copy — the
words are identical, only the line structure changes. This is the single
biggest move in the panel: the header collapses from ~250px to ~65px and
THE WORK / REELS / FILMS & SPOTS become three single-line labels down the
left edge, each with something on its right. That IS the "one panel" the
pass-1 note was reaching for — it just could not be seen under the mass. */
#work.bto-work .ms-ah-wrapper .content__title br { display: none; }
/* M2 · the display drops to the page's OTHER display size.
Was clamp(56px, 7.6vw, 112px) -> 112px at 1512. Panel 2's headline is
clamp(36px, 4vw, 68px) -> 68px at the same width. The page was carrying two
different display tiers for two peer section heads, which is why this one
reads as shouting rather than as large.
One tier, used twice. It also resolves the open fork logged in pass 1 § 3.1
in favour of the document: DESIGN.md caps {typography.display-xl} at 70px,
and 68px is finally inside it. No editorial tier above display-xl is needed
after all — that fork can be closed. */
#work.bto-work .ms-ah-wrapper .content__title {
font-size: clamp(40px, 4.6vw, 68px);
line-height: .95;
letter-spacing: -.02em;
margin: 0;
}
/* M3 · the lead becomes supporting text and locks to the right gutter.
20px -> 16px ({typography.body-md}): at 20px it was reading as a second
headline against 14px rail labels and 14px card titles. text-align: right +
margin-left: auto puts its right edge on the same line as the paddles and the
last card below it — three right edges that currently agree on nothing.
46ch holds it to 3 lines, which is well inside the comfortable limit for
right-aligned setting.
REVERSIBLE IN ONE LINE if Ash reads right-aligned body as too mannered:
delete `text-align: right` and it reverts to ragged-right in place. */
#work.bto-work .bto-work-lead {
font-size: 16px;
line-height: 1.5;
max-width: 46ch;
margin: 0 0 .35em auto;
text-align: right;
}
/* M4 · the captions stop sawing.
· 17px -> 14px ({typography.body-sm-strong} size at 600): most titles now fit
one line inside a 179px card instead of wrapping.
· min-height reserves the second line anyway, so every caption block is the
same height and the row has ONE bottom edge.
· the tag loses ui-monospace. DESIGN.md, Typography > Font Family: the system
is "Pin Sans ... no serif, no monospace anywhere". Size and tracking hold,
so line lengths barely move.
· caption padding 24 -> 12 ({spacing.md}): at 179px wide, 24px of air
detached the caption from its own thumbnail. */
#work.bto-work .bto-work-cap { padding: 12px 0 0; }
#work.bto-work .bto-work-cap .tag {
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
margin-bottom: 6px;
}
#work.bto-work .bto-work-cap h4 {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
min-height: 2.6em;
}
/* M5 · the same de-monospacing on panel 2's card eyebrow, for one label spec
across the page. Same rule, same reason — and the rail cards are far more
legible now that nothing is washed over them, so the face is visible. */
.bto-banner .bto-pw-eyebrow {
font-family: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
}
/* M6 · re-assert the stacked layout below 992.
Pass 1's `@media (max-width: 992px)` reset for .bto-work-lead sits EARLIER in
this file, so M3 (which carries no media query) would otherwise win at every
width and leave the lead right-aligned and auto-margined underneath a
left-aligned heading in the single-column layout. Restated here, after M3. */
@media (max-width: 992px) {
#work.bto-work .bto-work-lead {
max-width: 56ch;
margin: 0;
text-align: left;
}
}
/* ============================================================================
============================================================================
DESIGN PASS 4 — Creative Director, 2026-07-27
PANEL 5 (ENGINE ROOM) + PANEL 6 (FAQ) join the page's system.
Ash: "fix panel 5 and 6 and make it like the rest of the panels. the fonts,
positioning and alignment, background are not the same."
He is right, and the reason is structural rather than cosmetic: both sections
were ported wholesale from the OLD By The Owl site and were never converted
when the page moved to Mokko. Passes 1-3 fixed the hero, panel 2 and THE WORK
and every one of those fixes was scoped to `.bto-banner` or `#work` — so the
two ported panels kept their own type scale, their own left edge, their own
vertical rhythm and their own surfaces. They are the last two panels still
running the old build's rules.
WHERE THESE RULES HAD TO LIVE
`index.html` loads: style.css -> hero.css -> sections.css -> marquee-banner.css
-> mokko-bridge.css -> palette.css. It does NOT load panel-fixes.css (only
services.html and work.html do — see the note at the end of this block). So
this file is the only one of the two I own that reaches the homepage, and
palette.css loads AFTER it. Where a rule below has to out-cascade palette.css
it carries the section's ID (`#engine` / `#faq`), which beats palette's
single-class selectors on specificity regardless of order. The IDs also
tighten the existing scope guard: `#engine` and `#faq` exist in index.html
only, so services.html / work.html cannot be reached from here.
NOT TOUCHED: sections.css, palette.css, marquee-banner.css, text-ticker.css,
any .html, any JS. No copy changed — not one word. The FAQ's 5 Q&As, the six
Engine Room tile labels and the section heads are byte-identical; only size,
weight, family, colour, spacing and alignment move.
============================================================================
========================================================================== */
/* ==========================================================================
N · THE THREE SURFACES, NAMED
Pass 2 recommended the page carry exactly three surfaces and no more:
A page canvas — THE WORK, the FAQ, the footer
B light panel — panel 2 and its ticker (the page's only B)
C dark panel — the Engine Room (and, see N.2, the hero stage)
Until now that was prose in a note. Naming them here does three things:
the two panels below can PARTICIPATE in the scheme instead of declaring
their own surface; the A/B/C intent is legible in the CSS; and Ash's MP071
swap lands on the five documented lines in palette.css §0 with both panels
following automatically — nothing is baked in that the swap would strand.
Each token defers to the palette token that already drives it, so this
block introduces NO new colour and changes NO value on its own. The
literal fallbacks fire only if palette.css is unlinked, which is that
file's own documented "pull the and the old colours come back".
========================================================================== */
:root {
--bto-surface-a: var(--bg-canvas, #ffffff);
--bto-surface-b: var(--bg-panel2, #f6f6f3);
--bto-surface-c: var(--bg-panel-dark, #262622);
/* C is dark in BOTH themes by design (palette.css § E5), so its ink and its
hairline are on-dark in both themes and must not flip. */
--bto-on-c: var(--fg-on-dark, #ffffff);
--bto-on-c-mute: var(--fg-on-dark-mute, #c8c8c1);
--bto-hairline-c: color-mix(in srgb, var(--bto-on-c) 16%, transparent);
}
/* N.2 · THE TWO UNRELATED DARKS — the resolution, and why half of it waits.
Flagged in pass 2 and still true: the hero stage is --bg-stage (#14130f in
both themes) and the Engine Room is --bg-panel-dark (#262622 light /
#0b0b0a dark). Two darks, no reason.
The Engine Room's half is done below — it is now on ONE named dark-panel
token. The hero's half is one line in palette.css §0:
--bg-stage: var(--bg-panel-dark);
I have NOT taken it, because under TODAY's values it breaks dark mode:
--bg-stage #14130f against the dark canvas #141412 is a ~1.0:1 step, so the
Engine Room would stop reading as a panel at all — the exact failure
palette.css § E5 was written to prevent. The hero is also frozen by the
brief and its background lives in palette.css, which I do not own.
Under MP071 it resolves cleanly and the one-liner becomes correct:
LIGHT --bg-panel-dark: #13181B (Neverything — against #F0EEEB canvas)
DARK --bg-panel-dark: #003A6C (Ateneo Blue — a real slab against the
#13181B canvas, which #13181B is not)
One C per theme, in both places. That is the whole fix; it belongs in the
palette's five lines, not here. */
/* ==========================================================================
P5 · ENGINE ROOM
WHAT WAS ACTUALLY WRONG (measured at 1512x900, --bto-gutter 40)
1. THREE LEFT EDGES IN ONE PANEL, and one of them moves when you resize the
window VERTICALLY.
· the section box starts at 40px
· the head sits in Mokko's `.container` — max-width 1350px, centred,
+15px padding (style.css:517) — so it starts at
40 + (1432-1350)/2 + 15 = 96px
· `.er3-grid` is NOT in that container. It carries its own
`margin: 0 auto` and `max-width: min(1690px, calc((100vh-350px)*2.31))`
(sections.css:17), so at a 900px-tall window it is 1270px wide and
starts at 40 + (1432-1270)/2 = ~121px — and at a 1080px-tall window
it is full width and starts at 40px.
A section whose left edge is a function of window HEIGHT cannot align
with anything. This is the single biggest reason the panel reads foreign.
2. THE HEAD IS CENTRED. `.er-sec .er-center { text-align: center }`
(sections.css:106). Every other panel on the page is left-aligned.
3. THE DISPLAY IS OFF-TIER. clamp(32px, 4.4vw, 64px) -> 64px, against
THE WORK's clamp(40px, 4.6vw, 68px) -> 68px. Two sizes for two peer
section heads.
4. THE SECTION STEP IS 96px, not 64. It was on --bto-panel (pass 1's
"full-bleed colour panel gets a deeper inset"), so every neighbour pair on
the page sits 128px apart except this one's, which sit 160px apart.
5. THE SIX TILE TAGS ARE MONOSPACE. Pass 2 de-monospaced THE WORK's tags and
panel 2's card eyebrows and missed these — so the same label role renders
in two different faces on one page. DESIGN.md -> Typography › Font Family:
"no serif, no monospace anywhere."
6. AN AMBIENT RADIAL BLOOM, centred, under a composition that is about to be
left-aligned. DESIGN.md -> Overview: "no decorative gradients, no
atmospheric backgrounds". It is the panel declaring its own surface, which
is precisely what the brief says to stop.
7. A DROP SHADOW ON TILE HOVER (0 12px 32px). Pass 1 removed panel 2's card
shadows for this exact rule and did not reach here.
8. `color: rgba(244, 241, 234, .92)` — a hardcoded off-white (line 341 of
this file) that the MP071 swap would strand.
========================================================================== */
/* P5.1 · surface C, ink on C, and the page's section step.
Supersedes this file's own line 341 (hardcoded ink) and line 669-671
(--bto-panel). The ID beats palette.css:260's `.er-sec { background }`. */
#engine.er-sec {
background: var(--bto-surface-c);
color: var(--bto-on-c);
padding: var(--bto-section) var(--bto-gutter);
}
/* P5.2 · the ambient bloom is not restyled — it is never generated.
palette.css:496 paints this pseudo-element's `background` and loads after
this file, so its fill cannot be overridden from here. `content` can:
sections.css:110 declares `content: ""` and this rule beats it on
specificity, so the box never exists and palette's rule has nothing to
paint on. Same technique as § L1 for panel 2's fade plate. */
#engine.er-sec::before { content: none; }
/* P5.3 · ONE LEFT EDGE, part 1 — the head leaves Mokko's centred container.
The section's own --bto-gutter becomes the only horizontal inset, which is
exactly what `#work.bto-work > .row` was given in § G1. */
#engine.er-sec > .container {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* P5.4 · the head stops being centred */
#engine.er-sec .er-center { text-align: left; }
/* P5.5 · ONE LEFT EDGE, part 2 — the bento grid stops centring itself on a
viewport-HEIGHT-derived max-width.
This is the `vh` fault at its deepest: § E removed vh from vertical PADDING,
but this is vh driving a WIDTH, and therefore the panel's left edge.
Full content width also puts the grid on the same footing as every other
full-width element on the page (THE WORK's rails, panel 2's rail). Its
`aspect-ratio: 2.31/1` then makes it ~620px tall at 1512 instead of ~550px —
the tiles get bigger, which is the right use of the panel.
gap 14 -> 16 ({spacing.lg}); 14 is not on the 8px ladder. */
#engine.er-sec .er3-grid {
max-width: none;
margin: 0;
gap: 16px;
}
@media (max-width: 860px) {
/* sections.css:71 drops to 10px here — also off-ladder. {spacing.md}. */
#engine.er-sec .er3-grid { gap: 12px; }
}
/* P5.6 · the section head joins the page's display tier.
Identical expression to `#work`'s (§ M2) so the two scale together at every
width rather than merely agreeing at one. uppercase and 600 are restated
rather than inherited so all three section heads read as one spec here.
DESIGN.md {typography.display-xl} is 70px; 68 sits inside it. */
#engine.er-sec .er-head {
font-size: clamp(40px, 4.6vw, 68px);
font-weight: 600;
line-height: .95;
letter-spacing: -.02em;
text-transform: uppercase;
margin: 0;
}
/* P5.7 · the six tile tags stop being monospace and take the page's label spec
— the same one `#work .bto-work-cap .tag` took in § M4. Padding 6px 11px ->
6px 12px = DESIGN.md {component.pin-overlay-pill}. Colour and fill stay
palette.css's (a neutral scrim over photography, correct in both themes). */
#engine.er-sec .er3-tag {
font-family: inherit;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: .14em;
padding: 6px 12px;
}
/* P5.8 · no drop shadow on a tile, and the borders go on the C hairline token.
DESIGN.md -> Elevation: "Don't introduce drop shadows on cards. The only
shadow in the system is the 16px ambient under {component.modal-card}."
The hover translateY stays — that is motion, not elevation. */
#engine.er-sec .er3-tile { border-color: var(--bto-hairline-c); }
#engine.er-sec .er3-tile:hover {
box-shadow: none;
border-color: color-mix(in srgb, var(--bto-on-c) 45%, transparent);
}
/* ==========================================================================
P6 · FAQ
THE ROOT CAUSE, and it is a single sentence: the FAQ's header uses the
EXACT same Mokko markup as THE WORK —
06 — questions
Straight answers.
— and every fix passes 1-2 made to that pattern was scoped to `#work`. So
the FAQ is still running Mokko's raw defaults for all of it:
1. THE DISPLAY IS 120px / weight 500 (style.css:13070), forced to TWO
STACKED LINES by the hard ` `, against THE WORK's 68px / 600 on one
line. Nearly double the page's section-head tier. This is the loudest
thing in the panel by a wide margin.
2. THE EYEBROW IS 20px (style.css:13104) — § F's "a heading pretending to be
a label", never reached here. The page's eyebrow is 12px/700/.14em.
3. MIXED ALIGNMENT INSIDE ONE BLOCK. `.ms-ah-wrapper` is `text-align: center`
(style.css:13067) but `.content__title` carries its own `text-align:
start` — so the eyebrow is CENTRED above a left-aligned headline. The
identical bug pass 1 diagnosed in THE WORK.
4. TWO LIVE `vh` VALUES. `.ms-ah-wrapper { margin: 8vh 0 }` and this file's
own line 114 `.ms-ah-wrapper.custom-style2 { margin-bottom: 6vh }` — so
the head-to-list gap is 6vh + --bto-group ≈ 102px at 900 tall and changes
shape as the window resizes. § E killed vh everywhere except here.
5. THE WRONG LEFT EDGE — the same centred `.container` as the Engine Room,
so head AND list start at 96px against THE WORK's 40px.
6. THE WRONG SURFACE. palette.css:678 puts it on --bg-canvas-soft (#fbfbf9)
— a FOURTH surface, 1-2% off the page canvas. That 1-2% step is the
textbook version of "reads as a rendering inconsistency rather than a
decision" that the pass-2 surface note is about. The brief is explicit:
the FAQ is an A.
7. `.fq-n` IS MONOSPACE (sections.css:88), same DESIGN.md violation as P5.7.
8. OFF-LADDER SPACING: row padding 20px, gap 18px, answer padding
0 20px 22px 44px. None of 20 / 18 / 22 / 44 is on the 8px ladder.
DEAD CODE NOTE: `.fq-head` and `.fq-head em.s` are styled in sections.css:81,
this file's line 907 and palette.css:679-680 — and NEITHER class is in the
markup any more. All of it has been inert since the head was converted to
Mokko's wrapper. Left in place per this file's convention; flagged so nobody
tunes a rule that cannot apply.
The accordion's mechanics are untouched: `.fq-a { display: grid;
grid-template-rows: 0fr }` -> `.fq-item.open .fq-a { 1fr }`, the nested
`.fq-a > div { overflow: hidden }`, and `.fq-pl`'s 45deg rotate are all left
exactly as sections.js §7b expects. Type, colour and spacing only.
========================================================================== */
/* P6.1 · surface A + the page's section step. The ID beats palette.css:678. */
#faq.fq-sec {
background: var(--bto-surface-a);
padding: var(--bto-section) var(--bto-gutter);
}
/* P6.2 · one left edge — same move as P5.3 */
#faq.fq-sec > .container {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* P6.3 · the header block gets what `#work`'s got in § G2 / § "THE WORK,
precise targets": no vh margins, one alignment. */
#faq .ms-ah-wrapper,
#faq .ms-ah-wrapper.custom-style2 {
margin: 0;
text-align: left;
}
#faq .ms-ah-wrapper .heading-title,
#faq .ms-ah-wrapper .content__title { text-align: left; }
/* P6.4 · the eyebrow joins the page's ONE eyebrow spec (§ F).
Colour carried here rather than in palette.css because palette.css loads
last and paints a bare `.heading-title { color: var(--fg-eyebrow) }`
(line 640-642) that only specificity can beat. --fg-mute is the same token
`#work`'s eyebrow already uses, so this adds no new colour. */
#faq .ms-ah-wrapper .heading-title {
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
margin: 0 0 var(--bto-item);
color: var(--fg-mute, #62625b);
}
/* P6.5 · the display head, on the page's tier and on one line.
Same expression as `#work` (§ M2) and the Engine Room (P5.6). The ` `
suppression is the same move as § M1 and changes line structure only — the
words are identical. "STRAIGHT ANSWERS." is ~17 characters, ~580px at 68px,
inside a 1432px content width with room to spare. */
#faq .ms-ah-wrapper .content__title {
font-size: clamp(40px, 4.6vw, 68px);
font-weight: 600;
line-height: .95;
letter-spacing: -.02em;
text-transform: uppercase;
margin: 0;
}
#faq .ms-ah-wrapper .content__title br { display: none; }
/* P6.6 · head -> list takes the same --bto-group step as every other grouped
pair on the page. With P6.3's vh margins gone this is now the ONLY gap. */
#faq .fq-list { margin-top: var(--bto-group); }
/* P6.7 · the question row.
· clamp(16px, 1.6vw, 19px)/700 -> 18px/600 = DESIGN.md {typography.heading-md},
the honest tier between the 68px section head and 16px body. 19px/700 was a
hand-set value on no scale.
· letter-spacing -.01em -> 0. The token carries 0 tracking; at 18px the old
value was 0.18px, i.e. invisible but off-spec.
· font-family: inherit is belt-and-braces — a