/* ==========================================================
   TriaX Therapeutics, triaxtx.com
   Sister stylesheet to triaxai.io. Same structure and type
   scale; accent is a deep plum-magenta (TX) rather than
   crimson (AI), so the two sites read as one family without
   being clones. Deliberately low on red and short on
   lightness: the hue sits toward purple so it never reads
   as pink.
   ========================================================== */

:root {
  --bg: #ffffff;
  --bg-alt: #f8f6f8;
  --ink: #16101a;
  --text: #2e2733;
  --text-dim: #6b6373;
  --rule: #e5e0e5;

  --accent: #7a1b4e;          /* deep plum-magenta, TX theme */
  --accent-soft: #f1e8ee;
  --accent-ink: #530f34;      /* hover, darker still */

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --wrap: 1120px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110d14;
    --bg-alt: #19131d;
    --ink: #f5f2f6;
    --text: #d6cfdb;
    --text-dim: #988fa1;
    --rule: #2b2431;
    --accent: #b9608f;        /* lifted for contrast, still plum */
    --accent-soft: #291725;
    --accent-ink: #d38fb5;
  }
}

:root[data-theme="dark"] {
  --bg: #110d14;
  --bg-alt: #19131d;
  --ink: #f5f2f6;
  --text: #d6cfdb;
  --text-dim: #988fa1;
  --rule: #2b2431;
  --accent: #b9608f;
  --accent-soft: #291725;
  --accent-ink: #d38fb5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.12rem; line-height: 1.3; }

em { font-style: italic; color: var(--accent); }

a { color: inherit; }

/* ---------- nav ---------- */

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}

nav .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

nav .logo svg { width: 24px; height: 24px; display: block; }

nav .links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

nav .links a {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}

nav .links a:hover,
nav .links a.is-active { color: var(--accent); }

.nav-cta {
  font-size: 0.8rem;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  nav .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  nav .links { margin-left: 0; width: 100%; gap: 16px; }
  .nav-cta { display: none; }
}

/* ---------- shared blocks ---------- */

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero { padding: 96px 0 72px; border-bottom: 1px solid var(--rule); }

.lede {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 62ch;
  margin: 22px 0 0;
}

.hero-ctas { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.btn-primary, .btn-ghost {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 2px;
  font-size: 0.86rem;
  text-decoration: none;
  border: 1px solid var(--accent);
  cursor: pointer;
}

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { color: var(--accent); background: transparent; }
.btn-ghost:hover { background: var(--accent-soft); }

.thesis {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  padding: 36px 0;
}

.thesis p {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--ink);
  margin: 0;
  max-width: 76ch;
}

.section { padding: 72px 0; border-bottom: 1px solid var(--rule); }

.section-head { max-width: 72ch; margin-bottom: 40px; }
.section-head p { color: var(--text-dim); margin: 14px 0 0; }

.two-col, .axes {
  display: grid;
  gap: 24px;
}

.two-col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.axes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.axis-card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 26px;
  background: var(--bg);
}

.axis-num {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.axis-card p { color: var(--text-dim); font-size: 0.92rem; margin: 10px 0 0; }

.callout {
  border-left: 2px solid var(--accent);
  background: var(--bg-alt);
  padding: 28px 30px;
  border-radius: 0 3px 3px 0;
}

.callout .k {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 12px;
}

.callout p { margin: 0; color: var(--text-dim); }

.text-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-size: 0.9rem;
}

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  color: var(--text-dim);
}

.modalities { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 36px; }

.m-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 6px;
}

/* ---------- pipeline ---------- */

.stage-track { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }

.stage {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text-dim);
}

.stage.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.stage.is-active { border-color: var(--accent); color: var(--accent); }

.status-note {
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  background: var(--bg-alt);
}

.status-note p { margin: 0; font-size: 0.9rem; color: var(--text-dim); }

/* ---------- news ---------- */

.news-list { display: grid; gap: 0; }

.news-item {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}

.news-item:last-child { border-bottom: 1px solid var(--rule); }

.news-date {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}

.news-body h3 { margin-bottom: 8px; }
.news-body p { margin: 0; color: var(--text-dim); font-size: 0.94rem; }

@media (max-width: 680px) {
  .news-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
}

.contact-detail { margin-top: 28px; font-size: 0.9rem; color: var(--text-dim); }
.contact-detail span { color: var(--ink); font-family: var(--mono); font-size: 0.85rem; }

form label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

form input, form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  margin-bottom: 18px;
}

form input:focus, form textarea:focus { outline: none; border-color: var(--accent); }
form textarea { min-height: 120px; resize: vertical; }
.send-btn { width: auto; }

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

footer { padding: 44px 0; }

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand svg { width: 30px; height: 30px; }
.foot-name { font-family: var(--serif); color: var(--ink); font-size: 1rem; }
.foot-tag { font-size: 0.78rem; color: var(--text-dim); }

.foot-meta {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}


/* ---------- logo images ----------
   The nav and footer marks are now the TriaX PNG wordmark, same
   asset as triaxai.io, rather than an inline SVG. These rules sit
   last so they win over the earlier svg-only sizing. */

nav .logo img {
  width: 24px;
  height: 24px;
  display: block;
}

.foot-brand img {
  width: 30px;
  height: 30px;
  display: block;
}


/* The mark is 400x302, so fix the height and let the width follow.
   Forcing a square crushes it. Same sizing as triaxai.io. */

nav .logo img {
  height: 30px;
  width: auto;
  display: block;
}

.foot-brand img {
  height: 42px;
  width: auto;
  display: block;
}


/* The mark ships in two tones: triax-mark.png is the dark one, for
   light backgrounds; triax-mark-light.png is the pale one, for dark
   backgrounds. Swap by theme so it never sinks into the page.
   Paths are relative to this stylesheet, which already sits in assets/. */

nav .logo img,
.foot-brand img {
  content: url("triax-mark.png");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav .logo img,
  :root:not([data-theme="light"]) .foot-brand img {
    content: url("triax-mark-light.png");
  }
}

:root[data-theme="dark"] nav .logo img,
:root[data-theme="dark"] .foot-brand img {
  content: url("triax-mark-light.png");
}


/* ---------- dual-target diagram ----------
   The counterpart to the TriaX AI triangle: same visual grammar
   (thin outline, dashed spokes, accent-stroked vertices, pulsing
   core, mono labels), two vertices instead of three. */

.dual-stage {
  display: flex;
  justify-content: center;
  margin: 44px 0 18px;
}

.dual-stage svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  overflow: visible;
}

.dual-stage .edge {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.dual-stage .spoke {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.dual-stage .node-dot {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.dual-stage .core {
  fill: var(--accent);
}

.dual-stage .core-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

.dual-stage .pulse {
  fill: var(--accent);
}

.dual-stage .node-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  fill: var(--text-dim);
}

.dual-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 48ch;
  margin: 0 auto;
}


/* Chrome renders an <img> with content: url() as a broken image, so
   that swap is withdrawn. The mark is greyscale (mean 63), and the
   shipped pale variant measures 193, which is simply its inverse,
   so dark mode can invert the one file instead of loading another.
   These rules come last and win. */

nav .logo img,
.foot-brand img {
  content: normal;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav .logo img,
  :root:not([data-theme="light"]) .foot-brand img {
    filter: invert(1);
  }
}

:root[data-theme="dark"] nav .logo img,
:root[data-theme="dark"] .foot-brand img {
  filter: invert(1);
}


/* Back to the per-theme file swap, as before. The broken image I saw
   earlier was the PNGs not yet being deployed, not a content: url()
   limitation, and the invert() workaround that followed is withdrawn. */

nav .logo img,
.foot-brand img {
  content: url("triax-mark.png");
  filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav .logo img,
  :root:not([data-theme="light"]) .foot-brand img {
    content: url("triax-mark-light.png");
    filter: none;
  }
}

:root[data-theme="dark"] nav .logo img,
:root[data-theme="dark"] .foot-brand img {
  content: url("triax-mark-light.png");
  filter: none;
}