/* The app's own palette, copied rather than imported: this site ships on its
   own and must not depend on the app building. Values match
   apps/web/src/design/tokens.css — if a restyle changes those, change these. */
:root {
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;
  --amber-400: #fbbf24;
  --green-500: #10b981;

  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--navy-900);
  color: var(--slate-100);
  font-family: var(--font-body);
  line-height: 1.55;
  margin: 0;
  /* A sun breaking through cloud, in the only way a static page can afford. */
  background-image: radial-gradient(
    ellipse 90% 55% at 50% -10%,
    rgba(251, 191, 36, 0.16),
    transparent 70%
  );
}

main {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2rem 1.25rem 4rem;
}

/* ---- the bar across the top ---- */

nav {
  align-items: center;
  border-bottom: 1px solid var(--navy-700);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 auto;
  max-width: 42rem;
  padding: 1rem 1.25rem;
}

nav .wordmark {
  color: var(--slate-100);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-right: auto;
  text-decoration: none;
}

nav a {
  color: var(--slate-300);
  font-size: 0.9375rem;
  text-decoration: none;
}

nav a:hover { color: var(--slate-100); }
nav a[aria-current="page"] { color: var(--amber-400); }

/* Named, and honestly labelled. A link to nothing is worse than a word that
   says "not yet" — and the forum is a real plan, not a maybe. */
nav .soon {
  color: var(--navy-700);
  font-size: 0.9375rem;
}

nav .soon span {
  border: 1px solid var(--navy-700);
  border-radius: 999px;
  color: var(--slate-300);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  text-transform: uppercase;
}

/* ---- words ---- */

.eyebrow {
  color: var(--amber-400);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
}

/* The home page leads with the name and nothing else. Amber because it is the
   one word on the page that is the product rather than a claim about it. */
.brand { color: var(--amber-400); }

h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
}

.tagline {
  color: var(--slate-300);
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  margin: 0 0 1.5rem;
}

.lede { font-size: 1.0625rem; margin: 0 0 1.75rem; }
.lede strong { color: var(--amber-400); font-weight: 500; }

p { margin: 0 0 1rem; }

.points {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 2.5rem 0;
  padding: 0;
}

.points li {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 0.75rem;
  padding: 0.875rem 1.125rem;
}

.points b {
  color: var(--slate-100);
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
}

.points span { color: var(--slate-300); font-size: 0.9375rem; }

/* ---- the form, wherever it appears ---- */

form.join {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

form.join label {
  color: var(--slate-300);
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

input[type="email"] {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: 0.5rem;
  color: var(--slate-100);
  flex: 1 1 14rem;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
}

input[type="email"]:focus { border-color: var(--amber-400); outline: none; }

button {
  background: var(--amber-400);
  border: none;
  border-radius: 0.5rem;
  color: var(--navy-900);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

button:disabled { cursor: default; opacity: 0.6; }

.fineprint {
  color: var(--slate-300);
  font-size: 0.8125rem;
  margin: 0.875rem 0 0;
}

.said { margin: 0.875rem 0 0; font-size: 0.9375rem; }
.said[data-tone="good"] { color: var(--green-500); }
.said[data-tone="bad"] { color: var(--amber-400); }

/* ---- the blog ---- */

.posts { display: grid; gap: 0.75rem; list-style: none; margin: 2rem 0; padding: 0; }

.posts a {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 0.75rem;
  color: var(--slate-100);
  display: block;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
}

.posts a:hover { border-color: var(--amber-400); }

.posts b { display: block; font-family: var(--font-heading); font-weight: 600; }
.posts time { color: var(--slate-300); font-size: 0.8125rem; }

/* The blog before it has a post in it. Deliberately quiet — a page that
   apologises for being empty reads worse than one that simply says what
   happens next. */
.empty {
  border: 1px dashed var(--navy-700);
  border-radius: 0.75rem;
  color: var(--slate-300);
  margin: 2rem 0 1.5rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

/* Three points, each marked by a little plane on the climb. Rotated 45deg so
   it reads as ascending rather than sitting on a runway. currentColor keeps the
   amber in CSS rather than baked into the path. */
.flightpoints {
  display: grid;
  gap: 1.75rem;
  list-style: none;
  margin: 2.25rem 0 2rem;
  padding: 0;
}

.flightpoints li {
  align-items: start;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: auto 1fr;
}

.flightpoints svg {
  color: var(--amber-400);
  height: 1.5rem;
  margin-top: 0.125rem;
  transform: rotate(45deg);
  width: 1.5rem;
}

.flightpoints b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.flightpoints span { color: var(--slate-300); }
.flightpoints strong { color: var(--amber-400); font-weight: 500; }

article p { font-size: 1.0625rem; }
article .meta { color: var(--slate-300); font-size: 0.875rem; margin-bottom: 2rem; }

.back { color: var(--amber-400); font-size: 0.9375rem; text-decoration: none; }

footer {
  border-top: 1px solid var(--navy-700);
  color: var(--slate-300);
  font-size: 0.8125rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
}

footer a { color: var(--amber-400); }