` as a SIBLING. So
panel-fixes.css:24 `#everything .bto-ticker { background: transparent }`
never matches, and the ticker was taking surface A. That is exactly the
"panel 2 appears to end early → phantom fourth surface" the note warns
about. Painting it B directly puts it back on the panel it closes.
2. THE SPAN WAS STILL MOKKO'S #949494. Measured 2.62:1 in light — it fails
the 3:1 large-text floor, which is the failure § E3 said it had fixed.
It had not: Mokko's `.project-area .ms-text-ticker .ms-tt__text span`
(style.css:13391) is a 3-class selector and § E3's `.bto-ticker
.ms-tt__text span` is 2 — Mokko wins on specificity regardless of order.
Matched at 3 classes here, so the token actually applies.
-------------------------------------------------------------------------- */
.bto-ticker { background: var(--bg-panel2); }
.bto-ticker .ms-text-ticker .ms-tt__text { color: var(--fg-ink); }
.bto-ticker .ms-text-ticker .ms-tt__text span { color: var(--fg-mute); }
.bto-ticker .ms-text-ticker .ms-tt__text,
.bto-ticker .ms-text-ticker .ms-tt__text span { -webkit-text-stroke-color: var(--fg-ink); }
/* --------------------------------------------------------------------------
G3 · TWO LEADS ON MOKKO'S OWN MID-CONTRAST TOKEN.
mokko-bridge.css:252 and :394 set `color: var(--color-contrast-medium)`.
That is Mokko's #757575, which is 3.98:1 on the MP071 canvas and 3.76:1 in
the footer — both under the 4.5:1 body floor. On our own lead step they are
7.59:1 and 7.16:1, and the ramp flips with the theme.
-------------------------------------------------------------------------- */
.bto-work-lead,
.bto-footer-lead { color: var(--fg-lead); }
/* --------------------------------------------------------------------------
G4 · THE HEADER BRAND TAGLINE — as far as colour can take it.
`.bto-brand-tag` is 9px/600 and sections.css:199 puts `opacity: .55` on it.
Measured 2.39:1 light / 3.07:1 dark on --fg-mute. Moving it to full ink
takes it to 4.49:1 light / 5.42:1 dark, which is the CEILING for this mark:
at 55% opacity even pure black on the canvas can only reach 4.49:1, so the
last 0.01 is an opacity problem, not a colour one. Logged in § F for the
owner of sections.css — the one-line fix there is `opacity: 1`.
-------------------------------------------------------------------------- */
.bto-brand-tag { color: var(--fg-ink); }
/* --------------------------------------------------------------------------
G5 · THE HERO'S SCROLL CUE — hero.css:156 `rgba(244, 241, 234, .5)`, the
last resolved on-dark cream the sweep found. It rides over the reel, so it
takes the on-dark ramp like every other mark on surface C.
-------------------------------------------------------------------------- */
.hb-cue { color: var(--fg-on-dark-mute); }
/* --------------------------------------------------------------------------
G6 · THE FOOTER'S BIG CONTACT LINK — a Mokko literal that does not flip.
style.css:21053 `.ms-footer .container .footer-title .ms-sl { color: #747474 }`
beats Mokko's own `a.ms-sl { color: var(--color-contrast-higher) }` on
specificity, so the site's single most important link renders the same
mid-grey in BOTH themes: 3.81:1 light, 3.48:1 dark. It clears the 3:1
large-text floor at 28px and nothing else, and it never inverts.
On the ink token it is 15.44:1 in both. Kept monochrome rather than moved
to the accent — § B's accent-scarcity rule, and DESIGN.md's "build hierarchy
from font weight and size, not from color tinting".
-------------------------------------------------------------------------- */
.ms-footer .container .footer-title .ms-sl { color: var(--fg-ink); }
.ms-footer .container .footer-title .ms-sl:hover { color: var(--fg-accent); }
/* --------------------------------------------------------------------------
G7 · THE FOOTER WAS A PHANTOM FOURTH SURFACE.
Mokko's `.footer-inner` carries `background-color: rgba(149,149,149,.07)` —
a 7% grey veil that lands the footer on #EAE8E5 against a #F0EEEB canvas.
Measured: a ~1.5% step. That is the textbook version of the mud this whole
pass is about, and `_notes/15_design-pass.md` § 3.2 is explicit — "FAQ (A) →
footer (A): no change. Separate them with a hairline, not a fourth value."
The footer joins surface A.
-------------------------------------------------------------------------- */
.ms-footer .footer-inner { background-color: transparent; }
/* --------------------------------------------------------------------------
G8 · SERVICES — five more light-only literals.
`bto-css/services-mokko.css` (linked by services.html only) hardcodes
`#747474` on the section sub-lead, the index row copy, the row's "go" label
and the footer note, plus `#7474747a` on the row number. None of them flip:
measured 4.04:1 in light AND 3.83:1 in dark on the same hex — under the body
floor in both. Same fix as G3: onto the ramp, which flips.
-------------------------------------------------------------------------- */
.svc-sub,
.svc-index__name,
.svc-index__go { color: var(--fg-lead); }
.svc-index__n { color: var(--fg-mute); }
.svc-footer-note { color: var(--fg-faint); }
/* --------------------------------------------------------------------------
G9 · ACCENT MARKS THAT LIVE ON A DARK BOX — the second rendering, applied.
§ "accents" moved every accent TEXT role from --pin-primary (the fill) to
--fg-accent (the text rendering). Correct for the marks on the canvas — and
WRONG for the ones sitting on a dark panel, because --fg-accent's LIGHT
value is the deepened #854D00, which is ~1.9:1 on near-black. Those marks
need the base amber, which is what --fg-accent already is in dark mode.
So the rule is: --fg-accent on a light surface, --accent-base on a dark one.
Exposed as --fg-accent-on-dark so it reads as a role, not a hex.
Scope is deliberately the services dial / story-film stage and the generic
`.dark` box from live-effects.css. The Engine Room and the hero are NOT in
this list: § B stripped their accent marks back to the on-dark neutral ramp
on purpose (accent scarcity), and this block loads later, so naming them
here would silently undo that.
`live-effects.css:114` also still paints Mokko-era mint #7fe3b3 on
`.dark .step .n` — the last green on the site, missed because it keys on the
generic `.dark` box rather than an `.svf-*` / `.svc-*` class.
-------------------------------------------------------------------------- */
.dark em.s, .svf-stage em.s,
.dark .kick, .svf-stage .kick,
.dark .step .n, .svf-steps .step .n,
.dark .chipset span b, .svf-stage .chipset span b,
.dialout .tier { color: var(--fg-accent-on-dark); }
.dark .step,
.svf-steps .step { border-top-color: color-mix(in srgb, var(--accent-base) 50%, transparent); }
/* --------------------------------------------------------------------------
G10 · THE FOOTER ARROW — a colour baked into the MARKUP.
index.html/services.html/work.html carry `` inline
on the footer link's arrow, so it stays mid-grey in both themes while the
label next to it inverts. A presentation attribute loses to any CSS rule,
so this reaches it without touching the HTML — and `currentColor` ties the
arrow to its own label permanently.
-------------------------------------------------------------------------- */
.ms-footer .footer-title .ms-sl svg path { stroke: currentColor; }
/* --------------------------------------------------------------------------
G11 · THE SERVICES STORY-FILM STAGE — the last pre-MP071 hexes on the site.
`live-effects.css` was authored against the old token set and still carries
the OLD CREAM #f4f1ea at six alphas (lines 129, 134, 173, 195, 201, 203, 207)
plus one more light-only `#747474` on `.svc-index__sub`. The creams are not
contrast failures — the stage is dark in both themes, so light-on-dark is
right — but they are the old palette, they cannot follow a swap, and they
are 4 points off Magical Moonlight, which is exactly the kind of near-miss
that reads as mud when it sits next to the real thing. All on the on-dark
ramp now, at their original alphas, so nothing changes visually.
-------------------------------------------------------------------------- */
.svc-index__sub { color: var(--fg-lead); }
.svf-stage .lead,
.dark .lead { color: color-mix(in srgb, var(--fg-on-dark) 78%, transparent); }
.svf-steps .step p { color: color-mix(in srgb, var(--fg-on-dark) 80%, transparent); }
.svf-stage .chipset span,
.chipset span { color: color-mix(in srgb, var(--fg-on-dark) 75%, transparent);
border-color: color-mix(in srgb, var(--fg-on-dark) 22%, transparent); }
.svf-cue { color: color-mix(in srgb, var(--fg-on-dark) 45%, transparent); }
.p1s span { background: color-mix(in srgb, var(--fg-on-dark) 4%, transparent);
border-color: color-mix(in srgb, var(--fg-on-dark) 14%, transparent); }
.dialbox,
.svc-dial .dialbox { background: color-mix(in srgb, var(--fg-on-dark) 4%, transparent);
border-color: color-mix(in srgb, var(--fg-on-dark) 18%, transparent); }
.dialrange, input[type=range].dialrange, #dialRange {
background: linear-gradient(90deg,
var(--fill-accent) var(--p, 50%),
color-mix(in srgb, var(--fg-on-dark) 18%, transparent) var(--p, 50%));
}
/* --------------------------------------------------------------------------
G12 · THE TICKER'S OWL-EYE RING — the last #e60023 on the site, and it was
not in any stylesheet.
`site/img/ticker-circle.svg` shipped `stroke="#e60023"` baked into the ASSET.
It is loaded as `![]()
`, so CSS cannot reach inside it and the computed-
style sweep cannot see it either — it only showed up in the screenshots.
The one attribute is now Neverything #13181B, and this rule inverts it for
the dark theme: invert(1) of #13181B is #ECE7E4, i.e. Magical Moonlight to
within 4 points. The mark is transparent-background and single-stroke, so
invert touches only the drawn pixels.
NOTE — this changes a call § B made. § B listed the owl-eye as one of the
four places the accent was allowed to survive. That held while the accent
was a red: red on the old panel grey was ~3.4:1. Sea Buckthorn on Polar
Drift is 1.09:1 — the ring would simply vanish on the light panel. So the
glyph goes monochrome and joins the ticker's own two-tone idiom (ink lead
word / grey second word) instead. Accent count on the page drops to three.
Ratio: 12.01:1 on panel 2 light, 12.9:1 on panel 2 dark.
-------------------------------------------------------------------------- */
[data-theme=dark] .bto-ticker .ms-tt__text.img img,
[data-theme=dark] .bto-ticker .ms-text-ticker .ms-tt__text.img img { filter: invert(1); }
/* ============================================================================
============================================================================
H · THE SECOND PANEL — 2026-07-28
Ash: *"also change the background color of the hero banner 'we dont maker
post' right side box and the 'engine room backgreound. i likew the background
color used in panel two"*
Both targets were on --bg-stage / --bg-panel-dark, which § 0.1 had just
aliased together. They are now aliased one step further, onto --bg-panel2.
One line each, both themes — but the surface was NEAR-BLACK and panel 2's is
a LIGHT grey-blue, so every mark on those two panels had to be re-derived.
That is what this section is: a surface change and an ink pass.
WHAT MOVED
hero stage .hb-stage #13181B → #CCD5DA (light) · #003A6C → #0B263B (dark)
Engine Room .er-sec same pair
WHAT DELIBERATELY DID NOT
· the video well (.hb-viewer #000) and everything painted ON footage —
the scroll cue, the header lockup, the .er3-tag pills on the tile photos.
Their ground is still the image, so they keep --fg-on-dark.
· the services dial / live-effects `.dark` boxes — now on --bg-inset-dark
(§ H0). Ash asked for two surfaces, not three.
============================================================================
========================================================================== */
/* --------------------------------------------------------------------------
H0 · WHY THERE IS NOW A SEPARATE --bg-inset-dark
`--dark` / `--dark-2` / `--pin-surface-dark` / `--pin-charcoal` all pointed at
--bg-panel-dark. Aliasing that to panel 2 would have silently repainted the
services dial and every live-effects `.dark` box as well — surfaces Ash did
not mention, which sit on their own dark photography, and whose ink
(--fg-accent-on-dark, the on-dark ramp) is calibrated for a dark ground.
They now read --bg-inset-dark, which holds exactly what --bg-panel-dark used
to: #13181B light, #003A6C dark. The services page is byte-identical.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
H1 · THE ENGINE ROOM
Six photo tiles, a head and an eyebrow — the terminal tile (.er3-term /
.er3-tbar / .er3-lanes / .er3-st / .er3-human) is no longer in the markup, so
the rules for it in § E5 are inert. They are left in place per this file's
convention and re-pointed anyway, so re-adding the tile cannot resurrect a
light-on-light bug.
`#engine.er-sec` (mokko-bridge § P5.1) paints the panel's ink from
`--bto-on-c`, and that ID beats anything class-based here — which is why the
fix is at the token (§ G1) rather than a specificity fight. The rules below
cover the marks that carry their own colour.
-------------------------------------------------------------------------- */
.er-sec { color: var(--fg-on-panel); }
.er-sec .er-head { color: var(--fg-on-panel); }
.er-sec .er-center .kick { color: var(--fg-on-panel-mute); }
.er-sec .er-head em.s { color: var(--fg-on-panel-mute); }
/* the tile borders were an on-dark white wash — invisible on a pale panel */
.er-sec .er3-tile { border-color: color-mix(in srgb, var(--fg-on-panel) 22%, transparent); }
.er-sec .er3-tile:hover { border-color: color-mix(in srgb, var(--fg-on-panel) 45%, transparent);
box-shadow: none; }
/* inert (mokko-bridge § P5.2 sets `content: none`) but re-derived so a white
bloom can never appear on a light ground if that rule is ever removed */
.er-sec::before {
background: radial-gradient(50% 50% at 50% 50%,
color-mix(in srgb, var(--fg-on-panel) 6%, transparent) 0%, transparent 70%);
}
/* the terminal, if it ever returns: its fill derives from the panel ink, so the
box and the text inside it invert together instead of the box staying black */
.er-sec .er3-term {
background-color: color-mix(in srgb, var(--fg-on-panel) 6%, transparent);
background-image:
linear-gradient(color-mix(in srgb, var(--fg-on-panel) 5%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--fg-on-panel) 5%, transparent) 1px, transparent 1px);
box-shadow: none;
border-color: color-mix(in srgb, var(--fg-on-panel) 18%, transparent);
}
.er-sec .er3-tbar {
color: var(--fg-on-panel-mute);
border-bottom-color: color-mix(in srgb, var(--fg-on-panel) 16%, transparent);
background: color-mix(in srgb, var(--fg-on-panel) 4%, transparent);
}
.er-sec .er3-dots i { background: color-mix(in srgb, var(--fg-on-panel) 32%, transparent); }
.er-sec .er3-lanes a { color: var(--fg-on-panel-mute); }
.er-sec .er3-lanes a::before { color: color-mix(in srgb, var(--fg-on-panel) 45%, transparent); }
.er-sec .er3-st { color: var(--fg-on-panel-mute); }
.er-sec .er3-human { color: var(--fg-on-panel-mute); }
/* NOT re-derived, on purpose: `.er3-tag`. The tile tags sit on the tile's
PHOTOGRAPH behind their own `rgba(0,0,0,.62)` scrim — measured ground #07090A
light / #001629 dark. Their ink stays --fg-on-dark: 17.2:1 either way. */
/* --------------------------------------------------------------------------
H2 · THE HERO STAGE — and the one place the ink must NOT follow it
hero.js wipes `.hb-side` open to 360–520px on desktop, where it is a real
column BESIDE the reel and its ground is `.hb-stage`. That is Ash's "right
side box", and its ink follows the new light surface.
At ≤1024 hero.css:164 re-positions the same element `absolute; bottom: 0`
OVER the viewer and gives it its own `linear-gradient(…, rgba(6,8,6,.85))`
scrim — the headline is over VIDEO there, so it must stay light. The split
below is that existing breakpoint, not a new one: same geometry, two grounds,
two inks.
REGRESSION FIXED HERE: § E6's `.hb-side { background-image: … }` was written
unscoped. `.hb-side` is a single class in both files and palette.css loads
last, so it was overriding hero.css's MOBILE SCRIM at every width — the ≤1024
headline had been running on the `.hb-viewer::after` bottom gradient alone
since that pass. The scrim is restored below.
-------------------------------------------------------------------------- */
.hb-stage {
color: var(--fg-on-panel) !important;
--on-dark: var(--fg-on-panel);
--on-dark-mute: var(--fg-on-panel-mute);
--on-dark-hair: color-mix(in srgb, var(--fg-on-panel) 14%, transparent);
}
.hb-top { border-bottom-color: color-mix(in srgb, var(--fg-on-panel) 12%, transparent); }
.hb-tc { color: var(--fg-on-panel-mute); }
/* the window-chrome dot trio. hero.css:120-122 hardcodes #f26d5f / #f2bf5f /
#59c76f — three saturated colours DESIGN.md does not allow, flagged in the
MP071 note and left alone then because they sat on a near-black ground where
they at least read. On #CCD5DA they measure 2.1 / 1.7 / 2.0:1 — mush. The
ground change is the trigger to resolve it: one monochrome trio, descending,
off the panel ink. It still reads as window chrome and it now works on both
grounds. FLAGGED FOR ASH — the traffic-light metaphor is the cost. */
.hb-dots i:nth-child(1) { background: color-mix(in srgb, var(--fg-on-panel) 34%, transparent); }
.hb-dots i:nth-child(2) { background: color-mix(in srgb, var(--fg-on-panel) 24%, transparent); }
.hb-dots i:nth-child(3) { background: color-mix(in srgb, var(--fg-on-panel) 16%, transparent); }
/* ---- DESKTOP: the side box is a panel, so its copy takes the panel ink ---- */
@media (min-width: 1025px) {
.hb-side {
border-left-color: color-mix(in srgb, var(--fg-on-panel) 12%, transparent);
background-image:
radial-gradient(56% 42% at 60% 46%,
color-mix(in srgb, var(--fg-on-panel) 6%, transparent), transparent 72%),
radial-gradient(color-mix(in srgb, var(--fg-on-panel) 5%, transparent) 1px, transparent 1.5px);
}
/* hero.css:254-256 pins these white with !important, for a stage that used to
be near-black. Matched at the same weight. The text-shadow goes with them:
a black glow under dark ink on a pale panel is a halo, not legibility. */
.hb-head .kick { color: var(--fg-on-panel-mute) !important; }
.hb-head h1 { color: var(--fg-on-panel) !important; text-shadow: none !important; }
.hb-head p { color: var(--fg-on-panel-lead) !important; text-shadow: none !important; }
}
/* ---- ≤1024: the same box overlays the reel. Light ink, scrim restored ----- */
@media (max-width: 1024px) {
.hb-side {
border-left-color: transparent;
background-image: linear-gradient(180deg, transparent, rgba(6, 8, 6, .85) 70%);
}
.hb-head .kick { color: var(--fg-on-dark-mute) !important; }
.hb-head h1 { color: var(--fg-on-dark) !important; }
.hb-head p { color: var(--fg-on-dark-mute) !important; }
}