/* aspiresg.info — shared styles for the Aspire Systems Group site.
   Shares the FlockM site's typographic system on purpose — a parent company and
   its product reading as one family is normal, and it costs nothing.

   Differs in one way: this site has NO logo (the company does not have one, and
   inventing a mark would be worse than a plain wordmark), so the palette is
   pure monochrome on white rather than sampled from an image. No dark mode, to
   stay in step with the FlockM site. */

:root {
  --paper: #ffffff;
  --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; }
.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;
}

/* Makes the promise above concrete without naming any mechanism: three kinds
   of person, covering a challenge already survived, one being lived now, and a
   plain shared interest. */
.lede-2 {
  font-size: 1.0625rem;
  color: var(--secondary);
  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;
}