/* Monmouth Films design tokens: CSS mirror of inc/elementor-globals.php. Change both together. */
:root {
	/* system colors (kit _id in brackets) */
	--mf-red: #F20D18;          /* primary   — Brand Red */
	--mf-steel: #17313F;        /* secondary — Steel */
	--mf-white: #FFFFFF;        /* text      — Text White */
	--mf-red-bright: #FF2A33;   /* accent    — Red Bright; also red TEXT under 18px (5.7:1 on Page Black) */
	--mf-red-cta: #D90B15;      /* fill of every small-label red CTA: white text 5.2:1 (Brand Red is 4.3:1) */
	--mf-red-cta-hover: #C20A13;/* CTA hover goes DEEPER, never brighter: 6.4:1 */

	/* custom colors */
	--mf-bg: #020B12;           /* mf_bg           — Page Black */
	--mf-surface: #071925;      /* mf_surface      — Surface */
	--mf-surface-deep: #03111B; /* mf_surface_deep — Surface Deep */
	--mf-border: #0D2230;       /* mf_border       — Border */
	--mf-muted: #C9D1D7;        /* mf_muted        — Muted Text */
	--mf-muted-light: #D5DCE1;  /* mf_muted_light  — Muted Light */
	--mf-light: #E9EEF1;        /* mf_light        — Light */
	--mf-wine: #35100C;         /* mf_wine         — Wine */

	/* typography (kit system_typography) */
	--font-head: Montserrat, "Montserrat Fallback", Arial, sans-serif;    /* the client's "Gotham Bold" ask, free stand-in (2026-10-15); 700/800 */
	--font-body: Roboto, "Roboto Fallback", Arial, Helvetica, sans-serif; /* text "Body" 400 16px/1.5em */
	--mf-body-size: 16px;
	--mf-body-line: 1.5;
	--mf-label-size: 13px;                             /* accent "Label / Button" 700 13px uppercase */
	--mf-label-tracking: 0.6px;

	/* derived */
	--mf-focus-ring: 0 0 0 3px rgba(242, 13, 24, 0.6);
	--mf-radius: 0;                                    /* brand: square corners on cards and buttons */
	--mf-steel-hi: #24485A;                            /* hover border: one step up from Steel */

	/* depth: one small elevation scale. Neutral black only; red tint is reserved for the primary CTA hover. */
	--mf-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);    /* rest: posters, cards */
	--mf-shadow-2: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .55); /* lifted: hover, menus, scrolled header */
	--mf-shadow-cta: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(217, 11, 21, .24);  /* the ONE hover shadow of every red CTA */
	--mf-edge: inset 0 0 0 1px rgba(255, 255, 255, .08);                         /* hairline edge on imagery */
	--mf-img-outline: rgba(255, 255, 255, .1);                                   /* 1px image outline, dark mode */

	/* motion: one vocabulary (same easing, same distances) */
	--mf-ease: cubic-bezier(.2, .7, .2, 1);            /* ease-out: fast in, gentle settle */
	--mf-dur-fast: 160ms;                              /* press, colour */
	--mf-dur: 240ms;                                   /* hover, lift, underline */
	--mf-dur-reveal: 560ms;                            /* scroll reveal, hero cast */
	--mf-ease-inout: cubic-bezier(.45, 0, .55, 1);     /* symmetric: spotlight dim in AND out, never a flash */
	--mf-dur-spot: 450ms;                              /* poster spotlight fade */
	--mf-lift: -2px;                                   /* buttons */
	--mf-lift-card: -5px;                              /* posters */
	--mf-rise: 18px;                                   /* reveal travel */

	/* Shore Noir: two type voices. A loud display (Montserrat, uppercase, tight) and a quiet label voice; four sizes,
	   nothing in between. inc/type-roles.php tags every heading with its role, site.css maps the role to these. */
	--mf-fs-display: clamp(36px, 4.6vw + 6px, 92px);   /* hero titles: 72px at 1440, 53px at 1024, 36px at 390 (Montserrat runs ~1.35x Oswald) */
	--mf-fs-title: clamp(28px, 2.4vw + 10px, 50px);    /* section titles: 45px at 1440 */
	--mf-fs-card: clamp(17px, .4vw + 13px, 20px);      /* card + sub-section titles: 19px at 1440 */
	--mf-fs-label: 13px;                               /* labels, eyebrows, metadata, nav (12px on phones) */
	--mf-lh-display: .95;
	--mf-track-display: -.015em;
	--mf-track-label: .16em;
	--mf-fog: #94A1AB;                                 /* label grey: 7.5:1 on Page Black, 6.8:1 on Surface, 6.5:1 on Wine */

	/* one vertical rhythm for top-level sections, one edge (the 1200px box puts it at 120px on a 1440 screen) */
	--mf-space-1: clamp(32px, 3.4vw, 48px);
	--mf-space-2: clamp(48px, 5vw, 72px);
	--mf-space-3: clamp(64px, 6.4vw, 96px);
	--mf-space-4: clamp(96px, 11vw, 160px);
	--mf-gutter: 20px;

	--mf-header-h: 72px;                               /* the bar sits over the hero; first sections pad by this */
	--mf-poster-ratio: 183 / 202;                      /* every poster file is 183x202: the one card shape */
	--mf-ink: #0C1E29;                                 /* the footer sign-off: barely above the ground (1.2:1) */
}
@media (max-width: 767px) { :root { --mf-fs-label: 12px; } }
@media (max-width: 600px) { :root { --mf-header-h: 64px; } }

/* Elementor's global typography variables (declared on body.elementor-kit-N): append the metric-matched
   fallbacks. Elementor writes var(--e-global-typography-*-font-family), Sans-serif, so the list slots in. */
body.mf-site[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "Montserrat", "Montserrat Fallback";
	--e-global-typography-secondary-font-family: "Montserrat", "Montserrat Fallback";
	--e-global-typography-accent-font-family: "Montserrat", "Montserrat Fallback";
	--e-global-typography-text-font-family: "Roboto", "Roboto Fallback";
}