/* =============================================================================
Motopark — base.css: the SHELL stylesheet, on every page.
1. the @layer order (must stay the first statement) 2. tokens.css, verbatim
3. fallback font faces 4. reset 5. base 6. layout primitives
7. shell primitives (btn, link, chip, dot, avail, icon, eyebrow) 8. utilities
Contract: docs/rebuild/theme/COMPONENTS.md §3–§7. Tokens only; flat selectors.
============================================================================= */
@layer reset, tokens, base, vendor, layout, components, adapters, schemes, utilities, overrides;
/* ==== tokens.css — verbatim copy of docs/rebuild/theme/tokens.css (bin/check diffs it) ==== */
/* =============================================================================
Motopark — design tokens: the short names every component uses.
VALUES LIVE ONCE, IN theme.json (DBNH Theme Kernel 2.0 rule: theme.json is the
sole token source). WordPress prints them as --wp--preset--* / --wp--custom--*
custom properties; this file only (a) aliases them to short --mp- names,
(b) derives composite tokens from them (opacities, scrims, scheme remaps) and
(c) zeroes motion under reduced motion. It contains no colour, size or font
literal. To change a value, edit theme.json. To add a token, add the value to
theme.json AND its alias here AND its row in COMPONENTS.md §3.
In the theme this file is the first section of assets/css/base.css, right
after the @layer order statement. Spec copy: docs/rebuild/theme/tokens.css
(keep them identical). Reasoning: docs/rebuild/research/theme-architecture.md §2.
This is the ONLY CSS that may reference --wp--* properties. Components use the
--mp-color-*, --mp-fs-*, --mp-space-* … semantic names, never --wp--* and
never the primitives (--mp-white, --mp-green …). One seam: if global styles
ever had to go, these aliases become literal values and nothing else changes.
Breakpoints. Custom properties cannot be used in @media and the theme has no
build step, so media queries use these five literal values and nothing else
(the lint enforces it). Mobile first: min-width only.
sm 30rem 480 large phones, landscape
md 48rem 768 tablet: dock hides, header actions show
lg 64rem 1024 laptop: multi-column sections
xl 70rem 1120 the seven primary nav words fit
2xl 90rem 1440 layout reaches its maximum width
Write them as range queries: @media (width >= 48rem). Phone-only rules:
@media (width < 48rem). Prefer @container inside a component.
============================================================================= */
@layer tokens {
:root {
color-scheme: light;
/* --- 1. Colour primitives (aliases of the theme.json palette + custom.color).
Only this file and schemes read them. Contrast on white, WCAG 2.x:
ink 18.9 · ink-2 7.0 · green-text 5.4 · stone 3.6 (borders only) ·
green 2.5 (never text on light; ink on green 7.4) · red 6.6 · amber 6.3 */
--mp-white: var(--wp--preset--color--white);
--mp-tint: var(--wp--preset--color--tint);
--mp-grey: var(--wp--preset--color--grey);
--mp-hairline: var(--wp--preset--color--hairline);
--mp-stone: var(--wp--preset--color--stone);
--mp-ink-2: var(--wp--preset--color--ink-2);
--mp-ink: var(--wp--preset--color--ink);
--mp-ink-raised: var(--wp--custom--color--ink-raised);
--mp-green: var(--wp--preset--color--green);
--mp-green-hover: var(--wp--custom--color--green-hover);
--mp-green-text: var(--wp--preset--color--green-text);
--mp-green-deep: var(--wp--custom--color--green-deep);
--mp-green-soft: var(--wp--preset--color--green-soft);
--mp-red: var(--wp--custom--color--red);
--mp-red-soft: var(--wp--custom--color--red-soft);
--mp-amber: var(--wp--custom--color--amber);
--mp-amber-soft: var(--wp--custom--color--amber-soft);
/* --- 2. Colour, semantic (what components use; schemes remap these) */
--mp-color-surface: var(--mp-white); /* page, cards */
--mp-color-surface-2: var(--mp-tint); /* panels, segmented track, wells */
--mp-color-text: var(--mp-ink);
--mp-color-text-2: var(--mp-ink-2); /* ledes, meta, captions */
--mp-color-line: var(--mp-hairline); /* hairlines, card borders */
--mp-color-line-strong: var(--mp-stone); /* input borders (WCAG 1.4.11, 3:1) */
--mp-color-line-hover: var(--mp-ink);
--mp-color-accent: var(--mp-green); /* dots, underlines, fills — no text */
--mp-color-accent-text: var(--mp-green-text); /* green words, "from $" */
--mp-color-accent-soft: var(--mp-green-soft);
--mp-color-action: var(--mp-green); /* the one primary button fill */
--mp-color-action-hover: var(--mp-green-hover);
--mp-color-on-action: var(--mp-ink); /* text on green is always ink */
--mp-color-inverse: var(--mp-ink); /* ink buttons and chips */
--mp-color-inverse-hover: var(--mp-ink-raised);
--mp-color-on-inverse: var(--mp-white);
--mp-color-focus: var(--mp-ink);
--mp-color-disabled: var(--mp-stone);
--mp-color-success: var(--mp-green-text);
--mp-color-success-soft: var(--mp-green-soft);
--mp-color-pick: var(--mp-green-text); /* a picked card's fill (wizard weeks): deep green, white words hold AA */
--mp-color-on-pick: var(--mp-white);
--mp-color-warn: var(--mp-amber);
--mp-color-warn-soft: var(--mp-amber-soft);
--mp-color-warn-on-dark: var(--wp--custom--color--amber-bright);
--mp-color-danger: var(--mp-red);
--mp-color-danger-soft: var(--mp-red-soft);
/* Derived (opacity is the only number here) */
--mp-color-glass: color-mix(in srgb, var(--mp-white) 88%, transparent); /* header, dock */
--mp-color-backdrop: color-mix(in srgb, var(--mp-ink) 48%, transparent); /* behind sheets */
/* Standard hero (Nick 2026-11-05, site-wide): one soft fade over the whole photo or film, barely
there at the top and dark at the foot, no stops in between: the lede reads over any frame.
(Before: 25 % at the top, clear at 35 %, 70 % at the foot.) */
--mp-scrim-hero: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 8%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 78%, transparent) 100%);
/* Phone (Nick 2026-11-07: "Make the bottom of the overlay darker on mobile"): the same two-stop fade, darker
at the foot, where the lede and actions sit over most of a phone hero's height. */
--mp-scrim-hero-sm: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 8%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 92%, transparent) 100%);
--mp-scrim-bottom: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--mp-ink) 75%, transparent) 100%);
--mp-scrim-side: linear-gradient(90deg, color-mix(in srgb, var(--mp-ink) 75%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 20%, transparent) 60%, transparent 100%);
--mp-scrim-even: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 45%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 80%, transparent) 100%); /* words over the whole photo */
--mp-scrim-foot: linear-gradient(0deg, color-mix(in srgb, var(--mp-ink) 60%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 60%, transparent) 32%, transparent 58%); /* a photo band's foot: stats' small lines AA over any photo, the top stays bright */
--mp-scrim-plate: linear-gradient(0deg, color-mix(in srgb, var(--mp-ink) 86%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 18%, transparent) 78%, color-mix(in srgb, var(--mp-ink) 10%, transparent) 100%); /* a program plate's foot: the logo sits in the dark, the photo stays alive above it */
/* Camp film: a lighter veil across the full width, gently deepening toward the foot.
No text-width stop or rapid side fade (Nick, 2026-11-01: soften the right-hand band).
Nick's follow-up: a visibly bright video top fading down into a deeper foot.
The video uses one continuous fade, with no intermediate stops (Nick, Nov 1).
Photo-only camp heroes retain their previous veil.
The phone has a clear top edge, then the existing protection behind the words. */
--mp-scrim-hero-camp: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 54%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 74%, transparent) 35%, color-mix(in srgb, var(--mp-ink) 80%, transparent) 100%);
--mp-scrim-hero-film: linear-gradient(180deg, color-mix(in srgb, var(--mp-ink) 12%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 84%, transparent) 100%);
--mp-scrim-hero-film-sm: linear-gradient(0deg, color-mix(in srgb, var(--mp-ink) 88%, transparent) 0%, color-mix(in srgb, var(--mp-ink) 78%, transparent) 50%, color-mix(in srgb, var(--mp-ink) 66%, transparent) 64%, transparent 92%);
/* Textures (07 §1, decoration only, under 6 % contrast): a motocross track profile, faces curving
into the lip and rolled landings (tabletop, double, whoops, step-up; the second row shifted
half a tile; a 1200×200 tile, the two rows 100 px apart), ink at 8.5 % on tint, white
at 11 % on ink. Inline SVG data URIs, the stroke baked in, never an image request. */
--mp-texture-track: url("data:image/svg+xml,");
--mp-texture-track-ink: url("data:image/svg+xml,");
--mp-texture-size: 1200px 200px;
--mp-texture-shift: 600px 100px; /* a textured band after another: half a tile on */
--mp-green-text-textured: color-mix(in srgb, var(--mp-green-text) 85%, var(--mp-ink)); /* green words on the track tint: AA where they cross a line */
--mp-glass-filter: var(--wp--custom--glass); /* never animate it */
/* --- 3. Type. Three files only: Barlow Condensed 800, Barlow 400, Barlow 600.
Never ask for another weight (it would be faux-bolded). */
--mp-font-display: var(--wp--preset--font-family--display);
--mp-font-ui: var(--wp--preset--font-family--ui);
--mp-font-body: var(--wp--preset--font-family--ui);
--mp-weight-body: var(--wp--custom--font-weight--body);
--mp-weight-ui: var(--wp--custom--font-weight--ui);
--mp-weight-display: var(--wp--custom--font-weight--display);
--mp-fs-display-2xl: var(--wp--custom--font-size--display-xxl); /* 60→112 home hero H1 */
--mp-fs-display-xl: var(--wp--custom--font-size--display-xl); /* 44→72 interior H1 */
--mp-fs-display-l: var(--wp--custom--font-size--display-l); /* 40→56 feature heads */
--mp-fs-display-m: var(--wp--custom--font-size--display-m); /* 34→48 section heads */
--mp-fs-display-s: var(--wp--custom--font-size--display-s); /* 30→44 feature tiles */
--mp-fs-display-xs: var(--wp--custom--font-size--display-xs); /* 24→32 card titles */
--mp-fs-display-2xs: var(--wp--custom--font-size--display-xxs); /* 22→28 quick tiles, rows */
--mp-fs-stat: var(--wp--custom--font-size--stat); /* 44→64 numbers */
--mp-fs-lead: var(--wp--preset--font-size--lead); /* 16→18 */
--mp-fs-base: var(--wp--preset--font-size--base); /* 16; inputs never smaller */
--mp-fs-sm: var(--wp--preset--font-size--small); /* 14 */
--mp-fs-xs: var(--wp--custom--font-size--xs); /* 13 */
--mp-fs-label: var(--wp--custom--font-size--label); /* 12 */
--mp-fs-micro: var(--wp--custom--font-size--micro); /* 11, the floor */
--mp-fs-menu: var(--wp--custom--font-size--menu); /* 52→128 menu channel words (wizard §B2, §B6) */
--mp-lh-display: var(--wp--custom--line-height--display);
--mp-lh-tight: var(--wp--custom--line-height--tight);
--mp-lh-snug: var(--wp--custom--line-height--snug);
--mp-lh-body: var(--wp--custom--line-height--body);
--mp-track-display: var(--wp--custom--tracking--display);
--mp-track-ui: var(--wp--custom--tracking--ui);
--mp-track-caps: var(--wp--custom--tracking--caps);
--mp-track-label: var(--wp--custom--tracking--label);
--mp-measure: var(--wp--custom--measure); /* 37.3em = 66ch of Barlow; em, not ch: ch is the fallback's "0" until Barlow loads, so a ch measure re-wrapped on the swap */
/* --- 4. Space: 8px grid (4 and 12 only inside tight UI) */
--mp-space-3xs: var(--wp--preset--spacing--xxxs); /* 4 */
--mp-space-2xs: var(--wp--preset--spacing--xxs); /* 8 */
--mp-space-xs: var(--wp--preset--spacing--xs); /* 12 */
--mp-space-s: var(--wp--preset--spacing--s); /* 16 */
--mp-space-m: var(--wp--preset--spacing--m); /* 24 */
--mp-space-l: var(--wp--preset--spacing--l); /* 32 */
--mp-space-xl: var(--wp--preset--spacing--xl); /* 48 */
--mp-space-2xl: var(--wp--preset--spacing--xxl); /* 64 */
--mp-space-3xl: var(--wp--preset--spacing--xxxl); /* 96 */
--mp-space-section: var(--wp--custom--space--section); /* 48→72 */
--mp-space-panel: var(--wp--custom--space--panel); /* 28→48 */
--mp-space-card: var(--wp--custom--space--card); /* 16→24 */
--mp-gap: var(--wp--custom--space--gap); /* 12→16 */
--mp-gutter: var(--wp--custom--space--gutter); /* 24 */
--mp-gutter-tight: var(--wp--custom--space--gutter-tight); /* 12 */
/* --- 5. Shape and elevation */
--mp-radius-xs: var(--wp--custom--radius--xs); /* 8 */
--mp-radius-sm: var(--wp--custom--radius--sm); /* 12 */
--mp-radius-md: var(--wp--custom--radius--md); /* 16 */
--mp-radius-lg: var(--wp--custom--radius--lg); /* 20 */
--mp-radius-xl: var(--wp--custom--radius--xl); /* 24 */
--mp-radius-pill: var(--wp--custom--radius--pill);
--mp-radius-round: 50%;
--mp-border: var(--wp--custom--border);
--mp-focus-width: var(--wp--custom--focus--width);
--mp-focus-offset: var(--wp--custom--focus--offset);
--mp-shadow-raised: var(--wp--preset--shadow--raised); /* chips on photos, hovered tiles */
--mp-shadow-float: var(--wp--preset--shadow--float); /* booking card, dock, sheets */
/* --- 6. Layout */
--mp-w-max: var(--wp--style--global--wide-size); /* 1392 */
--mp-w-prose: var(--wp--style--global--content-size); /* 680 */
--mp-w-booking: var(--wp--custom--width--booking); /* 1180 */
--mp-w-form: var(--wp--custom--width--form); /* 640 */
--mp-w-sheet: var(--wp--custom--width--sheet); /* 560 */
--mp-w-modal: var(--wp--custom--width--modal); /* 880 */
--mp-w-aside: var(--wp--custom--width--aside); /* 400 program booking card */
--mp-w-logo-tile: var(--wp--custom--width--logo-tile); /* 180 a sponsor card's logo tile */
--mp-pad-bleed: max(var(--mp-gutter), (100% - var(--mp-w-max)) / 2); /* full-bleed band, centred content, no inner div */
--mp-h-util: var(--wp--custom--height--util);
--mp-h-header: var(--wp--custom--height--header);
--mp-h-dock: var(--wp--custom--height--dock);
--mp-h-hero: var(--wp--custom--height--hero);
--mp-h-band: var(--wp--custom--height--band); /* photo bands: proof, finder (desktop) */
--mp-h-chip: var(--wp--custom--height--chip); /* chips, size chips */
--mp-h-sheet: var(--wp--custom--height--sheet); /* bottom sheet, fixed height (wizard §A3) */
--mp-h-control: var(--wp--custom--height--control);
--mp-h-btn: var(--wp--custom--height--btn);
--mp-h-btn-sm: var(--wp--custom--height--btn-small);
--mp-tap: var(--wp--custom--height--tap);
--mp-h-strip: var(--wp--custom--height--strip); /* the sponsor strip band (88) */
--mp-h-logo: var(--wp--custom--height--logo); /* a logo in the strip (44) */
--mp-h-logo-s: var(--wp--custom--height--logo-small); /* the same on a phone (36) */
--mp-icon: var(--wp--custom--icon--base);
--mp-icon-s: var(--wp--custom--icon--small);
--mp-icon-l: var(--wp--custom--icon--large);
--mp-safe-b: env(safe-area-inset-bottom, 0px);
--mp-ratio-card: var(--wp--custom--ratio--card);
--mp-ratio-photo: var(--wp--custom--ratio--photo);
--mp-ratio-wide: var(--wp--custom--ratio--wide);
--mp-ratio-square: var(--wp--custom--ratio--square);
--mp-ratio-band: var(--wp--custom--ratio--band); /* wizard step 1: featured photo band */
--mp-ratio-strip: var(--wp--custom--ratio--strip); /* wizard step 1: card photo band */
/* --- 7. Motion: transform and opacity only. JS never waits for transitionend
(durations are 0 under reduced motion, so it would not fire). */
--mp-dur-press: var(--wp--custom--duration--press);
--mp-dur-fast: var(--wp--custom--duration--fast);
--mp-dur: var(--wp--custom--duration--base);
--mp-dur-slow: var(--wp--custom--duration--slow);
--mp-dur-reveal: var(--wp--custom--duration--reveal);
--mp-dur-pulse: var(--wp--custom--duration--pulse);
--mp-dur-marquee: var(--wp--custom--duration--marquee); /* the sponsor strip: per logo */
--mp-dur-marquee-min: var(--wp--custom--duration--marquee-min); /* the sponsor strip: the shortest loop */
--mp-stagger: var(--wp--custom--stagger);
--mp-ease-out: var(--wp--custom--ease--out);
--mp-ease-in-out: var(--wp--custom--ease--in-out);
--mp-ease-spring: var(--wp--custom--ease--spring);
--mp-ease-sheet: var(--wp--custom--ease--sheet); /* the sheet rise (wizard §A10) */
/* --- 8. Layers (dialogs use the browser's top layer: no z-index) */
--mp-z-raised: var(--wp--custom--z--raised);
--mp-z-sticky: var(--wp--custom--z--sticky);
--mp-z-dock: var(--wp--custom--z--dock);
--mp-z-toast: var(--wp--custom--z--toast);
--mp-z-skip: var(--wp--custom--z--skip);
}
@media (width >= 48rem) {
:root { --mp-h-header: var(--wp--custom--height--header-wide); }
}
@media (prefers-reduced-motion: reduce) {
:root {
--mp-dur-press: 0ms; --mp-dur-fast: 0ms; --mp-dur: 0ms;
--mp-dur-slow: 0ms; --mp-dur-reveal: 0ms; --mp-stagger: 0ms;
}
}
}
/* -----------------------------------------------------------------------------
Schemes — the only way to change an area's colours.
Put .mp-scheme-* on a section, band, tile or card: it paints that element and
remaps the semantic tokens so every component inside adapts (an ink button
turns white on ink; a secondary button becomes the ghost pill on a photo).
The schemes layer sits after components, so a scheme always wins its own
element's background. Nest .mp-scheme-light to go back to light.
----------------------------------------------------------------------------- */
@layer schemes {
.mp-scheme-light,
.mp-scheme-tint,
.mp-scheme-grey,
.mp-scheme-soft,
.mp-scheme-ink,
.mp-scheme-photo,
.mp-scheme-accent,
.mp-scheme-texture-tint,
.mp-scheme-texture-ink {
background-color: var(--mp-color-surface);
color: var(--mp-color-text);
}
.mp-scheme-light {
color-scheme: light;
--mp-color-surface: var(--mp-white);
--mp-color-surface-2: var(--mp-tint);
--mp-color-text: var(--mp-ink);
--mp-color-text-2: var(--mp-ink-2);
--mp-color-line: var(--mp-hairline);
--mp-color-line-strong: var(--mp-stone);
--mp-color-line-hover: var(--mp-ink);
--mp-color-accent-text: var(--mp-green-text);
--mp-color-accent-soft: var(--mp-green-soft);
--mp-color-inverse: var(--mp-ink);
--mp-color-inverse-hover: var(--mp-ink-raised);
--mp-color-on-inverse: var(--mp-white);
--mp-color-focus: var(--mp-ink);
--mp-color-glass: color-mix(in srgb, var(--mp-white) 88%, transparent);
}
.mp-scheme-tint,
.mp-scheme-texture-tint { /* warm panels: ask box, sister tiles, wells */
--mp-color-surface: var(--mp-tint);
--mp-color-surface-2: var(--mp-white);
}
.mp-scheme-grey { /* neutral panels: camp coaching */
--mp-color-surface: var(--mp-grey);
--mp-color-surface-2: var(--mp-white);
}
.mp-scheme-soft { /* green-soft panels: memberships, success */
--mp-color-surface: var(--mp-green-soft);
--mp-color-surface-2: var(--mp-white);
--mp-color-line: color-mix(in srgb, var(--mp-green-text) 18%, transparent);
}
.mp-scheme-ink,
.mp-scheme-texture-ink,
.mp-scheme-photo { /* dark bands, ink tiles, text on photographs */
color-scheme: dark;
--mp-color-surface: var(--mp-ink);
--mp-color-surface-2: var(--mp-ink-raised);
--mp-color-text: var(--mp-white);
--mp-color-text-2: color-mix(in srgb, var(--mp-white) 80%, transparent);
--mp-color-line: color-mix(in srgb, var(--mp-white) 18%, transparent);
--mp-color-line-strong: color-mix(in srgb, var(--mp-white) 55%, transparent);
--mp-color-line-hover: var(--mp-white);
--mp-color-accent-text: var(--mp-green); /* green text is AA on ink: 7.4:1 */
--mp-color-accent-soft: color-mix(in srgb, var(--mp-green) 16%, transparent);
--mp-color-inverse: var(--mp-white); /* "ink" buttons turn white on ink */
--mp-color-inverse-hover: var(--mp-tint);
--mp-color-on-inverse: var(--mp-ink);
--mp-color-focus: var(--mp-white);
--mp-color-glass: color-mix(in srgb, var(--mp-ink) 88%, transparent);
}
.mp-scheme-photo { /* transparent: the ![]()
and its scrim are the background */
--mp-color-surface: transparent;
--mp-color-surface-2: color-mix(in srgb, var(--mp-white) 12%, transparent);
--mp-color-text-2: color-mix(in srgb, var(--mp-white) 90%, transparent);
}
/* An ink page (a program page's mp_page_scheme: ink; body.mp-page-ink): the header and the
main take the ink tokens, hairlines are raised ink and focus is green; .mp-scheme-light bands
inside keep their own. The header keeps its glass (tokens only, it tints to ink); the
footer, the menu, the Book sheet and the dock sit outside both and stay as they are.
The camps hub uses mp-header-ink to share only the header treatment. */
.mp-page-ink :is(.mp-header, .mp-main),
.mp-header-ink .mp-header {
color-scheme: dark;
--mp-color-surface: var(--mp-ink);
--mp-color-surface-2: var(--mp-ink-raised);
--mp-color-text: var(--mp-white);
--mp-color-text-2: var(--mp-hairline); /* #E8E6E1: ledes, crumbs, card text (the MP Camp design) */
--mp-color-line-strong: color-mix(in srgb, var(--mp-white) 55%, transparent);
--mp-color-line-hover: var(--mp-white);
--mp-color-accent-text: var(--mp-green);
--mp-color-accent-soft: color-mix(in srgb, var(--mp-green) 16%, transparent);
--mp-color-inverse: var(--mp-white);
--mp-color-inverse-hover: var(--mp-tint);
--mp-color-on-inverse: var(--mp-ink);
--mp-color-glass: color-mix(in srgb, var(--mp-ink) 88%, transparent);
}
.mp-page-ink :is(.mp-header, .mp-main),
.mp-header-ink .mp-header,
.mp-page-ink .mp-main :is(.mp-scheme-ink, .mp-scheme-texture-ink) {
--mp-color-line: var(--mp-ink-raised);
--mp-color-focus: var(--mp-green);
}
.mp-page-ink .mp-main { background-color: var(--mp-color-surface); color: var(--mp-color-text); }
/* The header keeps its glass, so it takes only the words' colour: the nav and the icons white
(they inherit it; the body's own is still ink). The status strip in the light grey. */
:is(.mp-page-ink, .mp-header-ink) .mp-header { color: var(--mp-color-text); }
:is(.mp-page-ink, .mp-header-ink) .mp-util { --mp-color-text: var(--mp-hairline); }
/* The glass shows the body through it at the top of the page: the body is ink, and the footer
(which has no fill of its own) paints the light page's white to stay as it is. */
body:is(.mp-page-ink, .mp-header-ink) { background-color: var(--mp-ink); }
:is(.mp-page-ink, .mp-header-ink) .mp-footer { background-color: var(--mp-color-surface); }
/* Tint and soft set only their surfaces and lean on a light page for their words: on an ink
page they carry the light words themselves, so a tint band there is still readable. */
.mp-page-ink .mp-main :is(.mp-scheme-tint, .mp-scheme-texture-tint, .mp-scheme-grey, .mp-scheme-soft) {
color-scheme: light;
--mp-color-text: var(--mp-ink);
--mp-color-text-2: var(--mp-ink-2);
--mp-color-line-strong: var(--mp-stone);
--mp-color-line-hover: var(--mp-ink);
--mp-color-accent-text: var(--mp-green-text);
--mp-color-accent-soft: var(--mp-green-soft);
--mp-color-inverse: var(--mp-ink);
--mp-color-inverse-hover: var(--mp-ink-raised);
--mp-color-on-inverse: var(--mp-white);
--mp-color-focus: var(--mp-ink);
}
.mp-page-ink .mp-main :is(.mp-scheme-tint, .mp-scheme-texture-tint, .mp-scheme-grey) { --mp-color-line: var(--mp-hairline); }
/* Accent (07 §1, rule 2: once per page, never a page background): Motopark green with
ink words; the primary button turns ink, the ink button white; cards on it are white. */
.mp-scheme-accent {
color-scheme: light;
--mp-color-surface: var(--mp-green);
--mp-color-surface-2: var(--mp-white);
--mp-color-text: var(--mp-ink);
--mp-color-text-2: color-mix(in srgb, var(--mp-ink) 82%, transparent);
--mp-color-line: color-mix(in srgb, var(--mp-ink) 18%, transparent);
--mp-color-line-strong: color-mix(in srgb, var(--mp-ink) 55%, transparent);
--mp-color-line-hover: var(--mp-ink);
--mp-color-accent: var(--mp-ink);
--mp-color-accent-text: var(--mp-ink);
--mp-color-accent-soft: color-mix(in srgb, var(--mp-white) 35%, transparent);
--mp-color-action: var(--mp-ink);
--mp-color-action-hover: var(--mp-ink-raised);
--mp-color-on-action: var(--mp-white);
--mp-color-inverse: var(--mp-white);
--mp-color-inverse-hover: var(--mp-tint);
--mp-color-on-inverse: var(--mp-ink);
--mp-color-focus: var(--mp-ink);
--mp-color-glass: color-mix(in srgb, var(--mp-green) 88%, transparent);
}
/* Textured (07 §1, rule 8): tint or ink with a CSS pattern; never behind long reading. */
/* Green words on the track tint go 15 % darker: links and eyebrows stay AA where they cross a line. */
.mp-scheme-texture-tint { --mp-texture: var(--mp-texture-track); --mp-color-accent-text: var(--mp-green-text-textured); background-image: var(--mp-texture); background-size: var(--mp-texture-size); }
.mp-scheme-texture-ink { --mp-texture: var(--mp-texture-track-ink); background-image: var(--mp-texture); background-size: var(--mp-texture-size); }
/* Huckabucka owns its western event identity (Nick, Nov 3), scoped to this page. */
.mp-huck {
--mp-huck-background: var(--wp--custom--huck--background);
--mp-huck-band: var(--wp--custom--huck--band);
--mp-huck-card: var(--wp--custom--huck--card);
--mp-huck-line: var(--wp--custom--huck--line);
--mp-huck-accent: var(--wp--custom--huck--accent);
--mp-huck-accent-hover: var(--wp--custom--huck--accent-hover);
--mp-huck-text: var(--wp--custom--huck--text);
--mp-huck-muted: var(--wp--custom--huck--muted);
--mp-huck-paper: var(--wp--custom--huck--paper);
--mp-huck-paper-shade: var(--wp--custom--huck--paper-shade);
--mp-huck-ink: var(--wp--custom--huck--ink);
--mp-huck-font: var(--wp--custom--huck--font);
--mp-huck-heading: var(--wp--custom--huck--heading);
--mp-huck-subheading: var(--wp--custom--huck--subheading);
--mp-huck-date: var(--wp--custom--huck--date);
--mp-huck-width: var(--wp--custom--huck--width);
--mp-huck-logo-width: var(--wp--custom--huck--logo-width);
--mp-huck-hero-height: var(--wp--custom--huck--hero-height);
}
}
/* ==== end tokens.css ==== */
/* -----------------------------------------------------------------------------
Fallback faces: metric-matched to the three woff2 files (size-adjust and the
overrides computed from the font files with fontTools on 2026-10-22, against
macOS Arial / Arial Bold / Arial Narrow Bold), so the swap holds CLS at 0.
Font metrics, not design values: the only numbers bin/check allows here.
----------------------------------------------------------------------------- */
@font-face {
font-family: "Barlow Fallback";
font-weight: 400;
src: local("Arial"), local("ArialMT");
size-adjust: 95.39%; /* 2026-10-23: × 0.9866, the measured Barlow / fallback width on real copy (the /events/ notice wrapped one line longer); overrides scaled back */
ascent-override: 104.83%;
descent-override: 20.96%;
line-gap-override: 0%;
}
@font-face {
font-family: "Barlow Fallback";
font-weight: 600;
src: local("Arial Bold"), local("Arial-BoldMT");
size-adjust: 91.21%;
ascent-override: 109.63%;
descent-override: 21.93%;
line-gap-override: 0%;
}
@font-face {
font-family: "Barlow Condensed Fallback";
font-weight: 800;
src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("RobotoCondensed-Bold");
size-adjust: 84.63%;
ascent-override: 118.17%;
descent-override: 23.63%;
line-gap-override: 0%;
}
/* -----------------------------------------------------------------------------
reset
----------------------------------------------------------------------------- */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset { margin: 0; }
ol[class], ul[class] { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; }
img, svg, video, picture, iframe { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
address { font-style: normal; }
summary { cursor: pointer; }
/* Reduced-motion safety net for anything not on the motion tokens. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0s !important; /* check-allow: important — reduced-motion safety net */
animation-iteration-count: 1 !important; /* check-allow: important */
transition-duration: 0s !important; /* check-allow: important */
scroll-behavior: auto !important; /* check-allow: important */
}
}
}
/* -----------------------------------------------------------------------------
base — element defaults, the skip link, WordPress compatibility
----------------------------------------------------------------------------- */
@layer base {
html {
background-color: var(--mp-color-surface);
scroll-padding-block-start: calc(var(--mp-h-header) + var(--mp-space-s));
}
body {
background-color: var(--mp-color-surface);
color: var(--mp-color-text);
font: var(--mp-weight-body) var(--mp-fs-base) / var(--mp-lh-body) var(--mp-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--mp-font-display);
font-weight: var(--mp-weight-display);
line-height: var(--mp-lh-display);
letter-spacing: var(--mp-track-display);
text-transform: uppercase;
text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; }
b, strong { font-weight: var(--mp-weight-ui); }
:focus-visible {
outline: var(--mp-focus-width) solid var(--mp-color-focus);
outline-offset: var(--mp-focus-offset);
}
::selection { background-color: var(--mp-color-accent-soft); color: var(--mp-color-text); }
hr { block-size: 0; border: 0; border-block-start: var(--mp-border) solid var(--mp-color-line); }
main:focus { outline: 0; }
/* 7.1 Skip link: first in , visible on focus. */
.mp-skip {
position: fixed;
inset-block-start: var(--mp-space-2xs);
inset-inline-start: var(--mp-space-2xs);
z-index: var(--mp-z-skip);
padding: var(--mp-space-s) var(--mp-space-m);
border-radius: var(--mp-radius-pill);
background-color: var(--mp-color-inverse);
color: var(--mp-color-on-inverse);
font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-ui);
text-decoration: none;
translate: 0 -200%;
}
.mp-skip:focus { translate: 0 0; }
/* WordPress content alignment classes (kses keeps them on images). */
.alignleft { float: inline-start; margin-inline-end: var(--mp-space-m); } /* vendor-alias */
.alignright { float: inline-end; margin-inline-start: var(--mp-space-m); } /* vendor-alias */
.aligncenter { margin-inline: auto; } /* vendor-alias */
}
/* -----------------------------------------------------------------------------
layout primitives (COMPONENTS.md §6)
----------------------------------------------------------------------------- */
@layer layout {
/* Full-width element, content centred at --mp-w-max, no inner container. */
.mp-wrap { padding-inline: var(--mp-pad-bleed); }
.mp-wrap--prose { padding-inline: max(var(--mp-gutter), (100% - var(--mp-w-prose)) / 2); }
@media (width < 48rem) {
.mp-wrap--tight-phone { padding-inline: var(--mp-gutter-tight); }
}
.mp-section { padding-block: var(--mp-space-section); }
.mp-section--flush-top { padding-block-start: 0; }
.mp-section--flush { padding-block: 0; }
.mp-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--mp-space-s)); }
.mp-stack--2xs { --_gap: var(--mp-space-2xs); }
.mp-stack--xs { --_gap: var(--mp-space-xs); }
.mp-stack--m { --_gap: var(--mp-space-m); }
.mp-stack--l { --_gap: var(--mp-space-l); }
.mp-stack--xl { --_gap: var(--mp-space-xl); }
.mp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--mp-space-2xs)); }
.mp-cluster--between { justify-content: space-between; }
.mp-cluster--end { justify-content: flex-end; }
.mp-cluster--s { --_gap: var(--mp-space-s); }
/* Responsive grid: one column on phone, half the columns from md, all from lg. */
.mp-grid {
display: grid;
grid-template-columns: repeat(var(--_cols, 1), minmax(0, 1fr));
gap: var(--mp-gap);
}
.mp-grid--phone-2 { --_cols: 2; }
@media (width >= 48rem) {
.mp-grid--3, .mp-grid--4 { --_cols: 2; }
.mp-grid--5, .mp-grid--6 { --_cols: 3; }
}
@media (width >= 64rem) {
.mp-grid--2 { --_cols: 2; }
.mp-grid--3 { --_cols: 3; }
.mp-grid--4 { --_cols: 4; }
}
@media (width >= 70rem) {
.mp-grid--5 { --_cols: 5; }
.mp-grid--6 { --_cols: 6; }
}
/* Phone: a horizontal scroll-snap row that bleeds to the screen edge. */
@media (width < 48rem) {
.mp-rail {
display: flex;
gap: var(--mp-space-xs);
margin-inline: calc(-1 * var(--mp-gutter));
padding-inline: var(--mp-gutter);
padding-block-end: var(--mp-space-2xs);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--mp-gutter);
scrollbar-width: none;
}
.mp-rail > * { flex: 0 0 72%; scroll-snap-align: start; }
}
.mp-media { aspect-ratio: var(--mp-ratio, var(--mp-ratio-photo)); overflow: hidden; }
.mp-media > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--mp-focus, 50% 50%); }
.mp-media--card { --mp-ratio: var(--mp-ratio-card); }
.mp-media--wide { --mp-ratio: var(--mp-ratio-wide); }
.mp-media--square { --mp-ratio: var(--mp-ratio-square); }
}
/* -----------------------------------------------------------------------------
shell primitives (layer components): btn, link, chip, dot, avail, icon, eyebrow
----------------------------------------------------------------------------- */
@layer components {
/* 7.9 mp-btn — the exemplar in COMPONENTS.md, plus sizes and states. */
.mp-btn,
:where(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button), /* vendor-alias */
.ff-btn-submit { /* vendor-alias */
--_bg: var(--mp-color-inverse);
--_fg: var(--mp-color-on-inverse);
--_line: transparent;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mp-space-2xs);
min-block-size: var(--mp-h-btn);
padding-inline: var(--mp-space-m);
border: 0;
border-radius: var(--mp-radius-pill);
background: var(--_bg);
color: var(--_fg);
box-shadow: inset 0 0 0 var(--mp-border) var(--_line);
font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-ui);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--mp-dur-fast) var(--mp-ease-out),
box-shadow var(--mp-dur-fast) var(--mp-ease-out),
scale var(--mp-dur-press) var(--mp-ease-out);
}
.mp-btn:hover,
:where(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):hover { /* vendor-alias */
--_bg: var(--mp-color-inverse-hover);
}
.mp-btn:active { scale: .98; }
.mp-btn--primary,
:where(.woocommerce, .woocommerce-page) .button.alt, /* vendor-alias */
.ff-btn-submit { /* vendor-alias */
--_bg: var(--mp-color-action);
--_fg: var(--mp-color-on-action);
}
.mp-btn--primary:hover,
:where(.woocommerce, .woocommerce-page) .button.alt:hover, /* vendor-alias */
.ff-btn-submit:hover { /* vendor-alias */
--_bg: var(--mp-color-action-hover);
}
/* Outline pill; inside mp-scheme-photo the scheme makes it the white ghost pill. */
.mp-btn--secondary {
--_bg: var(--mp-color-surface);
--_fg: var(--mp-color-text);
--_line: var(--mp-color-line-strong);
}
.mp-btn--secondary:hover { --_bg: var(--mp-color-surface); --_line: var(--mp-color-line-hover); }
.mp-btn--icon {
--_bg: transparent;
--_fg: currentColor;
inline-size: var(--mp-tap);
min-block-size: var(--mp-tap);
padding: 0;
border-radius: var(--mp-radius-round);
}
.mp-btn--icon:hover { --_bg: var(--mp-color-surface-2); }
/* 36px visual, 44px hit area. */
.mp-btn--sm { min-block-size: var(--mp-h-btn-sm); padding-inline: var(--mp-space-s); }
.mp-btn--sm::before { content: ""; position: absolute; inset: calc((var(--mp-h-btn-sm) - var(--mp-tap)) / 2) 0; }
.mp-btn--lg { min-block-size: var(--mp-h-control); padding-inline: var(--mp-space-l); }
.mp-btn--block { display: flex; inline-size: 100%; }
.mp-btn:disabled,
.mp-btn[aria-disabled="true"] {
--_bg: var(--mp-color-surface-2);
--_fg: var(--mp-color-disabled);
--_line: transparent;
cursor: not-allowed;
scale: 1;
}
/* mp-link — text link with an optional trailing icon. */
.mp-link {
display: inline-flex;
align-items: center;
gap: var(--mp-space-2xs);
min-block-size: var(--mp-tap);
color: inherit;
font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-ui);
text-decoration: none;
transition: color var(--mp-dur-fast) var(--mp-ease-out);
}
.mp-link:hover { color: var(--mp-color-accent-text); }
.mp-link .mp-icon { transition: translate var(--mp-dur-fast) var(--mp-ease-out); }
.mp-link:hover .mp-icon { translate: var(--mp-space-3xs) 0; }
/* 7.10 mp-chip — non-interactive label. */
.mp-chip {
--_bg: var(--mp-color-surface);
--_fg: var(--mp-color-text);
display: inline-flex;
align-items: center;
gap: var(--mp-space-2xs);
min-block-size: var(--mp-h-chip);
padding-inline: var(--mp-space-xs);
border-radius: var(--mp-radius-pill);
background-color: var(--_bg);
color: var(--_fg);
font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-caps);
text-transform: uppercase;
white-space: nowrap;
}
/* On a photograph: a white chip (the scheme's inverse pair) lifted off the image. */
.mp-scheme-photo .mp-chip { --_bg: var(--mp-color-inverse); --_fg: var(--mp-color-on-inverse); box-shadow: var(--mp-shadow-raised); }
.mp-chip--action,
.mp-scheme-photo .mp-chip--action { --_bg: var(--mp-color-action); --_fg: var(--mp-color-on-action); }
/* A dated chip (mp_camp_dates form="chips", 2026-11-05): white, a hairline border, the week's number then its dates; sentence case. */
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--mp-space-2xs); margin: 0; padding: 0; list-style: none; }
.mp-chip--date { --_bg: var(--mp-color-surface); border: var(--mp-border) solid var(--mp-color-line); font-size: var(--mp-fs-sm); letter-spacing: 0; text-transform: none; }
.mp-chip__n { color: var(--mp-color-text-2); font-weight: var(--mp-weight-ui); }
.mp-chip--ink { --_bg: var(--mp-color-inverse); --_fg: var(--mp-color-on-inverse); }
.mp-chip--soft { --_bg: var(--mp-color-accent-soft); --_fg: var(--mp-color-accent-text); }
.mp-chip--raised { --_bg: var(--mp-color-surface-2); --_fg: var(--mp-color-accent-text); } /* a time or a price on a card: green on raised ink, green-text on tint */
/* A fact (the product page's Details, 2026-11-07): a filled grey chip in sentence case, so it never reads as a choice (choices are white with a hairline). */
.mp-chip--fact { --_bg: var(--mp-color-surface-2); font-size: var(--mp-fs-sm); letter-spacing: 0; text-transform: none; }
/* 7.24 mp-price, inline (Nick 2026-11-05: "Sale Price (or Regular Price). Then show Regular price.
Plus HST"): a price inside any line — the menu, quick tiles, cards, facts, the pinbar, rates
cells, a shortcode in content, the Book sheet. mp-core writes it (mp_price_markup()); it takes
the line's own face, size and colour, the struck regular price in the secondary colour. The end
note (__ends) is small in the accent on its own line. The block component is price.css. */
.mp-price.mp-price--inline { display: inline; font-size: inherit; line-height: inherit; }
.mp-price--inline .mp-price__now { color: inherit; font-weight: inherit; text-decoration: none; }
.mp-price--inline .mp-price__was { color: var(--mp-color-text-2); font-weight: inherit; }
.mp-price--inline .mp-price__tax { color: inherit; font-size: inherit; font-weight: inherit; }
.mp-price__ends { display: block; flex-basis: 100%; color: var(--mp-color-accent-text); font-size: var(--mp-fs-xs); font-weight: var(--mp-weight-ui); line-height: var(--mp-lh-snug); }
/* mp-dot — 8px status dot; the meaning is always in the text beside it. */
.mp-dot {
position: relative;
display: inline-block;
flex: none;
inline-size: var(--mp-space-2xs);
block-size: var(--mp-space-2xs);
border-radius: var(--mp-radius-round);
background-color: var(--mp-color-accent);
}
.mp-chip--action .mp-dot { background-color: var(--mp-color-on-action); }
.mp-dot--off { background-color: var(--mp-color-disabled); }
.mp-dot--pulse::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-color: inherit;
animation: mp-pulse var(--mp-dur-pulse) var(--mp-ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
.mp-dot--pulse::after { animation: none; opacity: 0; }
}
/* 7.11 mp-avail — honest availability and price label. */
.mp-avail {
--_bg: var(--mp-color-accent-soft);
--_fg: var(--mp-color-accent-text);
--_dot: var(--mp-color-accent);
display: inline-flex;
align-items: center;
gap: var(--mp-space-2xs);
min-block-size: var(--mp-h-chip);
padding-inline: var(--mp-space-xs);
border-radius: var(--mp-radius-pill);
background-color: var(--_bg);
color: var(--_fg);
font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-ui);
white-space: nowrap;
}
.mp-avail::before {
content: "";
flex: none;
inline-size: var(--mp-space-2xs);
block-size: var(--mp-space-2xs);
border-radius: var(--mp-radius-round);
background-color: var(--_dot);
}
.mp-avail--low { --_bg: var(--mp-color-warn-soft); --_fg: var(--mp-color-warn); --_dot: var(--mp-color-warn); }
.mp-avail--full { --_bg: var(--mp-color-surface-2); --_fg: var(--mp-color-text-2); --_dot: transparent; }
.mp-avail--full::before { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-text-2); background-image: linear-gradient(135deg, transparent 45%, var(--mp-color-text-2) 45% 55%, transparent 55%); }
/* A date not yet confirmed (the coming season before it is announced): a stone outline, no dot. */
.mp-avail--proposed { --_bg: transparent; --_fg: var(--mp-color-text-2); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong); }
.mp-avail--proposed::before { display: none; }
.mp-avail--closed,
.mp-avail--unknown { --_bg: var(--mp-color-surface-2); --_fg: var(--mp-color-text-2); --_dot: var(--mp-color-disabled); }
.mp-avail--price { --_bg: transparent; padding-inline: 0; }
.mp-avail--price::before { content: none; }
/* On a photograph: white label, ink words, the dot keeps the state colour. */
.mp-scheme-photo .mp-avail { --_bg: var(--mp-color-inverse); --_fg: var(--mp-color-on-inverse); box-shadow: var(--mp-shadow-raised); }
/* 7.12 mp-icon — symbols from the per-page sprite; stroke is currentColor. */
.mp-icon { flex: none; inline-size: var(--mp-icon); block-size: var(--mp-icon); }
.mp-icon--s { inline-size: var(--mp-icon-s); block-size: var(--mp-icon-s); }
.mp-icon--l { inline-size: var(--mp-icon-l); block-size: var(--mp-icon-l); }
/* 7.13 mp-eyebrow — one per block, above the heading. */
.mp-eyebrow {
color: var(--mp-color-accent-text);
font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
letter-spacing: var(--mp-track-label);
text-transform: uppercase;
}
}
@keyframes mp-pulse {
from { opacity: .55; scale: 1; }
to { opacity: 0; scale: 3; }
}
/* -----------------------------------------------------------------------------
utilities (COMPONENTS.md §6 — the whole list)
----------------------------------------------------------------------------- */
@layer utilities {
[hidden] { display: none !important; }
.mp-u-sr-only,
.screen-reader-text { /* vendor-alias */
position: absolute !important;
inline-size: var(--mp-border) !important;
block-size: var(--mp-border) !important;
padding: 0 !important;
margin: calc(-1 * var(--mp-border)) !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (width < 48rem) {
.mp-u-hide-phone { display: none !important; }
}
@media (width >= 48rem) {
.mp-u-hide-md { display: none !important; }
}
.mp-u-mt-0 { margin-block-start: 0 !important; }
.mp-u-mt-s { margin-block-start: var(--mp-space-s) !important; }
.mp-u-mt-m { margin-block-start: var(--mp-space-m) !important; }
.mp-u-mt-l { margin-block-start: var(--mp-space-l) !important; }
.mp-u-mt-xl { margin-block-start: var(--mp-space-xl) !important; }
.mp-u-mb-0 { margin-block-end: 0 !important; }
}