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

@font-face {
  font-family: "SaranacSans";
  src: url("/assets/fonts/texgyreadventor-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SaranacSans";
  src: url("/assets/fonts/texgyreadventor-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --oxblood: #7e091c;
  --slate: #3d3d3d;
  --mist: #f5f4f2;
  --sea: #445a6b;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--mist);
  color: var(--slate);
  font-family: "SaranacSans", Arial, sans-serif;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--mist);
}

.page {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 48px;
}

.lockup {
  width: min(760px, 100%);
  margin-left: clamp(0px, 7vw, 112px);
  padding-left: clamp(24px, 4vw, 56px);
  border-left: 3px solid var(--oxblood);
}

.logo {
  display: block;
  width: clamp(190px, 24vw, 260px);
  height: auto;
  margin: 0 0 clamp(72px, 11vh, 128px);
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--oxblood);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  max-width: 720px;
  margin: 0;
  color: var(--slate);
  font-family: "SaranacSerif", Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 7vw, 86px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.supporting {
  max-width: 610px;
  margin: 30px 0 0;
  color: rgba(61, 61, 61, 0.82);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.52;
}

.status {
  display: inline-block;
  margin: 52px 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--oxblood);
  color: var(--sea);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .page {
    align-items: start;
    padding: 34px 24px;
  }

  .lockup {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .logo {
    width: 190px;
    margin-bottom: 88px;
  }

  h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .supporting {
    margin-top: 24px;
  }

  .status {
    margin-top: 42px;
  }
}