/* ============================================================================
   DR. BHARAT KWATRA — DESIGN SYSTEM  ·  "ONCOPRINT"

   The visual language is borrowed from the artefact precision oncology
   actually uses: the oncoprint grid. Cool paper ground, expanded grotesque
   display, monospace for data, and a categorical palette taken from real
   variant-annotation conventions rather than chosen for decoration.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Ground ──────────────────────────────────────────────────────────────
     Warm bone for reading, deep wine for identity and decision. The wine is
     the oxblood from the mark, darkened so the mark itself can sit on it. */
  --wine:         #57202E;
  --wine-lift:    #6B2E3C;
  --wine-line:    #7C4150;

  --paper:        #F8F3EF;   /* bone */
  --paper-2:      #F1E9E4;
  --paper-3:      #E9DED8;
  --surface:      #FFFDFC;

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  --ink:          #1C1215;
  --ink-2:        #4A383D;
  --ink-muted:    #6A575C;   /* 6.1:1 on bone */
  --ink-faint:    #715C62;   /* 5.6:1 on bone, 4.7:1 on --paper-3 */

  /* On wine */
  --on-wine:      #F8F3EF;   /* 14.3:1 */
  --on-wine-2:    #E3D0D3;   /* 10.0:1 */
  --on-wine-3:    #C9AEB4;   /* 5.0:1 on --wine-lift, 6.6:1 on --wine */

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --brand:        #6B1D28;
  --brand-2:      #8C2733;
  --brand-wash:   #F6EAEA;
  --brass:        #DDBE72;   /* 5.7:1 on --wine-lift, 7.1:1 on --wine */

  /* ── Variant annotation palette ───────────────────────────────────────────
     Functional, not decorative: each hue names an alteration class. Tuned to
     hold up against both bone and wine. */
  --v-missense:   #2E8B57;
  --v-trunc:      #2A1A1E;
  --v-amp:        #C0392B;
  --v-del:        #2563A8;
  --v-fusion:     #7D3C98;
  --v-splice:     #B8701A;
  --v-none:       #E4D8D2;
  --v-none-wine:  #5C2733;

  /* ── Lines ────────────────────────────────────────────────────────────── */
  --rule:         #E3D7D1;
  --rule-2:       #CBB8B2;
  --rule-ink:     #1C1215;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fraunces is variable: soften the terminals and let the wonk show. */
  --wonk: 'SOFT' 60, 'WONK' 1;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;  --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  --measure: 66ch;
  --shell: 1280px;
  --shell-narrow: 760px;

  --ease: cubic-bezier(.2,.65,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 130ms;
  --dur: 240ms;
  --dur-slow: 560ms;

  --lift-1: 0 1px 2px rgba(28,18,21,.05);
  --lift-2: 0 2px 4px rgba(28,18,21,.05), 0 10px 28px rgba(28,18,21,.07);
  --lift-3: 0 14px 44px rgba(28,18,21,.16);

  --nav-h: 74px;
  --r: 3px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }
@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: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1,'liga' 1,'cv05' 1;
}
img,svg,video { max-width:100%; height:auto; display:block; }
hr { border:0; border-top:1px solid var(--rule); margin: var(--s-7) 0; }

/* --- Type ----------------------------------------------------------------- */
h1,h2,h3,h4,h5 {
  font-family: var(--f-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.16;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.t-display {
  font-family: var(--f-display);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: clamp(2rem, 1rem + 3.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  overflow-wrap: break-word;
}
/* Size against the column it sits in: the hero goes two-column at 1040px,
   so viewport units keep growing while the available width shrinks. */
@supports (container-type: inline-size) {
  .hero-copy { container-type: inline-size; }
  .hero-copy .t-display { font-size: clamp(2rem, 5.8cqw, 3.3rem); }
}
.t-h1 { font-size: clamp(1.8rem,1.3rem+2vw,2.6rem);     line-height:1.1;  letter-spacing:-.018em; font-weight:600; }
.t-h2 { font-size: clamp(1.45rem,1.18rem+1.2vw,2rem);   line-height:1.16; letter-spacing:-.014em; }
.t-h3 { font-size: clamp(1.18rem,1.05rem+.55vw,1.42rem);line-height:1.26; letter-spacing:-.01em; }
.t-h4 { font-size: clamp(1.02rem,.97rem+.24vw,1.12rem); line-height:1.38; letter-spacing:-.006em; font-weight:600; }

.t-lead {
  font-size: clamp(1.08rem,1rem+.5vw,1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  font-weight: 400;
}
.t-body { max-width: var(--measure); color: var(--ink-2); }
.t-body p { margin:0; }
.t-body p + p { margin-top: 1.05em; }

/* Long-form reading column */
.prose-editorial {
  font-size: 1.06rem; line-height: 1.72; color: var(--ink-2);
  max-width: 66ch;
}
.prose-editorial p { margin: 0 0 1.2em; }
.prose-editorial h2 {
  font-size: clamp(1.4rem,1.18rem+.9vw,1.85rem);
  margin: 2.5em 0 .65em; color: var(--ink);
  padding-top: .8em; border-top: 1px solid var(--rule);
}
.prose-editorial h3 { font-size:1.2rem; margin:1.9em 0 .5em; color:var(--ink); }
.prose-editorial ul,.prose-editorial ol { margin:0 0 1.3em; padding-left:1.15em; }
.prose-editorial li { margin-bottom:.45em; }
.prose-editorial li::marker { color: var(--brand); }
.prose-editorial strong { font-weight:600; color:var(--ink); }
.prose-editorial a { color: var(--brand); text-underline-offset:3px; }
.prose-editorial blockquote {
  margin:2em 0; padding:0 0 0 1.3em;
  border-left:2px solid var(--brand); color:var(--ink);
}

/* Mono utility register — labels, data, identifiers */
.eyebrow {
  display:block;
  font-family: var(--f-mono);
  font-size:.688rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand);
}
.eyebrow-muted { color: var(--ink-faint); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.numeral {
  font-family: var(--f-mono); font-size:.719rem; font-weight:500;
  letter-spacing:.1em; color: var(--brand); font-variant-numeric: tabular-nums;
}

/* --- Links ---------------------------------------------------------------- */
a { color: inherit; text-decoration: none; }
.link-u {
  color: var(--brand); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.link-u:hover { color: var(--brand-2); }
.link-e {
  background-image: linear-gradient(var(--brand),var(--brand));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out);
}
.link-e:hover, a:hover .link-e { background-size: 100% 1.5px; }

/* --- Focus ---------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r);
}
.skip-link {
  position:absolute; left:var(--s-4); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-size:.875rem; font-weight:600;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { top: var(--s-4); }

/* --- Layout --------------------------------------------------------------- */
.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline: clamp(1.15rem,3.5vw,3rem); }
.shell-narrow { width:100%; max-width:var(--shell-narrow); margin-inline:auto; padding-inline: clamp(1.15rem,3.5vw,3rem); }
.section { padding-block: clamp(3.25rem,6vw,6.5rem); }
.section-tight { padding-block: clamp(2.25rem,4vw,4rem); }
.rule-top { border-top:1px solid var(--rule); }
.band-stone { background: var(--paper-2); }
.band-deep  { background: var(--paper-3); }

/* Wine: identity and decision moments. Everything inside inverts. */
.band-ink {
  background: var(--wine);
  color: var(--on-wine-2);
  --rule: var(--wine-line);
  --rule-2: #8E5261;
  --surface: var(--wine-lift);
  --ink: var(--on-wine);
  --ink-2: var(--on-wine-2);
  --ink-muted: var(--on-wine-2);
  --ink-faint: var(--on-wine-3);
  --brand: var(--brass);
  --v-none: var(--v-none-wine);
}
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink h4 { color: var(--on-wine); }
.band-ink .t-body,.band-ink .t-lead { color: var(--on-wine-2); }
.band-ink .eyebrow { color: var(--brass); }
.band-ink .card { background: var(--wine-lift); border-color: var(--wine-line); }
.band-ink .chip { background: transparent; border-color: #8E5261; color: var(--on-wine-2); }
.band-ink .card-flat { border-top-color: var(--wine-line); }
/* --ink is remapped to near-white inside this band, so anything using it as a
   background must be pinned explicitly or it renders light-on-light. */
.band-ink .btn-invert,.hero .btn-invert { background: var(--on-wine); color: var(--wine); border-color: var(--on-wine); }
.band-ink .btn-invert:hover,.hero .btn-invert:hover { background: transparent; color: var(--on-wine); border-color: var(--on-wine); }
.band-ink .chip-solid,.hero .chip-solid { background: var(--on-wine); color: var(--wine); border-color: var(--on-wine); }
.band-ink .filter-btn[aria-pressed="true"],.hero .filter-btn[aria-pressed="true"] {
  background: var(--on-wine); color: var(--wine); border-color: var(--on-wine);
}
.band-ink .pillar,.hero .pillar { border-top-color: var(--brass); }
.band-ink .btn-primary,.hero .btn-primary { background: var(--brass); color: #3A1018; border-color: var(--brass); }
.band-ink .btn-primary:hover,.hero .btn-primary:hover { background:#EBD094; border-color:#EBD094; }
.band-ink .tier-badge,.hero .tier-badge { background: var(--brass); color:#3A1018; }
.band-ink .path-step,.hero .path-step { background: var(--wine-lift); border-top-color: var(--brass); }
.band-ink .bm,.hero .bm { background: var(--wine-lift); }
.band-ink .bm-dot,.hero .bm-dot { background: var(--brass); }
.band-ink .fig,.hero .fig { background: var(--wine-lift); border-color: var(--wine-line); }
.band-ink .tier,.hero .tier { background: var(--wine-lift); }
.band-ink .tier-label,.hero .tier-label { color: var(--on-wine); }
.band-ink .tier-bar,.hero .tier-bar { background: var(--wine); }
.band-ink .tier-bar i,.hero .tier-bar i { background: var(--brass); }

/* Section head — label column left, content right */
.sec-head { display:grid; grid-template-columns:1fr; gap:var(--s-3); margin-bottom: clamp(1.75rem,3.2vw,3rem); }
@media (min-width:900px) { .sec-head { grid-template-columns:180px minmax(0,1fr); gap:var(--s-6); } }
.sec-intro { max-width:62ch; font-size:1rem; line-height:1.65; color:var(--ink-2); }

/* --- Masthead ------------------------------------------------------------- */
.masthead {
  position:sticky; top:0; z-index:90;
  background: rgba(248,243,239,.93);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.masthead-inner { min-height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.masthead-actions { display:flex; align-items:center; gap:.4rem; flex:none; }
.cta-word { display:none; }
@media (min-width:1400px) { .cta-word { display:inline; } }

.wordmark { display:flex; align-items:center; gap:.7rem; padding-block:.45rem; }
.wordmark-logo { width:46px; height:auto; flex:none; }
.wordmark-text { display:flex; flex-direction:column; line-height:1.05; }
.wordmark-name {
  font-family:var(--f-display); font-weight:800;
  font-size:1.06rem; letter-spacing:-.018em; color:var(--ink);
}
.wordmark-role {
  font-family:var(--f-mono); font-size:.563rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:2px; white-space:nowrap;
}

.nav-desk { display:none; align-items:center; gap:0; flex-wrap:nowrap; min-width:0; margin-inline:auto; }
@media (min-width:1120px) { .nav-desk { display:flex; } }
.nav-link {
  display:inline-flex; align-items:center; gap:.2rem;
  font-size:.781rem; font-weight:500; color:var(--ink-2);
  padding:.45rem .4rem; border-radius:var(--r);
  white-space:nowrap; position:relative;
  transition: color var(--dur-fast) var(--ease);
}
@media (min-width:1300px) { .nav-link { font-size:.797rem; padding-inline:.52rem; } }
.nav-link svg { opacity:.45; margin-top:1px; }
/* Underline grows from the left — reads as a data track filling */
.nav-link::after {
  content:''; position:absolute; left:.4rem; right:.4rem; bottom:.15rem; height:1.5px;
  background: var(--brand); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--brand); font-weight:600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link-icon { min-width:44px; min-height:44px; padding:0; justify-content:center; }
.nav-link-icon::after { display:none; }

.nav-group { position:relative; }
.nav-panel {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:310px; background:var(--surface);
  border:1px solid var(--rule); box-shadow:var(--lift-3);
  padding:var(--s-2); display:none; z-index:95;
}
.nav-group:hover > .nav-panel,.nav-group:focus-within > .nav-panel { display:block; }
.nav-panel a {
  display:block; padding:.5rem .65rem; font-size:.844rem; color:var(--ink-2);
  border-left:2px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-panel a:hover { background:var(--paper-2); color:var(--brand); border-left-color:var(--brand); }
.nav-panel a span { display:block; font-size:.75rem; color:var(--ink-faint); margin-top:1px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-mono);
  font-size:.719rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  padding:.85rem 1.35rem; min-height:46px;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; text-align:center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-2); border-color:var(--brand-2); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-ghost:hover { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.btn-invert { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-invert:hover { background:transparent; color:var(--paper); border-color:var(--paper); }
.btn-quiet { background:transparent; color:var(--brand); border-color:transparent; padding-inline:0; min-height:44px; }
.btn-quiet:hover { color:var(--brand-2); }
.btn-wa { background:#1F7A52; color:#fff; border-color:#1F7A52; }
.btn-wa:hover { background:#17603F; border-color:#17603F; }
.btn-sm { padding:.6rem 1rem; min-height:44px; font-size:.656rem; }
.btn[aria-disabled="true"],.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn svg { flex:none; }
.btn .arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.band-ink .btn-ghost { border-color:#3A424E; color:#fff; }
.band-ink .btn-ghost:hover { background:#fff; color:var(--ink); border-color:#fff; }
.band-ink .btn-quiet { color:#E3A7AC; }
.band-ink .btn-quiet:hover { color:#fff; }
.band-ink .btn-wa,.band-ink .btn-wa:hover { color:#fff; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background:var(--surface); border:1px solid var(--rule);
  padding: clamp(1.25rem,2.2vw,1.85rem);
  display:flex; flex-direction:column;
  position:relative;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* A card marks itself with a brand tick on hover, like a selected column */
a.card::before {
  content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition: transform var(--dur) var(--ease-out);
}
a.card:hover::before { transform:scaleY(1); }
a.card:hover,.card-int:hover { border-color:var(--rule-2); box-shadow:var(--lift-2); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  a.card:hover,.card-int:hover { transform: translateY(-2px); }
}
.card-flat { background:transparent; border:0; border-top:1px solid var(--rule); padding:var(--s-5) 0; }
.pillar { border-top:2px solid var(--rule-ink); padding-top:var(--s-4); }

/* --- Chips ---------------------------------------------------------------- */
.chip {
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--f-mono); font-size:.656rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  padding:.28rem .55rem; border:1px solid var(--rule-2); color:var(--ink-muted);
  border-radius:var(--r); white-space:nowrap; background:var(--surface);
}
.chip-accent { border-color:var(--brand); color:var(--brand); background:var(--brand-wash); }
.chip-clinical { border-color:var(--v-missense); color:#1F6B41; background:#EBF5EF; }
.chip-solid { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip-now { border-color:var(--v-missense); color:#1F6B41; background:#EBF5EF; }
.chip-building { border-color:var(--v-splice); color:#8A5412; background:#FBF2E5; }
.chip-future { border-color:var(--rule-2); color:var(--ink-faint); }

/* --- Grids ---------------------------------------------------------------- */
.grid { display:grid; gap: clamp(.85rem,1.6vw,1.4rem); }
.g-2,.g-3,.g-4 { grid-template-columns: repeat(1,minmax(0,1fr)); }
@media (min-width:640px) { .g-2,.g-3,.g-4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px) {
  .g-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

.rail {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,290px);
  gap:var(--s-3); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding-bottom:var(--s-4); scrollbar-width:thin;
}
.rail > * { scroll-snap-align:start; }
.rail::-webkit-scrollbar { height:4px; }
.rail::-webkit-scrollbar-thumb { background:var(--rule-2); }
.rail::-webkit-scrollbar-track { background:var(--paper-3); }
.rail-wrap { position:relative; }
.rail-wrap::after {
  content:''; position:absolute; top:0; right:0; bottom:14px; width:64px;
  background:linear-gradient(to right,transparent,var(--paper-2)); pointer-events:none;
}

/* --- Flow / pathway ------------------------------------------------------- */
.flow { display:grid; gap:0; counter-reset:flow; }
.flow-step {
  position:relative; padding:var(--s-4) 0 var(--s-4) var(--s-7);
  border-left:1px solid var(--rule-2); counter-increment:flow;
}
.flow-step:last-child { border-left-color:transparent; }
.flow-step::before {
  content:counter(flow,decimal-leading-zero);
  position:absolute; left:0; top:var(--s-4); transform:translateX(-50%);
  background:var(--paper); color:var(--brand);
  font-family:var(--f-mono); font-size:.625rem; font-weight:500; letter-spacing:.06em;
  padding:.22rem .38rem; border:1px solid var(--rule-2); border-radius:var(--r);
}
.band-stone .flow-step::before { background:var(--paper-2); }
.band-deep .flow-step::before { background:var(--paper-3); }
.band-ink .flow-step { border-left-color:#2B323C; }
.band-ink .flow-step::before { background:var(--ink); border-color:#3A424E; color:#E3A7AC; }
.flow-step h3 { font-family:var(--f-body); font-size:.938rem; font-weight:600; letter-spacing:0; }
.flow-step p { margin:.28rem 0 0; font-size:.875rem; color:var(--ink-muted); max-width:56ch; }
.band-ink .flow-step p { color:#98A0AC; }

/* --- Timeline ------------------------------------------------------------- */
.tl-item { position:relative; padding:0 0 var(--s-6) var(--s-6); border-left:1px solid var(--rule); }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before {
  content:''; position:absolute; left:0; top:7px; width:7px; height:7px;
  background:var(--brand); transform:translateX(-50%);
}
.tl-date { font-family:var(--f-mono); font-size:.688rem; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }

/* --- Accordion ------------------------------------------------------------ */
.acc { border-top:1px solid var(--rule); }
.acc summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4);
  padding:1.2rem 0; min-height:48px;
  font-weight:500; font-size:1rem; color:var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.acc summary::-webkit-details-marker { display:none; }
.acc summary:hover { color:var(--brand); }
.acc .acc-icon { flex:none; margin-top:3px; transition:transform var(--dur) var(--ease); color:var(--brand); }
.acc[open] .acc-icon { transform:rotate(45deg); }
.acc .acc-body { padding-bottom:1.35rem; color:var(--ink-2); max-width:var(--measure); font-size:.938rem; }
.acc .acc-body p { margin:0 0 .8em; }
.acc .acc-body p:last-child { margin-bottom:0; }

/* --- Forms ---------------------------------------------------------------- */
.field { display:block; margin-bottom:var(--s-5); }
.field-label { display:block; font-size:.813rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.field-req { color:var(--brand); margin-left:2px; }
.field-hint { display:block; font-size:.781rem; color:var(--ink-muted); margin-top:.3rem; line-height:1.5; }
.input,.select,.textarea {
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-2); border-radius:var(--r);
  padding:.7rem .8rem; min-height:48px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea { min-height:130px; resize:vertical; line-height:1.6; }
.select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%2359616F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.3rem;
}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible {
  border-color:var(--brand); outline:2px solid var(--brand); outline-offset:1px;
}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"] {
  border-color:var(--v-amp); background:#FDF5F4;
}
.field-error { display:none; align-items:flex-start; gap:.35rem; font-size:.813rem; color:#9A2C21; margin-top:.35rem; font-weight:500; }
.field-error.is-shown { display:flex; }
.checkline { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:var(--s-4); }
.checkline input[type="checkbox"] { flex:none; width:24px; height:24px; margin-top:1px; accent-color:var(--brand); cursor:pointer; }
.checkline label { font-size:.875rem; color:var(--ink-2); line-height:1.55; cursor:pointer; }
.error-summary { display:none; border:1px solid var(--v-amp); border-left-width:3px; background:#FDF5F4; padding:var(--s-5); margin-bottom:var(--s-6); }
.error-summary.is-shown { display:block; }
.error-summary h2 { font-family:var(--f-body); font-size:1rem; font-weight:600; color:#9A2C21; margin-bottom:.5rem; }
.error-summary ul { margin:0; padding-left:1.1rem; }
.error-summary li { font-size:.875rem; margin-bottom:.25rem; }
.error-summary a { color:#9A2C21; text-decoration:underline; text-underline-offset:2px; }
.fieldset { border:0; padding:0; margin:0 0 var(--s-6); }
.fieldset legend {
  font-family:var(--f-mono); font-size:.688rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand);
  padding:0 0 var(--s-3); width:100%; border-bottom:1px solid var(--rule); margin-bottom:var(--s-5);
}
.form-note { border-left:2px solid var(--brand); background:var(--brand-wash); padding:var(--s-4) var(--s-5); font-size:.875rem; color:var(--ink-2); margin-bottom:var(--s-6); }

/* --- Checklist ------------------------------------------------------------ */
.chk-item { display:flex; align-items:flex-start; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--rule); min-height:48px; }
.chk-item input[type="checkbox"] { flex:none; width:24px; height:24px; margin-top:2px; accent-color:var(--v-missense); cursor:pointer; }
.chk-item label { cursor:pointer; font-size:.938rem; }
.chk-item label span { display:block; font-size:.813rem; color:var(--ink-muted); margin-top:2px; }
.chk-item:has(input:checked) label { color:var(--ink-faint); }
.chk-item:has(input:checked) label strong { text-decoration:line-through; }

/* --- Filters -------------------------------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:.4rem; }
.filter-btn {
  font-family:var(--f-mono); font-size:.656rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .75rem; min-height:40px;
  border:1px solid var(--rule-2); background:var(--surface); color:var(--ink-muted);
  cursor:pointer; border-radius:var(--r);
  transition: all var(--dur-fast) var(--ease);
}
.filter-btn:hover { border-color:var(--ink); color:var(--ink); }
.filter-btn[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.is-hidden { display:none !important; }
.empty-note { padding:var(--s-7) 0; text-align:center; color:var(--ink-muted); font-size:.938rem; }

/* --- Search --------------------------------------------------------------- */
.search-wrap { position:relative; }
.search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120;
  background:var(--surface); border:1px solid var(--rule); box-shadow:var(--lift-3);
  max-height:60vh; overflow-y:auto; display:none;
}
.search-results.is-open { display:block; }
.search-results a { display:block; padding:.75rem .95rem; border-bottom:1px solid var(--rule); }
.search-results a:last-child { border-bottom:0; }
.search-results a:hover,.search-results a:focus-visible { background:var(--paper-2); }
.search-results .sr-title { font-size:.906rem; font-weight:500; color:var(--ink); }
.search-results .sr-meta { font-family:var(--f-mono); font-size:.656rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }

/* --- Mobile nav ----------------------------------------------------------- */
.burger { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; margin-right:-10px; background:transparent; border:0; cursor:pointer; color:var(--ink); flex:none; }
@media (max-width:400px) {
  .shell,.shell-narrow { padding-inline:.9rem; }
  .wordmark-logo { width:34px; }
  .wordmark-name { font-size:.844rem; }
  .wordmark-role { font-size:.5rem; letter-spacing:.09em; }
  .masthead-inner { gap:.5rem; }
}
@media (min-width:1120px) { .burger { display:none; } }
.drawer {
  position:fixed; inset:0; z-index:150; background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open { transform:translateX(0); }
.drawer[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .drawer { transition:none; } }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:.6rem clamp(1.15rem,4vw,2rem); border-bottom:1px solid var(--rule); min-height:var(--nav-h); position:sticky; top:0; background:var(--paper); z-index:2; }
.drawer-body { padding:var(--s-5) clamp(1.15rem,4vw,2rem) 9rem; }
.drawer-link {
  display:block; padding:.85rem 0; border-bottom:1px solid var(--rule);
  font-family:var(--f-display); font-weight:700;
  font-size:1.12rem; color:var(--ink); min-height:52px; letter-spacing:-.018em;
}
.drawer-link:hover,.drawer-link:focus-visible { color:var(--brand); }
.drawer-sub { padding-left:var(--s-4); }
.drawer-sub a { display:flex; align-items:center; padding:.55rem 0; font-size:.906rem; color:var(--ink-muted); min-height:44px; }
.drawer-sub a:hover { color:var(--brand); }

/* --- Mobile CTA bar ------------------------------------------------------- */
.mobile-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--surface); border-top:1px solid var(--rule-2);
  box-shadow:0 -2px 16px rgba(16,18,21,.08);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:1120px) { .mobile-cta { display:none; } }
.mobile-cta a {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:58px; padding:.45rem .25rem;
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); border-right:1px solid var(--rule);
  transition:background var(--dur-fast) var(--ease);
}
.mobile-cta a:last-child { border-right:0; }
.mobile-cta a:active { background:var(--paper-2); }
.mobile-cta a.is-primary { background:var(--brand); color:#fff; }
.mobile-cta a.is-wa { background:#1F7A52; color:#fff; }
body.has-mobile-cta { padding-bottom:58px; }
@media (min-width:1120px) { body.has-mobile-cta { padding-bottom:0; } }

.wa-float {
  position:fixed; right:1.35rem; bottom:1.35rem; z-index:95;
  display:none; align-items:center; gap:.5rem;
  min-height:50px; padding:0 1.15rem; background:#1F7A52; color:#fff;
  border-radius:999px; box-shadow:var(--lift-3);
  font-family:var(--f-mono); font-size:.719rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width:1120px) { .wa-float { display:inline-flex; } }
.wa-float:hover { background:#17603F; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .wa-float:hover { transform:translateY(-2px); } }

/* --- KPCIRC block --------------------------------------------------------- */
.kpcirc-grid { display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; align-items:stretch; }
@media (min-width:900px) { .kpcirc-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.kpcirc-visit { border-top:2px solid var(--brand); }
.kpcirc-address {
  font-style:normal; margin:1rem 0 0; font-size:.938rem;
  line-height:1.65; color:var(--ink-2);
}
.kpcirc-address strong { color:var(--ink); font-weight:600; }
.kpcirc-dl { margin:1.35rem 0 0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.kpcirc-dl > div { background:var(--surface); padding:.8rem .9rem; }
.kpcirc-dl dt {
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.3rem;
}
.kpcirc-dl dd { margin:0; font-size:.938rem; color:var(--ink-2); line-height:1.5; }
.kpcirc-photo { display:flex; }
.kpcirc-photo .photo { flex:1; }

/* --- Consultation prompt (every page) ------------------------------------- */
.consult-band {
  background: var(--wine);
  color: var(--on-wine-2);
  border-top: 1px solid var(--wine-line);
  padding-block: clamp(1.9rem, 3.4vw, 2.9rem);
}
.consult-band h2 { color: var(--on-wine); }
.consult-band .eyebrow { color: var(--brass); }
.consult-band .consult-note { color: var(--on-wine-3); }
.consult-band .btn-ghost { border-color:#8E5261; color: var(--on-wine); }
.consult-band .btn-ghost:hover { background: var(--on-wine); color: var(--wine); border-color: var(--on-wine); }
.consult-inner {
  display: grid; gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .consult-inner { grid-template-columns: minmax(0,1fr) auto; }
}
.consult-copy h2 { margin-top: .45rem; }
.consult-note {
  margin: .6rem 0 0; font-size: .875rem; color: var(--ink-muted);
  line-height: 1.55; max-width: 56ch;
}
.consult-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.consult-actions .btn { font-size: .688rem; }

/* --- Footer --------------------------------------------------------------- */
.foot { background:var(--ink); color:#A9B1BD; padding-block: clamp(2.75rem,5vw,4.5rem) var(--s-6); }
.foot a { color:#A9B1BD; transition:color var(--dur-fast) var(--ease); }
.foot a:hover { color:#fff; }
.foot h2,.foot h3 {
  font-family:var(--f-mono); font-size:.656rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color: var(--brass); margin:0 0 var(--s-4); line-height:1.4;
}
.foot-link { display:flex; align-items:center; padding:.3rem 0; font-size:.875rem; min-height:34px; }
@media (max-width:767px) { .foot-link { min-height:44px; } }
.foot-legal a { display:inline-flex; align-items:center; min-height:44px; font-size:.781rem; color: var(--on-wine-3); }
.foot-rule { border-top:1px solid #6B2E3C; margin-top:var(--s-7); padding-top:var(--s-5); }
.foot-fine { font-size:.781rem; color: var(--on-wine-3); line-height:1.6; max-width:72ch; }

/* --- Callouts ------------------------------------------------------------- */
.callout {
  border:1px solid var(--rule); border-left:3px solid var(--brand);
  background:var(--surface); padding: clamp(1rem,2vw,1.45rem);
  font-size:.875rem; color:var(--ink-2); line-height:1.62;
}
.callout strong { color:var(--ink); }
/* Telephone and WhatsApp links are primary actions, not inline prose. */
.contact-link { display:inline-flex; align-items:center; min-height:44px; }
.callout-clinical { border-left-color:var(--v-missense); }
.callout-quiet { border-left-color:var(--rule-2); background:var(--paper-2); }

.notlist,.ticklist { list-style:none; margin:0; padding:0; }
.notlist li,.ticklist li { position:relative; padding-left:1.6rem; margin-bottom:.7rem; color:var(--ink-2); font-size:.938rem; }
.notlist li::before { content:''; position:absolute; left:.2rem; top:.62em; width:11px; height:1.5px; background:var(--brand); }
.ticklist li::before { content:''; position:absolute; left:.25rem; top:.48em; width:6px; height:6px; background:var(--brand); }

/* --- Breadcrumb ----------------------------------------------------------- */
.crumb { font-family:var(--f-mono); font-size:.656rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.crumb a { display:inline-flex; align-items:center; min-height:24px; padding-block:2px; }
.crumb a:hover { color:var(--brand); }
.crumb span[aria-hidden] { color:var(--rule-2); }

/* --- Utility -------------------------------------------------------------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.stack > * + * { margin-top:var(--s-4); }
.stack-lg > * + * { margin-top:var(--s-6); }
.text-muted { color:var(--ink-muted); }
.text-faint { color:var(--ink-faint); }
.wrap-anywhere { overflow-wrap:anywhere; min-width:0; }
.nowrap { white-space:nowrap; }

/* ============================================================================
   SIGNATURE: THE ONCOPRINT
   A grid of samples (columns) × genes (rows), each cell coloured by alteration
   class. It is the artefact a molecular tumour board actually reads, and it is
   the one place on this site permitted to be loud.
   ========================================================================== */
.oncoprint-wrap { position:relative; }
.oncoprint {
  display:grid;
  gap:2px;
  align-content:start;
  /* Columns are set inline by the generator so the grid matches the data. */
}
.op-row { display:contents; }
.op-gene {
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.04em; color:var(--ink-muted);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:.5rem; white-space:nowrap;
}
.op-cell {
  background:var(--v-none);
  height:16px;
  position:relative;
}
.op-cell[data-alt="missense"]   { background:var(--v-missense); }
.op-cell[data-alt="truncating"] { background:var(--v-trunc); }
.op-cell[data-alt="amplification"] { background:var(--v-amp); }
.op-cell[data-alt="deletion"]   { background:var(--v-del); }
.op-cell[data-alt="fusion"]     { background:var(--v-fusion); }
.op-cell[data-alt="splice"]     { background:var(--v-splice); }

/* Load sequence: the print resolves column by column, left to right —
   data arriving and settling into structure. */
@media (prefers-reduced-motion: no-preference) {
  .oncoprint .op-cell {
    opacity:0;
    transform:scaleY(.15);
    transform-origin:center;
  }
  .oncoprint.is-in .op-cell {
    opacity:1;
    transform:none;
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
    transition-delay: calc(var(--col) * 14ms + var(--row) * 26ms);
  }
  .oncoprint .op-gene { opacity:0; }
  .oncoprint.is-in .op-gene {
    opacity:1;
    transition: opacity 400ms var(--ease-out);
    transition-delay: calc(var(--row) * 26ms);
  }
}

/* Hover reads out the call, the way the real tool does */
.op-cell[data-alt]:not([data-alt=""]) { cursor:crosshair; }
.op-cell[data-alt]:not([data-alt=""]):hover { outline:2px solid var(--ink); outline-offset:1px; z-index:2; }

.op-readout {
  font-family:var(--f-mono); font-size:.688rem; letter-spacing:.05em;
  color:var(--ink-muted); margin-top:.85rem; min-height:1.3em;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.op-readout strong { color:var(--ink); font-weight:600; }
.op-swatch { width:10px; height:10px; display:inline-block; flex:none; }

/* Legend — the palette is functional, so it is labelled */
.op-legend { display:flex; flex-wrap:wrap; gap:.75rem 1.1rem; margin-top:1rem; }
.op-legend-item {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted);
}
.op-legend-item i { width:10px; height:10px; display:block; flex:none; }

@media (max-width: 700px) {
  .op-cell { height:13px; }
  .op-gene { font-size:.563rem; padding-right:.35rem; }
}

/* --- Figures -------------------------------------------------------------- */
.fig { margin:0; border:1px solid var(--rule); background:var(--surface); padding:clamp(1.1rem,2.2vw,1.7rem); }
.fig-head { display:flex; flex-wrap:wrap; gap:.75rem; align-items:baseline; justify-content:space-between; }
.fig-meta {
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.fig-title {
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.05rem,.98rem+.4vw,1.22rem);
  letter-spacing:-.018em; color:var(--ink); margin:.55rem 0 0; line-height:1.3;
}
.fig-body { margin-top:1.15rem; }
.fig-caption {
  margin:1.1rem 0 0; padding-top:.85rem; border-top:1px solid var(--rule);
  font-size:.781rem; line-height:1.55; color:var(--ink-muted); max-width:78ch;
}

/* Evidence tiers */
.tier-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.tier {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem 1rem;
  align-items:center; background:var(--surface); padding:.85rem 1rem;
  transition:background var(--dur-fast) var(--ease);
}
@media (min-width:720px) { .tier { grid-template-columns:auto minmax(0,1fr) 140px; } }
.tier:hover,.tier:focus-visible { background:var(--brand-wash); outline:none; }
.tier:focus-visible { box-shadow:inset 0 0 0 2px var(--brand); }
.tier-badge {
  font-family:var(--f-mono); font-size:.719rem; font-weight:500; letter-spacing:.06em;
  color:#fff; background:var(--brand); min-width:32px; text-align:center;
  padding:.28rem .4rem; border-radius:var(--r);
}
.tier-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.tier-label { font-size:.906rem; font-weight:600; color:var(--ink); }
.tier-body { font-size:.813rem; color:var(--ink-muted); line-height:1.5; }
.tier-bar { display:none; height:6px; background:var(--paper-3); position:relative; }
@media (min-width:720px) { .tier-bar { display:block; } }
.tier-bar i { position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--brand); display:block; }
@media (prefers-reduced-motion:no-preference) {
  .tier-bar i { transform:scaleX(0); transform-origin:left; transition:transform 700ms var(--ease-out); }
  .is-in .tier-bar i { transform:scaleX(1); }
}

/* SVG figures */
.fig-svg { width:100%; height:auto; overflow:visible; }
.fig-grid line { stroke:var(--rule); stroke-width:1; }
.fig-axis text { font-family:var(--f-mono); font-size:9px; fill:var(--ink-faint); }
.fig-line { fill:none; stroke:var(--brand); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.fig-dot { fill:var(--surface); stroke:var(--brand); stroke-width:2; }
.fig-dot:hover { fill:var(--brand); r:5; }
.fig-marker { stroke:var(--v-amp); stroke-width:1.5; stroke-dasharray:3 3; }
.fig-note { font-family:var(--f-mono); font-size:9px; fill:var(--v-amp); letter-spacing:.06em; }
@media (prefers-reduced-motion:no-preference) {
  .fig-line { stroke-dasharray:1200; stroke-dashoffset:1200; }
  .is-in .fig-line,.fig.is-in .fig-line { animation:draw 1500ms var(--ease-out) forwards; }
  @keyframes draw { to { stroke-dashoffset:0; } }
  .fig-dot { opacity:0; }
  .is-in .fig-dot { opacity:1; transition:opacity 300ms var(--ease-out); }
  .is-in .fig-dot:nth-child(n) { transition-delay:calc(var(--i,0) * 60ms); }
}

/* Pathway */
.path-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:860px) { .path-list { grid-template-columns:repeat(6,minmax(0,1fr)); } }
.path-step {
  background:var(--surface); padding:.95rem 1rem;
  display:flex; flex-direction:column; gap:.3rem;
  border-top:2px solid var(--brand);
}
.path-num { font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; color:var(--brand); }
.path-k { font-size:.875rem; font-weight:600; color:var(--ink); line-height:1.3; }
.path-d { font-size:.75rem; color:var(--ink-muted); line-height:1.45; }
@media (prefers-reduced-motion:no-preference) {
  .path-step { opacity:0; transform:translateY(8px); }
  .is-in .path-step { opacity:1; transform:none; transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out); transition-delay:calc(var(--i) * 70ms); }
}

/* Biomarker panel */
.bm-grid { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px) { .bm-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1000px) { .bm-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bm { background:var(--surface); padding:.7rem .85rem; display:flex; align-items:center; gap:.55rem; min-width:0; }
.bm-dot { width:7px; height:7px; flex:none; background:var(--brand); }
.bm-name { font-family:var(--f-mono); font-size:.75rem; color:var(--ink-2); overflow-wrap:anywhere; min-width:0; }
@media (prefers-reduced-motion:no-preference) {
  .bm { opacity:0; }
  .is-in .bm { opacity:1; transition:opacity 340ms var(--ease-out); transition-delay:calc(var(--i) * 28ms); }
}

/* --- Sequence track ------------------------------------------------------- */
/* DNA set the way code is set: a thin band of codons above each page title. */
.page-hero { position:relative; padding-block: clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3.25rem); }
.seq-track {
  display:flex; flex-wrap:nowrap; overflow:hidden;
  gap:.55rem; padding: .55rem clamp(1.15rem,3.5vw,3rem);
  border-bottom:1px solid var(--rule);
  margin-bottom: clamp(1.5rem,3vw,2.25rem);
  user-select:none;
}
.seq-codon {
  font-family:var(--f-mono); font-size:.688rem; letter-spacing:.06em;
  color:var(--ink-faint); opacity:.5; flex:none;
}
.seq-codon.is-variant {
  color:var(--brand); opacity:1; font-weight:500;
  border-bottom:2px solid var(--brand);
}
.band-ink .seq-codon { color:var(--on-wine-3); }
.band-ink .seq-codon.is-variant { color:var(--brass); border-bottom-color:var(--brass); }
@media (prefers-reduced-motion:no-preference) {
  .seq-codon { opacity:0; }
  .seq-track .seq-codon { animation:seqIn 500ms var(--ease-out) forwards; animation-delay:calc(var(--i) * 22ms); }
  .seq-codon.is-variant { animation-name:seqInVar; }
  @keyframes seqIn { to { opacity:.5; } }
  @keyframes seqInVar { to { opacity:1; } }
}

/* --- Code to consequence -------------------------------------------------- */
.translation { display:grid; gap:.4rem; overflow-x:auto; }
.tr-row { display:grid; grid-template-columns:1fr; gap:.3rem; align-items:center; }
@media (min-width:760px) { .tr-row { grid-template-columns:130px minmax(0,1fr); gap:1rem; } }
.tr-label {
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tr-cells { display:flex; gap:.3rem; min-width:0; }
.tr-cell {
  font-family:var(--f-mono); font-size:.813rem; letter-spacing:.04em;
  padding:.35rem .45rem; background:var(--paper-2); color:var(--ink-2);
  border-radius:var(--r); flex:none; min-width:3.1em; text-align:center;
}
.tr-cell.is-var { background:var(--brand); color:#fff; font-weight:500; }
.band-ink .tr-cell { background:var(--wine); color:var(--on-wine-2); }
.band-ink .tr-cell.is-var { background:var(--brass); color:#3A0F1B; }
.tr-gap { display:flex; justify-content:center; padding:.35rem 0; }
.tr-arrow {
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  padding:.25rem .6rem;
}

/* --- Case timeline -------------------------------------------------------- */
.tline { list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative; }
@media (min-width:900px) { .tline { grid-template-columns:repeat(7,minmax(0,1fr)); } }
.tline-e {
  position:relative; padding:0 0 1.3rem 1.6rem;
  border-left:2px solid var(--rule); display:flex; flex-direction:column; gap:.2rem;
}
@media (min-width:900px) {
  .tline-e { padding:1.7rem .7rem 0 0; border-left:0; border-top:2px solid var(--rule); }
}
.tline-mark {
  position:absolute; left:0; top:2px; width:11px; height:11px;
  transform:translateX(-50%); border-radius:50%;
  background:var(--paper); border:2px solid var(--rule-2);
}
@media (min-width:900px) { .tline-mark { left:0; top:0; transform:translate(0,-50%); } }
.tline-molecular .tline-mark { background:var(--brand); border-color:var(--brand); }
.tline-clinical .tline-mark { background:var(--paper); border-color:var(--ink-2); }
.band-ink .tline-molecular .tline-mark { background:var(--brass); border-color:var(--brass); }
.tline-t { font-family:var(--f-mono); font-size:.625rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.tline-k { font-size:.875rem; font-weight:600; color:var(--ink); line-height:1.3; }
.tline-d { font-size:.75rem; color:var(--ink-muted); line-height:1.45; }
.tline-key {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  margin:1.1rem 0 0; font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.tline-key-i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.tline-key-clinical { background:var(--paper); border:2px solid var(--ink-2); }
.tline-key-molecular { background:var(--brand); }
@media (prefers-reduced-motion:no-preference) {
  .tline-e { opacity:0; transform:translateY(8px); }
  .is-in .tline-e { opacity:1; transform:none; transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out); transition-delay:calc(var(--i) * 80ms); }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position:relative;
  background: var(--wine);
  color: var(--on-wine-2);
  --rule: var(--wine-line);
  --rule-2: #8E5261;
  --surface: var(--wine-lift);
  --ink: var(--on-wine);
  --ink-2: var(--on-wine-2);
  --ink-muted: var(--on-wine-2);
  --ink-faint: var(--on-wine-3);
  --v-none: var(--v-none-wine);
  padding-block: clamp(2.25rem,4.5vw,4rem) clamp(2.75rem,5.5vw,5rem);
}
.hero h1 { color: var(--on-wine); }
.hero .eyebrow { color: var(--brass); }
.hero .t-lead { color: var(--on-wine); }
.hero .t-body { color: var(--on-wine-2); }
.hero .card,.hero .stat,.hero .fig { background: var(--wine-lift); border-color: var(--wine-line); }
.hero .stat-grid { background: var(--wine-line); border-color: var(--wine-line); }
.hero .stat-value { color: var(--brass); }
.hero .stat-label { color: var(--on-wine); }
.hero .stat-note { color: var(--on-wine-3); }
.hero .btn-ghost { border-color:#8E5261; color: var(--on-wine); }
.hero .btn-ghost:hover { background: var(--on-wine); color: var(--wine); border-color: var(--on-wine); }
.hero .photo { background: var(--wine-lift); border-color: var(--wine-line); }
.hero .photo-empty {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.028) 10px 20px),
    var(--wine-lift);
  border-color:#8E5261;
}
.hero .photo-brief { color: var(--on-wine); }
.hero .photo-direction { color: var(--on-wine-3); }
.hero .photo-tag { background: var(--brass); color:#3A1018; }
.hero .photo-ratio,.hero .photo-file { color: var(--on-wine-3); }
.hero .photo-file code { background: var(--wine); border-color:#8E5261; color: var(--on-wine-2); }
.hero .portrait-caption { color: var(--on-wine-3); }
.hero .fig-caption { color: var(--on-wine-3); border-top-color: var(--wine-line); }
.hero .fig-title { color: var(--on-wine); }
.hero .fig-meta { color: var(--on-wine-3); }
.hero .op-gene { color: var(--on-wine-3); }
.hero .op-readout { color: var(--on-wine-3); }
.hero .op-readout strong { color: var(--on-wine); }
.hero .op-legend-item { color: var(--on-wine-3); }
.hero .hero-descriptor { color: var(--on-wine-3); }
.hero-grid { display:grid; gap:clamp(1.75rem,3.5vw,3rem); grid-template-columns:1fr; align-items:end; }
@media (min-width:1040px) { .hero-grid { grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); } }

.hero-descriptor {
  font-family:var(--f-mono); font-size:.719rem; font-weight:400;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-muted);
  line-height:1.9; max-width:54ch;
  overflow-wrap:anywhere;
}
.hero-descriptor .nowrap { white-space:nowrap; }
@media (max-width:560px) { .hero-descriptor { font-size:.656rem; letter-spacing:.07em; } }

/* --- Portrait ------------------------------------------------------------- */
.portrait-frame {
  position:relative; background:var(--paper-3);
  border:1px solid var(--rule); overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center; min-height:340px;
}
.portrait-frame img { width:100%; height:auto; object-fit:contain; object-position:bottom center; mix-blend-mode:multiply; }
.portrait-caption {
  margin-top:.7rem; font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
}

/* --- Practice figures ----------------------------------------------------- */
.stat-grid { display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:560px) { .stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px) { .stat-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat-grid--auto { grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); }
.stat { background:var(--surface); padding:clamp(1.1rem,2.2vw,1.6rem); display:flex; flex-direction:column; gap:.3rem; position:relative; }
a.stat::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
a.stat:hover::after { transform:scaleX(1); }
.stat-value {
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.7rem,1.25rem+1.5vw,2.3rem); line-height:1;
  letter-spacing:-.03em; color:var(--brand); font-variant-numeric:tabular-nums;
}
.stat-label { font-size:.875rem; font-weight:600; color:var(--ink); margin-top:.3rem; line-height:1.3; }
.stat-note { font-size:.781rem; color:var(--ink-muted); line-height:1.5; }

/* --- Photography ---------------------------------------------------------- */
.photo { margin:0; position:relative; overflow:hidden; background:var(--paper-2); border:1px solid var(--rule); width:100%; }
.photo img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-empty {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(16,18,21,.022) 10px 20px),
    var(--paper-2);
  border-style:dashed; border-color:var(--rule-2);
  display:flex; align-items:center; justify-content:flex-start;
  /* An empty slot only needs room for its brief. A real photograph uses its
     full aspect ratio; capping the placeholder keeps unfinished pages from
     being dominated by grey blocks. Swapping in a photo is a rebuild, so this
     causes no runtime layout shift. */
  max-height: 300px;
}
.photo-empty.photo-tall { max-height: 380px; }
.photo-inner { padding:clamp(.95rem,2.2vw,1.5rem); display:flex; flex-direction:column; gap:.5rem; max-width:46ch; }
.photo-head { display:flex; align-items:center; gap:.5rem; }
.photo-tag {
  font-family:var(--f-mono); font-size:.594rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; background:var(--brand);
  padding:.22rem .45rem; border-radius:var(--r);
}
.photo-ratio { font-family:var(--f-mono); font-size:.594rem; letter-spacing:.1em; color:var(--ink-faint); }
.photo-brief {
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(.95rem,.9rem+.35vw,1.06rem); line-height:1.3; color:var(--ink); margin:0;
}
.photo-direction { font-size:.75rem; line-height:1.5; color:var(--ink-muted); margin:0; }
.photo-file { margin:.1rem 0 0; font-size:.688rem; color:var(--ink-faint); }
.photo-file code {
  font-family:var(--f-mono); font-size:.688rem; background:var(--surface);
  border:1px solid var(--rule); padding:.12rem .35rem; border-radius:var(--r); color:var(--ink-2);
}
@media (max-width:560px) { .photo-direction { display:none; } }

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(14px); }
  .reveal.is-in { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .reveal-stagger > * { opacity:0; transform:translateY(12px); }
  .reveal-stagger.is-in > * { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .reveal-stagger.is-in > *:nth-child(1){transition-delay:0ms}
  .reveal-stagger.is-in > *:nth-child(2){transition-delay:55ms}
  .reveal-stagger.is-in > *:nth-child(3){transition-delay:110ms}
  .reveal-stagger.is-in > *:nth-child(4){transition-delay:165ms}
  .reveal-stagger.is-in > *:nth-child(5){transition-delay:210ms}
  .reveal-stagger.is-in > *:nth-child(6){transition-delay:250ms}
  .reveal-stagger.is-in > *:nth-child(7){transition-delay:285ms}
  .reveal-stagger.is-in > *:nth-child(8){transition-delay:315ms}
  .rule-draw { transform:scaleX(0); transform-origin:left; }
  .rule-draw.is-in { transform:scaleX(1); transition:transform 800ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-stagger > * { opacity:1; transform:none; }
  .rule-draw { transform:none; }
  .oncoprint .op-cell,.oncoprint .op-gene { opacity:1; transform:none; }
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .masthead,.mobile-cta,.drawer,.skip-link,.no-print,.foot,.wa-float { display:none !important; }
  body { background:#fff; color:#000; padding:0; font-size:10.5pt; }
  .section { padding-block:.6cm; }
  .shell,.shell-narrow { max-width:none; padding-inline:0; }
  a { text-decoration:none; color:#000; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .card { border:1px solid #bbb; break-inside:avoid; box-shadow:none; }
  .tl-item,.acc { break-inside:avoid; }
  .acc .acc-body { display:block !important; }
  h1,h2,h3 { break-after:avoid; }
  .reveal,.reveal-stagger > * { opacity:1 !important; transform:none !important; }
}