/* RAIXON identity shared by every public page: one typeface in three widths, flat fields, black rules, vermilion as the only accent.
   Mona Sans: wide (125 %) for the wordmark only, condensed (75 %) heavy for display, normal width for text.
   Fields: nuit, vermilion, ink, paper. Vermilion marks what the agent picks out and what a human must check; the vermilion square is the signature. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(/fonts/mona-sans.woff2) format("woff2"); }
/* Until Mona Sans arrives, condensed display lines are set in Arial Bold scaled to the width of Mona Sans 75 %, so they wrap the same and nothing shifts when the font swaps in. */
@font-face { font-family: "Mona Sans Display Fallback"; font-style: normal; font-weight: 200 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 74%; }
:root {
  --nuit: #0c0520;
  --red: #ff4019;
  --ink: #0e0e0e;
  --paper: #f4f4f2;
  --grey: #8d8d8a;
  --pad: clamp(16px, 3.2vw, 56px);
  --gap: clamp(12px, 1.6vw, 28px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.76, 0, .24, 1);
  --f: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --fd: "Mona Sans", "Mona Sans Display Fallback", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; overflow-x: clip; font: 400 18px/1.45 var(--f); font-kerning: normal; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }

/* Fields. .f-red and .f-paper set ink text; .f-ink sets paper text on ink. .f-nuit swaps the two variables, so that inside it --ink is the light text and --paper the nuit field, letting components written for light fields work unchanged.
   Grey text keeps 4.5:1 on every field: #8d8d8a on the dark fields, a darker grey #6b6b68 on paper (4.85:1). */
.f-nuit { --ink: #f4f4f2; --paper: #0c0520; --grey: #8d8d8a; background: var(--nuit); color: var(--ink); }
.f-red { background: var(--red); color: var(--ink); }
.f-ink { --grey: #8d8d8a; background: var(--ink); color: var(--paper); }
.f-paper { --grey: #6b6b68; background: var(--paper); color: var(--ink); }

/* Display type: condensed and heavy, tight leading. */
.disp { font-family: var(--fd); font-weight: 820; font-stretch: 75%; letter-spacing: -.02em; line-height: .86; }

/* Wordmark: RAIXON wide, followed by the vermilion square; black on vermilion fields. */
.brand { font: 800 17px/1 var(--f); font-stretch: 125%; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.brand::after { content: ""; display: inline-block; width: .34em; height: .34em; margin-left: .14em; background: var(--red); }
.f-red .brand::after { background: var(--ink); }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }