/* Managed Flows: tokens, reset and typography.
   Colour encodes dossier state throughout the site: coral is the logo and "your turn",
   green is "approved/done", amber is "deadline". Ink and mist carry the structure. */

:root {
    --mf-ink: #16183f;
    --mf-ink-raised: #21245a;
    --mf-ink-line: rgba(255, 255, 255, 0.14);
    --mf-ink-text: #c9cbe6;
    --mf-ink-muted: #9a9dc6;

    --mf-paper: #ffffff;
    --mf-mist: #f0f2f9;
    --mf-mist-deep: #e4e8f4;
    --mf-line: #dde1ee;
    --mf-line-strong: #c7cce0;

    --mf-heading: #16183f;
    --mf-text: #2c2f52;
    --mf-muted: #5d6085;

    --mf-coral: #e05058;
    --mf-coral-deep: #c3343f;
    --mf-coral-tint: #fdecee;
    --mf-green: #13936a;
    --mf-green-text: #0d7453;
    --mf-green-tint: #e2f4ec;
    --mf-amber: #e89a1e;
    --mf-amber-text: #8a5600;
    --mf-amber-tint: #fdf1dc;

    --mf-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --mf-sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mf-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

    --mf-fs-mono: 0.72rem;
    --mf-fs-sm: 0.9375rem;
    --mf-fs-base: 1.0625rem;
    --mf-fs-lead: 1.25rem;
    --mf-fs-h3: 1.3rem;
    --mf-fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
    --mf-fs-h1: clamp(2.7rem, 1.4rem + 4.6vw, 5rem);

    --mf-radius: 10px;
    --mf-radius-lg: 18px;
    --mf-radius-xl: 28px;
    --mf-shadow: 0 1px 2px rgba(22, 24, 63, 0.06), 0 1px 1px rgba(22, 24, 63, 0.04);
    --mf-shadow-lift: 0 24px 48px -24px rgba(22, 24, 63, 0.28), 0 2px 6px rgba(22, 24, 63, 0.06);

    --mf-container: 1200px;
    --mf-gutter: clamp(20px, 4vw, 40px);
    --mf-band: clamp(72px, 9vw, 128px);
    --mf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--mf-paper);
    color: var(--mf-text);
    font-family: var(--mf-sans);
    font-size: var(--mf-fs-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
video,
svg { display: block; max-width: 100%; }

img,
video { height: auto; }

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    color: var(--mf-heading);
    font-family: var(--mf-display);
    font-stretch: 88%;
    text-wrap: balance;
}

h1 {
    font-size: var(--mf-fs-h1);
    font-stretch: 94%;
    font-weight: 740;
    line-height: 1;
    letter-spacing: -0.022em;
}

h2 {
    font-size: var(--mf-fs-h2);
    font-weight: 710;
    line-height: 1.06;
    letter-spacing: -0.018em;
}

h3 {
    font-size: var(--mf-fs-h3);
    font-weight: 680;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1.05rem;
    font-weight: 680;
    line-height: 1.3;
}

p,
ul,
ol,
dl { margin: 0 0 1em; }

p { text-wrap: pretty; }

a {
    color: var(--mf-coral-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover { color: var(--mf-ink); }

strong { font-weight: 700; color: var(--mf-heading); }

:focus-visible {
    outline: 3px solid var(--mf-coral-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--mf-coral-tint); color: var(--mf-ink); }

.mf-lead {
    font-size: var(--mf-fs-lead);
    line-height: 1.5;
    color: var(--mf-text);
    max-width: 38em;
}

.mf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 1.1rem;
    color: var(--mf-coral-deep);
    font-family: var(--mf-mono);
    font-size: var(--mf-fs-mono);
    font-stretch: 87.5%;
    font-weight: 560;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mf-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.mf-mono {
    font-family: var(--mf-mono);
    font-stretch: 87.5%;
    font-size: 0.8em;
    letter-spacing: 0.01em;
}

.mf-muted { color: var(--mf-muted); }

.mf-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}