/* ============================================================
   Oddmind for Delcath — shared design system
   Editorial-Swiss on warm white, with a per-stage color spine.

   Type roles are fixed:
     IBM Plex Sans  — display, labels, UI, navigation
     Newsreader     — prose and pull statements only
     IBM Plex Mono  — real figures and annotations only, never decoration

   The pathway color spine encodes the argument, not decoration.
   Each hand-off owns a hue; the seam is the alarm; the certified
   center is the brand indigo (the destination):
     01 detect  teal   →  02 treat  green  →  03 surveil  amber
     →  [ the seam: rust ]  →  04 certified center: indigo
   ============================================================ */

:root {
  --paper:      #faf9f6;
  --paper-2:    #f2f0ea;      /* recessed band */
  --ink:        #1a1a1a;
  --ink-2:      #55524c;      /* 7.0:1 on paper, safe for body */
  --ink-3:      #6f6b63;      /* 4.9:1, labels only */
  --rule:       #d8d5cc;
  --rule-2:     #ebe8e0;      /* faint inner rule */

  --accent:     #3f3e99;      /* Delcath indigo, real brand hex — brand + interactive */
  --accent-dk:  #33327f;      /* hover */

  /* per-stage spine (text-safe on paper) */
  --st1:        #256575;      /* teal   — ophthalmologist, detect */
  --st2:        #2f6446;      /* green  — ocular oncologist, treat primary */
  --st3:        #8f6412;      /* amber  — medical oncologist, liver surveillance (gold; lightened for CVD separation) */
  --seam:       #992d1e;      /* rust   — the seam, the alarm (deepened + reddened for CVD separation) */
  --st4:        #3f3e99;      /* indigo — certified center, HEPZATO */
  --accent-2:   #2c7183;      /* resolved teal: cleared / on-pace status (not a pathway stage) */

  /* pale zone washes (component differentiation) */
  --st1-wash:   #eef4f5;
  --st2-wash:   #eef4f0;
  --st3-wash:   #f7f1e6;
  --seam-wash:  #f8ece9;
  --st4-wash:   #edecf6;

  --flag:       #992d1e;      /* stalled / attention == seam rust */

  --gut:        clamp(20px, 4.4vw, 64px);
  --maxw:       1300px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: "Newsreader", Georgia, serif; font-optical-sizing: auto; }
.mono  { font-family: "IBM Plex Mono", ui-monospace, monospace; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sheet { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---- Masthead ------------------------------------------------ */
.masthead {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 16px 0 14px; border-bottom: 2px solid var(--ink);
}
.masthead.sticky { position: sticky; top: 0; z-index: 40; background: var(--paper); }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--ink-2); font-weight: 400; }
.masthead nav { display: flex; gap: 22px; align-items: center; }
.masthead nav a { font-size: 12.5px; color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.masthead nav a.here { color: var(--accent); font-weight: 500; }
/* small persistent CTA button in the bar */
.navcta { font-size: 12.5px; font-weight: 500; color: var(--paper) !important; background: var(--accent);
  padding: 7px 15px; text-decoration: none !important; white-space: nowrap; }
.navcta:hover { background: var(--accent-dk); }
.navback { font-size: 12.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.navback:hover { color: var(--ink); }

/* ---- Head: flush-left hero + kicker + prominent CTA ---------- */
.head { padding: 40px 0 34px; border-bottom: 1px solid var(--rule); }
.kicker { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 24px; }
.kicker span { font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.01em;
  padding-right: 15px; margin-right: 15px; border-right: 1px solid var(--rule); }
.kicker span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

h1 {
  font-weight: 600;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.92; letter-spacing: -0.045em;
  max-width: 15ch; text-wrap: balance;
}
h1 u { text-decoration: none; color: var(--accent); }

.deck {
  margin-top: 22px; max-width: 56ch;
  font-family: "Newsreader", Georgia, serif; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.44;
  color: var(--ink-2); text-wrap: pretty;
}
.deck b { color: var(--ink); font-weight: 500; }

/* prominent hero CTA (first-screen) */
.herocta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.cta-lg { display: inline-flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--paper); background: var(--accent); padding: 15px 28px; text-decoration: none; }
.cta-lg:hover { background: var(--accent-dk); }
.cta-lg .arw { font-family: "IBM Plex Mono", monospace; font-size: 17px; }
.herocta .note { font-size: 13px; color: var(--ink-2); max-width: 32ch; line-height: 1.42; }

/* ---- Sections ------------------------------------------------ */
section { padding: 56px 0 0; }
h2 {
  font-weight: 600; font-size: clamp(27px, 3.5vw, 42px);
  line-height: 1.04; letter-spacing: -0.034em; max-width: 20ch; text-wrap: balance;
}
h3 { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.seclab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  font-size: 11.5px; color: var(--ink-2);
  padding-bottom: 11px; border-bottom: 1px solid var(--ink); margin-bottom: 26px;
}

.prose { font-family: "Newsreader", Georgia, serif; font-optical-sizing: auto;
  font-size: 19px; line-height: 1.56; max-width: 62ch; color: var(--ink); }
.prose p + p { margin-top: 1.02em; }
.prose p { text-wrap: pretty; }
.prose b { font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 0.5px; }

.lede { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1.42;
  color: var(--ink-2); max-width: 58ch; margin-top: 14px; text-wrap: pretty; }

.src { font-family: "IBM Plex Sans", sans-serif; font-size: 11.5px; color: var(--accent);
  text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--rule);
  margin-left: 7px; }
.src:hover { border-bottom-color: var(--accent); }

/* ---- The pathway diagram (hero object), color-coded ---------- */
.diagram { padding: 32px 0 0; }
.dlab { display: flex; justify-content: space-between; gap: 20px;
  font-size: 11.5px; color: var(--ink-2); padding-bottom: 12px; }
.dlab .seamnote { color: var(--seam); }

.track {
  display: grid; grid-template-columns: 1fr 1fr 1fr 172px 1fr;
  border-bottom: 1px solid var(--ink);
}
.st { position: relative; padding: 20px 22px 20px 0; border-right: 1px solid var(--rule);
  border-top: 3px solid var(--bar, var(--rule)); display: flex; flex-direction: column; }
.st .k { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--bar, var(--ink-2)); }
.st .t { font-size: 21px; font-weight: 600; letter-spacing: -0.022em; margin-top: 9px; line-height: 1.1; }
.st .s { font-family: "Newsreader", serif; font-size: 15px; color: var(--ink-2); margin-top: 8px; line-height: 1.34; }
.st .w { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--ink-3);
  margin-top: auto; padding-top: 20px; }
.st .w b { color: var(--bar, var(--ink-2)); font-weight: 500; }
/* per-stage hue assignment */
.st.s1 { --bar: var(--st1); } .st.s1 { background: linear-gradient(var(--st1-wash), transparent 78px); }
.st.s2 { --bar: var(--st2); } .st.s2 { background: linear-gradient(var(--st2-wash), transparent 78px); }
.st.s3 { --bar: var(--st3); } .st.s3 { background: linear-gradient(var(--st3-wash), transparent 78px); }
.st.final { --bar: var(--st4); padding-left: 22px; border-right: 0;
  background: linear-gradient(var(--st4-wash), transparent 78px); }
.st.final .t { color: var(--st4); }

/* the seam: rust dashed rails + wash, empty on purpose */
.void { position: relative; border-top: 3px solid var(--seam); border-right: 1px solid var(--rule);
  background: linear-gradient(var(--seam-wash), transparent 120px); }
.void::before, .void::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--seam) 0 3px, transparent 3px 8px);
}
.void::before { left: 0; } .void::after { right: 0; }
.voidlab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap; font-size: 11.5px; color: var(--seam); }
.voidlab b { display: block; font-family: "Newsreader", serif; font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--seam); letter-spacing: -0.01em; margin-bottom: 3px; }

/* dimension line beneath the void */
.dim { display: grid; grid-template-columns: 1fr 1fr 1fr 172px 1fr; padding-top: 9px; }
.dimspan { grid-column: 4; position: relative; height: 22px; }
.dimspan::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--seam); }
.dimspan > span.lab { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--seam);
  background: var(--paper); padding: 0 6px; }
.tick { position: absolute; top: 2px; width: 1px; height: 9px; background: var(--seam); }
.tick.l { left: 0; } .tick.r { right: 0; }

/* ---- Ledger: a claim per row, figure set left --------------- */
.ledger { border-top: 1px solid var(--ink); }
.ledger .row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 32px;
  padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ledger .v { font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.038em; line-height: 1; }
.ledger .v.acc { color: var(--accent); }
.ledger .d { font-family: "Newsreader", serif; font-size: 17px; line-height: 1.48;
  color: var(--ink-2); max-width: 58ch; }
.ledger .d b { color: var(--ink); font-weight: 600; }

/* ---- Failure modes: numbered, rule-separated ---------------- */
.modes { border-top: 1px solid var(--ink); }
.modes .m { display: grid; grid-template-columns: 66px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--rule); }
.modes .m .k { font-family: "IBM Plex Mono", monospace; font-size: 11px; padding-top: 4px; color: var(--seam); }
.modes .m h3 { font-size: 18px; }
.modes .m p { font-family: "Newsreader", serif; font-size: 16.5px; line-height: 1.48;
  color: var(--ink-2); margin-top: 5px; max-width: 60ch; }

/* ---- Pull statement ----------------------------------------- */
.pull { margin: 46px 0 0; padding: 32px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.pull p { font-family: "Newsreader", serif; font-size: clamp(25px, 3.7vw, 40px);
  line-height: 1.16; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
.pull em { font-style: italic; color: var(--seam); }
.pull .sub { font-family: "IBM Plex Sans", sans-serif; font-size: 14px; color: var(--ink-2);
  margin-top: 16px; max-width: 56ch; line-height: 1.5; }

/* ---- Prose + evidence sidenotes ----------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; margin-top: 28px; }
.sidenotes { padding-top: 4px; }
.sn { border-top: 2px solid var(--ink); padding-top: 12px; }
.sn + .sn { margin-top: 22px; }
.sn .snv { font-weight: 600; font-size: 30px; letter-spacing: -0.04em; line-height: 1; }
.sn .snlab { font-size: 12px; font-weight: 600; color: var(--accent); }
.sn p { font-size: 13px; line-height: 1.48; color: var(--ink-2); margin-top: 8px; }
.sn .src { margin-left: 0; margin-right: 8px; display: inline-block; margin-top: 8px; }

/* ---- Roadmap ------------------------------------------------- */
.roadmap { list-style: none; padding: 0; margin-top: 26px; border-top: 1px solid var(--ink); }
.roadmap li { border-bottom: 1px solid var(--rule); padding: 13px 0 13px 22px; position: relative;
  font-size: 15px; color: var(--ink-2); max-width: 74ch; }
.roadmap li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px;
  background: var(--accent); }

/* ---- Calls to action ---------------------------------------- */
.ctablock { margin-top: 32px; padding: 26px 30px; background: var(--st4-wash);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ctablock .ctacopy { max-width: 46ch; }
.ctablock .ctacopy strong { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.ctablock .ctacopy p { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.cta { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--paper); background: var(--accent);
  padding: 14px 26px; text-decoration: none; }
.cta:hover { background: var(--accent-dk); }
.cta .arw { font-family: "IBM Plex Mono", monospace; }

/* ---- Footer -------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); margin-top: 56px; padding: 18px 0 60px;
  font-size: 11.5px; color: var(--ink-2); }
.foot p { max-width: 78ch; line-height: 1.55; }

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 940px) {
  .head { padding: 30px 0 26px; }
  .track, .dim { grid-template-columns: 1fr; }
  .st { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .st.final { padding-left: 0; }
  .void { min-height: 96px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .dim { display: none; }
  .ledger .row { grid-template-columns: 1fr; gap: 6px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .sidenotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .masthead nav .navlink { display: none; }
}
@media (max-width: 560px) {
  .prose { font-size: 18px; }
  .sidenotes { grid-template-columns: 1fr; }
  .ctablock { padding: 22px; }
}

@media print {
  body { background: #fff; }
  .masthead.sticky { position: static; }
  .cta, .cta-lg, .navcta { display: none; }
}