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

@font-face {
  font-family: "BDO Grotesk";
  src: url("fonts/BDOGrotesk-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
      --bg: #000000;
      --text: #ffffff;
      --muted: #8f8f8f;
      --pad: clamp(22px, 3.2vw, 52px);
      --site-max: 1280px;
      --measure: 650px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      font-family: "BDO Grotesk", Arial, sans-serif;
    }

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

    a:hover,
    a:focus-visible {
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .site {
      width: min(100%, var(--site-max));
      min-height: 100svh;
      margin-inline: auto;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding: var(--pad);
    }

    .brand {
      display: inline-block;
      line-height: 0;
    }

    .brand-logo {
      display: block;
      width: 56px;
      height: auto;
      max-width: 100%;
    }

    main {
      display: grid;
      align-items: center;
    }

    .content {
      width: min(100%, var(--measure));
      margin-left: clamp(0px, 21vw, 360px);
      padding: clamp(72px, 10vh, 140px) 0;
    }

    h1 {
      margin: 0 0 clamp(28px, 4vh, 52px);
      max-width: none;
      font-size: clamp(42px, 6.2vw, 92px);
      font-weight: 500;
      letter-spacing: -0.065em;
      line-height: 0.94;
    }

    h1 span {
      display: block;
      white-space: nowrap;
    }

    .intro {
      max-width: 590px;
      margin: 0;
      font-size: clamp(18px, 1.55vw, 25px);
      font-weight: 400;
      letter-spacing: -0.025em;
      line-height: 1.34;
    }

    footer {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 32px;
      font-size: 13px;
      line-height: 1.4;
    }

    .contact {
      display: flex;
      gap: clamp(22px, 3vw, 48px);
      align-items: center;
    }

    .legal {
      color: var(--muted);
      text-align: left;
    }

    .external-link-icon {
      width: 0.9em;
      height: 0.9em;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 760px) {
      .site {
        min-height: 100svh;
      }

      main {
        align-items: start;
      }

      .content {
        margin-left: 0;
        padding-top: 22vh;
        padding-bottom: 18vh;
      }

      h1 {
        max-width: 9ch;
      }

      footer {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .contact {
        order: 1;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .legal {
        order: 2;
      }

      .legal {
        max-width: 300px;
        text-align: left;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      .brand,
      .content,
      footer {
        animation: reveal 700ms ease both;
      }

      .content {
        animation-delay: 80ms;
      }

      footer {
        animation-delay: 160ms;
      }

      @keyframes reveal {
        from {
          opacity: 0;
          transform: translateY(8px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }