@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Outfit-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Outfit-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

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

  html { -webkit-text-size-adjust: 100%; }

  body,
  h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd { margin: 0; }

  ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  button { background: none; border: none; padding: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }


  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--bg-canvas);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    letter-spacing: var(--track-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    background-image: var(--gradient-veil-radial);
    background-repeat: no-repeat;
    background-size: 100% 60rem;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: 600;
    text-wrap: balance;
  }

  h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-tight);
  }

  h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-snug);
  }

  h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-snug);
  }

  h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    line-height: var(--lh-snug);
  }

  p { text-wrap: pretty; }

  strong { color: var(--text-primary); font-weight: 600; }


  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
  }

  ::selection {
    background-color: var(--signal-500);
    color: var(--text-on-accent);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: var(--z-max);
    transform: translateY(calc(-100% - var(--space-8)));
    background-color: var(--signal-500);
    color: var(--text-on-accent);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    transition: transform var(--dur-2) var(--ease-standard);
  }

  .skip-link:focus-visible { transform: translateY(0); }


  .flow > * + * { margin-block-start: var(--flow-space, var(--space-5)); }

  .measure-display { max-width: var(--measure-display); }
  .measure-narrow { max-width: var(--measure-narrow); }
  .measure-base { max-width: var(--measure-base); }
}