/* SpriteRelay static site styles. See ../README.md for ownership and editing guidance. */
@font-face {
      font-family: "Space Grotesk";
      src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
    }

    @font-face {
      font-family: "Space Mono";
      src: url("../assets/fonts/space-mono-latin-400.woff2") format("woff2");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: "Space Mono";
      src: url("../assets/fonts/space-mono-latin-700.woff2") format("woff2");
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: "Material Symbols Outlined";
      src: url("../assets/fonts/material-symbols-outlined.woff2") format("woff2");
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
    }

    :root {
      --paper: #f8f7f2;
      --paper-2: #ffffff;
      --ink: #050505;
      --muted: #4f504a;
      --line: #050505;
      --soft-line: #d7d3c6;
      --blue: #2158d4;
      --blue-soft: #dce7ff;
      --mint: #baf7d0;
      --signal: #ffcf4a;
      --shadow: 6px 6px 0 #050505;
      --shadow-sm: 3px 3px 0 #050505;
      --radius: 10px;
      --nav-primary-h: 68px;
      --page-bar-h: 50px;
      --nav-h: calc(var(--nav-primary-h) + var(--page-bar-h));
      --content: 1280px;
      --reading: 72ch;
      --space-section: clamp(64px, 7vw, 104px);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--nav-h) + 24px);
    }

    body {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body::selection {
      background: var(--ink);
      color: var(--paper-2);
    }

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

    :where(a, button, summary, input, select, textarea):focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 4px;
      border-radius: 3px;
    }

    :where(p, li) a:not(.button):not(.brand) {
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.18em;
    }

    :where(p, li) a:not(.button):not(.brand):hover {
      text-decoration-thickness: 3px;
    }

    code,
    pre {
      font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .material-symbols-outlined {
      font-family: "Material Symbols Outlined";
      font-weight: normal;
      font-style: normal;
      font-size: 1.15em;
      line-height: 1;
      vertical-align: -0.18em;
      letter-spacing: normal;
      text-transform: none;
      white-space: nowrap;
      font-feature-settings: "liga";
    }

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