@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations"), url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root { --red: #A3182B; --ink: #16202E; --ink-2: #4A5566; --line: #D9DEE5; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; background: #fff; color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;
}
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.card { width: 100%; max-width: 560px; text-align: center; }
.logo { width: 88px; height: 88px; display: block; margin: 0 auto 22px; }
.eyebrow { display: block; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
h1 {
  margin: 0; font-family: Archivo, "Arial Narrow", sans-serif; font-weight: 800; font-stretch: 82%;
  font-variation-settings: "wdth" 82; font-size: clamp(2.8rem, 9vw, 4.4rem); line-height: 0.95; letter-spacing: -0.005em;
}
.rule { width: 64px; height: 5px; background: var(--red); margin: 26px auto 22px; }
.soon { margin: 0; font-size: 1.35rem; font-weight: 700; }
.by { margin: 10px 0 0; font-style: italic; color: var(--ink-2); }
.fr { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.fr .name { margin: 0 0 6px; font-family: Archivo, "Arial Narrow", sans-serif; font-weight: 800; font-stretch: 82%; font-variation-settings: "wdth" 82; font-size: 1.6rem; line-height: 1.1; }
.fr .soon { font-size: 1.1rem; }
footer { padding: 20px; text-align: center; font-size: 0.9rem; color: var(--ink-2); }
a { color: var(--red); text-underline-offset: 0.18em; }
a:hover { color: #650D1B; }