/* scripts/public.css — the one stylesheet every public page links.
 *
 * WHY IT EXISTS (dev/WEBSITE-REFRESH-PLAN-2026-09-11.md §2.6, Robert's call 7
 * of 2026-09-10: "one shared stylesheet for every public page, not fourteen
 * hand edits"). Before this, all 15 public pages declared their own :root with
 * near-duplicate hexes and four different heading scales, and the reading grey
 * was the label grey (#9a9590) that Robert dislikes. This file declares once
 * what every page used to declare for itself.
 *
 * LOAD ORDER on a public page:
 *   <link rel="stylesheet" href="/vendor/fonts/opt2in-fonts.css">
 *   <link rel="stylesheet" href="/scripts/public.css">
 *   then the page's own <style> (which wins on ties, so a page keeps its own
 *   layout without fighting this file).
 * nav.js additionally prepends /scripts/opt2in-tokens.css and
 * /scripts/mobile.css at the top of <head>; that is unchanged and this file,
 * being linked later in the document, sits after them in the cascade.
 *
 * LITERAL VALUES, NOT var(--c-*) REFERENCES. 404.html, get.html and knows.html
 * never load nav.js, so they never see opt2in-tokens.css. Every value below is
 * spelled out so those three pages get exactly what the other twelve get.
 *
 * NO PAGE-SPECIFIC RULES IN HERE. Variables, base elements, the type scale,
 * the layout primitives and the three buttons. Anything that belongs to one
 * page stays in that page's own <style>.
 */

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
  /* Canvas and surfaces */
  --bg-0: #0f0e0c;
  --bg-1: #161410;
  --bg-2: #1c1914;
  --line-1: #242019;
  --line-2: #2a2722;

  /* Text. --fg-2 is THE reading grey: body, lead and muted copy.
     --fg-3 is for captions, eyebrows and meta only, never a paragraph. */
  --fg-1: #f2f0ec;
  --fg-2: #c8c4be;
  --fg-3: #9a9590;
  --fg-4: #6b665e;

  /* Accents */
  --c-purple: #6B6AF0;
  --c-mint: #3DDDAA;
  --c-mint-dark: #2cb892;
  --c-amber: #e8b923;
  --c-red: #f87171;
  --grad: linear-gradient(135deg, #6B6AF0, #3DDDAA);

  /* Fonts. Two brand families only (CLAUDE.md rule 6): Cormorant Infant for
     display, Inter for body and every numeral. The monospace is the system
     stack, never JetBrains Mono in new code. */
  --serif: 'Cormorant Infant', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* One type scale for all 15 pages */
  --t-hero: clamp(40px, 6vw, 72px);
  --t-h1: clamp(34px, 4.5vw, 52px);
  --t-h2: clamp(28px, 3.4vw, 40px);
  --t-h3: 22px;
  --t-lead: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-eyebrow: 11px;

  /* Rhythm. --gutter is the page side padding (CLAUDE.md rule 6: full width,
     48px padding, never a centred 1100px box). */
  --sp-section: clamp(72px, 10vw, 120px);
  --gutter: 48px;

  /* Legacy aliases, so a page can delete its own :root and keep working.
     Every name here is one the old per-page :root blocks used. */
  --bg: var(--bg-0);
  --bg2: var(--bg-1);
  --text: var(--fg-1);
  --text-muted: var(--fg-2);
  --muted: var(--fg-3);
  --fg: var(--fg-1);
  --border: var(--line-1);
  --line: var(--line-1);
  --purple: var(--c-purple);
  --mint: var(--c-mint);
  --amber: var(--c-amber);
  --red: var(--c-red);
}

@media (max-width: 1200px) {
  :root { --gutter: 32px; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
}

/* ── Base ────────────────────────────────────────────────────────────── */
html { background: var(--bg-0); }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--fg-1);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 .5em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }

.hero-title, h1.hero { font-size: var(--t-hero); }

a { color: var(--c-mint); }

/* ── Text utilities ──────────────────────────────────────────────────── */
.lead { font-size: var(--t-lead); color: var(--fg-2); }
.small { font-size: var(--t-small); }
.meta { font-size: var(--t-small); color: var(--fg-3); }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-mint);
  font-weight: 600;
}

/* ── Layout primitives ───────────────────────────────────────────────── */
.container { width: 100%; padding: 0 var(--gutter); box-sizing: border-box; }
.prose { max-width: 70ch; }
.section { padding-block: var(--sp-section); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Shared geometry. background-origin:border-box keeps a gradient from
   wrapping its mint end into a 1px border strip (the green-hairline bug
   documented in nav.js); it must come after any `background` shorthand. */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  background-origin: border-box;
}

.btn-primary {
  background: var(--grad);
  background-origin: border-box;
  color: var(--bg-0);
  font-weight: 700;
  border: 0;
}

.btn-secondary {
  background: var(--c-mint);
  color: var(--bg-0);
  font-weight: 700;
  border: 0;
}

.btn-ghost {
  background: none;
  color: var(--fg-2);
  border: 1px solid var(--line-2);
  font-weight: 500;
}

.btn-primary:hover, .btn-secondary:hover { filter: brightness(1.08); }
.btn-ghost:hover { border-color: var(--c-mint); color: var(--fg-1); }

/* ── Focus ───────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--c-mint);
  outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Transitions and smooth scrolling only. Animations are each page's own call:
     a blanket animation-duration override collapsed the homepage orbit onto one
     point and froze the /get sweep that its page slows on purpose (2026-09-11). */
  *, *::before, *::after {
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
