/* specialorder.io: one screen, say little. Dark, one face, left-aligned and
   low on the page, so most of the screen stays empty. */

@font-face {
  font-family: "Archivo";
  src: url("/landing/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  --ground: #09090a;
  --ink: #e9e6df;
  --soft: #8c8b87;
  --line: rgb(233 230 223 / 0.14);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--gutter);
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.55 "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mark { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }

.copy { align-self: end; max-width: 36rem; padding-block: 4rem 3rem; }

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

.for { margin: 1rem 0 2rem; color: var(--soft); }

.btn {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--ground);
  font: 500 0.9375rem/1 "Archivo", system-ui, sans-serif;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #fff; } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The button opens the form in its place. */
.form { display: grid; gap: 1rem; max-width: 22rem; }
.form:not([hidden]) { animation: open 320ms var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(6px); } }
.form label { display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--soft); }
.form label i { font-style: normal; opacity: 0.7; }
.form input {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; caret-color: var(--ink);
}
.form input:focus-visible { outline: none; border-bottom-color: var(--ink); }
.form [aria-invalid="true"] { border-bottom-color: #f0857d; }
.form .btn { justify-self: start; margin-top: 0.75rem; }
.form__status { margin: 0; min-height: 1.5em; font-size: 0.875rem; color: var(--soft); }
.form__status.is-error { color: #f0857d; }

.foot { font-size: 0.8125rem; color: var(--soft); }

@media (prefers-reduced-motion: reduce) {
  .form:not([hidden]) { animation: none; }
}