/* ─────────────────────────────────────────────────────────────
   Palette derived from H&E staining — the material of most of
   the published work here. Hematoxylin stains cell nuclei a deep
   violet; eosin stains cytoplasm pink. The page ground is slide
   glass under a lamp: pale, cool, never cream.

   Each domain carries its own accent, because each is a genuinely
   different instrument. Text-weight and graphic-weight variants
   are separate: the graphic ones are too light for type on this
   ground, and the text ones are too dark to glow on canvas.
   ───────────────────────────────────────────────────────────── */
:root{
  --slide:#F4F1F6;
  --slide-2:#ECE7F0;
  --slide-3:#E3DCE9;
  --ink:#1A1420;
  --hematox:#2E1F5E;
  --muted:#5F5568;
  --rule:rgba(46,31,94,.13);
  --rule-2:rgba(46,31,94,.22);

  --eosin:#B03260;      --eosin-g:#D4527F;
  --court:#10786A;      --court-g:#22B39C;
  --ochre:#96560F;      --ochre-g:#C9821F;
  --slate:#41527A;      --slate-g:#6F84B0;

  /* the active domain — reassigned by the tab script */
  --accent:var(--eosin);
  --accent-g:var(--eosin-g);

  --rail:224px;
  --display:"Instrument Serif",Georgia,serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --data:"Martian Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--slide);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--slide)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── specimen label ─────────────────────────────────────────
   Narrow on purpose. It is a label on the edge of a slide, not a
   sidebar — it should give the reader a name and a status and then
   get out of the way of the work. */
.rail{padding:28px 22px 22px;border-bottom:1px solid var(--rule)}
.rail__name{
  font-family:var(--display);font-weight:400;font-size:25px;
  letter-spacing:-.012em;line-height:1.04;margin:0;color:var(--hematox);
}
.rail__role{
  font-family:var(--data);font-size:9px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--muted);margin:12px 0 0;line-height:2;
}
.rail__meta{
  font-family:var(--data);font-size:9px;line-height:2.2;color:var(--muted);
  margin:18px 0 0;list-style:none;padding:0;letter-spacing:0;
}
.rail__meta b{color:var(--hematox);font-weight:400;display:block;font-size:8.5px;opacity:.75}
.rail__meta li{margin-bottom:7px}
.rail__status{
  display:flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--data);font-size:9px;letter-spacing:0;color:var(--hematox);line-height:1.5;
}
.rail__dot{
  width:7px;height:7px;background:var(--accent);border-radius:50%;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  transition:background .5s;
}
@media (min-width:1080px){
  .rail{
    position:fixed;top:0;left:0;width:var(--rail);height:100vh;
    border-bottom:0;border-right:1px solid var(--rule);
    padding:48px 24px;display:flex;flex-direction:column;
  }
  .rail__status{margin-top:auto}
  .page{margin-left:var(--rail)}
}

/* ── shared ───────────────────────────────────────────────── */
.wrap{max-width:1080px;padding:0 24px}
@media (min-width:1080px){.wrap{padding:0 56px}}
.eyebrow{
  font-family:var(--data);font-size:10px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.prose{color:var(--ink);margin:0 0 16px;max-width:68ch}
.prose:last-child{margin-bottom:0}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding:46px 0 40px}
.hero__id{display:flex;align-items:center;gap:16px;margin:0 0 28px}
.portrait{
  padding:0;border:0;background:none;flex:none;cursor:pointer;
  border-radius:50%;line-height:0;
}
.portrait img{
  width:60px;height:60px;object-fit:cover;border-radius:50%;
  transition:transform .35s,box-shadow .35s;
}
.portrait:hover img,.portrait:focus-visible img{
  transform:scale(1.06);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.hero__idtxt{
  font-family:var(--data);font-size:10px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);line-height:2.1;
}
/* The thesis is the loudest thing on the page and should use the room it
   has — capped at 17ch it stacked into a narrow three-line column with
   half the width empty beside it. It now runs to the full measure and
   scales with the viewport. */
.hero__thesis{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,7.6vw,88px);line-height:.97;letter-spacing:-.025em;
  margin:0 0 24px;max-width:22ch;color:var(--hematox);
}
.hero__thesis em{font-style:italic;color:var(--accent);transition:color .5s}
.hero__sub{font-size:19px;line-height:1.55;color:var(--ink);max-width:64ch;margin:0}

/* ── tabs ─────────────────────────────────────────────────── */
.tabs{
  position:sticky;top:0;z-index:20;background:var(--slide);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.tabs__inner{display:flex;overflow-x:auto;padding:0 24px;scrollbar-width:none}
.tabs__inner::-webkit-scrollbar{display:none}
@media (min-width:1080px){.tabs__inner{padding:0 64px}}
.tab{
  font-family:var(--data);font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--muted);padding:17px 0;margin-right:28px;cursor:pointer;
  white-space:nowrap;transition:color .2s,border-color .2s;
}
.tab:hover{color:var(--hematox)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ── the scope ────────────────────────────────────────────── */
.scope{border-bottom:1px solid var(--rule);background:var(--slide-2)}
.scope__stage{position:relative;width:100%;height:min(46vh,340px)}
.scope__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scope__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:10px 24px;border-top:1px solid var(--rule);
  font-family:var(--data);font-size:9.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);
}
@media (min-width:1080px){.scope__bar{padding-left:64px;padding-right:64px}}
.scope__read{display:flex;gap:18px;flex-wrap:wrap}
.scope__read b{color:var(--hematox);font-weight:400}
.scope__toggle{
  font:inherit;letter-spacing:.02em;text-transform:uppercase;
  background:transparent;color:var(--accent);border:1px solid var(--accent);
  padding:6px 13px;cursor:pointer;transition:background .2s,color .2s,opacity .2s;
}
.scope__toggle:hover,.scope__toggle:focus-visible{background:var(--accent);color:var(--slide)}
.scope__toggle[hidden]{display:none}

/* ── panels ───────────────────────────────────────────────── */
.panel{padding:56px 0 0}
.panel[hidden]{display:none}
.intro{font-size:19.5px;line-height:1.55;color:var(--hematox);max-width:64ch;margin:0 0 40px}

.sub{
  font-family:var(--data);font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--hematox);margin:48px 0 20px;
  padding-bottom:9px;border-bottom:1px solid var(--rule-2);
}
.sub--top{margin-top:0}

.entry{padding:26px 0;border-top:1px solid var(--rule)}
.entry--first{border-top:0;padding-top:0}
.entry__tag{
  font-family:var(--data);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.entry__tag i{font-style:normal;color:var(--accent)}
.entry__t{
  font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.008em;
  line-height:1.3;margin:0 0 10px;color:var(--hematox);
}
.entry__p{color:var(--ink);margin:0 0 12px;max-width:72ch}
/* the finding — what actually came out of the work, set apart
   because it is the part a client cares about */
/* The finding is the part a client reads twice, so it is set in the body
   face. It was in the display serif, which is beautiful at 70px and thin
   and tiring at 19. Weight and colour carry the emphasis instead. */
.entry__find{
  border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 14px;
  font-family:var(--body);font-size:17.5px;line-height:1.55;font-weight:500;
  color:var(--hematox);max-width:66ch;
}
.entry__stack{font-family:var(--data);font-size:9.5px;letter-spacing:.02em;color:var(--muted);margin:0}
.entry__link{
  font-family:var(--data);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding-bottom:2px;
}
.entry__link:hover{border-bottom-color:var(--accent)}

/* ── clients ──────────────────────────────────────────────── */
.client{display:grid;gap:14px;padding:24px 0;border-top:1px solid var(--rule);align-items:start}
.client--first{border-top:0}
@media (min-width:660px){.client{grid-template-columns:112px 1fr;gap:28px}}
.client__logo{
  background:#fff;padding:11px;display:flex;align-items:center;justify-content:center;
  height:68px;border:1px solid var(--rule);
}
.client__logo img{max-height:100%;width:auto;object-fit:contain}
.client__n{
  font-family:var(--body);font-weight:600;font-size:18px;letter-spacing:-.008em;
  margin:0 0 7px;color:var(--hematox);
}
.client__p{color:var(--ink);margin:0;max-width:70ch}

/* ── media pairs ──────────────────────────────────────────── */
.pair{display:grid;gap:13px;margin:0 0 15px}
@media (min-width:620px){.pair{grid-template-columns:1fr 1fr;gap:16px}}
.pair figure{margin:0}
.pair img,.pair video{width:100%;border:1px solid var(--rule)}
.pair figcaption{
  font-family:var(--data);font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;
}
/* The two flow-arts loops. Square, silent, and always in step — they are
   the same seven seconds, so seeing them side by side is the whole point.
   height:auto is load-bearing: without it the width/height attributes on
   the <video> pin the box to 720px tall and aspect-ratio never applies. */
.pair--loop video{aspect-ratio:1/1;height:auto;object-fit:cover;background:#0B0A0E;border-color:var(--rule-2)}

/* ── how engagements run ──────────────────────────────────── */
.method{padding-top:46px}
.method__h{
  font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,36px);
  letter-spacing:-.015em;line-height:1.14;margin:0 0 18px;color:var(--hematox);max-width:20ch;
}

/* ── close ────────────────────────────────────────────────── */
.cta{padding:66px 0 76px;border-top:1px solid var(--rule);margin-top:58px}
.cta__mail{
  font-family:var(--display);font-weight:400;letter-spacing:-.018em;
  font-size:clamp(26px,4.6vw,44px);text-decoration:none;color:var(--hematox);
  border-bottom:2px solid var(--accent);display:inline-block;line-height:1.2;
  word-break:break-all;transition:color .2s;
}
.cta__mail:hover{color:var(--accent)}
.foot{
  font-family:var(--data);font-size:9.5px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);padding:20px 0 40px;border-top:1px solid var(--rule);
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── publications page ────────────────────────────────────── */
.hero--sub{padding:44px 0 30px}
.pubs__h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.4vw,60px);line-height:1;letter-spacing:-.022em;
  margin:0 0 18px;color:var(--hematox);
}
.back{color:var(--accent);text-decoration:none}
.back:hover{border-bottom:1px solid var(--accent)}
.foot a{color:var(--accent);text-decoration:none}
.rail__name a{color:inherit}

/* ── link out to the publications page ────────────────────── */
.pubs-link{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:8px 0 0;padding:22px 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
  text-decoration:none;
}
.pubs-link__t{
  font-family:var(--display);font-size:26px;line-height:1.15;
  letter-spacing:-.015em;color:var(--hematox);margin:0;
}
.pubs-link__m{
  font-family:var(--data);font-size:9.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--accent);margin:0;white-space:nowrap;
}
.pubs-link:hover .pubs-link__t{color:var(--accent)}

/* ── rail links ───────────────────────────────────────────── */
.rail__links{
  list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;
  font-family:var(--data);font-size:10px;letter-spacing:0;
}
.rail__links a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);text-decoration:none;transition:color .2s;
}
.rail__links svg{width:15px;height:15px;flex:none;display:block}
.rail__links a:hover{color:var(--accent)}
.rail__links a:hover span{border-bottom:1px solid var(--accent)}

/* ── portrait in the rail ─────────────────────────────────── */
.rail .portrait{margin:0 0 18px}
.rail .portrait img{width:72px;height:72px}

/* ── a tab that leaves the page ───────────────────────────── */
/* Papers live on their own URL rather than in a panel, so this one
   navigates. The arrow is the only thing that says so. */
.tab--link{
  display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;color:var(--muted);
  border-bottom:2px solid transparent;padding:17px 0;margin-right:28px;
  font-family:var(--data);font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;transition:color .2s,border-color .2s;
}
.tab--link:hover{color:var(--hematox)}
.tab--link span{font-size:11px;opacity:.7}

/* ── wordmark stand-in for a client with no logo file ─────── */
.client__logo--word{background:#fff;border:1px solid var(--rule-2)}
.client__logo--word span{
  font-family:var(--display);font-size:13px;line-height:1.15;
  color:var(--hematox);text-align:center;
}

/* ── full-width figure inside an entry ────────────────────── */
.shot{margin:0 0 18px}
/* Half-width: the clip is supporting evidence, not the headline. */
.shot--half{max-width:68%}
@media (max-width:660px){.shot--half{max-width:100%}}
.shot--first{margin-top:4px}
.shot img{width:100%;border:1px solid var(--rule-2)}
.shot figcaption{
  font-family:var(--data);font-size:9.5px;line-height:1.7;letter-spacing:.02em;
  color:var(--muted);margin-top:9px;max-width:70ch;
}
.entry__p code{
  font-family:var(--data);font-size:12px;
  background:var(--slide-2);padding:1px 5px;border-radius:2px;
}

/* ── Ph.D, set small against the name ─────────────────────── */
/* Ph.D reads as part of the name, so it is set in the name's face and
   size rather than demoted to a caption. */
.rail__phd{
  display:block;
  font-family:var(--display);font-weight:400;font-size:25px;
  letter-spacing:-.012em;line-height:1.04;color:var(--hematox);
}

/* ── a client with no logo file ───────────────────────────────
   Without this the single text column lands in the 112px logo
   track and the copy wraps every two or three words. */
@media (min-width:660px){
  .client--nologo{grid-template-columns:1fr}
}

/* video inside a full-width figure */
.shot video{width:100%;display:block;border:1px solid var(--rule-2);background:#0B0A0E}

/* client name that links out */
.client__n a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.client__n a:hover{color:var(--accent);border-bottom-color:var(--accent)}