/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Copied from apps/app/src/components/ui/theme.css by ops/landing/build.mjs. */
:root {
  color-scheme: light;
  --canvas: oklch(1 0 0);
  --ink: oklch(0.3211 0 0);
  --background: var(--canvas);
  --foreground: var(--ink);
  --muted-foreground: oklch(0.44 0 0);
  --border: color-mix(in oklch, var(--ink) 14%, var(--canvas));
  --font-sans: "Inter Variable", Inter, sans-serif;
  --radius: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: oklch(0.195 0 0);
    --ink: oklch(0.81 0 0);
    --background: var(--canvas);
    --foreground: var(--ink);
    --muted-foreground: oklch(0.78 0 0);
    --border: color-mix(in oklch, var(--ink) 19.4%, var(--canvas));
    --font-sans: "Inter Variable", Inter, sans-serif;
    --radius: 0.5rem;
  }
}

/* The page's own rules. Every colour, the font and the radius come from the
   app's tokens, which `build.mjs` copies in ahead of this file; nothing here
   sets a colour literal. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  /* Sit a little above the optical centre, where a lone block reads as centred. */
  padding-block-end: 8vh;
}

main {
  width: min(100%, 44rem);
  margin-inline: auto;
  padding: 2rem clamp(1.5rem, 8vw, 4rem);
}

h1 {
  /* Pull the T's side bearing back so its stem lines up with the text below. */
  margin: 0 0 0 -0.05em;
  font-size: clamp(3.5rem, 18vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.what {
  margin: 1.5rem 0 0;
  max-width: 24em;
  font-size: clamp(1.125rem, 4.6vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.status {
  display: inline-block;
  margin: 2.5rem 0 0;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 4);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}