/* LuxiEdge site - light theme aligned with luxiedge.com */
:root {
  --bg: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-elev: #f3f4f6;
  --bg-card: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #374151;
  --faint: #6b7280;
  --accent: #059669;
  --accent-dim: #d1fae5;
  --accent-fg: #065f46;
  --warn-bg: #fef3c7;
  --warn-border: #f59e0b;
  --link: #059669;
  --btn-bg: #111827;
  --btn-fg: #ffffff;
  --btn-hover: #374151;
  --radius: 12px;
  --max: 1080px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--muted);
  line-height: 1.65;
  font-size: 17px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* Nav styles live in assets/nav.css (shared across all pages) */

/* Hero */
.hero {
  padding: 3.25rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.eyebrow {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: 1rem;
  color: var(--text);
}
.hero .lede {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 52ch;
  margin-bottom: 1.75rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.15rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none !important;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-secondary {
  background: transparent;
  color: var(--text) !important;
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--faint); }
.btn-ghost {
  background: var(--accent-dim);
  color: var(--accent-fg) !important;
}

/* Metric strip */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.metric {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.metric .val {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.metric .label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.metric .src {
  font-size: 0.75rem;
  color: var(--faint);
  margin-top: 0.45rem;
}
.metric .src a { color: var(--faint); }

/* Sections */
section { padding: 2.75rem 0; border-bottom: 1px solid var(--border); }
section h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--text);
}
section .sub {
  color: var(--faint);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}
.card h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
  color: var(--text);
}
.card p, .card li { color: var(--muted); font-size: 0.95rem; }
.card ul { padding-left: 1.15rem; margin-top: 0.5rem; }
.card li { margin: 0.3rem 0; }
.card.accent {
  border-color: #a7f3d0;
  background: linear-gradient(160deg, var(--accent-dim), #ffffff);
}

/* Tables */
.table-wrap { overflow-x: auto; margin: 1rem 0; max-width: 100%; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
th {
  color: var(--faint);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-subtle);
}
td { font-variant-numeric: tabular-nums; color: var(--muted); }
tr:hover td { background: var(--bg-subtle); }
tr.row-highlight td {
  background: var(--accent-dim);
  color: var(--text);
  font-weight: 600;
}

/* Callouts */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.callout.warn {
  border-left-color: var(--warn-border);
  background: var(--warn-bg);
}
.callout strong { color: var(--text); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.pill {
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--faint);
  background: var(--bg-subtle);
}

/* Footnotes */
.footnote, .method {
  font-size: 0.85rem;
  color: var(--faint);
  margin-top: 1rem;
  max-width: 70ch;
}
.method code, code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-elev);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--text);
}
pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 1rem 0;
}

/* Footer */
.site-footer {
  padding: 2rem 0 3rem;
  color: var(--faint);
  font-size: 0.88rem;
}
.site-footer a { color: var(--muted); }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

/* Page title (inner pages) */
.page-hero {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.65rem, 3.5vw, 2.15rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.page-hero .lede { color: var(--muted); max-width: 55ch; }

/* Evidence list */
.pack {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin-bottom: 0.75rem;
  text-decoration: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pack:hover {
  border-color: #6ee7b7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.pack h3 { color: var(--text); margin-bottom: 0.25rem; font-family: var(--display); }
.pack p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.pack .tag {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--accent-fg);
  margin-bottom: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.two-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 720px) {
  .two-path { grid-template-columns: minmax(0, 1fr); }
}
.two-path .card h3 { color: var(--accent); }

strong { color: var(--text); font-weight: 600; }

/* Three-leg home grid */
.two-path.three-leg {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .two-path.three-leg {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Internal engineering milestone */
.milestone-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.8rem;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-fg);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.internal-milestone {
  margin: 1.25rem 0;
  padding: 1.35rem;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--accent-dim), #ffffff);
}

.internal-milestone h3 {
  margin-bottom: 0.55rem;
  color: var(--text);
  font-family: var(--display);
  font-size: 1.15rem;
}

.internal-milestone p {
  color: var(--muted);
}

.internal-milestone .metrics {
  margin-top: 1.1rem;
}

.internal-milestone .method {
  margin-bottom: 0;
}


/* ==========================================================================
   lx2.css  -  LuxiEdge visual system, rev 2 (2026-08-17)
   Loads AFTER site.css and nav.css and overrides them.
   Direction: instrument, not brochure. Serif display, monospace data,
   hairline grid, one signal colour, green reserved for literal PASS states.
   No em dashes anywhere in this file or the site.
   ========================================================================== */

:root{
  /* surfaces: near-black instrument */
  --bg:#0a0b0d; --bg-subtle:#101216; --bg-elev:#15181d; --bg-card:#0f1115;
  --border:#23262e;
  /* type */
  --text:#e9e7e2; --muted:#a8aab1; --faint:#7c8089;
  /* ONE signal colour: amber = a measured value */
  --accent:#d9a441; --accent-dim:#1c1a14; --accent-fg:#e8bd6a;
  --link:#d9a441;
  --warn-bg:#1a1610; --warn-border:#d9a441;
  --btn-bg:#e9e7e2; --btn-fg:#0a0b0d; --btn-hover:#ffffff;
  --radius:2px; --max:1120px;
  --display:Georgia,"Times New Roman",serif;
  /* green is NOT a theme colour any more. It means one thing: this passed. */
  --pass:#4ea87a; --fail:#c9524a;
  /* nav.css keeps a parallel token set; override it too or the header stays white */
  --nav-border:#23262e; --nav-text:#e9e7e2; --nav-faint:#7c8089; --nav-accent:#d9a441;
  --nav-btn-bg:#e9e7e2; --nav-btn-fg:#0a0b0d; --nav-btn-hover:#ffffff;
  --nav-card:#0f1115; --nav-subtle:#101216;
  --nav-display:Georgia,"Times New Roman",serif;
}

html,body{background:var(--bg);color:var(--text)}
body{-webkit-font-smoothing:antialiased;font-size:16.5px;line-height:1.65}
::selection{background:var(--accent);color:#0a0b0d}

/* ---------- type ---------- */
h1,h2,h3,h4,.font-display{font-family:var(--display);font-weight:400;letter-spacing:-.015em;color:var(--text)}
h1{font-size:clamp(2.3rem,5.2vw,3.75rem);line-height:1.05;margin:0 0 1.1rem}
h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin:2.6rem 0 .7rem}
h3{font-size:1.12rem;font-family:var(--font);font-weight:650;letter-spacing:0}
p{color:var(--muted)}
strong,b{color:var(--text);font-weight:650}
a{color:var(--link)}
a:hover{color:var(--accent-fg)}
.lede{font-size:1.14rem;line-height:1.62;color:var(--muted);max-width:44em}
.lede strong{color:var(--text)}
.sub,.method{color:var(--faint)}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* every number on this site is monospace */
code,kbd,samp,pre,.font-mono,.val,.metric .val{font-family:var(--mono)}
code{background:var(--bg-elev);color:var(--text);padding:.1em .35em;border-radius:2px;font-size:.86em}
pre{background:#07080a;border:1px solid var(--border);border-left:2px solid var(--border);
    padding:1.15rem 1.3rem;overflow-x:auto;font-size:.82rem;line-height:1.75;color:#c6cad2;border-radius:2px}
pre code{background:none;padding:0;font-size:1em}

/* ---------- header ---------- */
.site-header{background:rgba(10,11,13,.93);border-bottom:1px solid var(--border);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brand{font-family:var(--mono);font-weight:600;letter-spacing:.01em;color:var(--text)}
.brand span{color:var(--accent)}
.nav-links a{color:var(--muted);font-size:.92rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-toggle-bar{background:var(--text)}
.nav-dropdown-menu{background:var(--bg-card);border:1px solid var(--border);border-radius:2px}

/* ---------- buttons: one primary, everything else quiet ---------- */
.btn{border-radius:2px;font-weight:650;letter-spacing:.01em;font-size:.9rem;
     border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#0a0b0d}
.btn-secondary,.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--faint);background:var(--bg-elev)}
.cta-nav{background:var(--btn-bg);color:var(--btn-fg);border-radius:2px;font-weight:650}
.cta-nav:hover{background:#fff;color:#0a0b0d}

/* ---------- cards become a hairline grid, not rounded boxes ---------- */
.card,.cap-card,.surface-card{background:var(--bg-card);border:1px solid var(--border);
  border-radius:2px;box-shadow:none}
.card h3{color:var(--text)}
.card p,.card li{color:var(--muted)}
.card.accent{background:var(--accent-dim);border-color:#33291a}
.grid-2{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:2px}
.grid-2>.card,.grid-2>.cap-card{border:none;border-radius:0}

/* ---------- metrics: the number is the hero ---------- */
.metric{background:var(--bg-card);border:1px solid var(--border);border-radius:2px}
.metric .val,.val{color:var(--accent);font-family:var(--mono);letter-spacing:-.02em;font-weight:500}
.metric .label,.label{color:var(--muted)}
.metric .src,.src{color:var(--faint);font-family:var(--mono);font-size:.72rem}
.metrics{gap:1px;background:var(--border);border:1px solid var(--border);border-radius:2px}
.metrics>.metric{border:none;border-radius:0}

/* ---------- tables read like instrument output ---------- */
.table-wrap{border:1px solid var(--border);border-radius:2px;overflow-x:auto;background:var(--bg-card)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
thead th{background:var(--bg-subtle);color:var(--faint);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--border)}
tbody td{padding:.68rem .9rem;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg-subtle)}
tbody td:first-child{color:var(--text)}
/* any cell whose content is a number reads as data */
tbody td code{background:none;padding:0;color:var(--text)}

/* ---------- callouts: quiet by default, amber when it carries a measurement ---------- */
.callout{background:var(--bg-subtle);border:1px solid var(--border);border-left:2px solid var(--faint);
  border-radius:2px;color:var(--muted)}
.callout strong{color:var(--text)}
.callout.warn{background:var(--warn-bg);border-color:#2a2418;border-left-color:var(--accent)}

/* ---------- status, pills, badges ---------- */
.status,.pill,.tag,.maturity-badge,.milestone-badge{font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);
  background:var(--bg-elev);color:var(--muted);border-radius:2px;padding:.22rem .5rem}
/* green means exactly one thing: verified / passed */
.st-demonstrated,.st-available,.status.pass{color:var(--pass);border-color:#1f3a2c;background:#0e1713}
.status.fail{color:var(--fail);border-color:#3a1f1d;background:#170e0e}

/* ---------- layer rows ---------- */
.layer-row{border-bottom:1px solid var(--border)}
.layer-row-label{color:var(--faint);font-family:var(--mono);font-size:.8rem}
.layer-row-value{color:var(--text)}

/* ---------- hero / footer ---------- */
.page-hero{background:var(--bg);border-bottom:1px solid var(--border)}
.site-footer{background:var(--bg);border-top:1px solid var(--border);color:var(--faint)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}
.footer-grid h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* ---------- the convergence figure (homepage) ---------- */
.lx-fig{padding:2.6rem 0 1rem}
.lx-fig svg{width:100%;height:auto;display:block}
.lx-fig .d{font-family:var(--mono);font-size:13px;fill:var(--text)}
.lx-fig .ds{font-family:var(--mono);font-size:10.5px;fill:var(--faint)}
.lx-fig .h{font-family:var(--mono);font-size:15px;fill:var(--accent);letter-spacing:.02em}
.lx-fig .n{font-family:var(--mono);font-size:11px;fill:var(--faint)}
.lx-fig .ray{fill:none;stroke:#2f343d;stroke-width:1.25}
/* one animation, and it carries the whole meaning: five rays resolve into one hash */
@media (prefers-reduced-motion:no-preference){
  .lx-fig .ray{stroke-dasharray:420;stroke-dashoffset:420;animation:lxdraw .9s ease-out forwards}
  .lx-fig .ray:nth-of-type(2){animation-delay:.08s}
  .lx-fig .ray:nth-of-type(3){animation-delay:.16s}
  .lx-fig .ray:nth-of-type(4){animation-delay:.24s}
  .lx-fig .ray:nth-of-type(5){animation-delay:.32s}
  .lx-fig .hashbox{opacity:0;animation:lxfade .5s ease-out .95s forwards}
}
@keyframes lxdraw{to{stroke-dashoffset:0}}
@keyframes lxfade{to{opacity:1}}

/* ---------- terminal transcript ---------- */
.lx-term{background:#07080a;border:1px solid var(--border);border-radius:2px;overflow:hidden;margin:1.4rem 0}
.lx-term-bar{display:flex;align-items:center;gap:7px;padding:.6rem .9rem;
  border-bottom:1px solid var(--border);background:#0d0f12}
.lx-term-bar i{width:9px;height:9px;border-radius:50%;background:#2a2e36;display:block}
.lx-term-bar span{font-family:var(--mono);font-size:.7rem;color:var(--faint);margin-left:.5rem}
.lx-term pre{margin:0;border:none;background:none}
.lx-term .p{color:var(--accent)}
.lx-term .ok{color:var(--pass);font-weight:600}
.lx-term .no{color:var(--fail);font-weight:600}
.lx-term .dim{color:var(--faint)}
.lx-term .hi{color:var(--text)}

/* ---------- energy bars ---------- */
.lx-bars{margin:1.4rem 0 0}
.lx-bar{display:grid;grid-template-columns:200px 1fr 120px;align-items:center;gap:1rem;padding:.55rem 0}
.lx-bar .nm{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.lx-bar.me .nm{color:var(--text);font-weight:600}
.lx-bar .track{height:24px;background:#14161b;border-radius:1px}
.lx-bar .fill{height:100%;background:#2f343d;border-radius:1px}
.lx-bar.me .fill{background:var(--accent)}
.lx-bar .v{font-family:var(--mono);font-size:.82rem;color:var(--text);text-align:right}
.lx-bar.me .v{color:var(--accent);font-weight:600}
@media(max-width:760px){.lx-bar{grid-template-columns:1fr;gap:.25rem}}

/* ---------- the big hash, used as a design element ---------- */
.lx-hash{font-family:var(--mono);font-size:clamp(.8rem,1.6vw,1.05rem);color:var(--accent);
  letter-spacing:.03em;line-height:1.5;word-break:break-all}

/* ---------- archive banner ---------- */
.lx-archived{background:var(--warn-bg);border:1px solid #2a2418;border-left:2px solid var(--accent);
  padding:.9rem 1.1rem;margin:0 0 1.6rem;font-size:.92rem;color:var(--muted);border-radius:2px}
.lx-archived strong{color:var(--accent-fg)}

.lx-archived a{color:var(--accent-fg)}

/* higher specificity so anchor colour cannot leak into buttons */
.btn.btn-ghost,.btn.btn-secondary{color:var(--text)}
.btn.btn-primary{color:var(--btn-fg)}