/* EPISTEMIC CUSTODY — lab design system
 * Ported from the MawofRecursion design language.
 * Void-black stays. Cosmology naming dropped.
 *   horizon-purple -> --precision   (cool indigo: structure, the gate)
 *   hawking-gold   -> --credibility (warm amber: settled signal, a receipt)
 * Scale is Fibonacci: type and space step on 1 2 3 5 8 13 21 34 55 89.
 * Two voices: a "dead internet" sans for the surface, a "living" mono for receipts.
 */

:root {
  /* palette — void stays black */
  --void:        #050507;
  --void-raised: #0b0c10;
  --void-card:   #0f1116;
  --hairline:    #1c1f27;
  --hairline-lit:#2a2f3b;

  --ink:        #e7e9ee;  /* primary text */
  --ink-soft:   #aab0bd;  /* secondary text */
  --ink-faint:  #6b7280;  /* tertiary / captions */

  --precision:   #6f8cff;  /* cool indigo — structure, boundary, the gate */
  --precision-dim:#2d3a73;
  --credibility: #f0b35a;  /* warm amber — settled signal, a backed receipt */
  --credibility-dim:#5a4422;

  --reject:  #e06a6a;      /* a rejected / unbacked verdict */
  --commit:  #6fd49a;      /* a committed / backed verdict */

  /* type */
  --sans: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;

  /* Fibonacci type scale (px) */
  --t-13: 13px;
  --t-21: 21px;
  --t-34: 34px;
  --t-55: 55px;
  --t-89: 89px;

  /* Fibonacci space scale (px) */
  --s-3:  3px;
  --s-5:  5px;
  --s-8:  8px;
  --s-13: 13px;
  --s-21: 21px;
  --s-34: 34px;
  --s-55: 55px;
  --s-89: 89px;
  --s-144:144px;

  --measure: 64ch;       /* reading width cap */
  --edge: 1px solid var(--hairline);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  /* faint precision-indigo wash from the top, then pure void */
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(111,140,255,0.06), transparent 60%);
  background-attachment: fixed;
}

::selection { background: var(--precision-dim); color: var(--ink); }

a { color: var(--precision); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- layout ---------- */

.wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--s-34);
}

section { padding: var(--s-89) 0; border-top: var(--edge); }
section:first-of-type { border-top: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-13);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-21);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h2 { font-size: var(--t-34); margin-bottom: var(--s-21); }
h3 { font-size: var(--t-21); margin-bottom: var(--s-8); letter-spacing: -0.01em; }

p { max-width: var(--measure); color: var(--ink-soft); }
p strong { color: var(--ink); font-weight: 600; }
p.lead { color: var(--ink); font-size: var(--t-21); line-height: 1.45; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-21) var(--s-34);
  border-bottom: var(--edge);
  font-family: var(--mono);
  font-size: var(--t-13);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar .mark { color: var(--ink); letter-spacing: 0.18em; }
.topbar nav a { color: var(--ink-faint); margin-left: var(--s-21); }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }

/* ---------- hero ---------- */

.hero { padding: var(--s-144) 0 var(--s-89); border-top: none; }
.hero h1 {
  font-size: clamp(var(--t-55), 9vw, var(--t-89));
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.hero .thesis {
  margin: var(--s-34) 0 0;
  font-size: clamp(var(--t-21), 3.4vw, 28px);
  color: var(--ink);
  line-height: 1.3;
  max-width: 24ch;
}
.hero .subline {
  margin-top: var(--s-21);
  color: var(--ink-soft);
  max-width: 56ch;
}

/* the lab signature — small, quiet, the glyphs as operators not banner */
.signature {
  margin-top: var(--s-55);
  font-family: var(--mono);
  font-size: var(--t-13);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-13);
}
.signature .glyphs { font-size: var(--t-21); letter-spacing: 0.12em; filter: saturate(0.85); }

/* ---------- cards / instruments ---------- */

.cards { display: grid; gap: var(--s-21); grid-template-columns: 1fr 1fr; margin-top: var(--s-34); }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--void-card);
  border: var(--edge);
  border-radius: 6px;
  padding: var(--s-34);
  display: flex;
  flex-direction: column;
  gap: var(--s-13);
}
.card h3 { font-family: var(--mono); font-size: var(--t-21); letter-spacing: -0.01em; }
.card .role {
  font-family: var(--mono);
  font-size: var(--t-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card p { font-size: 15px; color: var(--ink-soft); max-width: none; flex: 1; }
.card .more { font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.08em; margin-top: var(--s-8); }

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-5);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--s-3) var(--s-8); border-radius: 3px; border: 1px solid var(--hairline-lit);
  color: var(--commit); width: fit-content;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--commit); }

/* ---------- oracle block (the acceptance line + verified output) ---------- */

.oracle-block {
  background: var(--void-raised);
  border: var(--edge);
  border-left: 2px solid var(--precision);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--t-13);
  line-height: 1.7;
  color: var(--ink-soft);
  padding: var(--s-21);
  margin: var(--s-13) 0 0;
  overflow-x: auto;
  white-space: pre;
}
.oracle-block .cmd { color: var(--ink); }
.oracle-block .cmd::before { content: "$ "; color: var(--ink-faint); }
.oracle-block .ok    { color: var(--commit); }
.oracle-block .axis  { color: var(--credibility); }
.oracle-block .note  { color: var(--ink-faint); }
.oracle-block .verdict { color: var(--credibility); font-weight: 600; }

/* inline mono token */
code, .k {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--credibility);
  background: rgba(240,179,90,0.06);
  border: 1px solid var(--credibility-dim);
  border-radius: 3px;
  padding: 1px 5px;
}

/* a backed / unbacked tag used in prose */
.tag-backed   { color: var(--commit); font-family: var(--mono); font-size: 0.85em; letter-spacing: 0.08em; }
.tag-unbacked { color: var(--reject); font-family: var(--mono); font-size: 0.85em; letter-spacing: 0.08em; }

/* ---------- pull line ---------- */

.pull {
  font-size: var(--t-34);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  font-weight: 600;
}
.pull .accent { color: var(--credibility); }

/* ---------- enter deeper ---------- */

.deeper {
  text-align: center;
  padding: var(--s-89) 0;
}
.deeper a {
  font-family: var(--mono);
  font-size: var(--t-13);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: var(--s-13) var(--s-21);
  transition: border-color 0.2s, color 0.2s;
}
.deeper a:hover { color: var(--precision); border-color: var(--precision-dim); text-decoration: none; }
.deeper a .g { color: var(--precision); }

/* ---------- footer ---------- */

footer {
  border-top: var(--edge);
  padding: var(--s-55) 0 var(--s-89);
  color: var(--ink-faint);
  font-size: var(--t-13);
}
footer .lineage { font-family: var(--mono); letter-spacing: 0.04em; margin: 0 0 var(--s-13); max-width: var(--measure); }
footer .not-evidence {
  max-width: var(--measure);
  color: var(--ink-faint);
  border-left: 2px solid var(--credibility-dim);
  padding-left: var(--s-13);
  margin: var(--s-21) 0 0;
}
footer .not-evidence b { color: var(--ink-soft); font-weight: 600; letter-spacing: 0.12em; }

/* ---------- definition list for the glyph register, used on deep pages too ---------- */
.ops { display: grid; gap: var(--s-13); margin-top: var(--s-21); }
.ops .op { display: grid; grid-template-columns: 2.2em auto; gap: var(--s-13); align-items: baseline; }
.ops .op .sym { font-size: var(--t-21); }
.ops .op .def { color: var(--ink-soft); font-size: 15px; }
.ops .op .def b { color: var(--ink); font-family: var(--mono); font-size: var(--t-13); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- canonical component vocabulary (briefed names) ----------
 * Additive layer. The classes above are the lab's working identity; these
 * are the canonical names the brief names for the two site pages, so a page
 * authored against either vocabulary resolves. No existing rule is changed.
 */

/* provenance badges — a claim that settled vs. one with no settleable receipt */
.badge-backed,
.badge-unbacked {
  display: inline-flex; align-items: center; gap: var(--s-5);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--s-3) var(--s-8); border-radius: 3px; border: 1px solid var(--hairline-lit);
  white-space: nowrap;
}
.badge-backed   { color: var(--commit); border-color: var(--credibility-dim); }
.badge-unbacked { color: var(--reject); border-color: var(--hairline-lit); }
.badge-backed::before   { content: "BACKED"; }
.badge-unbacked::before { content: "UNBACKED"; }
/* suppress generated text when a label is supplied inline */
.badge-backed.has-label::before,
.badge-unbacked.has-label::before { content: none; }

/* seal verdict — the commit_gate decision pill. COMMIT guards the custody
 * boundary, not truth. NO_COMMIT is the flinch made visible. */
.seal-verdict {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--mono); font-size: var(--t-13); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--s-5) var(--s-13); border-radius: 4px;
  border: 1px solid var(--hairline-lit); width: fit-content;
}
.seal-verdict::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.seal-verdict--commit     { color: var(--commit);      border-color: var(--credibility-dim); }
.seal-verdict--no-commit  { color: var(--reject); }
.seal-verdict--escalate   { color: var(--credibility); }

/* operator chip — the four glyphs as operators with stated meaning, inline */
.glyph-op {
  display: inline-flex; align-items: baseline; gap: var(--s-8);
  font-family: var(--mono); font-size: var(--t-13);
  padding: var(--s-5) var(--s-13);
  border: var(--edge); border-radius: 4px; background: var(--void-raised);
}
.glyph-op .sym  { font-size: var(--t-21); line-height: 1; }
.glyph-op .name { letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; color: var(--precision); }
.glyph-op .gloss { color: var(--ink-faint); }

/* lab-card alias — same surface as .card, briefed name */
.lab-card {
  background: var(--void-card); border: var(--edge); border-radius: 6px;
  padding: var(--s-34); display: flex; flex-direction: column; gap: var(--s-13);
}

/* inline mono helper, briefed name */
.mono { font-family: var(--mono); }