/* Clash Display, self-hosted from Fontshare. See src/assets/fonts/FONTS.md */
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Iron palette. Contrast on --ink: steel 7.0:1, text-4 6.0:1, both clear WCAG AA. */
  --ink: #0e0f12;
  --ink-2: #16181c;
  --ink-3: #1e2126;
  --line: #23262b;
  --line-2: #2c3037;

  --text: #f3f4f5;
  --text-2: #b6bac1;
  --text-3: #a8acb3;
  --text-4: #89919c;

  --steel: #7fa0c8;
  --steel-bright: #9db9d9;

  /* One accent. It should read as a signal, not decoration. */

  /* Section-label mark: "the ascent". An approach line that steps up and runs
     out level into the type. Used as a mask so the fill stays --steel and the
     colour stays tokenised. Drawn on a 32x14 box, so give it a ~2.3:1 slot. */
  --mark-ascent: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%203%2032%2014%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M1%2015%20H12%20L18%205%20H31%22/%3E%3C/svg%3E");

  --font-display: "Clash Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type, 320px to 1600px viewport */
  --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.72vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.47rem + 1.28vw, 2.53rem);
  --step-4:  clamp(2.07rem, 1.64rem + 2.16vw, 3.40rem);
  --step-5:  clamp(2.49rem, 1.76rem + 3.63vw, 4.55rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --section-y: clamp(4.5rem, 3rem + 6.5vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.9rem + 2.6vw, 4rem);
  --measure: 62ch;
  --radius: 2px;

  --header-h: 120px;
  --header-h-stuck: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;
  --dur-fast: 0.22s;

  --z-header: 100;
  --z-drawer: 9998;
  --z-overlay: 9997;
  --z-preloader: 10000;
}