/* Lachlan Collins · LSJC — QR-target hub. Echoes the card's type system and
   layout in Reductable's screen palette; fonts, palette and grid come from
   ../../css/base.css. */

body { min-height: 100vh; }
.container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 60px 24px 48px;
  text-align: center;
}

/* Name — the bold lime Elms Sans hero, matching the card front's heavy weight */
h1 {
  font-family: 'Elms Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1.05;
  letter-spacing: -0.02em; /* tight, chunky — as on the card */
  color: var(--lime);
  margin: 0 0 8px;
}

/* LSJC — the bold lime Hanken Grotesk wordmark from the card back */
.tagline {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 7px;
  text-indent: 7px; /* balance the trailing letter-spacing */
  color: var(--lime);
  margin: 0 0 38px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 15px 20px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(240, 241, 245, 0.12);
  transition: transform .06s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); border-color: var(--lime); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.button svg { width: 20px; height: 20px; flex: none; }

/* The Reductable mark: its leading "R" set in Leckerli One (the logo typeface) and
   in the brand lime, so the product link reads as the app's own logotype. Sits on
   the Space Grotesk baseline (its script tail dips below, as in the logo); sized a
   touch larger to lead as a brand cap, with a small gap so the R's hook clears the
   following "e". */
.brand-r {
  font-family: 'Leckerli One', cursive;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1;
  color: var(--lime);
  vertical-align: baseline;
  margin-right: 0.08em;
}

/* Email — the single primary action, in the neon lime with dark field text */
.button-primary {
  background: var(--lime);
  color: var(--field);
  border-color: var(--lime);
  font-weight: 700;
}
.button-primary:hover { background: #d6ff33; border-color: #d6ff33; }

/* Save contact — deliberately tertiary: a small, quiet text link, not a button.
   Present and discoverable, but mailto (the primary) is the real channel. */
.save-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 500;
  transition: color .15s ease;
}
.save-link:hover { color: var(--ink); }
.save-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.save-link svg { width: 15px; height: 15px; flex: none; }

/* Footer URL, trailed by the |● cursor mark so it reads as a command prompt */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .3px;
}
.footer .cursor { height: .9em; width: auto; display: block; }