@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Saira Condensed";
  src: url("../assets/fonts/saira-condensed-800.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner";
  src: url("../assets/fonts/commissioner-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner";
  src: url("../assets/fonts/commissioner-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Commissioner";
  src: url("../assets/fonts/commissioner-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Commissioner", Arial, sans-serif;

  --canvas: #0a0b0a;
  --canvas-soft: #10110f;
  --shell: #171614;
  --panel: #1d1c19;
  --panel-raised: #24221f;
  --panel-inset: #10110f;
  --line: #47433d;
  --line-muted: #34312d;
  --bone: #eee9df;
  --bone-soft: #c8c1b6;
  --muted: #a49e94;
  --dim: #918b81;
  --red: #e94e32;
  --red-dark: #b92d1a;
  --orange: #ed8b2f;
  --yellow: #e7c64a;
  --ink: #171614;
  --focus: #fff0a0;

  --text-micro: clamp(0.64rem, 0.61rem + 0.12vw, 0.72rem);
  --text-xs: clamp(0.72rem, 0.68rem + 0.16vw, 0.82rem);
  --text-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  --text-base: clamp(0.96rem, 0.91rem + 0.22vw, 1.08rem);
  --text-lead: clamp(1.02rem, 0.94rem + 0.36vw, 1.22rem);
  --text-h3: clamp(1.55rem, 1.3rem + 0.9vw, 2.1rem);
  --text-h2: clamp(2.35rem, 1.75rem + 2.3vw, 3.85rem);
  --text-hero: clamp(3.05rem, 2.2rem + 3.2vw, 5.15rem);

  --space-3xs: clamp(0.28rem, 0.24rem + 0.12vw, 0.36rem);
  --space-2xs: clamp(0.45rem, 0.38rem + 0.2vw, 0.58rem);
  --space-xs: clamp(0.7rem, 0.6rem + 0.3vw, 0.9rem);
  --space-sm: clamp(0.95rem, 0.78rem + 0.5vw, 1.3rem);
  --space-md: clamp(1.3rem, 1.02rem + 0.85vw, 1.9rem);
  --space-lg: clamp(1.85rem, 1.4rem + 1.35vw, 2.8rem);
  --space-xl: clamp(2.7rem, 1.95rem + 2.2vw, 4.2rem);
  --space-2xl: clamp(4rem, 2.7rem + 3.8vw, 6.6rem);
  --space-section: clamp(5.2rem, 3.4rem + 5vw, 8.8rem);
  --gutter: clamp(0.75rem, 0.35rem + 1.45vw, 1.7rem);

  --frame: 90rem;
  --reading: 70ch;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --header-height: clamp(4.1rem, 3.75rem + 1vw, 4.75rem);
  --duration-fast: 160ms;
  --duration: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-shell: 0 1.4rem 4rem rgb(0 0 0 / 38%);
}