@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: #323f42;
  background: #fffdf8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #fde19a; color: #323f42; }

.main-content {
  min-height: 100svh;
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(48px, 8vh, 96px) 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(48px, 8vh, 80px);
  text-align: center;
}

.brand-logo {
  display: block;
  width: clamp(172px, 24vw, 220px);
  max-width: 100%;
  height: auto;
}

.announcement { width: 100%; }

h1 {
  margin: 0;
  font-size: clamp(42px, 9vw, 84px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
}

h1 span {
  display: table;
  margin-inline: auto;
  position: relative;
  isolation: isolate;
}

h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: .035em;
  left: -2%;
  width: 104%;
  height: .13em;
  background: #fde19a;
  transform: rotate(-2deg);
}

.intro {
  max-width: 30ch;
  margin: 32px auto 0;
  color: #5c6567;
  font-size: clamp(17px, 2.5vw, 20px);
  line-height: 1.65;
  text-wrap: pretty;
}

.signoff {
  margin: 16px 0 0;
  color: #a81f14;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}