:root {
  --paper:      #fbfaf9;
  --paper-2:    #f4f1ed;
  --ink:        #17120e;
  --ink-soft:   #3a322b;
  --muted:      #6e655d;
  --line:       #e4ddd6;
  --line-soft:  #efeae4;
  --accent:     #ff6601;
  --accent-ink: #b34600;
  --deep:       #1f1811;
  --deep-ink:   #f2ece5;
  --deep-muted: #a2968a;
  --deep-line:  #3a2f25;

  --f-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-data:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 34rem;
  --gutter: clamp(1rem, 5vw, 4rem);
  --max: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14100c;
    --paper-2:    #1c1712;
    --ink:        #f4efe9;
    --ink-soft:   #d6cec4;
    --muted:      #9d9187;
    --line:       #322922;
    --line-soft:  #241d17;
    --accent:     #ff7d26;
    --accent-ink: #ffa062;
    --deep:       #0d0a07;
    --deep-ink:   #f4efe9;
    --deep-muted: #9d9187;
    --deep-line:  #2a2219;
  }
}

:root[data-theme="dark"] {
  --paper:      #14100c;
  --paper-2:    #1c1712;
  --ink:        #f4efe9;
  --ink-soft:   #d6cec4;
  --muted:      #9d9187;
  --line:       #322922;
  --line-soft:  #241d17;
  --accent:     #ff7d26;
  --accent-ink: #ffa062;
  --deep:       #0d0a07;
  --deep-ink:   #f4efe9;
  --deep-muted: #9d9187;
  --deep-line:  #2a2219;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---- the confluence rule: two hairlines meeting in one -------------------------------- */
/* The mark is two streams joining, so the page's only recurring ornament is that join. It
   separates sections and marks the seam in the wordmark; it is used nowhere decoratively. */
.confluence {
  display: block;
  width: 100%;
  height: 26px;
  overflow: visible;
  color: var(--line);
}
.confluence .stream { fill: none; stroke: currentColor; stroke-width: 1; }
.confluence .joined { stroke: var(--accent); stroke-width: 1.25; }

/* ---- header -------------------------------------------------------------------------- */
header {
  padding-block: clamp(1.25rem, 3.5vw, 2rem);
}
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .seam {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  background: var(--accent);
  margin-inline: 0.18em;
  transform: translateY(0.08em);
}
.wordmark .synth { font-weight: 400; color: var(--ink-soft); }

nav {
  display: flex;
  gap: 0.25rem 1.5rem;
  flex-wrap: wrap;
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--accent); }
nav a.signin { color: var(--accent-ink); }

/* ---- hero ---------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 6vw, 4rem); }

.eyebrow {
  font-family: var(--f-data);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.5rem;
}

h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
h1 em {
  font-style: normal;
  color: var(--accent);
}

.lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 2rem;
}

.cta {
  display: flex;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 3rem;
}
.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.25rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
}
.strip .big {
  display: block;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.strip .what {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ---- captures of the live application ------------------------------------------------ */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}
.showcase { padding-block: 0 clamp(2rem, 6vw, 4rem); }
.showcase figcaption { margin-top: 0.9rem; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.5rem 2.5rem;
  margin-top: 2rem;
}
.gallery figure { margin: 0; }
.gallery h3 { margin-top: 1rem; }
.gallery figcaption { margin-top: 0.35rem; }

/* ---- sections ------------------------------------------------------------------------ */
section { padding-block: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: 1rem; }

h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 1rem;
  max-width: 24ch;
}

h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

p { max-width: var(--measure); }
p + p { margin-top: 1rem; }

.section-label {
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.metric {
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.75rem;
  display: block;
}

/* ---- the substrate band -------------------------------------------------------------- */
.band {
  background: var(--deep);
  color: var(--deep-ink);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.band .section-label { color: var(--deep-muted); border-color: var(--deep-line); }
.band h2 { color: var(--deep-ink); }
.band h3 { color: var(--deep-ink); }
.band p { color: var(--deep-muted); }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.5rem 4rem;
  margin-top: 2rem;
}

.counts {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.counts th {
  text-align: left;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--line);
}
.counts th:last-child, .counts td:last-child { text-align: right; white-space: nowrap; }
.counts td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.counts td:first-child {
  font-family: var(--f-body);
  font-size: 0.98rem;
  padding-right: 1rem;
}
.counts td:first-child small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}
.counts .n { color: var(--ink); font-weight: 500; }
.counts tr:last-child td { border-bottom: none; }
.band .counts th { color: var(--deep-muted); border-bottom-color: var(--deep-line); }
.band .counts td { border-bottom-color: var(--deep-line); }
.band .counts td:first-child small { color: var(--deep-muted); }
.band .counts .n { color: var(--deep-ink); }

.footnote {
  font-size: 0.85rem;
  color: var(--deep-muted);
  margin-top: 1.25rem;
  max-width: var(--measure);
}

/* ---- join diagram -------------------------------------------------------------------- */
.join-figure {
  margin: 2.5rem 0 0;
  overflow-x: auto;
}
.join-figure svg { display: block; min-width: 30rem; width: 100%; height: auto; }
.join-figure text {
  font-family: var(--f-data);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.join-figure .node { fill: none; stroke: var(--line); stroke-width: 1; }
.join-figure .edge { fill: none; stroke: var(--line); stroke-width: 1; }
.join-figure .edge-live { stroke: var(--accent); stroke-width: 1.25; }
.join-figure .hub { fill: var(--accent); }
.join-figure .hub-label { fill: var(--ink); font-weight: 700; }
figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1rem;
  max-width: var(--measure);
}

/* ---- evidence layers ----------------------------------------------------------------- */
.layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.layers > div {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.layers p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.layers .metric { margin-top: 0.9rem; }
.layers h3 .k {
  font-family: var(--f-data);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 0.35rem;
}

/* ---- ordered flow (a real sequence, so it is numbered) ------------------------------- */
.flow {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.flow li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.flow li:first-child { border-top: 1px solid var(--line); }
.flow .step {
  font-family: var(--f-data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  padding-top: 0.28rem;
}
.flow p { margin: 0; color: var(--ink-soft); }
.band .flow li { border-top-color: var(--deep-line); }
.band .flow p { color: var(--deep-muted); }

/* ---- claim grid ---------------------------------------------------------------------- */
.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2rem;
}
.claims.four { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem 2rem; }
.claims > div { padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.claims p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.band .claims > div { border-top-color: var(--deep-ink); }
.band .claims p { color: var(--deep-muted); }
.band .metric { color: var(--deep-muted); }

/* ---- the computed-evidence rule ------------------------------------------------------ */
.rule {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  max-width: 40rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.rule strong { color: var(--ink); font-weight: 600; }

/* ---- contact ------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  font-family: var(--f-data);
  font-size: 0.9rem;
}
.contact dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.contact dd { margin: 0; color: var(--ink); }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

footer {
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 7vw, 5rem);
  font-family: var(--f-data);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: no-preference) {
  .confluence .joined {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: draw 1.1s ease-out forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* ---- subpage header ------------------------------------------------------------------- */
.crumb {
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.page-title { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem); }
.page-title h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); max-width: 18ch; }
.more {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--f-data);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}
.more:hover { color: var(--accent); }
.band .more { color: var(--accent-ink); }

/* ---- the identity figure: what the sources call one target, and what it joins to ------ */
.idmap {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}
.idmap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.idmap li {
  font-family: var(--f-data);
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
}
.idmap li .src { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }
.idmap li .id { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idmap .joins li { border: none; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: none; padding-inline: 0; }
.idmap .joins li .n { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.idmap .joins li .what { color: var(--ink-soft); font-family: var(--f-body); font-size: 0.92rem; }
.idmap .hub {
  text-align: center;
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.idmap .hub .fid {
  display: block;
  margin: 0.4rem auto 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}
.idmap .hub .name { display: block; margin-top: 0.4rem; font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--ink-soft); }
.idmap .hub .arrow { display: block; margin: 0.6rem auto 0; width: 100%; color: var(--accent); }
.idmap .col-label {
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
@media (max-width: 44rem) {
  .idmap { grid-template-columns: 1fr; }
  .idmap .hub { padding-block: 0.5rem; }
}

/* ---- the drug-discovery task network ------------------------------------------------- */
.htn { margin: 2.5rem 0 0; overflow-x: auto; }
.htn svg { display: block; min-width: 42rem; width: 100%; height: auto; }
.htn text { font-family: var(--f-data); font-size: 10px; fill: var(--ink-soft); }
.htn .phase { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.htn .phase-title { font-family: var(--f-display); font-size: 12px; font-weight: 600; fill: var(--ink); }
.htn .task { fill: var(--muted); font-size: 9.5px; }
.htn .gate { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.htn .gate-label { fill: var(--accent-ink); font-size: 9px; letter-spacing: 0.06em; }
.htn .flow-line { stroke: var(--line); stroke-width: 1; }
.band .htn text { fill: var(--deep-muted); }
.band .htn .phase { fill: var(--deep); stroke: var(--deep-line); }
.band .htn .phase-title { fill: var(--deep-ink); }

/* ---- who we are looking for ----------------------------------------------------------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.partners > div {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.partners h3 { margin: 0; }
.partners .k {
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.partners p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.partners dl { margin: 0.25rem 0 0; font-size: 0.92rem; }
.partners dt { font-weight: 600; color: var(--ink); margin-top: 0.6rem; }
.partners dd { margin: 0.15rem 0 0; color: var(--ink-soft); }
.partners .btn { align-self: flex-start; margin-top: auto; }

/* ---- method list (models page) -------------------------------------------------------- */
.methods { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.methods li {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 1rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.methods h3 { margin: 0; }
.methods .k {
  display: block;
  font-family: var(--f-data);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.3rem;
}
.methods p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.methods .metric { margin-top: 0.5rem; }
@media (max-width: 40rem) { .methods li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---- next-step links at the foot of a subpage ---------------------------------------- */
.next { display: flex; gap: 1rem 2.5rem; flex-wrap: wrap; margin-top: 2rem; }

/* the partner cards sit on the dark band */
.band .partners > div { border-color: var(--deep-line); }
.band .partners p, .band .partners dd { color: var(--deep-muted); }
.band .partners dt { color: var(--deep-ink); }
.band .partners .btn { border-color: var(--deep-ink); color: var(--deep-ink); }
.band .partners .btn:hover { border-color: var(--accent); color: var(--accent); }
.band .lede, .band figcaption { color: var(--deep-muted); }
@media (max-width: 44rem) {
  .idmap .hub .arrow { width: 3rem; transform: rotate(90deg); margin-top: 1rem; }
}

/* ---- click-to-enlarge --------------------------------------------------------------- */
img.shot.zoomable { cursor: zoom-in; }
img.shot.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  display: none;
  place-items: center;
  color: var(--deep-ink);
  background: rgba(10, 7, 4, 0.92);
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(10, 7, 4, 0.9); }
.lightbox img {
  display: block;
  max-width: min(96vw, 1920px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
.lightbox .cap {
  margin: 0.9rem auto 0;
  max-width: 60ch;
  padding-inline: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--deep-muted);
}
.lightbox .close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--deep-line);
  border-radius: 50%;
  background: var(--deep);
  color: var(--deep-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox .close:hover { border-color: var(--accent); color: var(--accent); }