/* flockm.com — shared styles for index / support / about (BUG-18).
   One stylesheet rather than three copies: the palette has to stay in step with
   mobile/src/context/theme.tsx, and three copies drift.

   Palette is lifted from that theme (light), not chosen here — the app's accent
   is literally black because photographs supply all the colour. --paper is
   sampled from logo.png (#f8f8f5) so the mark's baked-in ground is seamless
   against the page.

   Deliberately NO dark mode: the mark is a raster with a light ground, so on a
   dark page it renders as a white tile. The site commits to light until the
   mark exists with a transparent version. */

:root {
  --paper: #f8f8f5;
  --ink: #000000;
  --secondary: #333333;
  --muted: #999999;
  --rule: #dddddd;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

/* ── header ─────────────────────────────────────────────────────────────
   Icon + name as one lockup, with nav pushed to the far end. The mark uses
   the TIGHT crop, not the full art — at 44px the original's wide margin would
   leave the sphere too small to read. alt="" because the wordmark beside it
   already names the product. */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 5rem;
  flex-wrap: wrap;
}
.lockup {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--ink);
}
.lockup:hover { text-decoration: none; }
.mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
}
.wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}
.nav a { color: var(--secondary); text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ── home ───────────────────────────────────────────────────────────────── */
.statement {
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
}
.lede {
  font-size: 1.1875rem;
  color: var(--secondary);
  margin: 0 0 1.5rem;
  max-width: 48ch;
}
.lede-2 {
  font-size: 1.0625rem;
  color: var(--muted);
  margin: 0;
  max-width: 48ch;
}

/* ── inner pages ────────────────────────────────────────────────────────── */
.title {
  font-size: clamp(1.875rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  max-width: 22ch;
}
.intro {
  font-size: 1.0625rem;
  color: var(--secondary);
  margin: 0 0 3rem;
  max-width: 58ch;
}

/* A question and its answer. The rule sits above each, so the page reads as a
   list of things you might need rather than an undifferentiated wall. */
.item {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 0;
  margin: 0 0 1.5rem;
  max-width: 58ch;
}
.item h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.item p {
  margin: 0 0 0.75rem;
  color: var(--secondary);
}
.item p:last-child { margin-bottom: 0; }

.steps {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  color: var(--secondary);
}
.steps li { margin: 0 0 0.25rem; }

.status {
  margin: 3.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 58ch;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--muted);
}
.links {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
/* The operator line is a single sentence and reads better unbroken — the
   58ch measure that suits body copy was splitting it in two. Dropped the cap
   and eased the size so it fits the 46rem column on one line. It still wraps
   on narrow screens, which is correct; `nowrap` would overflow on a phone. */
.operator {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  text-decoration: none;
}