/* ---------------------------------------------------------------
   Design E: Figures

   The site as a scientific paper whose figures move. White page,
   STIX Two Text (the typeface made for scientific publishing),
   numbered sections, and figures drawn in the Okabe-Ito palette,
   which stays distinguishable under every common colour-vision
   deficiency. Meaning never rides on colour alone: every coloured
   mark also has a position or a label.

   Palette:
     paper #ffffff   ink #000000   grey #555a61   rule #d7dade
     blue #0072b2  orange #e69f00  green #009e73  vermilion #d55e00
     purple #cc79a7

   Type: STIX Two Text for reading. IBM Plex Sans Condensed for
   everything a figure says: labels, captions, axes.

   Motion budget, all telling the firm's story:
     big     Figure 1: five reviewers start where agreement would put
             them, then slide apart to their real scores; the spread
             is bracketed (on load)
     big     Figure 2: the paper lines up, in five steps as you scroll;
             the same three facts light up in the same three colours
             on every file (choreography in story.css)
     big     Figure 3: the 99% test, 91 flagged and 90 false (scroll)
     quiet   the step being told is in full ink, the rest wait
     quiet   the ladder's readiness bars fill as you reach them
   --------------------------------------------------------------- */

@font-face{
  font-family:"STIX Two Text";
  src:url(fonts/stix-two-text/stix-two-text-latin-wght-normal.woff2) format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"STIX Two Text";
  src:url(fonts/stix-two-text/stix-two-text-latin-wght-italic.woff2) format("woff2-variations");
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed"; src:url(fonts/ibm-plex-sans-condensed/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2"); font-weight:700; font-display:swap}

:root{
  --paper:#ffffff;
  --ink:#000000;
  --grey:#555a61;
  --rule:#d7dade;
  --faint:#f3f4f5;
  --blue:#0072b2;
  --orange:#e69f00;
  --green:#009e73;
  --vermilion:#d55e00;
  --purple:#cc79a7;
  --serif:"STIX Two Text","Cambria","Georgia",serif;
  --label:"IBM Plex Sans Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --edge:clamp(1rem,4vw,3rem);
  --field-off:#e6e8eb;
  --br-off:#f0f1f3;
  --br-flag:#d55e00;
  --br-false:#d3d6da;
  --br-hit:#0072b2;
  --story-top:9vh;
  --story-h:76vh;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.14rem; line-height:1.62;
  font-variant-numeric:lining-nums proportional-nums;
  counter-reset:sec;
}
h1,h2,h3{margin:0; font-weight:700; line-height:1.15}
p{margin:0}
ul,ol{list-style:none; margin:0; padding:0}

a{color:var(--blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.5rem 1rem; z-index:10}
.skip:focus{left:1rem; top:1rem}

.wrap{max-width:78rem; margin:0 auto; padding:0 var(--edge)}

/* ---------------------------------------------------------------- masthead */

.site-head{border-bottom:3px double var(--ink)}
.head-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; padding:1.1rem 0 .8rem}
.brand{font-family:var(--label); font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; letter-spacing:.005em}
.site-nav ul{display:flex; gap:1.4rem}
.site-nav a{font-family:var(--label); font-weight:500; font-size:1rem; color:var(--ink); text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-nav a[aria-current="page"]{font-weight:700; text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px}

/* ---------------------------------------------------------------- the article grid
   A reading column of about 66 characters, with room for figures to
   run wide beside or below it. Section numbers hang in the margin. */

.hero-grid,.s-grid,.page-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2.2vw,2rem); row-gap:1.1rem}
.hero-grid > *,.s-grid > *,.page-grid > *{grid-column:1 / -1}
@media (min-width:62rem){
  .s-head,.s-body,.s-close{grid-column:2 / 9}
}

/* ---------------------------------------------------------------- hero */

.hero{padding:clamp(1.75rem,4vw,3.25rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--rule)}
.display{
  font-weight:700;
  font-size:clamp(2.7rem,6.2vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.lede{margin-top:1.1rem; font-size:clamp(1.2rem,1.7vw,1.38rem); line-height:1.5; max-width:34rem}
.lede strong{font-weight:700}
@media (min-width:62rem){
  .hero .display{grid-column:1 / -1}
  .hero .lede{grid-column:1 / 6; grid-row:2; align-self:start}
  .hero .fig{grid-column:6 / -1; grid-row:2; margin-top:.4rem}
}

.fig{margin:1.5rem 0 0}
.fig-svg{display:block; width:100%; height:auto; overflow:visible}
.fig-cap{margin-top:.9rem; font-family:var(--label); font-weight:500; font-size:.98rem; line-height:1.45; color:var(--ink); display:grid; gap:.25rem}
.fig-label{font-weight:700}
.fig-title{font-weight:700}
.fig-body,.fig-note{color:var(--grey)}
.fig-note{font-style:normal}
.readout{display:flex; flex-wrap:wrap; gap:.3rem 1.6rem; margin:.35rem 0}
.readout div{display:flex; align-items:baseline; gap:.45rem}
.readout dt{color:var(--grey)}
.readout dd{margin:0; font-weight:700; font-size:1.25rem}
.readout div:last-child dd{color:var(--vermilion)}
@media (min-width:62rem){
  .hero .fig-cap{grid-template-columns:auto 1fr; column-gap:.6rem}
  .hero .fig-label{grid-row:1}
  .hero .fig-title{grid-row:1}
  .hero .fig-body,.hero .readout,.hero .fig-note{grid-column:1 / -1}
}

/* Figure 1: the fan-out */
.fan .rl{font-family:var(--label); font-weight:500; font-size:15px; fill:var(--grey)}
.fan .rline{stroke:var(--rule); stroke-width:1.5}
.fan .stem{fill:none; stroke-width:3.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.fan .dot{stroke:var(--paper); stroke-width:3}
.fan .r1{--c:var(--blue);      --dx:-5.1px}
.fan .r2{--c:var(--vermilion); --dx:111.8px}
.fan .r3{--c:var(--green);     --dx:-96.5px}
.fan .r4{--c:var(--orange);    --dx:40.6px}
.fan .r5{--c:var(--purple);    --dx:-50.8px}
.fan .stem{stroke:var(--c)}
.fan .dot{fill:var(--c)}
.fan .agree-line{stroke:var(--grey); stroke-width:1.5; stroke-dasharray:5 5}
.fan .agree-l{font-family:var(--serif); font-style:italic; font-size:16px; fill:var(--grey); text-anchor:middle}
.fan .axis path{stroke:var(--ink); stroke-width:1.5; fill:none}
.fan .al{font-family:var(--label); font-weight:500; font-size:14px; fill:var(--grey); text-anchor:middle}
.fan .guide{stroke:var(--ink); stroke-width:1.2; stroke-dasharray:2 4}
.fan .brk{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:0}
.fan .brk-l{font-family:var(--label); font-weight:700; font-size:18px; fill:var(--ink); text-anchor:middle}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes part{from{translate:var(--dx) 0}to{translate:0 0}}
@keyframes grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.page-index .fan .agree{animation:fade .5s ease-out .2s both}
.page-index .fan .rl{animation:fade .4s ease-out .3s both}
.page-index .fan .dot{animation:part 1s cubic-bezier(.5,0,.15,1) both}
.page-index .fan .stem{animation:grow 1s cubic-bezier(.5,0,.15,1) both}
.page-index .fan .r1 .dot,.page-index .fan .r1 .stem{animation-delay:.75s}
.page-index .fan .r2 .dot,.page-index .fan .r2 .stem{animation-delay:.9s}
.page-index .fan .r3 .dot,.page-index .fan .r3 .stem{animation-delay:1.05s}
.page-index .fan .r4 .dot,.page-index .fan .r4 .stem{animation-delay:1.2s}
.page-index .fan .r5 .dot,.page-index .fan .r5 .stem{animation-delay:1.35s}
.page-index .fan .guide{animation:fade .5s ease-out 2.4s both}
.page-index .fan .brk{animation:grow .7s cubic-bezier(.5,0,.2,1) 2.6s both}
.page-index .fan .brk-l{animation:fade .5s ease-out 3.1s both}

/* ---------------------------------------------------------------- numbered sections */

.s{padding:clamp(2.75rem,5.5vw,4.5rem) 0; border-bottom:1px solid var(--rule); counter-increment:sec}
.s-head{position:relative}
.s-head h2{font-size:clamp(1.6rem,2.6vw,2.15rem); letter-spacing:-.01em; max-width:26ch}
.s-head h2::before{
  content:counter(sec);
  font-family:var(--label); font-weight:700; font-size:.62em; color:var(--blue);
  margin-right:.7em; vertical-align:.18em;
}
@media (min-width:62rem){
  .s-head h2::before{position:absolute; left:-3.2rem; top:.28em; margin:0; font-size:1.25rem; vertical-align:0}
}
.s-intro{margin-top:.8rem; max-width:38rem}
.s-body{margin-top:1rem}
.s-close{max-width:38rem; font-style:italic}

.items,.claims{display:grid; gap:1.3rem}
.items li,.claims li,.rules li{max-width:38rem}
.items h3,.rules h3,.claims h3{font-size:1.14rem; margin-bottom:.2rem}
@media (min-width:62rem){
  .s-mandates .s-body,.s-philosophy .s-body,.s-claims .s-body{grid-column:2 / -1}
  .items,.claims{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem}
  .items li,.claims li{border-top:2px solid var(--ink); padding-top:.8rem}
}
.claims h3{font-size:1.35rem}

/* ---------------------------------------------------------------- Figure 2: the work */

.story::before{
  content:"Figure 2";
  display:block; margin-bottom:.5rem;
  font-family:var(--label); font-weight:700; font-size:.95rem;
}
.stage{
  border:1px solid var(--rule);
  background:
    linear-gradient(var(--faint) 1px,transparent 1px) 0 0/100% 10cqh,
    linear-gradient(90deg,var(--faint) 1px,transparent 1px) 0 0/10cqw 100%,
    var(--paper);
}
.paper{
  position:relative; width:100%; height:100%;
  background:var(--paper);
  border:1px solid #b9bdc3; border-radius:3px;
  box-shadow:0 6px 16px -10px rgba(0,0,0,.45);
  padding:13% 11%;
  display:flex; flex-direction:column; gap:9%;
}
.p-head{display:block; height:9%; width:50%; background:var(--ink); border-radius:1px}
.p-row{display:block; height:9%; border-radius:1px; background:var(--field-on)}
.pr1{width:90%; --field-on:var(--blue)}
.pr2{width:70%; --field-on:var(--orange)}
.pr3{width:82%; --field-on:var(--green)}
.p-flag{
  position:absolute; right:-8%; top:-8%;
  padding:.15em .45em; border-radius:2px;
  background:var(--vermilion); color:#ffffff;
  font-family:var(--label); font-weight:700; font-size:clamp(.66rem,1.55cqw,.95rem); white-space:nowrap;
}
.p-score{
  position:absolute; left:50%; top:-15%; translate:-50% 0;
  min-width:2.2em; text-align:center;
  padding:.2em .45em; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-family:var(--label); font-weight:700; font-size:clamp(.75rem,2.1cqw,1.35rem); line-height:1.1;
}
.gap{position:absolute; left:32cqw; width:36cqw; top:13cqh; height:10cqh}
.gap-in{position:absolute; inset:0}
.gap-line{position:absolute; left:0; right:0; bottom:0; height:2.5px; background:var(--ink)}
.gap-line::before,.gap-line::after{content:""; position:absolute; bottom:0; width:2.5px; height:11px; background:var(--ink)}
.gap-line::before{left:0} .gap-line::after{right:0}
.gap-n{position:absolute; left:50%; bottom:calc(2.5px + .3rem); translate:-50% 0; font-family:var(--label); font-weight:700; font-size:clamp(1.1rem,4.4cqw,2.3rem); color:var(--vermilion); white-space:nowrap}
.gap-n::after{content:" points"; font-size:.6em; color:var(--ink)}

.rec-in{border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--paper); padding:.3rem 0 .4rem}
.rec-h{font-family:var(--label); font-weight:700; font-size:clamp(.95rem,2.6cqw,1.3rem); padding:.3rem 0 .5rem; border-bottom:1px solid var(--ink)}
.rec{margin:0}
.rec div{display:grid; grid-template-columns:7rem 1fr; gap:1rem; padding:.42rem 0; border-bottom:1px solid var(--rule); font-family:var(--label); font-size:clamp(.82rem,2cqw,1rem)}
.rec div:last-child{border-bottom:0}
.rec dt{font-weight:700}
.rec dd{margin:0}
.rec div:nth-child(3) dd{color:var(--ink)}
.rec div:nth-child(4) dd{color:var(--vermilion); font-weight:700}

.steps{counter-reset:step}
.steps > li{counter-increment:step; position:relative; padding:.9rem 0 .9rem 2.9rem; max-width:34rem}
.steps > li::before{
  content:counter(step);
  position:absolute; left:0; top:1.05rem;
  width:1.9rem; height:1.9rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--label); font-weight:700; font-size:1rem;
  border:1.5px solid var(--ink);
}
.steps h3{font-size:1.2rem; margin-bottom:.15rem}

@media (min-width:62rem){
  .s-work .s-head,.s-work .s-body,.s-work .s-close{grid-column:2 / 7}
  .s-work .story{grid-column:7 / -1}
}
@media (prefers-reduced-motion:no-preference){
@supports (timeline-scope:--a) and (animation-timeline:view()){
  .s-work .story{grid-row:2}
  .s-work .s-body{grid-row:2}
  /* each paragraph is centred in its slot, so its number rides with it */
  .s-work .steps > li{padding-left:0}
  .s-work .steps > li::before{position:static; margin-bottom:.7rem}
  @media (max-width:61.99rem){
    .s-work{--story-top:0; --story-h:42vh}
    .s-work .story{background:var(--paper); padding:.6rem 0 .8rem; box-shadow:0 10px 12px -10px rgba(0,0,0,.18)}
    .s-work .s-body{margin-top:calc(42vh + 4rem)}
    .s-work .steps > li{min-height:50vh}
  }
}
}

/* ---------------------------------------------------------------- instruments */

.instruments li{display:grid; gap:.3rem .9rem; padding:1rem 0; border-top:1px solid var(--rule)}
.instruments li:first-child{border-top:2px solid var(--ink)}
.status{font-family:var(--label); font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:.45rem}
.status::before{content:""; width:.72rem; height:.72rem; border-radius:50%; border:2px solid var(--grey)}
.is-live .status{color:var(--blue)}
.is-live .status::before{background:var(--blue); border-color:var(--blue)}
.is-pipeline .status{color:var(--grey)}
.inst-name{font-size:1.45rem}
.inst-name.is-code{font-family:var(--label); font-weight:700; letter-spacing:-.005em}
.inst-text{display:grid; gap:.5rem; max-width:40rem}
@media (min-width:62rem){
  .s-instruments .s-body{grid-column:2 / -1}
  .instruments li{grid-template-columns:7rem 13rem minmax(0,1fr); align-items:baseline}
}

.s-link{font-family:var(--label); font-weight:700; font-size:1.2rem}

/* who: set as the correspondence box a paper ends with */
.s-who .s-head{border:1.5px solid var(--ink); padding:1.4rem 1.5rem 1.5rem}
.s-who .s-close{font-style:normal}

/* ---------------------------------------------------------------- method page */

.page-head{padding:clamp(1.75rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--rule)}
.page-head .display{font-size:clamp(2.6rem,6vw,5rem)}
.page-head .lede{font-style:italic; color:var(--grey)}
@media (min-width:62rem){ .page-grid > *{grid-column:1 / 10} }

.rules{display:grid; gap:1.2rem}

/* Figure 3: the base rate */
.br{margin:1.1rem 0 .3rem; padding:1rem 1rem 1.1rem; border:1px solid var(--rule); max-width:30rem}
.br::before{content:"Figure 3"; display:block; font-family:var(--label); font-weight:700; font-size:.92rem; margin-bottom:.6rem}
.br-grid{gap:4px}
.br-grid i{background:var(--br-false); border-radius:1px}
.br-grid i.hit{background:var(--br-hit)}
.br-key{font-family:var(--label); font-weight:600; font-size:.9rem}
.bk::before{content:""; display:inline-block; width:.7rem; height:.7rem; margin-right:.4rem; vertical-align:-.05em}
.bk-flag::before{background:var(--br-flag)}
.bk-false::before{background:var(--br-false)}
.bk-hit::before{background:var(--br-hit)}

.weeks{counter-reset:wk; display:grid; gap:1.2rem}
.weeks li{counter-increment:wk; border-left:3px solid var(--ink); padding:.1rem 0 .2rem 1.1rem; max-width:38rem}
.when{font-family:var(--label); font-weight:700; color:var(--blue); font-size:.95rem}
.weeks h3{font-size:1.15rem; margin:.1rem 0 .25rem}
@media (min-width:62rem){
  .s-investigation .s-body{grid-column:2 / -1}
  .weeks{grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:1.6rem}
}

/* the ladder as a table, with a readiness bar per rung */
.ladder{display:grid; gap:0}
.ladder li{display:grid; gap:.3rem 1.4rem; padding:1rem 0 1.05rem; border-top:1px solid var(--rule)}
.ladder li:first-child{border-top:2px solid var(--ink)}
.ladder li:last-child{border-bottom:2px solid var(--ink)}
.ladder li::before{
  content:""; display:block; height:.6rem; align-self:center;
  background:linear-gradient(90deg,var(--blue) 0 calc(var(--lvl) * 20%),var(--faint) calc(var(--lvl) * 20%));
}
.ladder li:nth-child(1){--lvl:1} .ladder li:nth-child(2){--lvl:2} .ladder li:nth-child(3){--lvl:3}
.ladder li:nth-child(4){--lvl:4} .ladder li:nth-child(5){--lvl:5}
.ladder h3{font-size:1.1rem}
.ladder dl{margin:0; display:grid; gap:.4rem 1.4rem}
.ladder dt{font-family:var(--label); font-weight:700; font-size:.85rem; color:var(--grey)}
.ladder dd{margin:0}
@media (min-width:62rem){
  .s-ladder .s-body{grid-column:2 / -1}
  .ladder li{grid-template-columns:8rem 12rem minmax(0,1fr)}
  .ladder dl{grid-template-columns:1fr 1fr}
}
@property --grow{syntax:"<number>"; inherits:false; initial-value:1}
@keyframes bar{from{--grow:0}to{--grow:1}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
  .ladder li::before{
    background:linear-gradient(90deg,var(--blue) 0 calc(var(--lvl) * 20% * var(--grow)),var(--faint) calc(var(--lvl) * 20% * var(--grow)));
    animation:bar ease-out both; animation-timeline:view(); animation-range:entry 20% cover 45%;
  }
}
}

.s-one-rule{border-bottom:0}
.s-one-rule h2{font-size:clamp(1.9rem,3.6vw,2.9rem); max-width:22ch}

/* about */
.prose{display:grid; gap:1rem; max-width:38rem}
.prose p:first-child{font-size:1.28rem; line-height:1.5}
@media (min-width:62rem){ .prose{grid-column:2 / 9} }
.s-bio{counter-increment:none}

/* ---------------------------------------------------------------- footer */

.site-foot{border-top:3px double var(--ink); padding:2rem 0 2.5rem; margin-top:0}
.foot-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:1.5rem; row-gap:1.4rem; font-family:var(--label)}
.foot-grid > *{grid-column:1 / -1}
.foot-h{font-size:1rem; font-weight:700}
.email{font-family:var(--serif); font-weight:700; font-size:clamp(1.4rem,3.2vw,2.2rem); margin:.2rem 0 .4rem; overflow-wrap:anywhere}
.place,.foot-brand p,.legal{color:var(--grey)}
.brand-line{color:var(--ink) !important; font-weight:700}
.foot-nav ul{display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; font-weight:600}
.legal{font-size:.9rem}
@media (min-width:62rem){
  .foot-contact{grid-column:1 / 8}
  .foot-brand{grid-column:8 / 11}
  .foot-nav{grid-column:11 / -1}
  .foot-nav ul{flex-direction:column}
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}