:root {
  --paper: #fefdfb; --ink: #252925; --secondary: #555c54; --muted: #6f766b;
  --hairline: #dedfd8; --disease: #b87770; --drug: #668c76;
  --page-inset: clamp(30px, 6.3vw, 110px); --story-inset: clamp(30px, 7.7vw, 138px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 150px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'EB Garamond', Georgia, serif; font-style: normal; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 7px; }
::selection { background: #e4e8dd; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 20; background: var(--paper); padding: 12px 18px; border: 1px solid var(--ink); }
.skip-link:focus { top: 16px; }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 28px var(--page-inset); background: linear-gradient(var(--paper) 72%, rgba(254,253,251,0)); }
.brand { --brand-mark: 82px; display: flex; align-items: center; gap: 6px; }
.brand img { display: block; width: var(--brand-mark); height: var(--brand-mark); margin-right: calc(var(--brand-mark) * -.139); object-fit: contain; mix-blend-mode: multiply; }
.wordmark { font-size: 39px; letter-spacing: -.8px; line-height: .85; }
.wordmark span { display: block; }
.site-header nav { --nav-gap: clamp(26px, 3.1vw, 50px); display: flex; align-items: center; gap: var(--nav-gap); font-size: 20px; line-height: 1; transform: translateY(8px); }
.site-header nav a { padding: 8px 0; position: relative; }
.site-header nav a + a::before { content: ''; position: absolute; left: calc(var(--nav-gap) / -2); top: 50%; width: 1px; height: .65em; background: #c4c8bf; transform: translate(-50%, -50%); pointer-events: none; }
.site-header nav a::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.site-header nav a:hover::after, .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-toggle { display: none; }
/* The ordinary document is also the no-JavaScript and reduced-motion layout. */
.story { padding-top: 175px; }
.stage { position: relative; }
.story-copy { padding: 30px var(--story-inset); }
.story-frame { max-width: 640px; margin-bottom: 64px; }
.story-frame h1, .story-frame h2 { margin: 0; font-weight: 400; font-size: clamp(36px, 3.7vw, 61px); letter-spacing: -.035em; line-height: 1.12; }
.story-frame h1 { font-size: clamp(44px, 4.5vw, 73px); line-height: 1.06; }
.knowledge-graph { position: relative; margin: 0 auto; width: min(710px, 96%); height: 565px; }
.graph-surface { position: absolute; inset: 0; }
.graph-surface canvas, .graph-surface svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
/* All nodes and edges, including the highlighted ones, share this one surface. */
.graph-surface canvas { mask-image: radial-gradient(ellipse 53% 49% at 50% 50%, #000 55%, rgba(0,0,0,.7) 77%, transparent 100%); }
.graph-ready .fallback-network { display: none; }
.evidence-edge { fill: none; stroke: #6e7970; stroke-width: 1.2; stroke-linecap: round; }
.hypothesis-edge { fill: none; stroke: var(--drug); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1 6; }
.node-label { font-size: 23px; fill: #363f37; text-anchor: middle; }
.node-label-west { text-anchor: end; }
.node-label-east { text-anchor: start; }
.node-label text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.label-clearance { fill: var(--paper); }
#node-a { fill: var(--disease); }
#node-b, #node-c, #node-d, #node-e { fill: var(--ink); }
#node-f { fill: var(--drug); }
.text-link { display: inline-flex; align-items: baseline; gap: 24px; font-size: 21px; padding: 6px 0; border-bottom: 1px solid #aaafa3; }
.text-link span { display: inline-block; transition: transform .2s ease; font-size: 19px; }
.text-link:hover span { transform: translate(2px, -2px); }
.closing-frame { width: min(64%, 1120px); margin: 110px auto 48px; }
.closing-frame h2 { margin: 0; font-size: clamp(30px, 3vw, 48px); font-weight: 400; line-height: 1.18; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.closing-lead { display: block; white-space: nowrap; }
.closing-rest { display: block; }
/* Native sticky positioning. Wheel and touch events are never intercepted. */
html.enhanced .story { height: 1080svh; padding-top: 0; }
html.enhanced .stage { height: 100svh; min-height: 550px; position: sticky; top: 0; overflow: hidden; }
html.enhanced .story-copy { position: absolute; left: var(--story-inset); top: 48.5%; width: 35%; max-width: 530px; padding: 0; z-index: 2; }
html.enhanced .story-frame { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; opacity: 0; transform: translateY(-50%); pointer-events: none; will-change: opacity, transform; }
html.enhanced .story-frame:first-child { opacity: 1; }
html.enhanced .story-frame.is-active { pointer-events: auto; }
html.enhanced .knowledge-graph { position: absolute; width: 48%; height: 66%; top: 17%; right: 3.3%; margin: 0; }
html.enhanced .closing-frame { position: fixed; left: 50%; top: 50%; width: min(64%, 1120px); margin: 0; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; will-change: opacity, transform; }
html.enhanced .closing-frame:not([inert]) { pointer-events: auto; }
/* The only footer is in normal document flow after the complete story. */
.site-footer { margin: 0 var(--page-inset); padding: 30px 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 18px; color: var(--secondary); }
.social-links { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.social-links a { display: inline-block; padding: 5px 0; }
.social-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Platform and Programs use the same type and header on separate pages. */
.content-page { min-height: 100svh; display: flex; flex-direction: column; }
.content-page main { flex: 1; padding-top: 210px; }
.detail-section { margin: 0 var(--story-inset); padding: 40px 0 100px; }
.section-label { font-size: 19px; color: var(--muted); margin-bottom: 38px; }
.section-content { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.section-content h1 { font-size: clamp(38px, 3.6vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; margin: 0; }
.section-body { padding-top: 2px; max-width: 455px; }
.section-body p { font-size: 23px; line-height: 1.43; margin: 0 0 20px; color: var(--secondary); }
.section-body .text-link { margin-top: 10px; }
@media (min-width: 1700px) { html.enhanced .knowledge-graph { right: 5%; width: 46%; } }
@media (max-width: 1000px) and (min-width: 701px) {
  :root { --story-inset: 5.5vw; }
  html.enhanced .story-copy { width: 37%; }
  html.enhanced .knowledge-graph { right: 2.5%; width: 50%; }
  .story-frame h1 { font-size: 45px; }
  .story-frame h2 { font-size: 37px; }
}
@media (max-width: 900px) { .closing-lead { white-space: normal; } }
@media (max-width: 700px) {
  :root { --page-inset: 26px; --story-inset: 28px; }
  html { scroll-padding-top: 145px; }
  /* The logo image includes 16px of blank space before the visible mark at this size. */
  .site-header { --logo-art-inset: 16px; padding: 22px var(--page-inset) 18px; flex-wrap: wrap; row-gap: 14px; }
  .brand { --brand-mark: 57px; gap: 4px; }
  .wordmark { font-size: 28px; }
  .site-header nav { --nav-gap: 22px; font-size: 17px; }
  .site-header.nav-ready { flex-wrap: nowrap; }
  .nav-ready .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .menu-toggle span { width: 23px; height: 1px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .site-header.nav-ready nav { display: none; position: absolute; top: 100%; left: 0; right: 0; transform: none; padding: 6px var(--page-inset) 24px calc(var(--page-inset) + var(--logo-art-inset)); background: var(--paper); border-bottom: 1px solid var(--hairline); flex-direction: column; align-items: stretch; gap: 0; font-size: 25px; text-align: left; }
  .site-header.menu-open { background: var(--paper); }
  .site-header.menu-open nav { display: flex; }
  .site-header.nav-ready nav a { padding: 14px 0; min-height: 52px; }
  .site-header.nav-ready nav a::before, .site-header.nav-ready nav a::after { display: none; }
  .site-header.nav-ready nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  html.enhanced .story { height: 933svh; }
  html.enhanced .stage { min-height: 0; }
  html.enhanced .story-copy { top: 28%; left: 50%; transform: translateX(-50%); width: calc(100% - var(--story-inset) * 2); max-width: 500px; }
  .story-frame { text-align: center; margin-inline: auto; }
  .story-frame h1, .story-frame h2 { text-wrap: balance; margin-inline: auto; }
  .story-frame h1 { font-size: clamp(30px, 7.4vw, 38px); line-height: 1.12; }
  .story-frame h1 br { display: none; }
  .story-frame h2 { font-size: clamp(25px, 6.5vw, 32px); max-width: 460px; line-height: 1.16; }
  .desktop-break { display: none; }
  html.enhanced .knowledge-graph { width: 96%; right: 2%; height: 49%; top: 44%; }
  .node-label { font-size: 32px; }
  .closing-frame, html.enhanced .closing-frame { width: calc(100% - var(--story-inset) * 2); }
  html.enhanced .closing-frame { left: 50%; top: 50%; }
  .closing-frame h2 { font-size: clamp(25px, 6.5vw, 32px); line-height: 1.2; }
  .site-footer { font-size: 16px; padding: 24px 0; gap: 12px; }
  .social-links { gap: 10px; }
  /* Larger tap area without changing the footer's visible layout. */
  .social-links a { padding: 12px 8px; margin: -7px -8px; }
  .content-page main { padding-top: 170px; }
  .detail-section { padding: 35px 0 65px; }
  .section-label { margin-bottom: 28px; }
  .section-content { grid-template-columns: 1fr; gap: 30px; }
  .section-content h1 { font-size: 41px; }
  .section-body p { font-size: 21px; }
}
@media (max-width: 460px) {
  .site-header:not(.nav-ready) nav { width: 100%; justify-content: flex-end; transform: none; }
}
@media (max-width: 360px) {
  .site-header { padding-top: 17px; row-gap: 9px; }
  html.enhanced .story-copy { top: 30%; }
  html.enhanced .knowledge-graph { top: 47%; height: 46%; }
  .site-footer { font-size: 14px; }
  .social-links { gap: 7px; }
}
@media (max-height: 550px) and (min-width: 701px) {
  .site-header { padding-top: 16px; }
  .brand { --brand-mark: 60px; }
  .wordmark { font-size: 30px; }
  html.enhanced .stage { min-height: 400px; }
  .story-frame h1 { font-size: 42px; }
  .story-frame h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .story-copy { max-width: 900px; }
  .story-frame h1 br { display: none; }
}