/* ============================================================
   Differential Labs - differential.tech

   Two typefaces. One accent. One background. A persistent left
   rail, so you can switch pages from anywhere in a page.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --paper:#F6F8F9;
  --ink:#16232A;
  --ink-2:#3F5158;
  --ink-3:#5C7077;
  --rule:#D8E2E6;
  --rule-2:#E7EEF0;
  --teal:#0088AA;
  --teal-ink:#006B87;
  --teal-wash:rgba(0,136,170,.10);
  --logo-grey:#666666;

  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Baskervville","Baskerville Old Face",Baskerville,"Hoefler Text",Georgia,"Times New Roman",serif;
  --serif:"Baskerville Old Face",Baskerville,"Hoefler Text",Georgia,"Times New Roman",serif;

  --rail:clamp(206px,18vw,252px);
  --colwidth:920px;
  --gut:clamp(24px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.25,1);
  color-scheme:light;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
a{color:inherit}

/* ---------- helpers ---------- */
/* Left-aligned against the rail: centring it leaves a dead gutter. */
.wrap{width:100%;max-width:var(--colwidth);padding-inline:var(--gut)}
.measure{max-width:64ch}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:var(--ink);padding:10px 14px;border:1px solid var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ---------- type ---------- */
/* Size tracks line length, not heading level. The thesis is one long sentence,
   so it sits below the titles, which are short and can carry more size. */
.d-thesis,.d-l,.d-m,.d-s{font-family:var(--display);font-weight:400;text-wrap:balance}
.d-thesis{font-size:clamp(1.5rem,2.3vw,1.86rem);line-height:1.28;letter-spacing:-.004em}
.d-l{font-size:clamp(1.72rem,2.9vw,2.3rem);line-height:1.18;letter-spacing:-.006em}
.d-m{font-size:clamp(1.34rem,2.1vw,1.68rem);line-height:1.24;letter-spacing:-.004em}
.d-s{font-size:1.3rem;line-height:1.3;letter-spacing:-.003em}
.lede{font-size:clamp(1.05rem,1.35vw,1.16rem);line-height:1.62;color:var(--ink-2)}
.lede p+p{margin-top:15px}
strong{font-weight:600;color:var(--ink)}

/* ---------- inline links ---------- */
.prose a,.lede a,.bio a,.fact-v a{
  color:var(--teal-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(0,136,170,.35);
  padding-bottom:1px;
  transition:border-color .18s var(--ease);
}
.prose a:hover,.lede a:hover,.bio a:hover,.fact-v a:hover{border-bottom-color:var(--teal)}

/* ---------- shell + left rail ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}
.rail{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  padding:clamp(26px,3vw,38px) clamp(20px,2vw,30px);
  border-right:1px solid var(--rule);
}
.body-col{min-width:0}

.mark{display:block;text-decoration:none;margin-bottom:clamp(30px,4vw,46px)}
.mark-glyph{display:block;font-family:var(--serif);font-size:2.7rem;line-height:.95;letter-spacing:-.015em;margin-bottom:6px}
.mark-d{color:var(--teal)}
.mark-t{color:var(--logo-grey)}
.mark-word{display:block;font-family:var(--display);font-weight:400;font-size:1.24rem;line-height:1.2;letter-spacing:-.002em;color:var(--ink)}
.nav{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav a{
  display:block;position:relative;
  font-size:.98rem;text-decoration:none;color:var(--ink-2);
  padding:6px 0 6px 14px;
  transition:color .18s var(--ease);
}
.nav a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:0;background:var(--teal);
  transition:height .2s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::before{height:1.1em}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  /* The rail becomes a header — still sticky, now against the top edge.
     It needs its own paper ground (content scrolls beneath it) and a
     z-index above the page's positioned bits (era markers, list dashes). */
  .rail{
    position:sticky;top:0;height:auto;z-index:10;
    background:var(--paper);
    padding:0;border-right:0;border-bottom:1px solid var(--rule);
  }
  .mark{margin-bottom:0;padding:14px var(--gut)}
  .mark-glyph{display:inline-block;font-size:1.95rem;vertical-align:middle;margin:0 11px 0 0}
  .mark-word{display:inline-block;font-size:1.2rem;vertical-align:middle}
  .nav{
    flex-direction:row;gap:20px;
    padding:10px var(--gut);border-top:1px solid var(--rule-2);
    overflow-x:auto;scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:3px 0;white-space:nowrap}
  .nav a::before{left:0;top:auto;bottom:-3px;transform:none;width:100%;height:0}
  .nav a[aria-current="page"]::before{height:1px}
}

:target,[id]{scroll-margin-top:26px}
/* On small screens the rail is a sticky header (~113px tall); in-page
   anchor jumps have to clear it. Keep this after the base rule — they
   tie on specificity, so order decides. */
@media (max-width:900px){:target,[id]{scroll-margin-top:140px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- sections ---------- */
.band{padding-block:clamp(44px,5.5vw,70px)}
.band-flush{padding-top:0}
/* A section's heading + lede: the prose that follows sits in its own flush
   block, so this one only needs a little bottom padding. */
.band-intro{padding-bottom:clamp(20px,2.4vw,30px)}
/* An h3 subsection continues the h2 above it: no rule, less air. The gap is
   split between the two sections, so both halves have to be trimmed. */
.band-sub{padding-top:clamp(24px,2.8vw,36px)}
.band-tail{padding-bottom:clamp(14px,1.8vw,22px)}
.sectionhead{margin-bottom:20px}
.band-ruled{border-top:1px solid var(--rule)}
.pagehead{padding-top:clamp(42px,5vw,66px);padding-bottom:clamp(24px,3vw,34px)}
.pagehead h1{margin-bottom:22px}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(44px,5.5vw,72px)}
/* Branding, not body copy: right-aligned and set apart from the text column. */
.sitename{
  font-family:var(--display);font-weight:400;font-size:1.34rem;line-height:1.2;
  letter-spacing:.01em;color:var(--ink-3);text-align:right;
  margin:0 0 clamp(34px,4.5vw,56px);
}
.hero h1{margin-bottom:24px}
.hero-tail{font-style:italic;color:var(--ink-3)}
.hero-lede{max-width:60ch}

/* ---------- the figure: complexity vs. orientation ---------- */
.fig{margin:clamp(40px,5vw,58px) 0 0;max-width:620px}
.fig-svg{display:block;width:100%;height:auto}
.fig-cap{margin-top:18px;font-size:.9rem;line-height:1.6;color:var(--ink-3);max-width:54ch}

.fan-cx{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.fan-stem{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round}
.fan-branch{fill:none;stroke:var(--teal);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:5 4;opacity:.8}
.fan-reveal{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.fan-swatch-cx{stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.fan-swatch-or{stroke:var(--teal);stroke-width:1.8;stroke-linecap:round}
.fan-label{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.03em;fill:var(--ink-3)}
.fan-label-or{fill:var(--teal-ink)}
/* Everything draws itself: the solid lines directly, the dashed branches
   through the .fan-reveal mask strokes that trace the same paths. */
.fan-cx,.fan-stem,.fan-reveal{stroke-dasharray:1;stroke-dashoffset:1}
.fan-annot{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .fan-cx{animation:draw 1400ms var(--ease) 200ms forwards}
  .fan-stem{animation:draw 1200ms var(--ease) 900ms forwards}
  .fan-reveal{animation:draw 1200ms var(--ease) 2500ms forwards}
  .fan-annot{animation:fade 700ms var(--ease) 2500ms forwards}
}
@media (prefers-reduced-motion:reduce){
  .fan-cx,.fan-stem,.fan-reveal{stroke-dasharray:none;stroke-dashoffset:0}
  .fan-annot{opacity:1}
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* SVG text scales with the viewBox; counter-scale it on narrow screens. */
@media (max-width:520px){.fan-label{font-size:14px}}
@media (max-width:400px){.fan-label{font-size:17px}}

/* ---------- links ---------- */
.arrow{transition:transform .22s var(--ease)}

/* ---------- prose ---------- */
.prose>*+*{margin-top:18px}
.prose>:first-child{margin-top:0}
.prose h2{margin-top:clamp(34px,3.8vw,50px)}
.prose h3{margin-top:clamp(26px,2.6vw,34px)}
.prose h4{margin-top:clamp(36px,3.9vw,51px)}
.prose ul{list-style:none;margin-top:18px}
.prose li{position:relative;padding-left:23px}
.prose li+li{margin-top:11px}
.prose ul>li::before{content:"";position:absolute;left:2px;top:calc(.8em - 2px);width:5px;height:5px;border-radius:50%;background:var(--teal)}
.prose ul ul{margin-top:11px}
.prose ul ul>li{font-size:.96rem;color:var(--ink-2);padding-left:19px}
.prose ul ul>li::before{background:var(--ink-3);width:4px;height:4px;top:calc(.8em - 1.5px)}
.prose ul ul ul>li{padding-left:17px}
.prose .to{color:var(--teal);padding-inline:4px}
.prose .reads{margin-top:20px}
.prose .reads li+li{margin-top:13px}
.prose .reads .s{color:var(--ink-2)}

/* ---------- definition-style list (strategies) ---------- */
.terms{margin-top:28px;border-top:1px solid var(--rule)}
.term{padding-block:21px;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:minmax(0,14.5rem) minmax(0,1fr);gap:5px 36px}
.term:last-child{border-bottom:0}
.term-name{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.4;margin:0}
.term-body{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.62}
@media (max-width:760px){.term{grid-template-columns:1fr;gap:6px}}

/* ---------- era axis ---------- */
.eras{position:relative;margin-top:48px}
.eras-axis{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.eras-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.era{position:relative;padding:26px 22px 0 0}
.era::before{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--ink-3)}
.era-name{font-family:var(--sans);font-weight:600;font-size:.98rem;line-height:1.3;margin:0 0 6px}
.era-figure{font-size:.84rem;line-height:1.4;min-height:4.2em;color:var(--teal-ink);margin:0 0 10px}
.era-desc{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin:0}
.era-aside{font-size:.82rem;line-height:1.5;color:var(--ink-3);margin:8px 0 0}
.era-here{position:absolute;left:75%;top:0;transform:translateY(-100%)}
.era-here-label{display:block;font-size:.76rem;line-height:1;color:var(--teal-ink);white-space:nowrap;padding:0 10px 8px 0}
.era-here-riser{display:block;width:1px;height:10px;background:var(--teal)}
.era-here-dot{position:absolute;left:-3px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--teal)}

@media (max-width:780px){
  .eras{padding-left:24px;margin-top:36px}
  .eras-axis{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .eras-list{grid-template-columns:1fr;gap:28px}
  .era{padding:0}
  .era::before{width:13px;height:1px;top:9px;left:-24px}
  .era-here{position:static;left:auto;transform:none;display:flex;align-items:center;gap:9px;margin:0 0 10px -24px}
  .era-here-label{padding:0}
  .era-here-riser{width:13px;height:1px;flex:none}
  .era-here-dot{position:static;left:auto;bottom:auto;flex:none}
  .era-figure:empty{display:none}
}

/* ---------- team ---------- */
/* One member per row, portrait beside the text: keeps the images subordinate
   to the prose and gives the bios a comfortable measure. */
.team{list-style:none;margin-top:30px}
.member{
  border-top:1px solid var(--rule);padding-top:20px;
  display:grid;grid-template-columns:132px minmax(0,1fr);
  gap:clamp(20px,3vw,34px);align-items:start;
}
.member+.member{margin-top:clamp(26px,3vw,38px)}
/* The charcoal paper is flattened to white and the edges feathered in the file
   itself, so multiply drops the background out entirely: the marks sit on the
   site's own paper and dissolve at the bottom rather than terminating. */
/* Per-person display width (--pw): the two sources frame their subjects at
   slightly different scales, so the widths differ in order to make the two
   faces the same size. The portraits have no visible frame, so unequal image
   widths are invisible - unequal faces are not. */
.member-portrait{display:block;width:var(--pw,132px);height:auto;mix-blend-mode:multiply}
.member-name{font-family:var(--display);font-weight:400;font-size:1.28rem;line-height:1.25;margin:0 0 5px}
.member-role{font-size:.86rem;color:var(--ink-3);margin:0 0 13px}
.bio{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.62}
@media (max-width:620px){
  .member{grid-template-columns:1fr;gap:16px}
  .member-portrait{width:calc(var(--pw,132px) * .9)}
}

/* ---------- dated log entries ---------- */
.log{border-top:1px solid var(--rule);padding-top:20px;margin-top:26px}
.log+.log{margin-top:clamp(38px,4.5vw,56px)}
.log-date{font-size:.86rem;color:var(--ink-3);margin:0 0 18px}

/* ---------- facts ---------- */
.facts{margin-top:30px;border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:4px 30px;padding-block:14px;border-bottom:1px solid var(--rule-2)}
.fact-k{font-size:.86rem;line-height:1.7;color:var(--ink-3);margin:0}
.fact-v{margin:0;font-size:1rem;line-height:1.65}
@media (max-width:600px){.fact{grid-template-columns:1fr;gap:1px}.fact-k{line-height:1.5}}

.onward{border-top:1px solid var(--rule)}
.onward-link{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-block:clamp(30px,3.6vw,44px);text-decoration:none}
.onward-k{font-size:.86rem;color:var(--ink-3);flex:none}
.onward-t{font-family:var(--display);font-weight:400;font-size:1.32rem;line-height:1.3;color:var(--ink);transition:color .18s var(--ease)}
.onward-link:hover .onward-t{color:var(--teal-ink)}
.onward-link .arrow{color:var(--teal)}
.onward-link:hover .arrow{transform:translateX(3px)}

/* ---------- footer: one line, one gloss ---------- */
.foot{
  border-top:1px solid var(--rule);
  margin-top:clamp(40px,5vw,64px);
  padding-block:clamp(22px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:6px 26px;
  font-size:.82rem;color:var(--ink-3);
}
.foot p{margin:0;max-width:64ch}